Як групувати та мінімізувати ресурси у 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 > SpeedUp > Group & Minify (мініфікувати), ви зможете побачити меню з усіма опціями мініфікації. Безкоштовна версія плагіна містить опції групування та мініфікації, але візуальне виключення файлів доступне лише у версії PRO Addon.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Мінімізація може спричинити проблеми на вашому сайті, це головним чином трапляється, коли ви групуєте певні файли, які містять помилку в синтаксичній помилці або подібній змінній, назві класу. Саме тому за допомогою опції «виключення мініфікації файлів» ви зможете виключити файли з процесу мініфікації та групування. Перейдіть до WP Speed of Light > SpeedUp > Group & Minify, ви зможете побачити розширеного виключення файлів .

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

 
Щоб мати змогу переглянути список скриптів, завантажених на ваш веб-сайт, 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