Як групувати та мінімізувати ресурси у WordPress

Найкраща можлива продуктивність - це мрія всіх, хто керує веб-сайтом. Групування та мінімізація ресурсів на WordPress - це одне з найкращих рішень для цього, але це може бути дійсно важко. Групування всіх ваших ресурсів (в основному файлів css та js) може піддати ваш веб-сайт ризику, якщо ви не розробник, оскільки це може спричинити конфлікти.

WP Speed of Light - це найкраще рішення для оптимізації вашого сайту WordPress, оскільки воно має багато варіантів для швидкого завантаження сайту з дружньою панеллю керування, і так, один із цих варіантів - це групування та мінімізація ресурсів. Єдиний файл включення/виключення з процесу групування та мінімізації є ключем для користувацької оптимізації без конфліктів.

Ми будемо використовувати приклад сайту WordPress для цього блогового запису і навчимося робити це, щоб процес налаштування всього був простішим.

Як зробити мінімізацію JS та CSS у WordPress

Давайте дізнаємося, як зробити мініфікацію JS і CSS для WordPress, але спочатку нам потрібно знати, що означає мініфікація «Мініфікація означає процес видалення непотрібних або надлишкових даних без впливу на те, як ресурс обробляється браузером - наприклад, коментарі коду та форматування, видалення невикористаного коду, використання коротших імен змінних і функцій тощо».

Тепер ми збираємося зробити тест швидкості нашої сторінки, щоб побачити зміни; для цього прикладу ми використовуємо сайт з WooCommerce та деякими продуктами, тому вперше він завантажиться трохи повільно.

Так, 2,79 секунди для завантаження сторінки, не погано, але можна краще, просто мінімізуйте js і CSS і подивіться на різницю, перейдіть до WP Speed of light > Прискорення > Групування та мінімізація, ви зможете побачити меню з усіма варіантами мінімізації. Безкоштовна версія плагіна включає опцію групування та мінімізації, але візуальне виключення файлів доступне тільки у версії PRO Addon.

Опції додатка PRO: Виключити вбудований сценарій (Виключити вбудований сценарій з мініфікації), перемістити сценарії до нижнього колонтитула (це дозволяє прискорити роботу вашого сайту шляхом переміщення всіх мінімізованих сценаріїв до нижнього колонтитула), Групувати шрифти та шрифти Google (Групувати локальні шрифти та шрифти Google в одному файлі для швидшого обслуговування) та Розширене виключення файлів.
 
У вас є можливість мінімізувати, як ви бачите, JS, CSS і також HTML, тепер просто активуйте ці опції, натисніть зберегти і всі ваші ресурси будуть мінімізовані відразу, це може викликати проблеми, оскільки це розширена конфігурація, але все можна виправити шляхом виключення деякого коду та файлів (за допомогою додатка pro).

Тепер вся робота розробника, яка могла зайняти години, виконується всього за кілька секунд.

Наступний крок, оптимізуйте CSS та JS у WordPress

За допомогою цього плагіна ми дозволимо WordPress оптимізувати CSS та JS просто увімкнувши параметри групування на панелі управління, перейдіть до WP Speed of Light > Прискорення > Групувати та мінімізувати, ви зможете побачити панель управління з параметрами групування CSS та JS.

Ці параметри дозволяють вам:

• Групувати JS: Групування декількох файлів Javascript в один файл мінімізує кількість запитів HTTP
• Групувати CSS: Групування декількох файлів CSS в один файл мінімізує кількість запитів HTTP.

HTTP-запити: це запити, які надсилаються на сервер щоразу, коли ми вибираємо щось або переходимо на іншу сторінку на тому ж сайті, тому якщо ми можемо зменшити ці запити, час завантаження буде зменшено.

Щоб перевірити, скільки файлів і скриптів можна згрупувати на вашому сайті, просто відкрийте консоль браузера (клацніть правою кнопкою миші > Інспектувати або F12) і відкрийте панель мережі.

Потім ви можете перелічити всі файли, завантажені за типом, тут у цьому прикладі я клацнув лише на списку файлів JS.

Тепер, коли ми знаходимося в цих налаштуваннях, просто увімкніть параметри групи (Група CSS та Група JS) і натисніть зберегти, майте на увазі, що ці параметри потрібно використовувати з обережністю і вам доведеться протестувати свою сторінку, оскільки це може спричинити конфлікти.

Серйозно підійдемо до оптимізації насиченості шрифту

Що? Інша оптимізація? Так! Ви зможете оптимізувати товщину шрифту, і це буде так само просто, як увімкнути опцію в налаштуваннях, просто перейдіть до WP Speed of Light > SpeedUp > Групувати та мінімізувати > Групувати шрифти та шрифти Google опція.
Опція групування шрифтів і шрифтів Google дозволить вам згрупувати їх в одному файлі для швидшого обслуговування, це досить зручно, оскільки більшість тем і макетів WordPress постачаються з 2 або шрифтами за замовчуванням з усіма відмінками (звичайний, жирний, курсив...)

Просто увімкніть цю опцію, натисніть зберегти, і всі шрифти будуть згруповані.

Тепер, коли ми активували всі параметри для мінімізації та групування ресурсів, ми повинні побачити різницю у часі завантаження нашого сайту, Давайте перевіримо швидкість.

Яка різниця, З 2.8 до 0.56 секунд! Як ми вам розповіли на початку цього повідомлення, ми можемо покращити час завантаження ;)

Як використовувати виключення мінімізації файлів

Мініфікація може викликати проблеми на вашому сайті, це в основному відбувається, коли ви групуєте певні файли, що містять помилку в синтаксисі або подібну змінну, ім'я класу. Тому за допомогою параметра “виключення мініфікації файлів” ви зможете виключити файли з процесу мініфікації та групування, перейдіть до WP Speed of Light > Прискорення > Група та мініфікація, ви зможете побачити параметр Розширене виключення файлів.

Щоб використовувати розширене виключення файлів, вам потрібно буде запустити сканування, спочатку увімкніть параметр і натисніть кнопку Запустити сканування.

  Щоб мати можливість перелічити сценарій, завантажений на вашому веб-сайті, WP Speed of Light потрібно сканувати вашу папку, щоб перелічити їх. Зазвичай вони містяться у вашій папці /wp-content, що групує всі ваші плагіни та тему. Виберіть цю папку (принаймні) і натисніть на “Сканувати зараз”

Буде виконано сканування, нарешті, натисніть на перегляд результатів, коли сканування буде завершено.

Список файлів, класифікованих за типом (Всі, JS, CSS, Шрифт), повинен відображатися нижче. Якщо ви визначили один файл, який викликає проблеми при активації групи файлів та мінімізації, ви можете виключити його звідси за допомогою простого перемикача Увімк./Вимк..

Це допоможе вам виключити файли і таким чином легко вирішити будь-яку проблему, яка може виникнути при мінімізації ресурсів… Групування та мінімізація процесів все ще потребують деякої роботи, особливо у тестуванні, але це однозначно варте зусиль, і ви завжди зможете перевірити, як це працює, запустивши тест швидкості безпосередньо з WP Speed of Light.
 
Спробуйте WP Speed of Light: https://www.joomunited.com/wordpress-products/wp-speed-of-light