Gzip-compressie js / css / html-siteversnelling - hoe inschakelen in .htaccess

afdrukken · Probeer het eens: 9мин · Автор: · Опубликовано · Обновлено

reproducerenLuister naar artikel

Gzip-compressie js css html.Gegroet, beste lezers! Vandaag zullen we het hebben over gzip js-compressie | CSS | htmlom het laden van de site te versnellen. Hoe het in te schakelen met een .htaccess-bestand. Ik zal je ook vertellen waarom je überhaupt bestandscompressie aan de serverkant moet inschakelen.

Dit onderwerp houdt rechtstreeks verband met de technische website optimalisatie. Door vrij eenvoudige manipulaties aanzienlijk toe te staan het laden van websites versnellen. Een snelle site is een aanzienlijk succes bij het promoten van zoekmachines.

Wat is het doel van het inschakelen van Gzip-bestandscompressie in .htaccess?

Hoe Gzip-compressie van pagina's op de site in te schakelen.

Zoals ik al in veel van mijn artikelen heb gezegd! De site in de beginfase heeft een vrij groot gewicht. En deze. optimalisatie is noodzakelijk voor het gewicht van onze site verminderen. We moeten in elk geval de hoeveelheid code, het gewicht van pagina's, afbeeldingen en andere dingen verminderen. De algemene taak is om de gebruiker een lichte en snel ladende versie van de site te geven.
Zo geven we snel informatie weg. De overgang tussen pagina's en secties vindt plaats in een fractie van een seconde. Tegelijkertijd zullen bezoekers snel alle geladen ontwerpelementen en andere interactieve elementen van interactie zien.

GZIP-compressie - biedt ononderbroken archivering van overgedragen bestanden. Zo krijgen we verliesloze compressie van de kwaliteit van de bron. Alle gegevens komen na het uitpakken al in de browser van de gebruiker in de oorspronkelijke staat terug. De implementatie zelf is te danken aan verschillende werkalgoritmen. Deze omvatten standaard DEFLATE met LZ77 en Huffman.

Natuurlijk is dit soort compressie (compressie) geen ideale oplossing. Maar de implementatie van Gzip brengt ons bij een balans tussen snelheid en compressieverhouding. Deze methode is onder andere de meest populaire manier om de site te versnellen. Bovendien zal de implementatie van een meer globale methode op de server veel tijd en testen vergen. En het geeft misschien niet het gewenste resultaat! Gzip-compressie is in dit opzicht de meest betrouwbare manier om het downloaden van bestanden te versnellen.

Gzip-compressie - voor welke bestanden is het acceptabel? Op welke servers werkt het?

In feite dekt gzip-compressie een grote lijst met bestanden. Maar het heeft een klein nadeel! Wanneer een gebruiker een site bezoekt, moet de server on-the-fly een grote hoeveelheid gegevens comprimeren. Dit leidt tot een bepaalde belasting van de server. Maar in de meeste gevallen is het niet kritisch. Alle ondersteunde bestandsformaten worden na overdracht perfect weergegeven in populaire browsers.

De belangrijkste zijn:

  • tekst/platte tekst/html;
  • tekst/xml-toepassing/xml-toepassing/xhtml+xml-toepassing/xml-dtd;
  • toepassing/rdf+xml toepassing/rss+xml toepassing/atom+xml afbeelding/svg+xml;
  • tekst/css tekst/javascript-toepassing/javascript-toepassing/x-javascript;
  • font/opentype-toepassing/font-otf-toepassing/x-font-otf;
  • font/truetype-toepassing/font-ttf-toepassing/x-font-ttf.
Gzip-bestandscompressie wordt gebruikt op de belangrijkste Apache- en Nginx-servers. Met geldige werkmodules en servermogelijkheden.

Bijvoorbeeld: Nginx - gebruikt voor statisch. Het comprimeert en verwerkt statische bestanden goed. Compressie gebeurt dankzij de modules ngx_http_gzip_module en ngx_http_gzip_static_module. Ononderbroken on-the-fly compressie wordt uitgevoerd door de hoofdextensie te vervangen door ".gz".

Voorbeeld van een standaardconfiguratie:

zip aan;
gzip_min_lengte 1000;
gzip_types tekst/gewone toepassing/xml;

Apache is de meest gevraagde server. Natuurlijk zal de compressie erop ambitieuzer en aanpasbaarder zijn. Gzip-compressie op deze server wordt gedaan met behulp van de module mod_deflate. Door direct compressie te bieden voordat het naar de browser van de gebruiker wordt verzonden.

Voorbeeld van een standaardconfiguratie:

# GZIP inschakelen - compressie inschakelen
AddOutputFilterByType DEFLATE tekst/plain
AddOutputFilterByType DEFLATE tekst/html
AddOutputFilterByType DEFLATE tekst/xml
AddOutputFilterByType DEFLATE tekst/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE toepassing/javascript
AddOutputFilterByType DEFLATE applicatie/x-javascript

