Прискорюємо завантаження сайту

576
  • Що хорошого є в GTmetrix та як його використовувати?
  • Як налаштувати підвантаження jQuery з мережі Google CDN
  • Здрастуйте, шановні читачі блогу . Сьогодні хочу написати невелику замітку «на пам’ять» здебільшого для себе, щоб потім було простіше згадати при необхідності. Можливо, що і вам це здасться цікавим. Мова піде про ще одному сервісі, що дозволяє проаналізувати швидкість завантаження вашого сайту (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 CDN бібліотека стискається, що дозволяє економити трафік.
  • На наведеному трохи вище скріншоті як раз і показана завантаження 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=»»>

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