Як звичайного сайту на Wordpress набрати 99/100 в PageSpeed Insights

Почалося все з того, що Adsense в черговий раз знизив оцінку ефективності сторінок:
image
А всі ми знаємо, що швидкість сайту – один з факторів ранжирування у видачі Гугла.

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

Спочатку є сайтик зі статтями, яких в інтернеті мільйони: CMS Wordpress 4.2, два десятка плагінів, тема, зверстана фрілансером і shared хостинг.

Розберемо по пунктах, що було виправлено в цьому конкретному випадку. Впевнений, стаття буде корисна всім, хто використовує WP.

За основу взято скрінкасти Олексія Климанова «Як збільшити швидкість завантаження сайту», за що йому окреме спасибі. Однак, WP має свої особливості, їх ми розглянемо більш докладно.

Окей, Гугл, що не так з моїм сайтом?

image

1. Видаліть верхній частині сторінки код JavaScript і CSS, блокуючий відображення

Самий захоплюючий пункт. Якщо говорити коротко, CSS потрібно довантажувати скриптами, самі скрипти перенести в футер і позбутися від стандартного підключення Google Fonts.

1.1. На звичайному WP-сайті як правило присутній основний style.css поточної теми і кілька файлів зі стилями плагінів, а так само різні фреймворки.

Першим ділом, переносимо стилі в файл style.css поточної теми, виправляємо урли картинок, домагаємося, щоб все працювало.

Для того щоб відключити завантаження стилів окремих плагінів, потрібно зробити наступне: знаходимо, де в плагіні підключаються стилі, зазвичай для цього використовують функцію wp_enqueue_style(). Перший аргумент цієї функції – ідентифікатор файлу CSS, текстовий рядок.
//приклад для fancybox, підключення css в одному з файлів плагіна:
wp_enqueue_style('fancybox', ...blah-blah-blah.... ); 

Копіюємо ідентифікатор і скасовуємо реєстрацію цього файлу за допомогою wp_deregister_style() в своєму functions.php:
wp_deregister_style ('fancybox');

Буває що автор плагіна особливо не переймається і просто підключає стилі, так:
echo ' < link rel="stylesheet" href="......

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

Далі, важливо максимально швидко видати користувачеві перший екран. Всі стилі, відповідальні за видачу першого екрану, мінімізовані і винесені прямо на сторінку, head.

Інші стилі залишаються у style.css і завантажуються скриптом. Наприклад, за допомогою такого рядка в футері:
<script> jQuery("head").append("<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?> " type="text/css" media="screen">"); </script>

Для того щоб користувачі з відключеним JS, бачили коректну сторінку, обрамлялися стандартний висновок стилів в noscript, PageSpeed не враховує цю рядок:
<noscript><link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>"/></noscript>

1.2 Все JS скрипти підключаються в кінці сторінки. Це робиться додаванням кількох рядків коду functions.php:
function footer_enqueue_scripts(){
remove_action('wp_head','wp_print_scripts');
remove_action('wp_head','wp_print_head_scripts',9);
remove_action('wp_head','wp_enqueue_scripts',1);
add_action('wp_footer','wp_print_scripts',5);
add_action('wp_footer','wp_enqueue_scripts',5);
add_action('wp_footer','wp_print_head_scripts',5);
}
add_action('after_setup_theme','footer_enqueue_scripts');

При цьому підключення бібліотеки JQuery теж відбувається з футера. Але на звичайному сайті частенько вставки з JQuery-кодом виводяться в різних місцях сторінки. Щоб цей код коректно працював, використовуються милиці від Colin Gourlay.

В head додаємо:
<script>(function(w,d,u){w.readyQ=[];w.bindReadyQ=[];function p(x,y){if(x=="ready"){w.bindReadyQ.push(y);}else{w.readyQ.push(x);}};var a={ready:p,bind:p};w.$=w.jQuery=function(f){if(f===d||f===u){return a}else{p(f)}}})(window,document)</script>

А в футер, відразу після <?php wp_footer(); ?>:
<script>(function($,d){$.each(readyQ,function(i,f){$(f)});$.each(bindReadyQ,function(i,f){$(d).bind("ready",f)})})(jQuery,document)</script>

1.3 Так, Pagespeed Insights вважає, що шрифти, які завантажуються з fonts.googleapis.com, уповільнюють відображення сторінки. Щоб це виправити скористаємося рецептом з сайту css-live.ru

Суть методу така: шрифти перетворимо в woff, кодуємо в base64 і підключаємо одним CSS-файл, завантажуючи його у localStorage. До того, як браузер завантажить шрифт, користувач бачить Arial наприклад.

Копіпаст не буду, спосіб дуже докладно описаний по посиланню.

2. Використовуйте кеш браузера

Для вирішення виконані 2 дії: встановлений плагін Hyper Cache з дефолтними налаштуваннями і доданий код .htaccess, який віддає заголовки 'Expires' за типами файлів:

# Cache Images
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"

# Cache other content types (Flash, CSS, JS, HTML, XML)
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 2592000 seconds"
ExpiresByType application/javascript "access plus 2592000 seconds"
ExpiresByType application/x-javascript "access plus 2592000 seconds"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"

3. Скоротіть JavaScript,
4. Скоротіть CSS:


Існують плагіни, але оскільки код не редагується кожен день, стискати його «на льоту» не має сенсу – зайве навантаження на сервер. Тому код js і css минифицируется кожен раз після редагування, через онлайн-сервіси.

5. Скоротіть HTML

Найлегший пункт. Для стиснення html був встановлений плагін та активований'WP-HTML-Compression'.

6. Оптимізуйте зображення

Виявилося, що 2800 картинок можна скачати з сервера, прогнати через веб-інтерфейс Tinygrab, і завантажити назад всього за 4 години. Після цього був встановлений плагін tinygrab, який тисне всі завантажені зображення PNG і JPEG, до 500 картинок в місяць безкоштовно.

Підсумок:
Якщо протестувати випадкову сторінку сайту, то отримаємо результат 95-99, іноді гугл каже, що сторонні скрипти і картинки уповільнюють роботу.
image
Для більш об'єктивної оцінки була створена сторінка без сторонніх скриптів, тобто без реклами, лічильників і форм пошуку. Її результат варіюється від 99 до 100 від випадку до випадку:
image

Посилання на сторінку з результатами тесту

І, чесно кажучи, %username%, я сам трохи в шоці.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.