Здрастуйте, шановні читачі блогу . Продовжуємо розпочату в попередніх двох статтях тему підвищення швидкості завантаження сайту (не плутайте зі швидкістю роботи інтернету). Сьогодні ми буде говорити про Gzip стиснення. В принципі, як виявилося, відповідей на запитання «як прискорити сайт?» досить багато.
Щоправда, окремо всі ці методи не особливо позначається на продуктивності, але от при комплексному підході цілком імовірна ситуація, що сторінки вашого ресурсу почнуть завантажуватися просто вліт.
Варто включати Gzip для прискорення сайту
Суттєвий внесок у збільшення швидкості внесло стиснення CSS через Page Speed, кешування статичних об’єктів (малюнків, скриптів, CSS файлів) на стороні клієнта (в браузерах відвідувачів), а так само дуже ефективним виявилося включення Gzip стиснення на WEB сервері хостингу.
Але відразу хочу попередити, що останнє дійство має і негативну складову — збільшується навантаження вашого ресурсу на сервер (десь додалося, а де-то поменшало).
Але з хостингом завжди можна вирішити проблему, хоча б переходом на більш дорогий тарифний план. Головне були б відвідувачі, а вони обов’язково будуть. Дозволю нагадати вам про що йшлося у перших двох статтях, присвячених тому, як можна збільшити швидкість завантаження сайту.
У першій статті я наводив приклади коду для .htaccess, що дозволяє оптимізувати кешування зображень, скриптів і CSS файлів в браузерах відвідувачів. У цьому випадку, як ви пам’ятаєте, при повторному заході відвідувача на ваш сайт всі ці статичні об’єкти (зображення, скрипти і CSS) вже не будуть заново подгружаться з вашого сервера, а будуть братися з кеша браузера користувача.
Кешування дійсно дуже зручно (т. к. досить просто реалізується) і сильно підвищить середню швидкість роботи сайту, т. к. ціла купа зображень з шаблону вашого ресурсу не буде повторно подгружаться в браузери відвідувачів, які хоч раз побували на вашому ресурсі протягом останнього року.
Так от, до чого я це все говорю — у мене так і не запрацювало кешування скриптів за допомогою використання наведених в тій статтею кодів. Але зараз я використовую нову версію коду для .htaccess і при цьому все чудово працює:
FileETag MTime Size
ExpiresActive on
ExpiresDefault «access plus 1 month»
Тепер Page Speed у рядку «Leverage browser caching» немає зауважень з приводу того, що кешування скриптів в браузерах не відбувається. Цей плагін лається тепер тільки на скрипти Яндекса, на які я, при всьому бажанні, впливати не можу, бо вони завантажуються з сервера дзеркала рунета разом з оголошеннями контекстної реклами:
Загалом, в плані Browser caching я зробив все, для того щоб максимально збільшити швидкість завантаження сторінок. Тепер пора переходити до ще одного дуже ефективного та відносно простим способом прискорення — Gzip стиснення.
Вам потрібно лише прописати маленький шматочок коду .htaccess і станеться диво — різко зменшиться загальний розмір даних, що передаються Web сервера хостингу, де розміщений ваш проект в браузери відвідувачів.
Напевно, зрозуміло, що раз зменшиться розмір завантажуваних даних, то пропорційно повинна зрости загальна швидкість роботи. А ідея Gzip стиснення досить проста. Фактично це звичайне архівування всієї переданої інформації на сервері і подальше розархівування цієї інформації в браузерах користувачів.
Всі сучасні браузери підтримують, тому проблем у відвідувачів при перегляді сторінок вашого ресурсу виникнути не повинно.
Єдиний мінус Gzip (як, втім, і будь-якого іншого типу стиснення) полягає в тому, що створюється додаткове навантаження на сервер, оскільки його процесор при цьому буде виконувати безліч операцій архівування даних на льоту, при кожному зверненні до відвідувачів сторінкам.
Ну, що поробиш, за збільшення швидкості завантаження доводиться платити (можливо, що навіть у прямому сенсі — переходити на більш дорого тариф хостингу). Хоча, одночасно з нарощуванням швидкості ви можете провести ряд заходів, що дозволяють істотно знизити навантаження ресурсу на сервер.
Я вже писав досить докладно про деякі способи оптимізації WordPress, для зниження його навантаження:
На моєму хостингу був вже включено Gzip, але, на жаль, не для всіх об’єктів, які добре піддаються стисненню, а було включено тільки для документів (html-файлів). В той час, як CSS і скрипти передавалися з web сервера в браузери користувачів не стислими, хоча вони дуже ефективно архівуються (в кілька разів зменшуючи свою вагу).
Як перевірити роботу стиснення на льоту в Page Speed
В принципі, всі деталі Gzip можна чітко відстежити в Page Speed, але так же є онлайн сервіси, які здатні дати вам інформацію про те, чи включена ця архівація чи ні. Наприклад, можете скористатися цим або цим онлайн сервісом для перевірки включення стиснення на вашому сервері.
Працювати з ними просто введіть Url вашого проекту приведену форму, і натисніть Enter.
Як бачите, сервера nginx мого хостингу вдалося з допомогою Compressed (gzip) зменшити розмір основного завантажується в браузери користувачів документа (Html) в п’ять разів. Здорово, чи не правда? Це істотно здатне збільшити загальну швидкість завантаження сайту.
Але вердикт про те, що воно у вас включено, ще не означає, що ви отримуєте максиму ефекту від цього в плані збільшення швидкості роботи. Тут вам допоможе Page Speed і зараз я розповім про те, як перевірити ефективність роботи стиснення саме на вашому сервері через цей плагін. Насправді все просто до не можна.
Отже, активуємо вже добре знайомий нам прискорювач Пейдж Снід, відкриваємо в браузері сторінку свого ресурсу і переходимо на вкладку «Resources»:
Тут ви побачите список всіх файлів, які завантажуються в браузер з сервера із зазначенням їх Урлов (самим першим йде Html). Ви, напевно, пам’ятаєте, що незважаючи на те, що багато CMS (движки сайтів) працюють на PHP, браузер користувачів все одно віддається згенерована версія сторінки у форматі Html.
Але головне не це, а те, що розташоване в цьому вікні праворуч від списку завантажуються з сервера об’єктів. Там, у двох останніх стовпцях під назвою «File Size» (реальний розмір на сервері) і «Transfer Size (розмір об’єкта, переданого в браузер), наведено ваги цих завантажуються з сервера в браузер об’єктів.
Подивіться на перший рядок вкладки «Resources», навпроти якої в стовпці «Type» варто «doc» (на наведеному нижче скріншоті виділено синім). Якщо у стовпці «Transfer Size» для першого рядка (основного документа) розмір буде менше, ніж у стовпці «File Size», то значить Gzip на вашому вебсервере включено і успішно працює.
Зверніть увагу, що розмір стисненого об’єкта буде істотно менше розміру оригіналу.
Але це ще не все. Адже крім основного документа в браузер відвідувачів підвантажується ще купа об’єктів, деякі з яких можна навіть дуже ефективно стиснути. Я кажу про CSS і скрипти JavaScript, jQuery). Знайдіть у стовпці «Type» такі типи об’єктів і подивіться, включений для них Gzip.
Якщо не включений для js і ccs, то розміри для них у стовпцях «File Size» та «Transfer Size» будуть однакові. Якщо ввімкнено, то у стовпці «Transfer Size» розмір файлу буде істотно менше. Ну, як вам пощастило? У мене розміри js і ccs були однаковими (наведений вище скріншот був зроблений вже після включення стиснення для них).
Як включити Gzip стиснення для Php, Html і Css через .htaccess
Тому мені довелося ще раз вносити зміни .htaccess для того, щоб Gzip стиснення було включено для js і ccs об’єктів. Правда спочатку, використовуваний мною код дозволив вирішити тільки половину проблеми — Gzip включилося для Css, але для скриптів стиснення раніше не застосовувалося на сервері.
Ось варіант того коду:
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/css
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
До речі, якщо ваш хостер зовсім не включив Gzip навіть для основного документа, то в приведений вище код вам потрібно буде добивати ще одну сходинку в середину:
AddOutputFilterByType DEFLATE text/html
У вас запрацювало? Якщо так, то вітаю з істотним збільшенням швидкості завантаження сайту, а якщо ні, то спробуйте такий варіант, який допоміг мені досягти наведеної вище картинки у вікні Page Speed:
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml, text/javascript text/css «» application/x-javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html
mod_gzip_on Yes
mod_gzip_item_include file \.js$
mod_gzip_item_include file \.css$
Тепер практично все, що можна стиснути, буде архіві на самому сервері, перш ніж бути відправленими у браузери відвідувачів. Цим ви значно збільшите швидкість завантаження сторінок, але в той же час істотно навантажите сервер вашого хостингу (у мене відбулося збільшення відсотків на 50).
Якщо ваші ресурси дозволяють піти на такі жертви, то обов’язково включайте Gzip для прискорення сайту, тим більше, що зробити дуже просто. У наступній статті ми буде розглядати CSS спрайт (sprites).
Удачі вам! До зустрічей на сторінках блогу
