GZip стиснення CSS та JS файлів без додаткового навантаження на - хостинг

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

Але незважаючи на те, що div`на верстка дозволила зменшити “тяжкість” сайтів, вантажитися швидше вони не стали. У чому причина?

Зі зростанням швидкостей інтернету у кінцевих користувачів більшість вебмайстрів почали обвішувати свої сайти різними JS-красивостями: Greygox, Fancybox, красивими галереями та іншими речами. Це все круто і красиво, але це суттєво зменшує швидкість завантаження сайту, роблячи його важчим.

GZip-стиснення js-файлів – це та золота середина, яка може полегшити страждання вашого відвідувача.

Навіщо GZip стиснення CSS і JS файлів?

З кожним днем в інтернеті з'являється безліч сайтів, а це безпосередні конкуренти, які прагнуть відвоювати собі місце під сонцем, змістивши ваш сайт на нижні позиції.

Напевно, ніхто не сперечатиметься, що успіх компанії з просування сайту в пошукових системах залежить не тільки від кількості посилань на ваш сайт та їх якості. Насамперед будь-який фахівець з просування звертає увагу на внутрішню оптимізацію сайту, яка визначає легкість успіху у просуванні. Швидкість відгуку вашого сайту та швидкість виведення інформації – це не остання справа у внутрішній оптимізації. Про це вже заявив Google і не приховує Yandex, тому не варто нехтувати цим.

Наприклад, усім відома бібліотека jQuery, що підключається практично на кожному сайті, важить приблизно 90 Кб. Стиснена GZip`ом вона займатиме близько 30 Кб. Погодьтеся, що це не мало. Якщо врахувати, щоКрім jQuery у Вас підключені ще кілька сторонніх JS-файлів, то це точно займає половину всієї ваги сторінки, що завантажується. А в деяких випадках ще більше. Можете перевірити працездатність цього на денвері. Я впевнений, що ви відчуєте навіть на ньому різницю у швидкості роботи.

Як це працює?

Кожен браузер, аж до мобільних, вже давно навчився обробляти GZip стиснення, тому з боку клієнта жодних проблем не повинно виникнути.

У методі описаному тут пропонується створити 2 версії JS-файлу:.js і.js.gz. Наприклад, для jquery.js ці два файли будутьjquery.js іjquery.js.gz. Після того, як мій браузер запросить jquery.js, сервер видасть йому jquery.js.gz. Те саме робимо і для CSS.

Це легко реалізувати такою чудовою штукою, якhtaccess.

Організовуємо GZip стиснення CSS та JS файлів

Для того щоб впровадити у себе на сайті цю “технологію”, необхідно:

створити в тій самій директорії, де лежить js-скрипт і css-файл заархівовану копію методом GZip. Цим методом архівує практично будь-який сучасний архіватор. Найголовніше, щоб розширення файлів стало.js.gz та.css.gz відповідно.
додаємо в кінець файлу.htaccess перенаправлення на стислі версії. Цей файл завжди лежить у корені вашого сайту. Якщо у Вас немає цього файлу, просто створіть новий текстовий файл з ім'ям .htaccess і додайте в нього цей код:

Цей шматок коду при запиті будь-якого js- або css-файлу перенаправляє на файл з таким самим ім'ям у цій директорії, але з іншим розширенням. Тому змінювати у ньому нічого не потрібно.

Як перевірити працездатність стиснення CSS та JS?

Перевірити можна плагіном Live HTTP Headers дляFirefox. Відкриваємо вікно плагіна Live HTTP Headers та переходимо на піддослідний сайт.

Якщо у відповідях сервера на запити JS- і CSS-файли ми бачимо фразуContent-Encoding: gzip, це означає, що це працює оскільки нам це потрібно. Думаю, що докладніше на перевірці не варто зупинятися, бо там все зрозуміло.

Безперечних плюсів у цього методу два:

Перший – це скорочує майже вдвічі вагу кожної сторінки вашого сайту.
Друге - це жодним чином не відбирає продуктивності у вашого хостингу, так як не відбувається ніякого стиснення нальоту.

З мінусів можна виділити лише складність того, що необхідно після кожної зміни в CSS-коді та JS створювати архівовану версію. Це не складно, але ризик просто забути це зробити.

Коментарі:

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

Все залежить від відвідуваності

У мене дивна ситуація спостерігається з цим gzip стиском. Онлайн сервіси перевірки на стиск показують, що воно працює, але коли перевіряю за допомогою http://pagespeed.googlelabs.com/pagespeed/ та різних аддонів для браузерів, то чітко видно, що деякі файли (не всі) не стискаються.

danc1r0k: деякі файли (не всі) не стискаються…

Правильно, для файлів менше 5кб стиснення не застосовується & for

Підкажіть мені будь ласка, а чи можна використовувати стиск для PHP сторінок?

добрий час доби! А як це можна організувати в joomla 2.5? А то в мене видає помилку 500

З Joomla не працював

Дякую, цікаво. А мені ось таке рішення на думку прийшло нещодавно – http://plutov.by/post/js_css_auto_compress

Хотів би тему смаколиків, які хочеться додати на сайт. додати до них деякі js сервіси. які буває необхідно повідомити …. наприклад яндекс метрика чи google adsense …. і як бути у цьому випадку? особливо, якщо врахувати, що вони можуть сильно навантажувати на стороні клієнта …. якщо їх багато.