Сучасна верстка без таблиць, відмова від використання інлайнових стилів та стиснення html-сторінок дозволяють досить серйозно зменшити трафік сервера та підвищити швидкість завантаження сайту для користувачів, що працюють на «вузьких» каналах. Виграш у трафіку може становити 60-80% (для HTML)!
Незважаючи на це, все одно залишається низка досить великих файлів, які браузер відвідувача повинен буде завантажити: основний css з версткою (від 10 до 30КБ), javascript-фреймворк (mootools – 70-80КБ, prototype.js – 120КБ тощо). ) Звичайно, ці файли кешуються браузером і вантажаться тільки при першому відвідуванні, але не мені вам пояснювати, наскільки важливо, щоб після переходу з видачі пошукача користувач побачив завантажений сайт якнайшвидше.
Стискати ці файли можна при кожному зверненні, проганяючи через mod_gzip (mod_deflate). Але це неминуче призведе до додаткового навантаження на сервер, яке може виявитися критичним для відвідуваного сайту на недорогому віртуальному хостингу.
Інший спосіб, який і буде розглянутий у цій статті, - зберігати стислі (.gz) файли на сервері поряд з вихідними та за допомогою директив mod_rewrite видавати.js.gz та.css.gz замість.js та.css відповідно. Отже, почнемо.
Спочатку потрібно визначитися, які файли потребують стиснення. Для типового шаблону Joomla!, наприклад, це будуть зазвичай /media/system/js/mootools.js і template_css.css активного шаблону.
Тепер необхідно підготувати стислі версії файлів. Це можна зробити в Windows за допомогою безкоштовного архіватора 7-ZIP, вибравши GZip як формат під час створення архіву. Зауважте: кожен файл в окремому архіві. У консолі UNIX-сервера це можна зробити за допомогою gzip:
gzip mootools.js -c > mootools.js.gzПісля цього потрібно розмістити.js.gz і.css.gz у тих самих директоріях на сервері, де розташовані їх несжаті версії (якщо стиснення робилося в Windows за допомогою 7-Zip).
Якщо.htaccess у корені сайту не існує, створюємо його та додаємо наступні рядки:
Варіант 1
### Асоціюємо розширення.gz з gzip AddEncoding gzip .gz ### Задіємо mod_rewrite RewriteEngine On ### Віддаємо foo.bar.gz замість файлу foo.bar, якщо foo.bar.gz присутній у тій же директорії, ### що і foo.bar. Якщо браузер - Safari, віддаємо foo.bar RewriteCond %( HTTP:Accept-encoding) gzip RewriteCond %( HTTP_USER_AGENT) !Safari RewriteCond %( REQUEST_FILENAME) .gz -f RewriteRule ^(.*) $ $ 1 .gz [ QSA,L]Варіант 2
Однак цей спосіб іноді не працює. Сервер встановлює HTTP-заголовок Content-Type в application/x-gzip і браузери, що визначають тип даних щодо нього (наприклад, Firefox), а не за вмістом (IE) «не бачать» скрипти та css. Щоб вирішити цю проблему, потрібно встановлювати Content-Type в text/javascript або text/css. В цьому випадку треба додати в.htaccess такий код («варіант 1» треба забрати або закоментувати!):
AddEncoding gzip .gz ### 1. Обробка js-файлівВсі, жодних змін більше не потрібно!
Перевірити коректність роботи методу можна у Firefox із встановленим плагіном Live HTTP Headers :
- Очистіть кеш
- Відкрийте віконце плагіна, очистіть балку, переконайтеся, що стоїть галочка навпроти Capture
- Не закриваючи вікна Live HTTP Headers, перезавантажте сайт
- У відповідях сервера на GET-запити для стислих файлів має бути приблизно таке:
Запит браузера
http://сайт/templates/vectora/css/template.css GET /templates/vectora/css/template.css HTTP/1..0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.14) Gecko/20080404 Firefox/2.0.0.14 Accept: text/css,*/*;q=0.1 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-aliveВідповідь сервера
HTTP/1.x 200 OK Server: nginx/0.5.35 Дата: Sat, 19 Apr 2008 18:01:45 GMT Content-Type: text/css Connection: keep-alive Keep-Alive: timeout=20 Last-Modified: Tue, 01 Jan 2008 22:56:51 GMT Etag: "40bc5ff-131d-477ac533" Accept-Ranges: bytes Content-Length: 4893 Content-Encoding: gzip
Історія змін:
- 19.04.2008 - первинна публікація;
- 14.11.2008 - Додавання альтернативного варіанту (FilesMatch);
- 21.03.2009 — виправлено друкарську помилку в прикладі альтернативного варіанту (FilesMatch).
Всім привіт!
Продовжуємо оптимізувати і сьогодні на черзі у нас оптимізація JS (JavaScript) та CSS коду. Нагадаю, вчора ми працювали із зображеннями, якщо Ви все ще не оптимізували їх, то саме для Вас (обов'язково застосуйте те, що там написано).
Урок вийде коротким, тож скоріше почнемо. Погнали!
Що таке JS та CSS код?
В даний час сайт, створений виключно на HTML і CSS, вже є відстаючим, адже цими мовами не можна написати якісь зручні, корисні штуки, які б полегшили взаємодію з ним. Користувачам, у свою чергу, необхідно подати максимально зручний продукт (веб-ресурс). Здійснити цю вимогу допоможуть різні мови програмування, до яких відноситься JavaScript.
JavaScript— мова програмування, що дозволяє створювати різні скрипти (програми), які вбудовуються в HTML-сторінки. Скрипти виконуються у браузері користувача.
Щоб вивести навіть цей горезвісний лічильник часу буде потрібно JS. Так що, гадаю, і на Вашому сайті є дана мова програмування.
CSS- Мова опису зовнішнього вигляду будь-якого елемента сайту. Тобто те, як виглядає Ваш сайт, мій сайт та будь-який інший, написано цією мовою.
Для чого потрібно оптимізувати JS та CSS код?
Завдання цього заходу одне - знизити час завантаження сторінок сайту. На жаль, JS-скрипти і CSS-код часто несуть у собі дуже багато символів, пробілів, чим і уповільнюють завантаження веб-ресурсу. Оптимізація подібних файлів спрямована на те, щоб відсікти зайві символи, зайві прогалини, тим самим знижуючи їх розмір і, як наслідок, полегшуючи завантаження веб-сторінок. По суті, відбувається звичайне стиснення файлу. Можна зробити і глибшу оптимізацію, якщо, звичайно, Ви знаєтеся на програмуванні та сайтобудуванні.
Оптимізація JS та CSS коду
В Інтернеті, як і у випадку з оптимізацією зображень, є кілька онлайн-сервісів, які виконують те, що написано вище:
Ваше завдання: скопіювати код файлу, вставити його в один із перерахованих сервісів, отримати оптимізований код та вставити його у вихідний файл. От і все.
Попереджаю: після оптимізації код стане не читабельним, тому подальша робота з ним трохи утруднена.
Оптимізуючи свій, я спробував обидва сервіси: в перший залив проблемний файл JS, а в другий CSS () і буквально через 5 секунд код оптимізувався і вже можна було заливати, що я зробив.
Варто все ж таки висвітлити найбільш характерні проблеми цього самого стиску та об'єднання.
Почнемо з простого: як JS-стиск здатний зіпсувати нам настрій. І як його підняти назад:)
UPDстартував конкурс прискорення сайтів. У призах монітор, веб-камера, миша. Все гіпер-швидке.
JavaScript-стиск
Взагалі варто відразу згадати, що стиснення JavaScript-файлів дасть нам лише 5-7% зменшення розміру щодо звичайного gzip, який можна використовувати скрізь(Ні, реально, скрізь - починаючи від конфігурації Apache через .htaccess і закінчуючи статичним стисненням через mod_rewrite + mod_mime і конфігурацією nginx (або LightSpeed). Але повернемося до теми топіка: ми хочемо мінімізувати JavaScript-файли, як це найкраще?Два роки тому було проведено огляд поточних інструментів, за цей час ситуація не сильно змінилася (хіба що з'явився Google Compiler). Але все гаразд.
- Почнемо із простого. JSMin (або його клон, JSMin +). Працює дуже універсально (за принципом кінцевих автоматів). Майже завжди мінімізований файл навіть виконується. Додатковий виграш (тут і надалі щодо простого gzip) - до 7% у разі просунутої версії, тобто. зовсім мало. Процесор їсть помірковано (просунута версія, JSMin+ сильніша, і пам'ять значно), але не аналізує область видимості змінних, у зв'язку з чим не вміє скорочувати їхню довжину. В принципі може застосовуватися майже для всіх скриптів, але іноді можливі нюанси. Наприклад, видаляються умовні коментарі (це лікується) чи невірно розпізнаються різні конструкції (наприклад, + + перетворюється на ++ , це ламає логіку), це теж лікується, але складніше.
- YUI Compressor. Найбільш відомий (донедавна ще й найпотужніший) інструмент для стиснення скриптів. Базується на движку Rhino (наскільки відомо, коріння движка десь поряд з фреймворком Dojo, тобто дуже давно). Стисне скрипти відмінно, працює над областю видимості (може зменшувати довжину змінних). Ступінь стиснення - до 8% понад gzip, проте процесор їсть будь здоровий (у зв'язку з використанням віртуальної машини Java), так що з використанням в режимі онлайн варто бути обережним. Також через зменшення довжин змінних можливі різні проблеми (і навіть потенційно більше, ніж для JSMin).
- Google Closure Compiler з'явився нещодавно, але вже здобув довіру громадськості. Базується на тому ж движку Rhino (ага, немає нічого нового під місяцем), але використовує більш просунуті алгоритми зменшення розміру вихідного коду (відмінний огляд у всіх деталях), до 12% щодо gzip. Але тут варто бути втричі обережним: може бути вирізано дуже суттєву частину логіки, особливо при агресивних перетвореннях. Однак для jQuery вже використовується цей інструмент. По процесорним витратам він, певне, набагато важче YUI (даний факт не перевірявся).
- і Packer. Даний інструмент вже йде у минуле у зв'язку з розвитком каналів зв'язку і відставанням процесорних потужностей: бо стиснення в ньому (алгоритм, аналогічний gzip) проводиться за рахунок JavaScript-движка. Це забезпечує дуже значне (до 55% без gzip) зменшення розміру коду, але додаткові витрати до 500-1000 мс на розпакування архіву. Звісно, це стає актуальним, якщо процесорні потужності обмежені (привіт, IE), а швидкість з'єднання дуже висока (+ gzip вже майже скрізь застосовується і підтримується). Додатково, даний метод оптимізації найбільш схильний до різних баг після мінімізації.
Проблеми об'єднання JavaScript-файлів
Після того як ми розібралися зі стисненням JavaScript-файлів, добре було б торкнутися теми їх об'єднання. Середній сайт має 5-10 JavaScript-файлів + кілька вбудованих (inline) шматків коду, які можуть так чи інакше викликати бібліотеки, що підключаються. У результаті - 10-15 шматків коду, які можна об'єднати разом (плюсів від цього море - починаючи від швидкості завантаження на стороні користувача і закінчуючи стійкістю до відмови сервера під DDoS - тут кожне з'єднання буде на рахунку, навіть статичне).Але повернемося до баранів. Тепер ми говоритимемо про деяку автоматизацію об'єднання «сторонніх» скриптів. Якщо ви маєте до них повний доступ (і знаєтеся на веб-розробці), то не становить великого руда пофіксувати проблеми (або виключити ряд проблемних скриптів з об'єднання). В іншому випадку (коли набір скриптів ніяк не хоче об'єднуватися без помилок) нижченаведений підхід саме для вас.
Отже, у нас є 10-15 шматків коду (частина з них у вигляді вбудованого коду, частина у вигляді зовнішніх бібліотек, які ми можемо так само «злити» разом). Нам потрібно гарантувати їхню незалежну працездатність. У чому вона полягає?
Якщо у нас є JavaScript-помилка у файлі, то браузер припиняє виконання цього файлу на помилці (деякі найстародавніші ще й припиняють виконання всіх JavaScript-файлів на сторінці в цьому випадку, але ми не зовсім про це розмовляємо). Відповідно, якщо перша бібліотека, яку ми хочемо об'єднати в спільний файл, видає помилку, то у всіх браузерах у нас клієнтська логіка після об'єднання розвалиться. Сумно.
Додатково варто зазначити, що вбудований (inline) код досить важко налагоджувати. Його можна або виключити з об'єднання (наприклад, розташувавши виклик об'єднаного файлу до або після коду), або при його використанні взагалі скасувати об'єднання файлів.
Зворотня сумістність
Що ми можемо зробити з цим? Найбільш простий шлях: виключати проблемні файли (при цьому помилки можуть виявлятися тільки на етапі об'єднання, окремі файли можуть відпрацьовувати на ура) з логіки об'єднання. Для цього потрібно буде відстежувати, де відбуватиметься помилка, і зібрати конфігурацію для об'єднання для кожного такого випадку.Але можна зробити трохи простіше. Для JavaScript ми можемо скористатися конструкцією try-catch. Ага, думку вловили? Ще немає? Ми можемо весь вміст файлів, які об'єднуємо, укладати в try () , а в catch (e) () викликати підключення зовнішнього файлу приблизно так:
try ( ... вміст JavaScript-бібліотеки... ) catch (e) ( document.write("початковий виклик JavaScript-файлу"); // або console.log("потрібно виключити з об'єднання JavaScript-файл"); )
При цьому у нас у користувача завантажиться один-єдиний файл, якщо жодних проблем не виникло. Якщо ж помилки були, підключаться всі зовнішні проблемні файли в попередньому порядку. Це й забезпечить зворотну сумісність.
Проблеми продуктивності
Очевидно, що цей підхід не є «найправильнішим». Найбільш логічним було б визначити JavaScript-помилки, їх усунути та завантажувати для всіх користувачів один файл. Але не завжди це можливо. Також варто врахувати, що try-catch конструкція важкувата для виконання в браузерах (додає 10-25% на час ініціалізації), варто бути з нею обережним.Але описаний підхід може чудово застосовуватися для налагодження саме об'єднання JavaScript-файлів: адже він дозволяє точно визначати, які файли «сипляться» (якщо файлів кілька десятків, це дуже корисно).
Невелике резюме
Після додаткової мінімізації JavaScript-файлів обов'язково перевіряйте їхню функціональність. А налагодження коректності об'єднання JavaScript-файлів можна легко автоматизувати або навіть налаштувати зворотну сумісність у разі неможливості налагодження конкретних скриптів.Ігор. Оновлено:Листопад 25, 2017 .
Здрастуйте, шановні читачі блогу сайт. Як черговий крок, здатний істотно прискорити ваш сайт, ми розберемо процес gzip стиснення ресурсів, які найчастіше використовуються, які необхідні для коректного відображення сторінок сайту, а саме, файлів стилів (CSS), скриптів (JS) і HTML.
Взагалі найбільш ефективним інструментом для перевірки ступеня оптимізації веб-проектів на сьогоднішній день є технологія Page Speed, яка використовується багатьма профільними веб-ресурсами. Цей засіб пропонує вебмайстрам і сам Google у вигляді спеціалізованого онлайн-сервісу (читайте про нюанси тестування сторінок сайту в Google PageSpeed Insights).
Перш, ніж продовжити читання цієї статті, раджу вам ознайомитися хоча б коротко з тими матеріалами, які розповідають про , формування , про . Адже тільки комплексний підхід дасть вам можливість прискорити свій веб-сайт максимально.
Нехтувати заходами, які дозволять хоч трохи зробити ваш сайт швидше, точно не варто, оскільки пошукові системи приділяють обліку швидкості ресурсів підвищену увагу.
Саме тому навіть виграш у вигляді кількох сотень або навіть десятків мілісекунд, протягом якого відбувається завантаження елементів web-сторінки в браузер, може принести вам суттєві дивіденди у просуванні сайту. А виконання всіх рекомендацій того ж таки Пейдж Спід багаторазово посилить ефект (ще раз закликаю перейти за вказаними вище посиланнями).
Колись раніше в ході оптимізації одного зі своїх проектів я застосовував для тестування той же інструмент PageSpeed, але тоді він пропонувався в тому числі у складі доповнень для Google Chrome та Mozilla, причому для інсталяції останнього треба було попередньо встановити незабутнє розширення Файрбуг ().
До речі, зараз плагіни Пейдж Спід теж доступні, але дещо іншого різновиду, до того ж завантажувати їх потрібно вже не зі спеціальної сторінки гуглівської, як було раніше, а з магазину Google і з офіційного сайту Firefox (залежно від браузера, який ви використовуєте ).
Отже, на черговому етапі оптимізації одного зі своїх ресурсів під час перевірки Page Speed поінформував, що саме виконання gzip стиснення скриптів, файлів стилів та документів HTML є на даний момент пріоритетним (рекомендація знаходилася в червоній зоні):
Тому тоді я і не став відкладати налаштування стиснення в довгу скриньку, а відразу приступив до заходів (докладніше про конкретні кроки дізнаєтеся нижче), які дозволили зрештою отримати значне збільшення швидкості завантаження сторінок, причому проблема відразу перемістилася в розряд вирішених (зелена зона ):
Здійснення gzip стиснення виявилося можливим завдяки активації модуля mod deflate, який можна увімкнути через директиви в конфігураційному файлі.htaccess, що регулює всі процеси щодо сайтів на серверах Apache. Детальніше про все це знову ж таки читайте далі за текстом, а зараз мені хотілося б відзначити, що такий метод буде справно працювати тільки в тому випадку, якщо на хостингу, де "живе" вам веб-сайт, встановлений Апач у чистому вигляді.
Справа в тому, що багато передових провайдерів використовують зв'язку Apache + Nginx, де останній відіграє дуже важливу роль, виконуючи в тому числі функції сервера, що кеширує, і приймаючи на себе основне навантаження. Якщо ваш хостер застосовує саме цей варіант, то всі налаштування (не тільки стиснення, а й, наприклад,) виробляються на Nginx.
Зробити це самостійно більшість власників вебсайтів, розташованих на розділеному віртуальному хостингу просто не в змозі чисто з технічних причин. До речі, у мого нинішнього провайдера Sprinthost () gzip включений через Nginx, тому сторінка сайт успішно пройшла тест на стиск в Пейдж Спід:
Перш, ніж продовжити, хочу дати пораду початківцям вебмайстрам. Якщо компресія на вашому сервері не працює (дізнатися про це ви можете за результатами тестування в Page Speed) і не запустилася після відповідних дій, спрямованих на його активацію, обов'язково зверніться до служби підтримки свого хостингу. Адекватний провайдер обов'язково допоможе вирішення проблем клієнтів у його інтересах.
Як перевірити стиснення сайту онлайн, у тому числі наявність HTTP заголовка Content-Encoding
Як я вже сказав, Google PageSpeed підкаже вам, чи працює стиснення на сторінках вашого ресурсу. Однак, не зайвим буде перевірку іншими засобами, наприклад, за допомогою онлайн сервісів. Довіра викликає ось цей, де вводите URL сторінки, натискаєте кнопку «Test» і за кілька секунд отримуєте відповідь:
В даному випадку видно, що складові сторінки, що тестується, піддані компресії (is compressed), а значить, стиск на сервері для документів HTML включено.
Так само можна перевірити компресію для ресурсів CSS. Наприклад, аналізатор показав ту саму картину щодо головного файлу стилів цього блогу:
Ну і мій об'єднаний скрипт (JS) також виявився підданим компресії:
Є ще один добрий ресурс GTmetrix(введіть урл досліджуваної сторінки і натисніть кнопку «Analyze»), який видає аналітичну інформацію з усіх аспектів веб-сторінки сайту. Після тесту перейдіть у вкладку "Waterfall":
Тут можна вивчити детальніше всі об'єкти, що підвантажуються з веб-сторінкою на наявність компресії. Якщо пам'ятаєте, нашим завданням є забезпечення gzip стиснення HTML, скриптів та файлів стилів. Так ось, у результуючому звіті GTmetrix можна знайти всі ці дані.
Перш за все, потрібно підвести курсор до числа, що виражає розмір файлу в байтах. При включеній компресії з'явиться підказка, в якій буде також відображено розмір стисненого об'єкта. Наприклад, для прикладу на наступному скріншоті зрозуміло, що файл HTML сторінки стиснутий "на льоту" майже вчетверо:
Але це не все. Натисканням на плюсик, розташований поруч із рядком, що відповідає тому чи іншому об'єкту, ви розкриваєте інформацію про відповідь сервера, наявність у якій Content-Encodingзі значенням gzip означає, що компресія увімкнена.
Параметри заголовка Accept-Encoding інформують про те, які способи стиснення підтримує даний браузер (на сьогодні застосування користувачами старих версій web-браузерів, які не підтримують ту чи іншу форму компресії, малоймовірно, але...). Так само перевіряємо файли CSS і JS (скрипти):
Як увімкнути gzip стиснення JS, CSS і HTML в htaccess
Власне, ідея стиснення у форматі gzip та механізм її реалізації гранично прості для загального розуміння. Файли, необхідні для коректного відображення веб-сторінки (стилі CSS, різного роду скрипти, документи HTML), архівуються і передаються в браузер користувача в стислому вигляді. Це значно скорочує час завантаження сторінки. Якщо брати загалом, існують різні види компресії, але в даному випадку gzip найбільш ефективний.
Більшість сучасних веб-браузерів (уже точно) підтримують gzip стиск, тому з цієї сторони жодних проблем немає, про що я сказав трохи вище. Далі ми з вами розберемо два різні методи здійснення компресії: динамічний та статичний.
Перший здійснюється дуже швидко за допомогою директив, прописаних у знаменитому файлі.htaccess, але супроводжується додатковим навантаженням на сервер (), а другий змушує докласти більше зусиль, зате не вимагає додаткових ресурсів хостингу. У кожного з них свої плюси та мінуси, так що ви повинні подумати та вибрати той спосіб, який відповідає вашим пріоритетам.
Динамічний gzip стиск для максимального прискорення сайту
Цей метод включення компресії полягає в архівуванні файлів "на льоту", тобто безпосередньо перед відправкою, і подальшому розархівуванні в браузерах користувачів. Причому в цьому випадку є можливість ефективно стиснути навіть сам HTML документ сторінки, хоча на відміну від файлів CSS і скриптів, при використанні CMS (наприклад, ) він генерується на основі базових шаблонів динамічно.
Стиснення "на льоту" вельми продуктивно, але, оскільки задіює кошти сервера, надає на нього додаткове навантаження. Тому ретельно зважте, чи це підходить вам. У тому сенсі, що, можливо, доведеться перейти на дорожчий тарифний план, щоб укластися в межах використання ресурсів хостингу.
Динамічну компресію будемо включати за допомогою того ж чарівного файлу.
Для початку з'єднайтеся веб-сервером за допомогою FTP, використовуючи якийсь надійний менеджер на кшталт FileZilla (). Файл.htaccess повинен знаходитися в кореневій директорії (public_html або htdocs) вашого сайту:
Якщо він там відсутній, спробуйте перейти з верхнього меню Файлзилла в розділ «Сервер» і вибрати з контекстного меню «Відображати приховані файли». Найчастіше це має допомогти. Але якщо раптом і після того.htaccess не з'явився, ви можете створити його самі.
Оскільки конфігураційний файл знадобиться для вказівки в ньому спеціальних директив, для редагування зручніше використовувати інший корисний софт NotePad++ (). У ньому і створіть новий файл прямо на сервері, обізвавши його «.htaccess» (саме так, з точкою попереду):
Після того, як ви домоглися присутності файлу конфігурації сервера Апач в корені сайту, настав час наповнити (або доповнити) його відповідним кодом.
Для збереження коректної роботи сайту при редагуванні будь-яких файлів важливо робити резервні копії їх вихідних варіантів.
Отже, компресія щодо файлів активується на серверах Apache, за допомогою модуля mod deflate, директиви якого, як ми з'ясували, необхідно вписати в.htaccess:
Присутність «IfModule» у директиві (аналогічно використанню mod expires та mod headers при ) дає можливість перевірити наявність модуля та включити його, якщо він не активований. Це дозволить уникнути непотрібних проблем, пов'язаних із порушенням працездатності ресурсу. Адже якщо модуль не встановлений, то просто не буде ніяких змін, а ось веб-сайт функціонуватиме в колишньому режимі.
Також слід звернути увагу на те, що до складу директив включено модуль mod setenvif, що дає команду віддавати стиснуті версії файлів старим модифікаціям деяких браузерів, які не підтримують gzip. Хоча такими веб-браузерами користується мізерна кількість користувачів, думаю, залишити «mod setenvif» цілком розумно, гірше точно не буде.
Якщо вище запропонований код не спрацює, цілком можливо, що mod deflate спочатку не встановлений на сервері. У такому разі спробуйте ввімкнути mod gzip(практика показує, що або той або інший модуль обов'язково присутній у більшості хостерів на серверах Apache) за допомогою нижче наступної директиви:
Якщо це не дало результату, спробуйте використати універсальний варіант:
Незважаючи на те, що контейнер IfModule виключає появу будь-яких помилок після вставки коду, все ж таки візьміть собі за правило щоразу при редагуванні будь-яких файлів (а не тільки. htaccess) на сервері створювати їх резервні копії і використовувати просунутий редактор на зразок Нотпада ++, якщо не хочете, щоб ваш сайт став недоступним.
Якщо ви навпроти цього пункту поставите галочку, зможете відразу вирішити задачу включення gzip стиснення. Тоді заходи із зазначенням необхідних директив в.htaccess будуть не лише зайвими, а й небажаними. Про це недвозначно йдеться в описі цієї опції (дивіться скріншот вище).
Як увімкнути статичний стиск gzip для скорочення навантаження
Тепер перейдемо до другого варіанту здійснення компресії, який вимагатиме трохи більше зусиль, зате з його допомогою ви можете уникнути навантаження на сервер. Це особливо актуально для тих, хто не горить бажанням переходити на дорожчий тариф.
Ідея даного методу полягає у створенні стислих копій файлів скриптів та документів CSS, а також подальше їх розміщення в кореневій папці разом із несжатими версіями. Тепер у відповідь на запит у браузер будуть передаватися вже стислі файли стилів і JS, а серверу вже не буде потреби віддавати свої ресурси для стиснення.
Щоправда, якщо ви помітили, я нічого не сказав про основний документ HTML. Адже більшість власників використовує для управління своїми сайтами ту чи іншу CMS, наприклад WordPress ().
Тема у складі движка складається з PHP файлів, в результаті взаємодії з якими відбувається генерування сторінки в браузері. Тому ми не можемо попередньо скласти стислу версію HTML у кореневій папці, так що залишаються лише статичні скрипти та CSS файли.
Отже, щоб здійснити статичне gzip стиснення файлів JS та CSS, попередньо потрібно завантажити їх на комп'ютер (знову ж таки Файлзилла вам на допомогу). Для їхнього архівування можна скористатися безкоштовною програмою архіватором 7-zip. Скачайте її і встановіть звичайним чином, труднощів з інсталяцією не повинно бути. До речі, можливо, хтось запропонує альтернативні архіватори у коментарях? Буду тільки радий, це та іншим читачам корисно.
Після встановлення відкриваєте програму і правою кнопкою миші клікаєте за попередньо завантаженим і призначеним для стиснення файлу, потім з контекстного меню вибираєте «7-zip» - «Додати до архіву»:
Після цього з'явиться діалогове вікно, в якому необхідно вибрати формат архіву (gzip) та режим зміни (додати та замінити), решта налаштувань буде встановлена за замовчуванням, як на картинці, нічого міняти не треба:
Після натискання кнопки "ОК" відбудеться упаковка (в даному випадку CSS) і ми отримаємо 2 файли: один оригінальний стиснутий, інший у форматі gzip архіву з розширенням gz.
А тепер будьте уважні, щоби нічого не наплутати. Деякі браузери не сприймають файли з розширенням gz, тому ми видаляємо закінчення gz, скориставшись опцією перейменування файлу. Отримуємо просто style.css, але за фактом він буде архівом gzip.
Далі. Старі версії браузерів не підтримують стиснення gzip, однак деякі користувачі ще використовують їх. Тому до оригінального стиснутого файлу дописуємо nogzip і отримуємо: style.nogzip.css, його ми віддамо браузерам, які не підтримують стиснення. У сумі всіх дій отримуємо два файли стилів CSS у кореневій папці:
Отже, файл style.css (стислий) буде віддаватися браузерам, які підтримують gzip стиснення, а style.nogzip.css (нестиснутий оригінальний) - старим версіям браузерів, які не підтримують архівування. Тепер подібну операцію необхідно зробити для всіх JS або CSS файлів, які підвантажуються разом із веб-сторінками сайту. Щоб статичне gzip стиснення запрацювало, необхідно вставити наступний код у згаданий вже неодноразово файл.htaccess:
Причому, якщо до цього у вас стояв код динамічного gzip стиснення, його потрібно замінити вище зазначеним кодом, інакше нічого працювати не буде. На цьому, мабуть, все, але продовження теми прискорення сайту обов'язково буде, тому не забудьте підписатися на оновлення блогу.
На завершення пропоную подивитися 6-серійний комплекс відеоуроків (куди включено і gzip стиск), присвячений найважливішим аспектам прискорення сайту WordPress та практичної реалізації рекомендацій PageSpeed:
");">
Хочете отримувати своєчасно нові актуальні та корисні статті? Тоді можете передплатити:
Ще статті на цю тему:
37 відгуків
- Андрій
Ігор стаття класна та дуже корисна. Сам зіткнувся із цією проблемою. Хостинг стиснення не підтримує. Вирішив спробувати другий варіант, але зіштовхнувся із запитанням. Стискати CSS тільки теми або всі CSS файли, які я знайшов. Скриптів мало знайшов. Якщо можна уточнити які саме файли працювати.
- Ігор
Андрію, я так розумію, Ви маєте на увазі статичне стиснення? Стискайте файли CSS, які знаходяться в кореневій папці (наприклад, style.css поточної теми Вордпрес). Ну, і звичайно, стискати зовсім маленькі файли немає сенсу, гра не варто свічок.
- Микола
Клас, Супер, вийшло!
Дякую за статтю,дуже допомогла!
Стала в нагоді заключна частина!
Буду рухатися далі, до наступної статті! - Аркадій
спасибі за інформацію.
- Володимир
Як редагувати файл.htaccess?
відкриваю блокнотом, майже всі рядки починаються з #
Вставляти так просто? вставляю, нічого не відбувається, або вилітає помилка у хостингу. - Ігор
Володимире, у Вас є завершальний рядок: #END WordPress? Якщо існує, то вставте код між цим рядком і вище стоїть (який, швидше за все, містить тег закриття /IfModule). Якщо стиснення не запрацює, всі питання до хостер-провайдера. У мене, наприклад, усе працює.
- Vladimir
Дуже об'ємна та корисна стаття. Пробую і так і так і нічого не виходить. Видно справа в хостері. Але все одно дякую.
- Володимир
Хостинг на руцентріТак просто не буває все)
знайшов рішення, у кого така проблема http://forum.nic.ru/showthread.php?t=2389 - Ігор
Так, Володимире, на жаль не всі хостинги підтримують gzip стиск у такому форматі, в цьому недолік цього методу.
- салат
Можна стиснути всі css в один і заштовхати base62.
От цього реально буде толк. - Ірина
ОК! Дякую!
Допоміг код:AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/css BrowserMatch ^Mozilla/4 gzip-only-text/html \bMSIE !no-gzip !gzip-only-text/html
- Ілля
Клас! Клас! Клас!!!
Дякую. Спрацював одразу перший варіант.
Просто дивуюсь - як можна писати такі глибокі статті? Мене б не вистачило =))) - Юрій
ДЯКУЮ!
Спрацювало на обох сайтах.
Сервант Apache, двигун instantcms
Швидкість завантаження до 0,07 стала 0,04. PageSpeed Insights: було 43\100, стало 69\100
Вставив перший код. Інші теж працюють.
У разі надання хостингу не прописано, що це ф-ция есть.
Ще раз дякую - Ігор
Юрій, чесно кажучи, не думав, що позитивний ефект матиме такий великий відсоток користувачів. Здорово!
- Stijit
Спасибі за інформацію. А можна зробити те саме, але плагіном?
- Ігор
Думаю, можна, але не тестував жоден. Такі речі намагаюся робити за допомогою кодів.
- Володимир
Спробував ваші варіанти, але на жаль усі директиви внесені до htacces призводять до помилки 500. Ось дивіться webprofit.kz він працює на nginx. Що запропонуєте мені?
- Ігор Горнов
Володимир, на жаль, стовідсотковий результат виходить не у всіх. Багато залежить від налаштувань конфігурації сервера на вашому хостингу. Якщо нічого не виходить, спробуйте звернутися до служби підтримки Вашого хостинг-провайдера.
- Микита
Скажіть, а що робити, якщо файли JS і CSS знаходяться не в кореневій папці?
У мене стиск налаштований і в усіх онлайн сервісах написано, що gzip увімкнено, але при перевірці в PageSpeed Insights сказано, що стиснення деяких файлів (які знаходяться в папках) не виконано.
Так, Юрію, справді там дещо змінено інтерфейс, правильно, що звернули увагу. Уточнюю посилання на перевірочну сторінку:
http://www.port80software.com/support/p80tools
Там вводите URL свого ресурсу у верхнє поле «Compression Check» і натискаєте кнопку праворуч «Check».
- Юрій
Дуже вдячний за підказку, і ще є питання - перераховані вище способи стиснення застосовні до звичайних HTML сайтів???, - або тільки до тих, хто спирається на WordPress, (перепробував всі наповнення для. )
- Ігор Горнов
Так, хоча, гадаю, простенький HTML сайт і так повинен швидко завантажуватися. Що стосується того, чи варто застосовувати статичне стиснення, все залежить від стану Вашого ресурсу та ступеня його "тиску" на сервер хостингу.
Хоча відразу скажу, що потужного та помітного підвищення швидкості завантаження сайту в результаті лише стиснення Ви не досягнете. Серйозний ефект настає лише після виконання всіх операцій із прискорення в сукупності.
Все-таки операція зі статичного стиску досить нудотна штука, тому залиште її на потім, якщо є резерв. Можливо Ви зможете обійтися без неї, спробуйте інші засоби прискорення сайту.
- Олександр
Добридень!
Вирішив здійснити статичне gzip стиснення файлів JS та CSS згідно з вашою інструкцією. Але зіткнувся із проблемою. Якщо я не видаляю стислий файл розширення.gz, то стилі підвантажуються нормально, але як тільки я видаляю розширення, стилі не підвантажуються. Підкажіть, що я не так роблю? - Ігор Горнов
Олександре, перевірте ще раз, чи все Ви зробили за інструкцією.
- Олександр
Привіт Ігорю! Вийшов із положення, використавши наступний код:
### 1. Обробка js-файлів
ForceType text/javascript Header set Content-Encoding: gzip RewriteEngine On RewriteCond %(HTTP_USER_AGENT) !".*Safari.*" RewriteCond %(HTTP:Accept-Encoding) gzip RewriteCond %(REQUEST_FILENAME).gz -f RewriteRule (.*)\.js$ $1\. L] ForceType text/javascript ### 2. Обробка css-файлівForceType text/css Header set Content-Encoding: gzip RewriteEngine On RewriteCond %(HTTP_USER_AGENT) !".*Safari.*" RewriteCond %(HTTP:Accept-Encoding) gzip RewriteCond %(REQUEST_FILENAME).gz -f RewriteRule (.*)\.css$ $1\. L] ForceType text/css Цей код дозволяє не перейменовувати архів. В результаті в папці два файли зі стилями: style.css та style.css.gz
Дякую! перший код допоміг!
- YaBlogo.su
На shop-script видає помилку 500
У цій статті розглянемо способи стиснення js ( Javascript) файлів для зменшення їх розмірів. Зараз дуже багато веб-ресурсів використовують як сторонні javaскрипти (наприклад, та ж jQuery бібліотека та численні плагіни до неї), так і власної розробки. Стиснення дозволить зменшити розмір сторінки сайту, а відповідно і час його завантаження. Це один із етапів оптимізації, який бажано зробити всім.
Навіть якщо на сервері використовується gzipстиснення, яке безперечно зменшить розмір, не варто нехтувати оптимізацією файлів, так як і на розпакування файлів з архіву потрібен час.
Розглянемо два найбільш поширені та ефективні способи стиснення: YUI Compressor та Google Closure Compiler.
YUI Compressor
Використовує парсер Javascript, написаний мовою java, який називається Rhino.
Патчений Rhinoстискає за рахунок двох основних операцій:
- прибирає зайві пробільні символи та коментарі
- замінює імена локальних змінних на короткі
Офіційний сайт Yahooне надає можливості онлайн стиснення скриптів, але у мережі є сервіс
що надає цю можливість.
Стискатимемо, наприклад, скрипт миготливого тексту:
Var blink_text="Blink Text?" var speed=700 var n=navigator.appName var ns=(n=="Netscape") var ie=(n=="Microsoft Internet Explorer") if (ns)( document.write(" ")) else if (ie)( var verify = 1; document.write("
") blink()) function blink()( if (verify == 1)( document.all.blink.innerText=blink_text; verify=0;) else ( document.all.blink.innerText=""; verify=1 ;) setTimeout("blink()",speed); ) Вставляємо код у текстове поле, вибираємо тип файлу JS(можна стискати, також і CSSфайли) і тиснемо Compress.
В результаті отримаємо:
- Розмір до 489 байт
- Після стиснення 417 байт
- Відсоток стиснення 15%
- Після стиснення та упаковки в gzip 270 байт
- Відсоток стиснення та пакування в gzip 45%
Google Closure Compiler
Даний інструмент від Googleі так само, як і YUIефективно справляється зі своїм завданням. На відміну від YUI Compressorвін має офіційний онлайн сервіс стиснення
Для стиснення використовуємо той самий код. Вставляємо його в текстове поле і тиснемо Compile.
У правій частині вікна отримаємо стислу версію
- Розмір до 439 байт
- Після стиснення 390 байт
- Відсоток стиснення 11,16%
- Після стиснення та пакування в gzip 255 байт
- Відсоток стиснення та пакування в gzip 6,25%
Google Closure Compiler, якщо судити за розмірами файлу після стиснення, 390 байтпроти 417 байту YUI Compressorзменшує ефективніше. Ефективніше (у цьому прикладі) на 6,5 %
Однак дивно, що вихідний розмір скрипта, обидва сервіси визначають по-різному.
Використовувати будь-який сервіс.
Відновлення скрипта у вихідний стан
А щоб ваш стислий jаvascript файл повернути знову в легковиданий вигляд скористаємося онлайн сервісом
