Оптимізація (стиснення) CSS в Page Speed - як відключити зовнішні файли стилів і об'єднати їх в один для прискорення завантаження
- Оптимізація і стиснення CSS в Page Speed
- Як об'єднати зовнішні CSS в один загальний файл
- Відключення зовнішніх CSS для прискорення сайту на прикладі
Привіт, шановні читачі блогу KtoNaNovenkogo.ru. Сьогодні я хочу порушити традицію (писати в усі рубрики рівномірно) і запропонувати вашій увазі другу частину статті про те, як підвищити швидкість завантаження сайту, яку можна прочитати тут.
Справа в тому, що набагато простіше писати, що називається, по гарячих слідах, а не згадувати потім: «а як я зміг це зробити?», Що буває досить важко, особливо після деякого часу.
Давайте далі продовжимо намагатися збільшувати швидкість за допомогою такого інструменту як Page Speed, який встановлюється як доповнення до Мазілу або хром. В принципі, напевно, даремно я сказав в попередній статті, що цей плагін сам нічого для прискорення вашого проекту зробити не може, а тільки дає рекомендації на що саме слід звернутися свою увагу в першу чергу. Виявляється, і сам він на щось може згодитися.
Оптимізація і стиснення CSS в Page Speed
У минулій статті ми докладно розглянули, як встановити плагін Page Speed і як налаштувати оптимальним чином кешування статичних об'єктів (зображень, скриптів, стилів) в браузерах користувачів.
Після проведених нами налаштувань Web сервера, цей плагін уже перестав лаятися на сильне зниження швидкості через «Leverage browser caching»:
По суті, Пейдж Спід вказує на те, що практично всі стильові файли, які завантажуються в браузер відвідувача разом з web сторінкою мого блогу, можуть бути істотно оптимізовані (стиснуті) для зниження їх ваги.
Якщо клацнути по плюсик поруч з «Minify CSS», то відкриється список об'єктів, які бажано було б піддати оптимізації (стиснути):
Але саме чудове те, що всю роботу по оптимізації (стиску) зробить сам плагін. Подивіться уважно, в кінці рядка з назвою кожного неоптимізованого стильового файлу в його вікні вам буде запропоновано подивитися оптимізовану (стислу) версію, а при бажанні і завантажити максимально позбавлений сміття файлик таблиць каскадних стилів, який дозволить, нехай і трохи, але підвищити швидкість завантаження сайту.
Судіть самі, так виглядав він до того, як мені вдалося його стиснути в Page Speed:
А так виглядає після його оптимізації:
Отже, для цього вам потрібно буде всього-на-всього завантажити за посиланням «Save as» стислу версію. Завантажили?
Тепер підключаєтеся по FTP, заходите в ту папку де у вас живе оригінальний файл таблиць стилів (див. Шлях у вікні Page Speed) і замінюєте старий не стисло на новий (той, який вам оптимізували), не забувши дати йому таку ж назву, як і у оригіналу, інакше таблиці каскадних стилів працювати не будуть. Усе, насолоджуєтеся тими мілісекундами, на які прискорилася завантаження вашого сайту.
Але крім основного файлу CSS, який зазвичай йде разом з використовуваної вами темою оформлення, у вікні Пейдж СНІДу ви можете побачити так само і ті стильові файліки, які використовуються встановленими у вас плагінами і розширеннями для Вордпресс (або будь-якого іншого використовуваного вами движка). В принципі, ви можете точно так же їх стиснути, як було розглянуто трохи вище.
Як об'єднати зовнішні CSS в один загальний файл
Але найоптимальнішим варіантом було б об'єднати всі зовнішні CSS в один, а вже потім його стиснути засобами Page Speed. Це буде ідеальний варіант, що дозволяє вигадати ще кілька мілісекунд в швидкості завантаження. Власне, і сам плагін підказує саме такий варіант в поле «Combine external CSS»:
Можна, звичайно ж, залізти в код плагіна і відключити стилі звідти, але якщо ви відновите дане розширення, то можливо доведеться знову копатися в нутрощах плагіна для повторного відключення. Для WordPress є спосіб вирішити цю задачу централізовано, за допомогою відомого вам файлу functions.php. який повинен бути присутнім в папці з використовуваної вами темою оформлення:
Тим самим ми скасовуємо реєстрацію стилів оформлення деяких плагінів в WordPress. В результаті чого окремі CSS файли цих доданків не будуть довантажувати в браузери відвідувачів.
І навіть у разі поновлення будь-якого з них нічого не зміниться і вам не потрібно буде повторно копатися в їх коді. Ну, а тому вони оновлюються досить часто, то таким хитрим способом відключення ми сильно зекономимо наш час і нерви.
Начебто все просто - відключили і все, можна про це забути. Так, та не так. Попередньо адже ще потрібно знайти в коді кожного WP плагіна (в якому відключаємо подгрузку стилів) той регістр, який відповідає за їх підключення.
Якщо ви уважніше подивіться на наведений вище код, то помітите рядки, де перераховані ці самі регістри:
Тобто наприклад, для чудового WordPress плагіна посторінковою навігації WP-PageNavi регістр буде називатися «wp-pagenavi», а для плагіна Comment Form Quicktags - «cfq». Якщо ви використовуєте ті ж самі розширення, що і я, то можете не лазити в їх PHP код, а запозичити регістри з наведеного коду.
Але з відключенням у всіх плагінів, що мають свої власні файли стильового оформлення, вам потрібно не забути скопіювати весь вміст цих самих відключаються CSS, для об'єднання в загальний файл з папки з темою оформлення (у мене style.css називається). Зрозуміло, так?
Інакше, наприклад, SyntaxHighlighter Evolved, за допомогою якого так красиво оформлений наведений трохи вище код, не працюватиме належним чином. Загалом, вся краса пропаде, тому що саме в стилях цього плагіна задається таке красиве і підсвічується подання різного коду на сторінках мого блогу.
Напевно, ви уявляєте про що йде мова. Таке CSS властивість може, наприклад, мати такий вигляд:
Запис url (flags.png) означає, що картинку під назвою flags.png потрібно буде шукати в тій же самій папці, де знаходиться сам файл таблиць каскадних стилів. Але справа в тому, що коли ви скопіюєте вміст всіх стилів плагінів, то в них напевно будуть використовуватися такі ось відносні шляхи до зображень.
А це призведе до того, що WordPress не зможе знайти потрібні картинки за вказаною відносного шляху. Адже вони, як і раніше залишилися в папках з плагінами. Тому при об'єднанні CSS потрібно в обов'язковому порядку замінювати відносні шляхи до фонових зображень на абсолютні, що мають приблизно такий вигляд:
Після того, як ви це зробите, все фонові картинки використовувані плагінами, у яких ви відключили їхні власні стилі, повернуться на свої місця. Так, думаю, що з цим ви впораєтеся.
До речі, після того, як у вас весь стильовий код буде знаходитися в одному загальному файлі, не забудьте його ще раз стиснути через Page Speed. знайшовши в його вікні рядок під назвою Minify CSS і клацнувши по плюсик поруч з цим написом, а потім скопіювавши оптимізований файлик «Save as». Далі замініть їм оригінальний файл в папці з використовуваної вами темою оформлення WordPress.
Відключення зовнішніх CSS для прискорення сайту на прикладі
Давайте тепер на конкретному прикладі я спробую показати, де потрібно шукати назву регістра WordPress плагіна, що дозволяє відключити подгрузку його стильового оформлення. Власне, для пошуку потрібного регістра нам потрібен буде файлик з розширенням PHP з папки з цим плагіном. Взагалі, всі вони живуть в одній і тій же папці:
Отже, саме тут слід шукати потрібний каталог. Давайте розглянемо для прикладу SyntaxHighlighter Evolved, тому що у нього досить не типова ситуація, яка полягає у використанні декількох файлів стилів в залежності від того, які варіанти оформлення ви вибрали в налаштуваннях цього плагіна.
Як бачите, у мене обраний вид, який був у другій версії плагіна, а колірна схема SyntaxHighlighter використовується дефолтна. Тепер мені потрібно буде перейти в його папку, підключившись до блогу по ФТП:
скопіювати вміст двох CSS файлів, які ми плануємо відключити: shCore.css і shThemeDefault.css. тому саме на них нам показує пальцем Page Speed (ну, і в настройках у мене вибрана дефолтна тема, для якої, цілком логічно, потрібен CSS з відповідною назвою).
Після цього відкриваєте на редагування:
Дивимося, які саме регістри дозволять нам відключити подгрузку стилів shCore.css і shThemeDefault.css. Копіюємо їх назви (в моєму випадку це будуть: syntaxhighlighter-theme-default і syntaxhighlighter-core) і додаємо в functions.php (з папки з вашою темою оформлення) дві додаткові рядки в описаний вище шматочок коду:
І так повторюєте для кожного плагіна Вордпресс, у яких ви плануєте відключити подгрузку стилів. Сподіваюся, що вам все стало ясно і зрозуміло. Якщо немає, то спробуйте перечитати ще раз, бо тема не дуже вже й проста для розуміння, хоча я і намагаюся надмірно не ускладнювати і не обтяжувати текст (кому потрібні подробиці, адже чим простіше - тим краще).
В результаті всіх проведених маніпуляцій у вас в functions.php буде цілий список рядків з регістрами плагінів, чиї стилі потрібно відключити. А в одному загальному файлі CSS, з папки з темою оформлення, буде містити весь стильовий код вашого сайту. Ще раз нагадаю - не забудьте стиснути або, іншими словами, провести оптимізацію style.css через Page Speed описаним вище способом.