Gzip стиснення для прискорення завантаження сайту

Gzip стиснення для прискорення завантаження сайту - як його включити для Js, Html і Css за допомогою файлу .htaccess

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

Чи варто включати Gzip для прискорення сайту

Істотний внесок в збільшення швидкості внесло стиснення CSS через Page Speed. кешування статичних об'єктів (картинок, скриптів, CSS файлів) на стороні клієнта (в браузерах відвідувачів), а так само дуже ефективним виявилося включення Gzip стиснення на WEB сервері хостингу.

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

У першій статті я наводив приклади коду для .htaccess, що дозволяє оптимізувати кешування картинок, скриптів і CSS файлів в браузерах відвідувачів. У цьому випадку, як ви пам'ятаєте, при повторному заході відвідувача на ваш сайт всі ці статичні об'єкти (зображення, скрипти і CSS) вже не будуть заново довантажувати з вашого сервера, а будуть братися з кеша браузера користувача.

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

Так ось, до чого я це все говорю - у мене так і не запрацювало кешування скриптів за допомогою використання наведених в тій статті кодів. Але зараз я використовую нову версію коду для .htaccess і при цьому все чудово працює:

Загалом, в плані Browser caching я зробив все, для того щоб по максимуму збільшити швидкість підвантаження сторінок. Тепер пора переходити до ще одного дуже ефективному і щодо простого способу прискорення - Gzip стиснення.

Вам буде потрібно лише прописати маленький шматочок коду в .htaccess і станеться диво - різко зменшиться загальний розмір даних, переданих Web сервером хостингу, де розміщений ваш проект в браузери відвідувачів.

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

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

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

Я вже писав досить докладно про деякі способи оптимізації WordPress, для зниження його навантаження:

На моєму хостингу вже входить Gzip, але, на жаль, не для всіх об'єктів, які добре піддаються стисненню, а включено було тільки для документів (html файлів). У той час, як CSS і скрипти передавалися з web сервера в браузери користувачів не стислими, хоча вони дуже ефективно архівуються (в кілька разів зменшуючи свою вагу).

Як перевірити роботу стиснення на льоту в Page Speed

В принципі, всі деталі Gzip можна дуже чітко відстежити в Page Speed, але так само є онлайн сервіси, які здатні дати вам інформацію про те, чи включена ця архівація чи ні. Наприклад, можете скористатися цим або цим онлайн сервісом для перевірки включення стиснення на вашому сервері.

Працювати з ними просто - введіть Урл вашого проекту в наведену форму і натисніть Enter.

Як бачите, сервера nginx мого хостингу вдалося за допомогою Compressed (gzip) зменшити розмір основного завантажується в браузери користувачів документа (Html) в п'ять разів. Здорово, чи не так? Це істотно здатне збільшити загальну швидкість завантаження сайту.

Але вердикт про те, що воно у вас включено, ще не означає, що ви отримуєте максиму ефекту від цього в плані збільшення швидкості роботи. Тут вам допоможе Page Speed ​​і зараз я розповім про те, як перевірити ефективність роботи стиснення саме на вашому сервері через цей плагін. Насправді все просто до не можна.

Отже, активуємо вже добре знайомий нам прискорювач Пейдж Спід, відкриваємо в браузері будь-яку сторінку свого ресурсу і переходимо на вкладку «Resources»:

Тут ви побачите список всіх файлів, які завантажуються в браузер з сервера із зазначенням їх урлов (найпершим йде Html). Ви, напевно, пам'ятаєте, що незважаючи на те, що багато CMS (движки сайтів) працюють на PHP, в браузер користувачів все одно віддається згенерувала версія сторінки в форматі Html.

Але головне не це, а те, що розташоване в цьому вікні праворуч від списку завантажуються з сервера об'єктів. Там, в двох останніх стовпчиках під назвою «File Size» (реальний розмір на сервері) і «Transfer Size» (розмір об'єкта, переданого в браузер), наведені ваги цих завантажуються з сервера в браузер об'єктів.

Подивіться на перший рядок вкладки «Resources», навпроти якої в стовпці «Type» стоїть «doc» (на наведеному нижче скріншоті виділено синім). Якщо в стовпці «Transfer Size» для першого рядка (основного документа) розмір буде менше, ніж в стовпці «File Size», то значить Gzip на вашому веб-сервера включено і успішно працює.

Зверніть увагу, що розмір стисненого об'єкта буде істотно менше розміру оригіналу.

Якщо не включений для js і ccs, то розміри для них в шпальтах «File Size» і «Transfer Size» будуть однакові. Якщо включений, то в стовпці «Transfer Size» розмір файлу буде істотно менше. Ну, як вам, пощастило? У мене розміри js і ccs були однаковими (наведений вище скріншот був зроблений вже після включення стиснення для них).

Як включити Gzip стиснення для Js, Html і Css через .htaccess

Тому мені довелося ще раз вносити зміни в .htaccess для того, щоб Gzip стиснення було включено для js і ccs об'єктів. Правда спочатку, використовуваний мною код дозволив вирішити тільки половину проблеми - Gzip включилося для Css, але для скриптів стиснення і раніше не застосовувалося на сервері.

Ось варіант того коду:

До речі, якщо ваш хостер зовсім не включив Gzip навіть для основного файлу документа, то в наведений вище код вам потрібно буде добивати ще одну сходинку в середину:

У вас запрацювало? Якщо так, то вітаю з істотним збільшенням швидкості завантаження сайту, а якщо немає, то спробуйте такий варіант, який допоміг мені добитися наведеної вище картинки у вікні Page Speed:

Тепер практично всі, що можна стиснути, архівуватиметься на самому сервері, перш ніж бути відправленими в браузери відвідувачів. Цим ви істотно збільшите швидкість підвантаження сторінок, але в той же час істотно навантажите сервер вашого хостингу (у мене відбулося збільшення відсотків на 50).

Якщо ваші ресурси дозволяють піти на такі жертви, то обов'язково включайте Gzip для прискорення сайту, тим більше, що зробити дуже просто. У наступній статті ми розглядатиме CSS спрайт (sprites).

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

akkadites: так, спасибі за зауваження, дійсно не вистачало / ifmodule в наведеному на початку статті коді оптимізації кешування в браузерах. З приводу першої частини вашого запитання - наведені вами рядки коду для .htaccess дозволяють налаштувати коректну роботу GZIP-стиснення в старих версіях браузерів, як я це розумію.

Пробував всі варіанти коду але стиснення як не було так і немає, в усякому разі так видає 500 помилку.

При використанні коду видає помилку 500. Повністю очищав .htaccess, все одно видає помилку. Що робити?

При першому варіанті не працює, а при другому теж видає помилку 500. Подзвонив хостера, просив збільшити ресурс для сервера, а мені сказали, що mod_deflate у них не підтримується (хостинг RU-CENTER). І що ж робити?

ППЦ! Встановив код в файл .htaccess для gzip-стиснення на льоту і. сайт взагалі ліг 🙁 Ні вантажиться взагалі. браузер пише, що проблеми із з'єднанням.

Підкажіть, в чому проблема? Напевно все через мого хостера omp9.com