Gzip қысу js / css / html сайтын жеделдету - .htaccess жүйесінде қалай қосуға болады

басып шығару · Время на чтение: 9мин · бойынша · Жарияланды · Жаңартылған

көбейтуМақаланы тыңдаңыз

Gzip қысу JS css html.Сәлеметсіздер ме, құрметті оқырмандар! Бүгін біз туралы сөйлесетін боламыз gzip js қысу | css | htmlсайтты жүктеуді жылдамдату үшін. Оны .htaccess файлымен қалай қосуға болады. Сондай-ақ мен сізге неліктен сервер жағында файлды қысуды қосу керек екенін айтамын.

Бұл тақырып техникалық тақырыпқа тікелей қатысты сайтты оңтайландыру. Қарапайым манипуляцияларға мүмкіндік беру арқылы айтарлықтай веб-сайтты жүктеуді жылдамдату. Жылдам сайт - бұл іздеу жүйесін жылжытудағы маңызды жетістік.

.htaccess ішінде Gzip файлын қысуды қосудың мақсаты қандай?

Сайттағы беттердің Gzip қысылуын қалай қосуға болады.

Мен көптеген мақалаларымда айтқанымдай! Бастапқы кезеңде сайт айтарлықтай үлкен салмаққа ие. Және сол. үшін оңтайландыру қажет сайтымыздың салмағын азайтыңыз. Қалай болғанда да, біз кодтың көлемін, беттердің салмағын, суреттерді және басқаларды азайтуымыз керек. Жалпы міндет - пайдаланушыға сайттың жеңіл және жылдам жүктелетін нұсқасын беру.
Осылайша біз ақпаратты жылдам береміз. Беттер мен бөлімдер арасындағы ауысу секундтың бір бөлігінде орын алады. Сонымен қатар, келушілер барлық жүктелген дизайн элементтерін және өзара әрекеттесудің басқа интерактивті элементтерін жылдам көреді.

GZIP қысу - тасымалданатын файлдарды үзіліссіз мұрағаттауды қамтамасыз етеді. Осылайша, біз көз сапасының шығынсыз қысылуын аламыз. Барлық деректер пайдаланушының браузерінде орамнан шығарылғаннан кейін бастапқы күйіне келеді. Іске асырудың өзі бірнеше жұмыс алгоритмдеріне байланысты. Оларға LZ77 және Huffman көмегімен негізгі DEFLATE кіреді.

Әрине, мұндай қысу (сығу) идеалды шешім емес. Бірақ Gzip енгізу бізді жылдамдық пен қысу арақатынасы арасындағы тепе-теңдікке әкеледі. Бұл әдіс сайтты жылдамдатудың басқа әдістерінің арасында ең танымал. Сонымен қатар, серверде жаһандық әдісті енгізу көп уақыт пен тестілеуді қажет етеді. Және бұл қалаған нәтиже бермеуі мүмкін! Осыған байланысты Gzip қысу файлдарды жүктеуді жылдамдатудың ең сенімді жолы болып табылады.

Gzip қысу - қандай файлдар үшін қолайлы? Ол қандай серверлерде жұмыс істейді?

Іс жүзінде gzip қысу файлдардың үлкен тізімін қамтиды. Бірақ оның кішкене кемшілігі бар! Пайдаланушы сайтқа кірген кезде сервер деректердің үлкен көлемін жылдам қысуы керек. Бұл серверде белгілі бір жүктемеге әкеледі. Бірақ бұл көп жағдайда маңызды емес. Тасымалдан кейін барлық қолдау көрсетілетін файл пішімдері танымал браузерлерде тамаша көрсетіледі.

Олардың негізгілеріне мыналар жатады:

  • мәтін/ашық мәтін/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 қолданбасы/javascript қолданбасы/x-javascript;
  • font/openttype application/font-otf application/x-font-otf;
  • font/truetype қолданбасы/font-ttf қолданбасы/x-font-ttf.
Gzip файлын қысу негізгі Apache және Nginx серверлерінде қолданылады. Жарамды жұмыс модульдерімен және сервер мүмкіндіктерімен.

Мысалы: Nginx - статикалық үшін қолданылады. Ол статикалық файлдарды жақсы қысады және өңдейді. Қысу ngx_http_gzip_module және ngx_http_gzip_static_module модульдерінің арқасында орын алады. Үздіксіз сығымдау негізгі кеңейтімді «.gz» ауыстыру арқылы жүзеге асырылады.

