Gzip сціск js / css / html паскарэнне сайта - як уключыць у .htaccess

Надрукаваць · Время на чтение: 9мін · па · Апублікавана · Абноўлены

прайграцьПраслухаць артыкул

Gzip сціск js css html.Вітаю Вас, дарагія чытачы! Сёння мы пагаворым пра Gzip сціск js | css | html, для паскарэння загрузкі сайта. Аб тым, як уключыць яго з дапамогай файла .htaccess. Таксама я раскажу Вам, навошта наогул неабходна ўключаць сціск файлаў на баку сервера.

Гэтая тэма, непасрэдна ставіцца да тэхнічнай аптымізацыі сайта. Дазваляючы дастаткова простымі маніпуляцыямі, значна паскорыць загрузку сайта. А хуткі сайт, гэта значны поспех у пошукавым пасоўванні.

Для чаго трэба ўключэнне Gzip сціску файлаў у .htaccess?

Як уключыць Gzip-сціск старонак на сайце.

Як я ўжо расказваў у многіх сваіх артыкулах! Сайт на пачатковым этапе мае дастаткова вялікую вагу. А тых. аптымізацыя патрэбна менавіта, для памяншэння вагі нашага сайта. Усімі спосабамі нам трэба скараціць аб'ём кода, вага старонак, выяваў і іншага. Агульная задача, аддаваць карыстачу лёгкую і хутка загружаную версію сайта.
Такім чынам, мы аддаём інфармацыю хутка. Пераход паміж старонкамі і раздзеламі праходзіць у долі секунды. Пры гэтым наведвальнікі хутка ўбачаць усе падгружаныя элементы дызайну і іншыя інтэрактыўныя элементы ўзаемадзеяння.

GZIP compression - забяспечвае бесперабойнае архіваванне перадаюцца файлаў. Такім чынам мы атрымліваем сціск без страт якасці зыходніка. Усе дадзеныя прыходзяць у зыходны стан пасля распакавання ўжо ў браўзэры карыстача. Сама рэалізацыя адбываецца дзякуючы некалькім алгарытмам працы. Да іх ставяцца асноўны DEFLATE з выкарыстаннем LZ77 і Хафмана.

Вядома такі від кампрэсіі (сціску) не з'яўляецца ідэальным рашэннем. Але рэалізацыя Gzip прыводзіць нас да раўнавагі паміж хуткасцю і ступенню сціску. Гэты метад з'яўляецца найболей запатрабаваным на фоне іншых спосабаў паскарэння сайта. Тым больш, укараненне больш глабальнага метаду на сервер, зойме процьму часу і тэставанні. І можа не даць патрэбнага выніку! Gzip сціск у гэтым плане, самы надзейны спосаб паскарэння загрузкі файлаў.

Gzip сціск - для якіх фалаў прымальна? На якіх сэрверах працуе?

Насамрэч гзип сціск распаўсюджваецца на вялікі пералік файлаў. Але мае невялікі мінус! Калі карыстач наведвае сайт, серверу неабходна сціскаць на лёце вялікі аб'ём дадзеных. Гэта прыводзіць да вызначанай нагрузкі на сервер. Але не з'яўляецца крытычнай у большасці выпадкаў. Усе падтрымліваемыя фарматы файлаў пасля перадачы, выдатна адлюстроўваюцца ў папулярных браўзэрах.

Да асноўных адносяцца:

  • text/plain text/html;
  • text/xml application/xml application/xhtml+xml application/xml-dtd;
  • application/rdf+xml application/rss+xml application/atom+xml image/svg+xml;
  • text/css text/javascript application/javascript application/x-javascript;
  • font/opentype application/font-otf application/x-font-otf;
  • font/truetype application/font-ttf application/x-font-ttf.
Gzip сціск файлаў выкарыстоўваецца на асноўных серверах Apache і Nginx. Пры наяўнасці дапушчальных модуляў працы і магчымасцяў сервера.

Напрыклад: Nginx - выкарыстоўваецца для статыкі. Добра сціскае і апрацоўвае статычныя файлы. Сціск адбываецца дзякуючы модулям ngx_http_gzip_module і ngx_http_gzip_static_module. Ажыццяўляецца бесперабойны сціск на лёце з падменай асноўнага пашырэння на ".gz".

Прыклад стандартнай канфігурацыі:

gzip on;
gzip_min_length 1000;
gzip_types text/plain application/xml;

Apache - самы запатрабаваны сервер. Вядома і сціск на ім будзе больш маштабным і наладжвальным. Gzip сціск на гэтым серверы ажыццяўляецца з дапамогай модуля mod_deflate. Забяспечваючы сціск на лёце перад адпраўкай у браўзэр карыстальніка.

Прыклад стандартнай канфігурацыі:

# Enable GZIP – уключэнне сціску
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

# Сціск павольным алгарытмам, для памяншэння нагрузкі на сервер.

RewriteEngine On
AddEncoding gzip .gz
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.*)$ $1.gz [QSA,L]

PHP - менш запатрабаваны варыянт. Але таксама мае магчымасць арганізацыі сціску з дапамогай модуля zlib. Гэты метад не рэкамендуецца, бо з'яўляецца вельмі павольным.