# Compressie met een langzaam algoritme om de belasting van de server te verminderen.

RewriteEngine On
AddEncoding gzip .gz
HerschrijfCond %{HTTP:Accepteer-codering} gzip
RewriteCond %{REQUEST_FILENAME}.gz -f
Regel herschrijven ^(.*)$ $1.gz [QSA,L]

PHP is een minder populaire optie. Maar het heeft ook de mogelijkheid om compressie te organiseren met behulp van de zlib-module. Deze methode wordt niet aanbevolen omdat deze extreem traag is.

Voorbeeld van een standaardconfiguratie:

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

1TP29OriginalData = file_get_contents(1TP29OriginalFile);

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

var_dump(bestandsgrootte($origineelBestand)); // int(96380)
var_dump(bestandsgrootte($gzipFile)); // int(33305)

Natuurlijk is het gebruik van Apache + Nginx + PHP-servers ook samen mogelijk. Er wordt dus gezorgd voor een bepaalde belastingsverdeling tussen servers. Maar dit is een zeer moeilijke taak, die niet door gewone gebruikers mag worden gedaan.

Ik heb mijn server zelf geconfigureerd, gebruikmakend van alle belangrijke voordelen van Apache/Nginx/PHP. Nginx handelt dus de statische af, Apache behandelt de rest met PHP. Het resultaat is zeer positief. Maar er is veel tijd besteed aan het organiseren van deze methode.

Gzip-compressie inschakelen in .htaccess-bestand

In feite is het niet moeilijk om dit te doen. Bovendien heb ik het al over dit dossier gehad.

De basisregels blijven hetzelfde:

  1. Zorg ervoor dat u het originele .htaccess-bestand opslaat voordat u het bewerkt. In het geval van fout 500 zal er iets zijn om te herstellen.
  2. Er mogen geen openingen tussen de lijnen zijn.
  3. We schrijven alle opmerkingen achter het bordje #.
  4. Controleer de code na het invoegen op integriteit.

Hierboven zijn al verschillende voorbeelden genoemd van de configuratie van standaard .htaccess-regels. Maar naar mijn mening is dit niet genoeg, dus ik zal mijn eigen voorbeeld geven. Deze set regels werkt op deze site, zoals je kunt zien zijn er geen problemen.

Tegelijkertijd vindt compressie tijdens de vlucht plaats, de site laadt snel zonder remmen. Het enige wat je hoeft te doen is deze code in je .htaccess-bestand te plakken. Als je een eigen server hebt, dan weet je volgens mij alles zelf.

Voor het hoofdpubliek, gebruiksaanwijzing:

  1. We gaan naar de server met elke populaire ftp-client;
  2. Ga naar de root van de site (directory);
  3. Het .htaccess-bestand bevindt zich in de hoofdmap van de site;
  4. We openen het met een teksteditor, over het algemeen is Sublime Text 3 beter;
  5. Plak vervolgens helemaal aan het einde van het bestand de code die hieronder wordt weergegeven.
  6. U wordt vriendelijk verzocht de code te controleren, aangezien de site is voorzien van kopieerbeveiliging (er kan een link naar de site aan het einde van de code staan).

# Schakel GZIP in
ifmodule mod_deflate.c moet tussen haakjes "<>" staan
AddOutputFilterByType DEFLATE tekst/plain
AddOutputFilterByType DEFLATE tekst/tekst
AddOutputFilterByType DEFLATE tekst/html
AddOutputFilterByType DEFLATE tekst/plain
AddOutputFilterByType DEFLATE tekst/xml
AddOutputFilterByType DEFLATE tekst/css
AddOutputFilterByType DEFLATE afbeelding/gif
AddOutputFilterByType DEFLATE afbeelding/jpeg
AddOutputFilterByType DEFLATE afbeelding/jpg
AddOutputFilterByType DEFLATE afbeelding/png
AddOutputFilterByType DEFLATE afbeelding/gif
AddOutputFilterByType DEFLATE afbeelding/flv
AddOutputFilterByType DEFLATE afbeelding/ico
AddOutputFilterByType DEFLATE afbeelding/swf
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE applicatie/x-javascript
AddOutputFilterByType DEFLATE toepassing/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 moet tussen haakjes "<>" staan
mod_gzip_on Ja
mod_gzip_item_include bestand \.js$
mod_gzip_item_include bestand \.css$
/ifmodule moet tussen haakjes “<>” staan
/ifmodule moet tussen haakjes “<>” staan

Als u de vereiste elementen niet tussen haakjes plaatst, krijgt u een foutmelding. Uw site stopt gewoon met werken en geeft u een 500 interne serverfout. De tekst "moet tussen haakjes "<>" staan" moet ook uit de code worden verwijderd. Daarna moet het .htaccess-bestand worden opgeslagen.