Стандартты конфигурацияның мысалы:

gzip қосулы;
gzip_min_length 1000;
gzip_types мәтін/қарапайым қолданба/xml;

Apache - ең көп сұралатын сервер. Әрине, ондағы қысу өршіл және теңшелетін болады. Бұл сервердегі Gzip қысу mod_deflate модулі арқылы орындалады. Пайдаланушының браузеріне жіберілмес бұрын қысуды қамтамасыз ету арқылы.

Стандартты конфигурацияның мысалы:

# GZIP қосу - қысуды қосу
AddOutputFilterByType DEFLATE мәтін/қарапайым
AddOutputFilterByType DEFLATE мәтін/html
AddOutputFilterByType DEFLATE мәтін/xml
AddOutputFilterByType DEFLATE мәтін/css
AddOutputFilterByType DEFLATE қолданбасы/xml
AddOutputFilterByType DEFLATE қолданбасы/xhtml+xml
AddOutputFilterByType DEFLATE қолданбасы/rss+xml
AddOutputFilterByType DEFLATE қолданбасы/javascript
AddOutputFilterByType DEFLATE қолданбасы/x-javascript

# Сервердегі жүктемені азайту үшін баяу алгоритмі бар қысу.

RewriteEngine On
AddEncoding gzip .gz
RewriteCond %{HTTP:Қабылдау-кодтау} gzip
RewriteCond %{REQUEST_FILENAME}.gz -f
Қайта жазу ережесі ^(.*)$ $1.gz [QSA,L]

PHP - аз танымал нұсқа. Бірақ оның zlib модулі арқылы қысуды ұйымдастыру мүмкіндігі де бар. Бұл әдіс ұсынылмайды, өйткені ол өте баяу.

Стандартты конфигурацияның мысалы:

1TP29Түпнұсқа файл = __DIR__ . '/jquery-1.11.0.min.js';
$gzipFile = __DIR__ . '/jquery-1.11.0.min.js.gz';

1TP29OriginalData = file_get_contents(1TP29OriginalFile);

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

var_dump(файл өлшемі($originalFile)); // int(96380)
var_dump(файл өлшемі($gzipFile)); // int(33305)

Әрине, Apache + Nginx + PHP серверлерін бірге пайдалану да мүмкін. Осылайша, серверлер арасында белгілі бір жүктемені бөлу қамтамасыз етіледі. Бірақ бұл өте қиын тапсырма, оны қарапайым пайдаланушылар жасамауы керек.

Мен Apache/Nginx/PHP барлық негізгі артықшылықтарын пайдалана отырып, серверімді өзім конфигурацияладым. Осылайша, Nginx статиканы өңдейді, Apache қалғанын PHP арқылы өңдейді. Нәтиже өте оң. Бірақ бұл әдісті ұйымдастыруға көп уақыт жұмсалды.

.htaccess файлында Gzip қысуды қалай қосуға болады

Шындығында, мұны істеу қиын емес. Оның үстіне, мен бұл файл туралы айттым.

Негізгі ережелер өзгеріссіз қалады:

  1. Өңдеу алдында түпнұсқа .htaccess файлын сақтауды ұмытпаңыз. 500 қатесі болған жағдайда, қалпына келтіруге болатын нәрсе болады.
  2. Жолдар арасында бос орындар болмауы керек.
  3. Біз барлық пікірлерді # белгісінен кейін жазамыз.
  4. Енгізгеннен кейін кодтың тұтастығын тексеруді ұмытпаңыз.

Стандартты .htaccess ережелер конфигурациясының бірнеше мысалдары жоғарыда айтылған. Бірақ менің ойымша, бұл жеткіліксіз, сондықтан мен өз мысалымды келтіремін. Бұл ережелер жинағы осы сайтта жұмыс істейді, сіз көріп отырғандай, ешқандай проблемалар жоқ.

Бұл ретте қысу жылдам жүреді, сайт тежегішсіз тез жүктеледі. Бұл кодты .htaccess файлыңызға қою жеткілікті. Егер сіздің жеке серверіңіз болса, онда сіз бәрін өзіңіз білесіз деп ойлаймын.

Негізгі аудитория үшін пайдалану нұсқаулары:

  1. Біз кез келген танымал ftp клиентімен серверге барамыз;
  2. Сайттың түбіріне өтіңіз (каталог);
  3. .htaccess файлы сайттың негізгі каталогында орналасқан;
  4. Біз оны мәтіндік редактормен ашамыз, жалпы Sublime Text 3 жақсырақ;
  5. Әрі қарай, файлдың ең соңында төменде көрсетілетін кодты қойыңыз.
  6. Сізден кодты тексеруді сұраймыз, өйткені сайтта көшіруден қорғау бар (кодтың соңында сайтқа сілтеме болуы мүмкін).

