Здрастуйте, шановні читачі блогу . Сьогодні хочу написати невелику замітку «на пам’ять» здебільшого для себе, щоб потім було простіше згадати при необхідності. Можливо, що і вам це здасться цікавим. Мова піде про ще одному сервісі, що дозволяє проаналізувати швидкість завантаження вашого сайту (GTmetrix) і отримати рекомендації щодо її збільшення.
Раніше я вже написав серію статей, присвячених швидкості завантаження сайту, і сьогодні хочу додати цю рубрику ще один невеликий пост. Трохи раніше, до речі, я додав до неї статтю про онлайн-сервіс Айрі, що дозволяє автоматично прискорювати сайт, а також захищати його від злому і Ддос атак (від останнього так само може допомогти і безкоштовний CloudFlare).
Що хорошого є в GTmetrix та як його використовувати?
Отже, почнемо з онлайн сервісу GTmetrix. На відміну, наприклад, від такого сервісу як Pingdom, тут видається не тільки інформація про швидкості завантаження веб-сторінки, числі запитів і швидкості завантаження кожного окремого фрагмента сторінки, але і даються рекомендації щодо поліпшення ситуації. Для початку на головній сторінці ви вводите Url свого сайту (або який-небудь окремої сторінки, швидкість завантаження якої хочете перевірити) і тиснете на кнопку «GO».
Сервісу потрібно хвилинка на перетравлення зібраної інформації, а також видачі її у вигляді цифрової оцінки і зведеної таблиці з результатами і рекомендаціями. Як ви можете бачити на знімку екрана, для оцінки використовується добре знайома нам по попереднім статтям система Page Speed.
Також дається оцінка сайту і з точки зору не менш відомого інструменту YSlow. Судячи з скріншоту, рейтинг швидкості мого сайту Page Speed істотно вище, ніж у YSlow. Оцінки даються в буржуйської системі, де «A» означає відмінно, а «F» — погано.
У мене, наприклад, обидва інструменту кажуть, що все з рук геть погано йде з кешування в браузерах користувачів статичних файлів сайту (зображень, стильових файлів тощо). У YSlow це називається «Add Expires headers», а в Page Speed — «Leverage browser caching». Іншими словами, мій сервер не говорить браузерам користувачів скільки часу потрібно зберігати в кеші ці самі статичні файли.
І це дійсно так, тому що найбільш популярні способи включення даної опції на веб-сервері під управлінням Апач у мене не працюють у силу того, що не встановлено ні один з модулів (mod_headers або mod_expires), з допомогою яких можна було б це саме провернути справу. Однак, я наведу приклад коду для файлу .htaccess (підключившись по ФТП, ви знайдете його в корені сайту), який може допомогти вам включити кешування статики в браузері, якщо онлайн-сервіс GTmetrix на це лається.
Спочатку код модуля mod_headers. Звертаю вашу увагу, що в ньому використовується перевірка наявності у вашого хостера даного модуля. Якщо його знайдено не буде, то код виконуватися не буде і ніяких помилок це не викличе. Однак, я настійно рекомендую попередньо скопіювати оригінальний (до внесення розташованого нижче коду) файл .htaccess до себе на комп під уникнення ексцесів.
#кешувати html і htm файли на один день
Header set Cache-Control «max-age=43200»
#кешувати css, javascript і текстові файли на один тиждень
Header set Cache-Control «max-age=604800»
#кешувати флеш і зображення на місяць
Header set Cache-Control «max-age=2592000»
#відключити кешування
Header unset Cache-Control
Коментарі (їх рядки починаються зі знака решітки) потім можете видалити, але вони по-любому на роботу коду впливу надавати не будуть. Можна буде ще додати блок коду, розрахованого на модуль для mod_expires, де знову ж таки використовується перевірка його наявності на вашому сервері, що гарантує безпеку використання цього фрагмента коду:
ExpiresActive On
#за замовчуванням кеш в 5 секунд
ExpiresDefault «access plus 5 seconds»
#кешувати флеш і зображення на місяць
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»
ExpiresByType application/x-shockwave-flash «access plus 2592000 seconds»
#кешувати css, javascript і текстові файли на один тиждень
ExpiresByType text/css «access plus 604800 seconds»
ExpiresByType text/javascript «access plus 604800 seconds»
ExpiresByType application/javascript «access plus 604800 seconds»
ExpiresByType application/x-javascript «access plus 604800 seconds»
#кешувати html і htm файли на один день
ExpiresByType text/html «access plus 43200 seconds»
#кешувати xml файли на десять хвилин
ExpiresByType application/xhtml+xml «access plus 600 seconds»
Коментарі знову ж потім можна буде видалити.
Також дуже частою проблемою, на яку лається сервіс GTmetrix, буває відсутність стиснення файлів на сервері перед їхньою передачею в браузери користувачів. Використовується при цьому технологія gzip, про який я вже писав. В Page Speed це називається «Enable gzip compression», а в YSlow — «Compress components with gzip».
Для того, щоб це саме Gzip стиснення включити на хостингах, де використовується сервер Апач, досить буде додати в файл .htaccess (він є дистанційним файлом управління сервером) відповідний фрагмент коду. У Апача є два модулі для стиснення і який-небудь із них буде встановлений у вашого хостера (хоча не факт). Найбільш поширений модуль mod_deflate — з нього і почнемо. Ми знову ж додаємо код перевірку наявності цього модуля, щоб не отримати 500 помилку для всього сайту.
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml, text/css-text/javascript application/javascript application/x-javascript
Трохи менш популярним модулем є mod_gzip і для нього код включення Gzip стиснення для потрібних типів файлів буде виглядати так:
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include mime ^text\.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image\.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
У звітах по швидкості завантаження вашого сайту на сервісі GTmetrix ви знайдете також вкладку «Timeline», де зможете поспостерігати за швидкістю завантаження кожного компонента вашої веб-сторінки і побачити те, що вантажиться з затримками.
Особисто я ще пару років тому, покопавшись в подібному звіті на сервісі Pingdom, виявив підвантаження в браузери користувачів на кожній веб зайвих картинок, які на ній не використовувалися. Виявилося, що вони були задані як фонові в стильовому файлі моєї теми, але ці елементи дизайну я з шаблону видалив, а картинки даремно вантажилися і сповільнювали сайт. Видаливши їх, я позбувся від десятка зайвих запитів до сервера й заощадив трафік.
Як налаштувати підвантаження бібліотеки jQuery з мережі Google CDN
Ну, і ще скажу про одну річ, яку мені дозволив помітити сервіс GTmetrix. Виявилося, що після встановлення якогось із чергових плагінів (можливо, що Easy Social Share Buttons, про який я нещодавно писав) бібліотека jQuery подгружалась цілих два рази.
Справа в тому, що при створенні прикріпленого верхнього меню та плаваючого сайдбара я спеціально підключав jQuery (без неї це справа не працювало) у файлі теми оформлення мого сайту. А після установки плагіна WordPress теж активував підвантаження даної бібліотеки з своїх схованок.
WordPress бібліотеку jQuery брав з папки движка (https:///wp-includes/js/jquery/jquery.js?ver=1.11.0), що було не зовсім оптимальним рішенням. Тому крім усунення подвійного завантаження цієї бібліотеки я вирішив перейти на використання так званої CDN (мережі доставки контенту) від Google. В ідеалі це дозволить:
На наведеному трохи вище скріншоті як раз і показана завантаження jQuery з Google CDN (якщо подивитеся Урл, то побачите в ньому слово Google). Як це було зроблено? Ну, по-перше, я прибрав з коду файлу теми оформлення рядок з подгрузкой jQuery, бо вона тепер підвантажується самим Вордпрессом. Однак він це здійснює (як було сказано вище) з папки вашого сайту (https:///wp-includes/js/jquery/), а нам потрібна завантаження з CDN.
Добре, що в папці з кожною темою WordPress/wp-content/themes/название_темы) живе файлик functions.php, в який можна додати ось такий фрагмент коду:
if ( !is_admin ()){
wp_deregister_script (‘jquery’);
wp_register_script (‘jquery’, («http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js»), false, ‘1.8.3’);
wp_enqueue_script (‘jquery’);
}
Він велить движку довантажувати бібліотеку не з вашого сервера, а з мережі Google CDN. Особисто мені потрібна була версія jQuery 1.8.3, бо старших не працював код фіксації верхнього меню та плаваючого сайдбара (не знаю чому, т. к. в кодинге не знав), тому я і вказав цю версію в Урлі http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js»». Власне, все.
Є непогана добірка з 6 відеоуроків по темі прискорення сайту, яку варто подивитися, щоб скласти для себе загальну картину необхідних робіт по оптимізації швидкості завантаження:
«alt=»»>
Удачі вам! До зустрічей на сторінках блогу
