Оптимізація CSS стилів в WordPress
Наступна проблема, яка потребує вирішення, як і в разі зображень , Це скорочення коду і оптимізація CSS стилів і JS скриптів.
Оптимізація дозволить, на думку сервісу Developers Google, скоротити обсяг даних, прискорити їх завантаження і обробку.
зміст:
Якщо CSS-файлів на сайті багато, то для оптимізації необхідно об'єднати їх в один, мінімізувати їх, тобто прибрати всі прогалини, всі коментарі, зробити код самим мінімалістичним, щоб зменшити завантаження з сервера в браузер.
Оптимізація CSS за допомогою плагіна
У разі WordPress існують спеціальні плагіни, які поєднують можливість об'єднання і мініфікаціі скриптів і оптимізації стилів. Один з них, це - JS & CSS Script Optimizer.
Знаходимо його в каталозі WordPress, викачуємо, встановлюємо і активуємо.
Тут потрібно сказати, що некоректне об'єднання css стилів може призвести до порушення відображення сайту, можуть виникати конфлікти стилів, неправильне відображення сайту і т. Д.
Результат об'єднання в цьому випадку залежить від конкретної теми і для деяких з них плагін може взагалі не підійти.
Інші теми, навпаки, можуть вже містити опцію об'єднання і зменшення css стилів і скриптів на сайті.
Слід зазначити, що перш ніж починати оптимізацію файлів css і працювати зі скриптами, необхідно зробити повну резервну копію сайту, а також резервну копію бази даних для того, щоб при необхідності не потрібно було думати, як відновити ресурс.
Налаштування плагіна JS & CSS Script Optimizer
Відкриваємо налаштування плагіна JS & CSS Script Optimizer. Тут для ефективної оптимізації треба виконати послідовно наступні дії:
- Плагін включаємо - Enable plugin, директорію для зберігання кешу файлів і шлях до нього залишаємо як є.
- Далі ставимо галочку Ignore external JavaScript, тобто ігнорувати зовнішні скрипти з інших доменів.
- Упакувати Java скрипти, це рішення на ваш розсуд, тому що вони можуть перестати працювати.
- Потім йдуть пункти об'єднання скриптів в футере і хедері або перенести їх в футер, теж на розсуд в кожному окремому випадку за своїм.
- Далі включаємо опції оптимізації CSS, тільки для тих скриптів, які знаходяться на вашому домені, об'єднати файли стилів, мініфіціровать їх і потім зберігаємо налаштування.
- Потім в полі Ignore next CSS допускається внести список файлів CSS, які не потрібно об'єднувати.
Це може стати в нагоді, коли раптом ви помітили, що сайт починає відображатися некоректно і в цьому випадку деякі файли стилів необхідно виключити з об'єднання.
Дані в це поле треба вносити з відносним шляхом, тому що деякі з них можуть належати темі оформлення, або плагіну, тому краще конкретизувати всі завдання.
Оновлюємо ресурс, все виглядає нормально, перевіряємо всі сторінки, нічого не зіпсувалося і навіть працює.
Перевіряємо вихідний код, в ньому можна бачити об'єднаний файл CSS стилів і об'єднані Java скрипти.
Код після оптимізації вийшов дуже щільний, практично не придатний для редагування, але він оптимальний для завантаження в браузер, так як в ньому немає нічого зайвого.
Вихідні дані при цьому не змінюються, все що є в темі оформлення або в плагінах, все залишається без змін, тобто оптимізація CSS ніяк їх не міняє.
При цьому об'єднаний файл css зберігається в кеші і звідти ж подгружается. З відключенням плагіна все повністю відновлюється.
Подивимося, що змінилося на сайтах сервісів developers.google.com і tools.pingdom.com після оптимізації.
Можна помітити, що число запитів зменшилася і зменшилася також час завантаження об'єднаних CSS файлів і Java скриптів.
Тобто результат після оптимізації css досить хороший і менше залишилося проблем, які ще потрібно вирішити.