Прыклад стандартнай канфігурацыі:

$originalFile = __DIR__ . '/jquery-1.11.0.min.js';
$gzipFile = __DIR__ . '/jquery-1.11.0.min.js.gz';

$originalData = file_get_contents($originalFile);

$gzipData = gzencode($originalData, 9);
file_put_contents($gzipFile, $gzipData);

var_dump(filesize($originalFile)); // int(96380)
var_dump(filesize($gzipFile)); // int(33305)

Вядома выкарыстанне сервераў Apache+Nginx+PHP магчыма і разам. Такім чынам будзе забяспечана вызначанае размеркаванне нагрузкі паміж серверамі. Але гэта вельмі складаная задача, якой не варта займацца простым карыстальнікам.

Свой сервер я наладжваў сам, выкарыстаючы ўсе асноўныя перавагі Apache/Nginx/PHP. Такім чынам Nginx апрацоўвае статыку, астатнім займаецца Apache з PHP. Вынік атрымаўся вельмі станоўчы. Але чакай на арганізацыю гэтага метаду было выдаткавана нямала.

Як уключыць Gzip сціск у файле .htaccess

Насамрэч, зрабіць гэта не складана. Тым больш я ўжо расказваў пра гэты файл.

Асноўныя правілы застаюцца ранейшымі:

  1. Абавязкова захоўвайце арыгінал .htaccess файла перад рэдагаваннем. У выпадку памылкі 500, будзе чым аднавіць.
  2. Не павінна быць пропускаў паміж радкамі.
  3. Усе каментары пішам пасля знака #.
  4. Абавязкова правяраем код на цэласнасць пасля ўстаўкі.

Вышэй ужо былі пазначаны некалькі прыкладаў стандартнай канфігурацыі правілаў для .htaccess. Але на мой погляд гэтага не дастаткова, таму я прывяду ўласны прыклад. Гэты набор правілаў працуе на гэтым сайце, праблем як бачыце не.

Пры гэтым сціск адбываецца на лета, сайт падгружаецца хутка без тармазоў. Вам толькі застанецца ўставіць гэты код у свой файл .htaccess. Калі ў Вас свой сэрвер, то думаю ўсё самі ведаеце.

Для асноўнай аўдыторыі інструкцыя да прымянення:

  1. Заходзім на сервер любым папулярным ftp кліентам;
  2. Пераходзім у корань сайта (дырэкторыю);
  3. Файл .htaccess знаходзіцца ў асноўнай дырэкторыі сайта;
  4. Адкрываем яго тэкставым рэдактарам, увогуле лепш Sublime Text 3;
  5. Далей у самым канцы файла ўстаўляемы код, які будзе паказаны ніжэй.
  6. Пераканаўчая просьба правяраць код, бо на сайце прысутнічае абарона ад капіявання (у канцы кода можа быць спасылка на сайт).

# Enable GZIP
ifmodule mod_deflate.c абавязкова заключаем у дужкі "<>"
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/text
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE image/gif
AddOutputFilterByType DEFLATE image/jpeg
AddOutputFilterByType DEFLATE image/jpg
AddOutputFilterByType DEFLATE image/png
AddOutputFilterByType DEFLATE image/gif
AddOutputFilterByType DEFLATE image/flv
AddOutputFilterByType DEFLATE image/ico
AddOutputFilterByType DEFLATE image/swf
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/json
AddOutputFilterByType DEFLATE video/3gpp
AddOutputFilterByType DEFLATE video/3gpp2
AddOutputFilterByType DEFLATE video/x-flv
AddOutputFilterByType DEFLATE video/jpm
AddOutputFilterByType DEFLATE video/jpeg
AddOutputFilterByType DEFLATE video/x-m4v
AddOutputFilterByType DEFLATE video/mp4
AddOutputFilterByType DEFLATE video/ogg
AddOutputFilterByType DEFLATE video/webm
AddOutputFilterByType DEFLATE video/quicktime
AddOutputFilterByType DEFLATE audio/x-mpegurl
AddOutputFilterByType DEFLATE audio/midi
AddOutputFilterByType DEFLATE audio/mp3
AddOutputFilterByType DEFLATE audio/mp4
AddOutputFilterByType DEFLATE audio/mpeg
AddOutputFilterByType DEFLATE audio/webm
AddOutputFilterByType DEFLATE audio/basic
AddOutputFilterByType DEFLATE audio/x-wav
AddOutputFilterByType DEFLATE audio/wav
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html
ifmodule mod_gzip.c абавязкова заключаем у дужкі "<>"
mod_gzip_on Yes
mod_gzip_item_include file \.js$
mod_gzip_item_include file \.css$
/ifmodule абавязкова заключаем у дужкі “<>”
/ifmodule абавязкова заключаем у дужкі “<>”

Калі не заключыць абавязковыя элементы ў дужкі атрымаеце памылку. Ваш сайт проста перастане працаваць і выдасць памылку 500 internal server error. Тэкст "абавязкова заключаем у дужкі "<>"", таксама трэба выдаліць з кода. Пасля гэтага трэба захаваць файл .htaccess.