Het is ook een goed idee om de server opnieuw op te starten om de nieuwe regels precies toe te passen. Na al deze acties werkt uw site veel sneller. De laadsnelheid van de pagina zal aanzienlijk toenemen.

Controleer de laadsnelheid van de website en Gzip-compressie

Nadat we compressie aan de serverzijde hebben ingeschakeld. U kunt het succes van het uitgevoerde werk controleren! U kunt dit doen met verschillende populaire online tools. Laten we ze eens bekijken:

PageSpeed-inzichten - de belangrijkste en meest populaire online tool om de site te controleren. Na de laatste wijzigingen in 2018 door Google. Biedt een uitgebreide lijst met gegevens voor een gedetailleerde analyse van de site.

Meer informatie over PageSpeed ​​Insights.

Wat kan:

  1. Algemene beoordeling van de sitesnelheid;
  2. Specificeert de laadtijd van de inhoud;
  3. Algehele snelheidsindex en tijd tot interactie;
  4. Geeft aanbevelingen voor optimalisatie;
  5. Toont gedetailleerde prestatie-informatie;
  6. Geeft aan of Gzip-compressie is ingeschakeld;
  7. Geeft aan of hashen is ingeschakeld;
  8. Biedt een schat aan informatie voor foutcorrectie.

PageSpeed helpt u bij het oplossen van veel problemen met de snelheid van websites. Dankzij deze tool zijn veel fouten op mijn site verholpen.

Pingdom-tools is ook een van de populaire online analysetools voor websites. Geeft voldoende gedetailleerde informatie over verschillende criteria voor site-evaluatie. Het is gemakkelijk te vinden wat de download vertraagt.

wat is een pingdom-tool?

Wat levert het je op:

  1. Beoordeling van de algemene prestaties van de site;
  2. Het aantal verzoeken aan de sitedatabase;
  3. Laadsnelheid pagina;
  4. Inhoudsgrootte per inhoudstype;
  5. Serverantwoorden 200/301/302/404/503 en andere;
  6. Algemene vragen per domein;
  7. Grafische weergave van de situatie etc.;

Geeft veel informatie over de snelheid van de site. Maar geeft geen gedetailleerde instructies zoals Google.

GZIP-compressie-plug-ins voor WordPress

Hoe vreemd het ook mag lijken, de eigenaren van sites op het WordPress CMS hoeven niet veel moeite te doen. De reden hiervoor is de verscheidenheid aan plug-ins om compressie op de site mogelijk te maken. Het enige dat u hoeft te doen, is de gewenste plug-in installeren. Activeer en schakel vervolgens compressie in de plugin-instellingen in. Dan doet hij al het werk voor je. Ik zal een paar van de meest populaire beschrijven.

PageSpeed Ninja is de best presterende plug-in voor WordPress. U kunt uw websites snel maken op desktops en mobiele apparaten door problemen die door Google PageSpeed Insights zijn gevonden met één klik op te lossen. Hiermee kunt u snel compressie inschakelen op de site.

Verhoog je Google PageSpeed-score in WordPress.

WP snelste cache is ook een van de meest populaire hash-plug-ins. Het heeft een groot aantal gegroepeerde instellingen, waaronder compressie.

WP Fastest Cache - Plug-in voor WordPress.

komeet cache Ik gebruik zelf deze plug-in. Omdat het in combinatie met andere plug-ins een uitstekend resultaat geeft. Een van zijn instellingen omvat ook gzip-compressie.

Comet Cache maakt een cache van elke pagina.

Over het algemeen kunt u met alle belangrijke caching-plug-ins voor Wordpress GZIP-compressie op de site inschakelen. Ik raad volwaardige multifunctionele plug-ins aan voor de minste belasting.

Tot slot zal ik het volgende zeggen: zorg ervoor dat u compressie inschakelt. Dit heeft een zeer goed effect op de prestaties en verhoogt de site in de zoekresultaten. Ik hoop dat dit artikel je hierbij zal helpen.

Bedankt voor het lezen Nicola Top

Hoe nuttig is de post?

Klik op de smiley om te beoordelen!

gemiddelde score 5 / 5. Aantal beoordelingen: 52

Er zijn nog geen beoordelingen. Beoordeel eerst.

Читайте также:

1 reactie

  1. Илья schreef:

    Ik heb de code meteen gekopieerd en geplakt, wat een fout 500 veroorzaakte. Nu begrijp ik wat ik moet lezen. Ik zie dat je ook kopieerbeveiliging hebt. En dankzij de inhoud is geschikt en werkend.

Добавить комментарий

Het e-mailadres wordt niet gepubliceerd. Обязательные поля помечены *

een × twee =