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

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

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

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

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

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

Тепер ми перевіримо швидкість завантаження нашої сторінки, щоб побачити зміни. Наприклад, ми використовуємо сайт з 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-файлів.

Тепер, коли ми налаштували ці налаштування, просто увімкніть параметри групи (Group CSS та Group 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