Пажадана таксама перазагрузіць сервер для дакладнага прымянення новых правіл. Пасля ўсіх гэтых дзеянняў, Ваш сайт будзе працаваць значна хутчэй. Хуткасць загрузкі старонак павялічыцца ў разы.

Праверка хуткасці загрузкі сайта і сціску Gzip

Пасля таго, як мы ўключылі сціск на баку сервера. Можна праверыць поспех праведзенай працы! Зрабіць гэта, можна некалькімі папулярнымі анлайн інструментамі. Давайце разгледзім іх:

PageSpeed Insights - асноўны і самы папулярны онлайн інструмент для праверкі сайта. Пасля апошніх змен у 2018 годзе кампаніяй Google. Дае шырокі пералік дадзеных, для дэталёвага аналізу сайта.

Больш падрабязна аб PageSpeed ​​Insights.

Што можа:

  1. Агульная ацэнка хуткасці сайта;
  2. Указвае час загрузкі кантэнту;
  3. Агульны індэкс хуткасці і час да ўзаемадзеяння;
  4. Дае рэкамендацыі па аптымізацыі;
  5. Паказвае падрабязную інфармацыю аб прадукцыйнасці;
  6. Паказвае на наяўнасць або адсутнасць уключанага Gzip сціску;
  7. Паказвае на наяўнасць або адсутнасць уключанага хэшавання;
  8. Дае вялікі аб'ём інфармацыі для выпраўлення памылак.

PageSpeed дапаможа Вам, выправіць мноства праблем звязаных з хуткасцю сайта. Дзякуючы гэтай прыладзе выпраўлена шмат памылак майго сайта.

Pingdom Tools - таксама адзін з папулярных анлайн інструментаў аналізу сайта. Дае дастаткова падрабязную інфармацыю па мностве крытэрыяў ацэнкі сайта. Можна лёгка выявіць, што менавіта запавольвае загрузку.

Pingdom tools што гэта?

Што дасць Вам:

  1. Ацэнку агульнай прадукцыйнасці сайта;
  2. Колькасць запытаў да базы даных сайта;
  3. Хуткасць загрузкі старонкі;
  4. Памер змесціва па тыпе кантэнту;
  5. Адказы сервера 200/301/302/404/503 і іншыя;
  6. Агульныя запыты па даменах;
  7. Графічнае ўяўленне сітуацыі і іншае;

Выдае масу інфармацыі па хуткасці сайта. Але не дае падрабязных інструкцый як Google.

Даданыя модулі GZIP compression для WordPress

Як не дзіўна, але ўладальнікам сайтаў на CMS WordPress асоба затлумляцца не трэба. Прычына гэтаму, разнастайнасць убудоў для ўключэння кампрэсіі на сайце. Усё што неабходна зрабіць, гэта ўсталяваць упадабаную ўбудову. Затым актываваць і ўключыць у наладзе плагіна сціск. Далей ён сам зробіць усю працу за вас. Я апішу пару самых папулярных.

PageSpeed Ninja - Гэта найлепшы плягін прадукцыйнасці для WordPress. Вы зможаце зрабіць свае сайты хуткімі на дэсктопах і мабільных прыладах, у адзін клік выправіўшы праблемы знойдзеныя Google PageSpeed Insights. Дазваляе хутка ўключыць сціск на сайце.

Павысьце ацэнку Google PageSpeed ​​​ у Wordpress.

WP Fastest Cache - таксама адзін з найпапулярных убудоў хэшавання. Мае велізарную колькасць згрупаваных налад, адна з якіх уключае сціск.

WP Fastest Cache - Убудова для WordPress.

Comet Cache - гэтым убудовай я сам карыстаюся. Бо ў сукупнасці з астатнімі плягінамі, ён дае выдатны вынік. Таксама адна з яго настоек уключае gzip сціск.

Comet Cache стварае кэш кожнай старонкі.

Наогул усе асноўныя кэшуюць убудовы для Wordpress, дазваляюць уключыць GZIP compression на сайце. Я рэкамендую менавіта паўнавартасныя шматфункцыянальныя плагіны, для найменшай нагрузкі.

У заключэнне скажу наступнае: абавязкова ўключайце сціск. Гэта вельмі добра паўплывае на прадукцыйнасць і падніме сайт у пошуку. Спадзяюся гэты артыкул дапаможа Вам у гэтым.

Дзякуй, што чытаеш Nicola Top

Наколькі публікацыя карысная?

Націсніце на смайлік, каб ацаніць!

Сярэдняя адзнака 5 / 5. Колькасць адзнак: 52

Ацэнак пакуль няма. Пастаўце адзнаку першым.

Вам таксама можа спадабацца...

1 адказ

  1. Илья кажа:

    Адразу скапіяваў і ўставіў код, выклікала памылку 500. Цяпер разумею што трэба чытаць уважліва. Гляджу ў цябе яшчэ і абарона ад капіявання варта. А так дзякуй кантэнт прыдатны і працоўны.

Пакінуць адказ

Ваш адрас электроннай пошты не будзе апублікаваны. Неабходныя палі пазначаны як *

16 − адзінаццаць =