# GZIP қосу
ifmodule mod_deflate.c «<>» жақшаға алынуы керек
AddOutputFilterByType DEFLATE мәтін/қарапайым
AddOutputFilterByType DEFLATE мәтін/мәтін
AddOutputFilterByType DEFLATE мәтін/html
AddOutputFilterByType DEFLATE мәтін/қарапайым
AddOutputFilterByType DEFLATE мәтін/xml
AddOutputFilterByType DEFLATE мәтін/css
AddOutputFilterByType DEFLATE сурет/gif
AddOutputFilterByType DEFLATE сурет/jpeg
AddOutputFilterByType DEFLATE сурет/jpg
AddOutputFilterByType DEFLATE сурет/png
AddOutputFilterByType DEFLATE сурет/gif
AddOutputFilterByType DEFLATE сурет/flv
AddOutputFilterByType DEFLATE сурет/ico
AddOutputFilterByType DEFLATE сурет/swf
AddOutputFilterByType DEFLATE қолданбасы/rss+xml
AddOutputFilterByType DEFLATE қолданбасы/xhtml+xml
AddOutputFilterByType DEFLATE қолданбасы/xml
AddOutputFilterByType DEFLATE қолданбасы/x-javascript
AddOutputFilterByType DEFLATE қолданбасы/javascript
AddOutputFilterByType DEFLATE қолданбасы/json
AddOutputFilterByType DEFLATE video/3gpp
AddOutputFilterByType DEFLATE video/3gpp2
AddOutputFilterByType DEFLATE бейне/x-flv
AddOutputFilterByType DEFLATE бейне/jpm
AddOutputFilterByType DEFLATE бейне/jpeg
AddOutputFilterByType DEFLATE бейне/x-m4v
AddOutputFilterByType DEFLATE бейне/mp4
AddOutputFilterByType DEFLATE бейне/ogg
AddOutputFilterByType DEFLATE бейне/webm
AddOutputFilterByType DEFLATE бейне/жылдам уақыт
AddOutputFilterByType DEFLATE аудио/x-mpegurl
AddOutputFilterByType DEFLATE аудио/midi
AddOutputFilterByType DEFLATE аудио/mp3
AddOutputFilterByType DEFLATE аудио/mp4
AddOutputFilterByType DEFLATE аудио/mpeg
AddOutputFilterByType DEFLATE аудио/webm
AddOutputFilterByType DEFLATE аудио/негізгі
AddOutputFilterByType DEFLATE аудио/x-wav
AddOutputFilterByType DEFLATE аудио/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 Иә
mod_gzip_item_include файлы \.js$
mod_gzip_item_include файлы \.css$
/ifmodule «<>» жақшаға алынуы керек
/ifmodule «<>» жақшаға алынуы керек

Қажетті элементтерді жақшаға қоспасаңыз, қате пайда болады. Сіздің сайтыңыз жұмысын тоқтатады және сізге 500 ішкі сервер қатесін береді. Сондай-ақ кодтан «<>» жақшаға алынуы тиіс» мәтінін алып тастау керек. Осыдан кейін .htaccess файлын сақтау керек.

Жаңа ережелерді дәл қолдану үшін серверді қайта іске қосқан дұрыс. Барлық осы әрекеттерден кейін сіздің сайтыңыз әлдеқайда жылдам жұмыс істейді. Бетті жүктеу жылдамдығы айтарлықтай артады.

Веб-сайтты жүктеу жылдамдығын және Gzip қысуын тексеріңіз

Біз сервер жағынан қысуды қосқаннан кейін. Орындалған жұмыстың сәттілігін тексеруге болады! Мұны бірнеше танымал онлайн құралдармен жасауға болады. Оларды қарастырайық:

PageSpeed Insights - сайтты тексерудің негізгі және ең танымал онлайн құралы. 2018 жылы Google жасаған соңғы өзгерістерден кейін. Сайтты егжей-тегжейлі талдау үшін деректердің кең тізімін береді.

PageSpeed ​​​​Insights туралы көбірек біліңіз.

