«Продуктивність», будучи одним з трьох стовпів Esl, ми впровадили нове рішення для завантаження активів у версії 1.3.4, яке надає вам ще більше контролю і допомагає покращити швидкість завантаження вашої сторінки та результати.
Esl за замовчуванням обслуговує всі стилі (CSS) та скрипти (JS) через два основних файли:
- frontend.min.css (293 кб)
- esl.min.js (354 кб)
Цей підхід забезпечує доступність всіх стилів і скриптів на будь-якій сторінці.
Недолік полягає в тому, що ці два файли разом мали приблизно 650 кб обсягу. Хоча після кешування та під час наступних завантажень сторінки це не є великою проблемою. Але це негативно вплинуло на перший візит, що призвело до більш тривалих завантажень сторінок і найбільше вплинуло на відвідувачів з повільними або слабкими мережами.
Esl 1.3.4 впроваджує нове рішення для доставки активів.
Скрипти тепер обслуговуються лише у разі необхідності. Зменшення розміру файлу esl.min.js на 90% (з 354 кб до 37 кб).
Великі стилі, такі як animate.css, бібліотеки значків тощо, тепер завантажуються лише у разі необхідності. Зменшення розміру файлу frontend.min.css на 60% (з 293 кб до 116 кб).
Як ще більше зменшити завантаження активів через «Зовнішні файли»
Усі стилі елементів за замовчуванням все ще завантажуються у файлі frontend.min.css. Інші стилі, такі як глобальний кастомний CSS, стилі теми, стилі шаблонів, стилі елементів на сторінці, палітри кольорів, глобальний елемент CSS тощо, завантажуються через вбудовані стилі, які додають багато повторюваних і часто не кешованих даних до кожного запиту сторінки.
Щоб ще більше оптимізувати та мінімізувати завантажені стилі, ви можете встановити «Метод завантаження CSS» у «Esl – Налаштування – Продуктивність» на «Зовнішні файли».
Щоб відновити всі CSS-файли за один раз, натисніть кнопку «Відновити CSS-файли», що знаходиться під налаштуванням «Метод завантаження CSS». Ця дія доступна лише після того, як метод завантаження CSS було встановлено на «Зовнішні файли».
Будь ласка, натисніть кнопку «Відновити CSS-файли» після зміни методу завантаження CSS на «Зовнішні файли», щоб Esl міг створити потрібну директорію та CSS-файли.
Це згенерує минифіковані CSS файли для ваших даних Esl у каталозі wp-content/uploads/esl/css (або в будь-якому іншому місці, яке ви встановили як каталог “uploads” для вашого WordPress) та подає їх у необхідному порядку відповідно до запитуваної сторінки.
Якщо метод завантаження CSS “Зовнішні файли” з якоїсь причини конфліктує з вашим сервером або рішенням кешування плагінів, або виводить неправильні або відсутні стилі, будь ласка, поверніть до стандартного методу завантаження CSS “Вбудовані стилі” та повідомте про цю проблему нам через електронну пошту, щоб ми могли вирішити це. Дякуємо!
Як підключити окремі стилі та скрипти
Якщо ви працюєте з плагіном Esl третьої сторони або з якоїсь причини певний стиль/скрипт не завантажується як потрібно, ви завжди можете завантажити/підключити їх окремо для своїх потреб, дотримуючись наведених нижче інструкцій.
Списком, що слідує, є назви стилів та скриптів Esl, які ви можете підключити на будь-якій зі своїх сторінок за допомогою файлу functions.php вашої дочірньої теми, підключаючи у дію wp_enqueue_scripts WordPress або всередині функції enqueue_scripts, якщо ваш користувацький елемент Esl залежить від будь-яких з цих стилів або/та скриптів.
add_action( 'wp_enqueue_scripts', function() {// isotopeJS (наприклад, макети метро та мейсоні)wp_enqueue_script( 'esl-isotope' );wp_enqueue_style( 'esl-isotope' );// Файли шрифтів-іконwp_enqueue_style( 'esl-font-awesome-6' );wp_enqueue_style( 'esl-font-awesome-6-brands' );wp_enqueue_style( 'esl-ionicons' );wp_enqueue_style( 'esl-themify-icons' );// Анімаціїwp_enqueue_style( 'esl-animate' );// Підказкиwp_enqueue_style( 'esl-tooltips' );// Вибір датиwp_enqueue_script( 'esl-flatpickr' );wp_enqueue_style( 'esl-flatpickr' );// swiperJS (наприклад, слайдер, карусель)wp_enqueue_script( 'esl-swiper' );wp_enqueue_style( 'esl-swiper' );// Лайтбоксwp_enqueue_script( 'esl-photoswipe' );wp_enqueue_style( 'esl-photoswipe' );// Препроцесор кодуwp_enqueue_script( 'esl-prettify' );wp_enqueue_style( 'esl-prettify' );}, 11 );