Вивчаємо WordPress

827
  • Оптимізація і стиснення CSS Page Speed
  • Як об’єднати зовнішні CSS в один загальний файл
  • Відключення зовнішніх CSS для прискорення сайту на прикладі
  • Здрастуйте, шановні читачі блогу . Сьогодні я хочу порушити традицію (писати у всі рубрики рівномірно) і запропонувати вашій увазі другу частину статті про те, як підвищити швидкість завантаження сайту, яку можна прочитати тут.

    Справа в тому, що набагато простіше писати, що називається, по гарячих слідах, а не згадувати потім: «а як я зміг це зробити?», що буває досить важко, особливо після деякого часу.

    Вивчаємо WordPress

    Давайте далі будемо намагатися збільшувати швидкість з допомогою такого інструменту як Page Speed, який встановлюється як доповнення до Мазілу або Хрому. В принципі, напевно, даремно я сказав в попередній статті, що цей плагін сам нічого для прискорення вашого проекту зробити не може, а тільки дає рекомендації на що саме слід звернутися свою увагу в першу чергу. Виявляється, і сам він на щось може згодитися.

    Оптимізація і стиснення CSS Page Speed

    У минулій статті ми докладно розглянули, як встановити плагін Page Speed і як налаштувати оптимальним чином кешування статичних об’єктів (зображень, скриптів, стилів) в браузерах користувачів.

    Після проведених нами налаштувань Web сервера, цей плагін вже перестав лаятися на сильне зниження швидкості з-за «Leverage browser caching»:

    Вивчаємо WordPressВивчаємо WordPress

    Наступна за важливістю рекомендація і одночасно зауваження, яке тепер присутнє в його вікні при аналізі швидкості завантаження мого блогу — це «Minify CSS» (оптимізація, стиснення файлів зі стильовим оформленням, про які ви можете почитати докладніше у статтях мого довідника по CSS, знаходиться тут).

    По суті, Пейдж Снід вказує на те, що практично всі стильові файли, які завантажуються в браузер відвідувача разом з web-сторінкою мого блогу, можуть бути суттєво оптимізовано (стиснуті) для зниження їх ваги.

    Якщо клацнути по плюсику поруч із «Minify CSS», то відкриється список об’єктів, які бажано було б піддати оптимізації (стиснути):

    Вивчаємо WordPressВивчаємо WordPress

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

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

    Наприклад, мій неоптимізований style.css, що йде в комплекті з темою WordPress, складався з майже 2000 рядків, а після того, як відбулася оптимізація, вдалося зменшити кількість рядків у ньому до 400, а сам файлик схуд на одну п’яту свого початкового ваги. Та й зовнішній вигляд прописаних у ньому властивостей після цього мені подобається набагато більше.

    Судіть самі, так виглядав він до того, як мені вдалося його стиснути в Page Speed:

    Вивчаємо WordPressВивчаємо WordPress

    А так виглядає після його оптимізації:

    Вивчаємо WordPressВивчаємо WordPress

    Отже, для цього вам потрібно буде всього-навсього завантажити за посиланням «Save as» стислу версію. Скачали?

    Тепер підключаєтеся по FTP, заходьте в ту папку, де у вас живе оригінальний файл таблиці стилів (див. шлях у вікні Page Speed) і замінюєте старий не стиснутий на новий (той, який вам оптимізували), не забувши дати йому таку ж назву, як і в оригіналу, інакше таблиці каскадних стилів працювати не будуть. Усе, насолоджуєтеся тими мілісекундами, на які прискорилася завантаження вашого сайту.

    Але крім основного файлу CSS, який зазвичай йде разом з використовуваної вами темою оформлення, у вікні Пейдж Сніду ви можете побачити так само і ті стильові файлики, які використовуються встановленими у вас плагінами і розширеннями для Вордпресс (або будь-якого іншого використовуваного вами движка). В принципі, ви можете точно так само їх стиснути, як було розглянуто трохи вище.

    Як об’єднати зовнішні CSS в один загальний файл

    Але найоптимальнішим варіантом було б об’єднати всі зовнішні CSS в один, а вже потім його стиснути засобами Page Speed. Це буде ідеальний варіант, що дозволяє визначити ще кілька мілісекунд в швидкості завантаження. Власне, і сам плагін підказує саме такий варіант у полі «Combine external CSS»:

    Вивчаємо WordPressВивчаємо WordPress

    Тут він нам пропонує об’єднати всі знайдені їм зовнішні файли (зовнішні скрипти теж можна буде об’єднати в один — «Combine external JavaScript»), довантажувати в браузер відвідувачів, в один загальний, але при цьому потрібно буде обов’язково відключити всі зайві файли стилів. Проблема виникає в тому, що багато з них створюють і підключають плагіни або інші розширення вашого движка.

    Можна, звичайно ж, залізти в код плагіна і відключити стилі звідти, але якщо ви оновіть дане розширення, то можливо доведеться знову копатися в нутрощах плагіна для повторного відключення. Для WordPress є спосіб вирішити цю задачу централізовано, за допомогою відомого вам файлу functions.php, який повинен бути присутнім в папці з використовуваної вами темою оформлення:

    /wp-content/themes/назва теми WordPress/functions.php

    Якщо functions.php ви не знайдете, то можете просто створити, наприклад, редактор Notepad++ і завантажити в папку з темою оформлення WordPress. Але, напевно, він все-таки знайдеться. У нього вам потрібно буде додати невеликий шматочок PHP коду, такого виду:

    add_action( ‘wp_print_styles’, ‘my_deregister_styles’, 100 );
    function my_deregister_styles() {
    wp_deregister_style( ‘google ajax-translation’ );
    wp_deregister_style( ‘syntaxhighlighter-theme-default’ );
    wp_deregister_style( ‘syntaxhighlighter-core’ );
    wp_deregister_style( ‘wp-pagenavi’ );
    wp_deregister_style( ‘cfq’ );
    }

    Тим самим ми скасовуємо реєстрацію стилів оформлення деяких плагінів WordPress. В результаті чого окремі CSS файли цих плагінів не будуть подгружаться в браузери відвідувачів.

    І навіть у разі відновлення будь-якого з них нічого не зміниться і вам не потрібно буде повторно копатися у їх коді. Ну, а оскільки вони оновлюються досить часто, то таким хитрим способом відключення ми значно зекономимо наш час і нерви.

    Начебто все просто — відключили і все, можна про це забути. Так, та не так. Попередньо адже ще потрібно знайти в коді кожного плагіна WP (в якому відключаємо підвантаження стилів) той реєстр, який відповідає за їх підключення.

    Якщо ви уважніше подивіться на приведений вище код, то помітите рядка, де перераховані ці самі регістри:

    wp_deregister_style( ‘google ajax-translation’ );
    wp_deregister_style( ‘syntaxhighlighter-theme-default’ );
    wp_deregister_style( ‘syntaxhighlighter-core’ );
    wp_deregister_style( ‘wp-pagenavi’ );
    wp_deregister_style( ‘cfq’ );

    Тобто, наприклад, для чудового WordPress плагін посторінкової навігації WP-PageNavi регістр буде називатися «wp-pagenavi», а для плагіна Comment Form Quicktags — «cfq». Якщо ви використовуєте ті ж самі розширення, що і я, то можете не лазити в їх PHP код, а запозичити регістри з наведеного коду.

    Але з відключенням у всіх плагінів, які мають свої власні файли стильового оформлення, вам потрібно не забути скопіювати весь вміст цих самих відключають CSS, для об’єднання в загальний файл з папки з темою оформлення (у мене style.css називається). Зрозуміло, так?

    Інакше, наприклад, SyntaxHighlighter Evolved, з допомогою якого так красиво оформлений наведений трохи вище код, не буде працювати належним чином. Загалом, вся краса пропаде, тому що саме в стилях цього плагіна задається таке красиве і підсвічене подання різного коду на сторінках мого блогу.

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

    Напевно, ви уявляєте про що йде мова. Таке CSS властивість може, наприклад, мати такий вигляд:

    .translate_links .translate_flag{background:url(flags.png) no-repeat;border:0;margin:0;padding:0;}

    Запис url(flags.png) означає, що картинку під назвою flags.png потрібно буде шукати в тій самій папці, де знаходиться сам файл каскадних таблиць стилів. Але справа в тому, що коли ви скопіюєте вміст всіх стилів плагінів, то в них напевно будуть використовуватися такі ось відносні шляхи до зображень.

    А це призведе до того, що WordPress не зможе знайти потрібні картинки за вказаною відносного шляху. Адже вони, як і раніше залишилися в папках з плагінами. Тому при об’єднанні CSS потрібно в обов’язковому порядку замінювати відносні шляхи до фонових зображень на абсолютні, мають приблизно такий вигляд:

    .translate_links .translate_flag{background:url(https:///wp-content/plugins/google-ajax-translation/flags.png) no-repeat;border:0;margin:0;padding:0;}

    Після того, як ви це зробите, всі фонові картинки використовувані плагінами, у яких ви відключили їхні власні стилі, повернуться на свої місця. Так, думаю, що з цим ви впораєтеся.

    До речі, після того, як у вас весь стильової код буде знаходитися в одному загальному файлику, не забудьте його ще раз стиснути через Page Speed, знайшовши в його вікні рядок під назвою Minify CSS і клацнувши по плюсику поряд з цим написом, а потім скопіювавши оптимізований файлик «Save as». Далі замініть їм оригінальний файл у папці з використовуваної вами темою оформлення WordPress.

    Вивчаємо WordPressВивчаємо WordPress

    Відключення зовнішніх CSS для прискорення сайту на прикладі

    Давайте тепер на конкретному прикладі я спробую показати, де потрібно шукати назва регістра WordPress плагін, який дозволяє відключити підвантаження його стильового оформлення. Власне, для пошуку потрібного регістра нам потрібен буде файлик з розширенням PHP з папки з цим плагіном. Взагалі, всі вони живуть в одній і тій же папці:

    /wp-content/plugins

    Отже, саме тут слід шукати потрібний каталог. Давайте розглянемо для прикладу SyntaxHighlighter Evolved, оскільки у нього досить не типова ситуація, яка полягає у використанні декількох файлів стилів залежно від того, які варіанти оформлення ви вибрали в налаштуваннях цього плагіна.

    Вивчаємо WordPressВивчаємо WordPress

    Як бачите, у мене обраний вид, який був у другій версії плагіна, а колірна схема SyntaxHighlighter використовується дефолтна. Тепер мені потрібно буде перейти в його папку, підключившись до блогу по ФТП:

    /wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/styles

    скопіювати вміст двох CSS файликів, які ми плануємо відключити: shCore.css і shThemeDefault.css, оскільки саме на них нам показує пальцем Page Speed (ну, і в налаштуваннях у мене вибрана дефолтна тема, для якої, цілком логічно, потрібен CSS з відповідною назвою).

    Після цього відкриваєте редагування:

    /wp-content/plugins/syntaxhighlighter/syntaxhighlighter.php

    Потім здійснюєте пошук з допомогою можливостей Notepad++, про всі достоїнства якого тут читайте. Шукати потрібно що-небудь містить «CSS». В syntaxhighlighter.php це буде ділянка коду:

    // Register theme stylesheets
    wp_register_style( ‘syntaxhighlighter-core’, plugins_url(‘syntaxhighlighter/’ . $this->shfolder . ‘/styles/shCore.css’), array(), $this->agshver );
    wp_register_style( ‘syntaxhighlighter-theme-default’, plugins_url(‘syntaxhighlighter/’ . $this->shfolder . ‘/styles/shThemeDefault.css’), array(‘syntaxhighlighter-core’), $this->agshver );
    wp_register_style( ‘syntaxhighlighter-theme-django’, plugins_url(‘syntaxhighlighter/’ . $this->shfolder . ‘/styles/shThemeDjango.css’), array(‘syntaxhighlighter-core’), $this->agshver );
    wp_register_style( ‘syntaxhighlighter-theme-eclipse’, plugins_url(‘syntaxhighlighter/’ . $this->shfolder . ‘/styles/shThemeEclipse.css’), array(‘syntaxhighlighter-core’), $this->agshver );
    wp_register_style( ‘syntaxhighlighter-theme-emacs’, plugins_url(‘syntaxhighlighter/’ . $this->shfolder . ‘/styles/shThemeEmacs.css’), array(‘syntaxhighlighter-core’), $this->agshver );
    wp_register_style( ‘syntaxhighlighter-theme-fadetogrey’, plugins_url(‘syntaxhighlighter/’ . $this->shfolder . ‘/styles/shThemeFadeToGrey.css’), array(‘syntaxhighlighter-core’), $this->agshver );
    wp_register_style( ‘syntaxhighlighter-theme-midnight’, plugins_url(‘syntaxhighlighter/’ . $this->shfolder . ‘/styles/shThemeMidnight.css’), array(‘syntaxhighlighter-core’), $this->agshver );
    wp_register_style( ‘syntaxhighlighter-theme-rdark’, plugins_url(‘syntaxhighlighter/’ . $this->shfolder . ‘/styles/shThemeRDark.css’), array(‘syntaxhighlighter-core’), $this->agshver );

    Дивимося, які саме регістри дозволять нам відключити підвантаження стилів shCore.css і shThemeDefault.css. Копіюємо їх назви (в моєму випадку це будуть: syntaxhighlighter-theme-default і syntaxhighlighter-core) і додаємо в functions.php (з папки з вашою темою оформлення) дві додаткові рядки в описаний трохи вище шматочок коду:

    wp_deregister_style( ‘syntaxhighlighter-theme-default’ );
    wp_deregister_style( ‘syntaxhighlighter-core’ );

    І так повторюєте для кожного плагіна Вордпресс, у яких ви плануєте відключити підвантаження стилів. Сподіваюся, що вам все стало ясно і зрозуміло. Якщо ні, то спробуйте перечитати ще раз, бо тема не надто вже й проста для розуміння, хоча я і намагаюся надмірно не ускладнювати і не обтяжувати текст (кому потрібні подробиці, адже чим простіше — тим краще).

    У результаті всіх проведених маніпуляцій у вас в functions.php буде цілий список рядків з регістрами плагінів, чиї стилі потрібно відключити. А в одному загальному файлі CSS, папки з темою оформлення, буде містити весь стильової код вашого сайту. Ще раз нагадаю — не забудьте стиснути або, іншими словами, провести оптимізацію style.css через Page Speed описаним вище способом.

    Удачі вам! До зустрічей на сторінках блогу