Не істей алады:

  1. Сайт жылдамдығының жалпы рейтингі;
  2. Мазмұнды жүктеу уақытын анықтайды;
  3. Жалпы жылдамдық индексі және өзара әрекеттесу уақыты;
  4. Оңтайландыру бойынша ұсыныстар береді;
  5. Толық өнімділік ақпаратын көрсетеді;
  6. Gzip қысуының қосылғанын немесе қосылмағанын көрсетеді;
  7. Хэшингтің қосылғанын немесе қосылмағанын көрсетеді;
  8. Қатені түзету үшін көптеген ақпарат береді.

PageSpeed веб-сайт жылдамдығының көптеген мәселелерін шешуге көмектеседі. Осы құралдың арқасында менің сайтымның көптеген қателері түзетілді.

Pingdom құралдары сонымен қатар танымал онлайн веб-сайтты талдау құралдарының бірі болып табылады. Сайтты бағалаудың әртүрлі критерийлері бойынша жеткілікті толық ақпарат береді. Жүктеуді не бәсеңдететінін табу оңай.

pingdom құралы дегеніміз не?

Сізге не береді:

  1. Сайттың жалпы өнімділігін бағалау;
  2. Сайттың дерекқорына сұраныстардың саны;
  3. Бетті жүктеу жылдамдығы;
  4. Мазмұн түрі бойынша мазмұн өлшемі;
  5. Сервер жауаптары 200/301/302/404/503 және т.б.;
  6. Домендер бойынша жалпы сұраулар;
  7. Жағдайды графикалық бейнелеу және т.б.;

Сайт жылдамдығы туралы көп ақпарат береді. Бірақ Google сияқты егжей-тегжейлі нұсқаулар бермейді.

WordPress үшін GZIP қысу плагиндері

Біртүрлі көрінгенімен, WordPress CMS жүйесіндегі сайттардың иелеріне көп алаңдаудың қажеті жоқ. Мұның себебі - сайтта қысуды қосу үшін әртүрлі плагиндер. Сізге тек өзіңізге ұнайтын плагинді орнату қажет. Содан кейін плагин параметрлерінде қысуды белсендіріңіз және қосыңыз. Сонда ол сіз үшін барлық жұмысты жасайды. Мен ең танымал бірнеше сипаттаймын.

PageSpeed Ninja WordPress үшін ең жақсы өнімділік плагині болып табылады. Google PageSpeed Insights арқылы табылған мәселелерді бір рет басу арқылы түзетіп, веб-сайттарыңызды жұмыс үстелдері мен мобильді құрылғыларда жылдам жасауға болады. Сайтта қысуды жылдам қосуға мүмкіндік береді.

Wordpress-те Google PageSpeed ​​ұпайыңызды арттырыңыз.

WP ең жылдам кэш сонымен қатар ең танымал хэшинг плагиндерінің бірі болып табылады. Онда топтастырылған параметрлердің үлкен саны бар, олардың біреуі қысуды қамтиды.

WP Fastest Cache - WordPress плагині.

Комета кэш Мен бұл плагинді өзім қолданамын. Басқа плагиндермен үйлескенде ол тамаша нәтиже береді. Сондай-ақ оның параметрлерінің бірі gzip қысуын қамтиды.

Comet Cache әрбір беттің кэшін жасайды.

Жалпы, Wordpress үшін барлық негізгі кэштеу плагиндері сайтта GZIP қысуын қосуға мүмкіндік береді. Ең аз жүктеме үшін толыққанды көп функционалды плагиндерді ұсынамын.

Қорытындылай келе, мен мынаны айтайын: қысуды қосуды ұмытпаңыз. Бұл өнімділікке өте жақсы әсер етеді және іздеуде сайтты көтереді. Бұл мақала сізге осыған көмектеседі деп үміттенемін.

Никола Топты оқығаныңыз үшін рахмет

Пост қаншалықты пайдалы?

Бағалау үшін смайликті басыңыз!

орташа рейтинг 5 / 5. Бағалар саны: 52

Әзірге рейтингтер жоқ. Алдымен бағалаңыз.

Сізге де ұнауы мүмкін...

1 Жауап

  1. Илья айтты:

    Мен бірден кодты көшіріп, қойдым, ол 500 қатесін тудырды. Енді нені мұқият оқып шығу керектігін түсіндім. Сізде көшіруден қорғау бар екенін көріп тұрмын. Ал мазмұнның арқасында қолайлы және жұмыс істейді.

Пікір үстеу

Э-пошта мекенжайыңыз жарияланбайды. Міндетті өрістер * таңбаланған

5 + он төрт =