3 manieren om GZip-compressie in WordPress in te schakelen (snellere website)

WordPress gzip-compressie inschakelen

Een van de dingen die u moet doen om uw website sneller te maken, is om WordPress Gzip-compressie in te schakelen. Het is een cruciaal aspect omdat eenvoudig gezegd, als je je wilt van de om sneller te zijn, moet de grootte van de pagina's die u aan uw bezoekers moet tonen kleiner zijn.

Zo ziet de waarschuwing Gzip-compressie inschakelen eruit op GTMetrix:

gtmetrix-waarschuwing

Wat dit in wezen doet, is dit:

het vraagt ​​de server om alle bestanden te comprimeren voordat ze naar de gebruiker worden verzonden. Omdat de bestanden kleiner zijn, nemen ze veel in beslag less tijd om aan de gebruiker te worden afgeleverd, wat resulteert in een algehele snellere ervaring voor uw gebruiker.

Dit is een vrij hoge aanbeveling voor Google Page Speed ​​Insights en wordt gesuggereerd op websites voor website-optimalisatie zoals GTMetrix.

Rapport met inzichten in paginasnelheid waarin wordt gesuggereerd bestanden te comprimeren

Laten we u door het hele proces leiden om te controleren of de functie Gzip-compressie inschakelen op uw site is ingeschakeld. We laten u vervolgens 3 manieren zien om het indien nodig in of uit te schakelen. 

  1. Schakel WordPress Gzip-compressie in via .htaccess-bestanden
  2. Het inschakelen via een WordPress Gzip-compressieplug-in
  3. Bestanden comprimeren op uw websites met behulp van uw hosting CPanel-instellingen.

Controleer op GZip-compressie inschakelen

Voordat u daadwerkelijk wijzigingen aanbrengt, wilt u waarschijnlijk controleren of de Gzip-compressiefunctie van uw site al is ingeschakeld voor uw WordPress-site. 

Er zijn nogal wat andere sites die dat kunnen controleer of je het hebt ingeschakeld met deze tool or HTTP-compressietest.

Maak uw website sneller

Voer uw site door de test.

Controleer WordPress gzip-compressie ingeschakeld

Als je het al hebt ingeschakeld, hoef je niets te doen. Je krijgt dan een mooi resultaat zoals hieronder waarmee je kunt zien dat je website. Zo niet, lees dan verder.

 succesvol resultaat

 

U kunt ook controleren op GZIP-compressie met behulp van een plug-in van dezelfde mensen die de bovenstaande tool hebben gemaakt. U kunt de plug-in vinden hier),

Als u de Chrome-browser gebruikt, kunt u er ook voor kiezen om te controleren of de GZIP Content Encoding-header op uw site aanwezig is.

U kunt dit controleren met behulp van de Dev-tools onder Beeld > Ontwikkelaar > Ontwikkelaarstools en overschakelen naar het tabblad Netwerk. Als u het eerste verzoek opent en naar de HTTP-headers scrolt, ziet u zoiets als het onderstaande als Gzip-compressie inschakelen al is ingeschakeld.

Chrome-ontwikkeltools accepteren codering

Nu je hebt bepaald hoe je het kunt controleren, laten we je een aantal manieren zien om het in te schakelen.

GZip-compressie inschakelen

Het is heel erg eenvoudig om compressie van uw bestanden in te schakelen met behulp van ingebouwde functies van uw webserver - meestal hoeft u alleen de juiste syntaxis te kennen om de functionaliteit in te schakelen.

Er zijn eigenlijk meerdere manieren om dit te doen, dus we zullen er een paar laten zien en je kunt degene kiezen die je voorkeur heeft of het beste voor je werkt. Denk eraan voordat u drastische wijzigingen aanbrengt, het wordt aanbevolen dat u een volledige WordPress back-up

300x250 Oranje

1. Schakel WordPress Gzip-compressie in via .htaccess

Een eenvoudige manier om WordPress Gzip-compressie in te schakelen, is door een paar richtlijnen in uw .htaccess-bestand in te stellen.

We hebben al manieren gezien om de sitesnelheid te optimaliseren door gebruik te maken van browsercaching via uw .htaccess-bestand, dus als u zich op uw gemak voelt met uw .htaccess-bestand, dan is dit de methode voor u.

Zorg er wel voor dat je een back-up van dit bestand hebt gemaakt, want kleine fouten in dit bestand zullen je site kapot maken en het onmiddellijk platleggen. Maak een kopie van uw huidige werkende versie voordat u wijzigingen aanbrengt, zodat u ernaar kunt terugkeren als er iets misgaat nadat u gzip-compressie hebt ingeschakeld.

De onderstaande (en de meeste opties die we gaan gebruiken) gebruiken de functionaliteit van: mod_deflate dat is een module die doorgaans is ingeschakeld op webservers die worden aangedreven door de Apache-webserver.

Voeg het volgende toe aan uw .htaccess-bestand, via de CPanel / File Manager van uw hostingserver:

#Fil tekst, html, javascript, css, xml comprimeren: AddOutputFilterByType DEFLATE tekst/plain AddOutputFilterByType DEFLATE tekst/html AddOutputFilterByType DEFLATE tekst/xml AddOutputFilterByType DEFLATE tekst/css AddOutputFilterByvaTypeputOutputFilterByvaType DEFLATE tekst/Filter DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font application/x-font application/x-font application/x-font application/x-font application/x-font application/x-font application/x- font -otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATEx font/ttf AddOutput ml AddOutputFilterByType DEFLATE afbeelding/x-icon AddType x-font/otf .otf AddType x-font/ttf .ttf AddType x-font/eot .eot AddType x-font/woff .woff AddType afbeelding/x-icon .ico AddType afbeelding /png .png

Nadat u het bovenstaande heeft ingeschakeld, voert u de bovenstaande test opnieuw uit voor uw site.

Natuurlijk, als je de functie wilt uitschakelen, laat je de bovenstaande regels gewoon uit het htaccess-bestand vallen. Als er andere bestanden zijn die u wilt comprimeren, moet u deze bestandstypen ook toevoegen op een vergelijkbare manier als hierboven. 

NGINX en IIS:

De syntaxis om GZip-compressie op Nginx in te schakelen, is een beetje anders dan voor Apache met .htaccess. U moet de volgende tekst toevoegen aan uw nginx.conf-bestand, wat het equivalent is van het .htaccess-bestand op NGINX.

gzip aan; gzip_disable "MSIE [1-6]\.(?!.*SV1)"; gzip_varieer op; gzip_types tekst/platte tekst/css-tekst/javascript-afbeelding/svg+xml-afbeelding/x-icon-toepassing/javascript-toepassing/x-javascript;

In IIS, dwz de webserver die op Windows-machines draait, kunt u dit het beste doen via de IIS-interface met behulp van deze handleiding van Microsoft.

2. Compressie inschakelen via een WordPress GZip-plug-in

Aangezien u probeert uw website sneller te maken door GZip-compressie in te schakelen, hebben we goed nieuws voor u.

Er is één plug-in WP Rocket - waarmee u niet alleen bestanden kunt comprimeren om ze kleiner te maken, maar ook tientallen optimalisaties uitvoert om uw website sneller te maken. Onder een paar dingen waar het goed mee omgaat:

  • Schakel GZIP-compressie in (natuurlijk!)
  • Browsercaching inschakelen
  • Schakel afbeeldingsoptimalisatie in (om de grootte van uw afbeeldingen klein en sneller te maken)
  • Maakt lui laden mogelijk, zodat afbeeldingen en andere zware afbeeldingen alleen worden geladen wanneer ze nodig zijn (on-demand)
  • Integreert met een CDN zodat zware resources efficiënter kunnen worden bediend
  • Verwijdert alle oude, dode of ongebruikte plug-ins en tabellen
  • Schakelt bestands- en databasecaching in
  • en tal van andere optimalisaties

Hoewel het inschakelen van GZIP-compressie niet zichtbaar is in de onderstaande schermafbeelding, is deze standaard ingeschakeld en volledig transparant in WP Rocket. Hier zijn een aantal andere dashboardinstellingen die u in deze tool kunt vinden. 

WP Rocket

De plug-in is niet gratis, maar in werkelijkheid is het de investering zeker waard, want een snelle website is een geweldige ervaring, niet alleen voor jou, maar vooral voor je bezoekers! Bovenal is het letterlijk in een paar minuten en met een paar klikken ingeschakeld!

Maar voordat we verder gaan, hebben we een kort verhaal om te delen. Tot een paar maanden geleden was onze website niet zo snel als we wilden. We hadden heel vaak nieuwe inhoud gepost, maar de site was een beetje aan de zware kant, dus het duurde even om te laden. Soms duurt het 5 tot 8 seconden of langer om te laden.

En we waren niet in staat om het sneller te laten gaan, wat we ook deden.

Op een mooie dag kwamen we WP Rocket tegen. We hadden zoveel tijd verspild met het proberen om de site snel te maken, dat we de knoop doorhakten en de plug-in kregen. BOOM - de laadsnelheid van de site gaat naar minder dan 2 seconden!

(bijwerken: De laatste Google-update heeft onze site een toename van 30% in organisch verkeer gegeven - we denken dat het grootste deel hiervan het gevolg is van de snelheidsboost die onze site kreeg dankzij WP Rocket)

Bezoek WP Rocket

Heb je hier geen interesse in? Lees verder, er zijn natuurlijk andere manieren om Gzip-compressie in te schakelen!

Als je een manier wilt gebruiken die mogelijk is less technisch kun je een WordPress Gzip-compressieplug-in gebruiken. Simpel gezegd, in plaats van bestanden te moeten wijzigen met het risico dat je site kapot gaat als je een fout maakt, maakt een plug-in het veel gemakkelijker om Gzip-compressie in te schakelen.

U kunt een Google-zoekopdracht uitvoeren voor: WordPress compressie plug-in of ga anders voor het simpele Gzip Ninja-snelheidscompressie.

Zoals bij alle WP-plug-ins, is dit een vrij eenvoudige procedure om de plug-in te installeren en te activeren. Als je dat eenmaal hebt gedaan, zou je site nu WordPress Gzip-compressie moeten hebben ingeschakeld

WordPress gzip-compressie-plug-in 

3. Schakel GZIP-paginacompressie in via CPanel

Naast het inschakelen van GZip-paginacompressie op WordPress-niveau, kunt u ervoor kiezen om dit op serverniveau te doen - indien beschikbaar. Dit betekent dat alle websites die op uw server worden gehost, nu volledig gzip-enabled zijn. 

Hieronder volgen de exacte stappen voor de procedure:

  1. Log in op het CPanel van uw websitehosting
  2. Klik op het pictogram "Optimaliseren" van de website
  3. Kies de optie "Alle inhoud comprimeren"
  4. Klik op Instellingen bijwerken
  5. Test op compressie en je bent klaar!

Laten we de volledige procedure in meer detail bekijken en screenshots gebruiken.

Zoek naar het pictogram "Website optimaliseren" op uw Cpanel en klik erop.

Gzip-compressieserverniveau - Optimaliseer het websitepictogram in Cpanel

Zodra u zich op de Optimize-website op CPanel bevindt, kunt u kiezen voor "Alle inhoud comprimeren". Dit vraagt ​​uw server om de inhoud met gzip te comprimeren voordat deze naar de bezoeker wordt verzonden. Als uw WP-site hier wordt gehost, kunt u er natuurlijk zeker van zijn dat uw inhoud ook met WordPress gzip is gecomprimeerd.

Gzip comprimeert alle inhoud

Hoe GZip-compressie uit te schakelen

Het uitschakelen van deze functie is slechts een kwestie van het terugdraaien van de bovenstaande wijzigingen. U kunt dus alle aanvullende codes verwijderen die we aan onze configuratiebestanden hebben toegevoegd, de plug-in uitschakelen of de functie Optimize-website uitschakelen, is ons CPanel.

U moet dan de tests opnieuw uitvoeren om te controleren of het comprimeren van bestanden is uitgeschakeld.

Waarom schakelen we dit in?

Laten we, als een beetje achtergrondinformatie, eens kijken naar wat er achter de schermen gebeurt wanneer een bezoeker naar uw website komt en de browser begint te praten met de webserver van de website.

Laten we zeggen dat je naar www.collectiveray.com/index.ghtml- uw browser start een "gesprek" met de webserver met behulp van het HTTP-protocol dat gebruikmaakt van verzoeken en antwoorden.

HTTP-verzoek

  1. Gebruikersbrowser: Hé, mag ik? GET het bestand /index.html
  2. Webserver: Ok, laat me eens kijken of index.html beschikbaar is …
  3. Webserver: Ja, hier is het (200 OK) Ik sta op het punt om het bestand te verzenden dat ongeveer 50 KB groot is.
  4. Gebruikersbrowser: 50 KB? Ok ik wacht erop ... wachten, wachten ... geweldig, het is geladen.

Zoals je je kunt voorstellen, is dit een simplistische weergave van wat er gebeurt, maar als je wilt, kun je de Chrome Dev-tools gebruiken die we hierboven hebben beschreven om precies te controleren wat er binnenkomt.

Het werkt, en je krijgt je bestand. Dit proces gebeurt steeds opnieuw totdat u alle bestanden krijgt die deel uitmaken van de URL die u hebt aangevraagd.

Maar hoewel het systeem werkt, is het verzenden van 50 KB tekst niet erg efficiënt. Houd er rekening mee dat dit proces meerdere keren gebeurt, waarschijnlijk honderden keren voor elke pagina die u bezoekt. En hoewel 50 KB misschien niet veel klinkt, begint het cumulatieve effect van het verzenden van alle verschillende bestanden zich op te bouwen. (Merk op dat protocollen zoals HTTP/2 dit proces aanzienlijk hebben verbeterd)

Download de lijst met 101 WordPress-trucs die elke blogger zou moeten kennen

101 WordPress-trucs

Klik hier om nu te downloaden

De waarheid is dat de meeste teksten, zoals HTML-, CSS- en JS-bestanden op een website, inefficiënt van aard zijn omdat ze leesbaar zijn voor mensen en gemaakt zijn voor consumptie door zowel mensen als machines - maar ze zijn in hun ruwe vorm helemaal niet slank of efficiënt. het formulier.

Wat kunnen we doen om dit proces te verbeteren? Zip het natuurlijk! Zippen is in wezen het proces waarbij het bestand zodanig wordt gecodeerd dat de tekst die moet worden verzonden kleiner wordt, zonder dat de informatie erin verloren gaat.

En door een gecomprimeerde versie te verzenden van de bestanden die we moeten verzenden, besparen we op zowel bandbreedte als downloadtijd. De browser unzip of decomprimeert het bestand en geeft het weer aan de gebruiker, die gelukkiger is, omdat de pagina snel wordt geladen.

Laten we eens kijken hoe het nieuwe gesprek tussen de webserver eruit ziet:

HTTP-verzoek gecomprimeerd 

  1. Gebruikersbrowser: Hé, mag ik? GET het bestand index.html? Ik zou graag een gecomprimeerde versie gebruiken als je die hebt
  2. Webserver: Ok, laat me eens kijken of index.html beschikbaar is .... Ik stuur je dan een gecomprimeerde versie!
  3. Webserver: Ja hier is het (200 OK) Ik sta op het punt het bestand te comprimeren dat ongeveer 5KB groot is. Klaar, ga het verzenden. 
  4. Gebruikersbrowser: geweldig! Het is maar 15 KB. Ik zal het decomprimeren en aan de gebruiker tonen.

Zoals we verschillende keren hebben opgemerkt en het zijn verschillende artikelen, kleine pagina's die snel laden = tevreden gebruikers!

De formule is simpel: Kleiner bestand = snellere download = tevreden gebruiker.

Coderingsdetails

Het belangrijkste onderdeel van deze uitwisseling of conversatie tussen de browser van de gebruiker en de server is dat je begrijpt dat het prima is om een ​​gecomprimeerd bestand aan te leveren. Het contract of de overeenkomst bestaat uit twee delen

  • De browser stuurt een header die de webserver laat zien dat de browser gecomprimeerde inhoud accepteert (gzip en deflate zijn twee algemeen beschikbare compressieschema's): Accept-Encoding: gzip, deflate

  • De webserver stuurt een reactie als het inhoud verzendt die daadwerkelijk is gecomprimeerd: Content-Encoding: gzip

Het is mogelijk dat de server de responsheader voor het coderen van inhoud niet daadwerkelijk verzendt, wat betekent dat het bestand niet is gecomprimeerd (dit is het standaardgedrag op de meeste servers). De header "Accept-encoding" is alleen de browser die vraagt ​​​​om gecomprimeerde bestanden te accepteren, geen eis. Als de server deze functie niet heeft ingeschakeld of geen gecomprimeerde inhoud wil terugsturen, gebruikt de browser de gewone ongecomprimeerde versie.

Veelgestelde Vragen / FAQ

Wat is compressie?

Gzip- of Broltli-compressie is het proces waarbij de bestanden worden gecodeerd die van de webserver naar de browser van een bezoeker moeten worden verzonden, zodat ze kleiner (en dus sneller) aan de eindgebruiker kunnen worden geleverd. De tijd die de server nodig heeft om deze inhoud te comprimeren, en de browser om deze inhoud te decomprimeren, is meestal veel korter dan de tijdwinst dankzij de kleinere omvang. Dit komt omdat internetverbindingen een veel grotere latentie hebben (impact op de prestaties), dan de CPU-tijd die nodig is om inhoud te comprimeren/decomprimeren.

Moet ik GZIP-compressie inschakelen?

Ja, u moet GZip-compressie inschakelen voor uw website. Dit vereist zeer weinig interventie of wijzigingen, is zeer eenvoudig te implementeren, heeft weinig impact op de inhoud van uw website, maar biedt een enorme prestatie-upgrade voor de snelheid van uw website.

Hoe schakel ik GZIP-compressie in CPanel in?

Om GZip-compressie in CPanel in te schakelen, zoekt u eenvoudig naar de functie "Website optimaliseren" en schakelt u "Alle inhoud comprimeren" in.

Hoe test ik GZip-compressie?

Om GZip-compressie te testen, gaat u naar een van de websites die in dit artikel worden bezocht. Deze zullen controleren of GZip is ingeschakeld op uw website of niet.

Afsluiten 

Dit was slechts een van de vele WordPress-tips die beschikbaar zijn op CollectiveRay.

U kunt gemakkelijk ongelooflijke besparingen behalen door WordPress gzip-compressie in te schakelen, zoals u kunt zien, hebben we tot 81% besparingen behaald op de grootte van bestanden. Dit is een geweldige manier om uw website veel sneller te maken. Als je voor de gemakkelijke weg wilt kiezen, in plaats van te rommelen met bestanden en codes, raden we je aan te kiezen voor een plug-in zoals WP Rocket.

Ontdek hoe WP Rocket uw website sneller maakt

Over de auteur
David Attard
David heeft de afgelopen 21 jaar in of rond de online en digitale industrie gewerkt. Hij heeft ruime ervaring in de software- en webontwerpindustrie met behulp van WordPress, Joomla en de niches eromheen. Hij heeft gewerkt met softwareontwikkelingsbureaus, internationale softwarebedrijven, lokale marketingbureaus en is nu hoofd Marketing Operations bij Aphex Media - een SEO-bureau. Als digitale consultant ligt zijn focus op het helpen van bedrijven om een ​​concurrentievoordeel te behalen door gebruik te maken van een combinatie van hun website en digitale platforms die vandaag de dag beschikbaar zijn. Zijn mix van technologische expertise gecombineerd met een sterk zakelijk inzicht geeft zijn geschriften een concurrentievoordeel.

Nog een ding... Wist je dat mensen die nuttige dingen zoals dit bericht delen er ook GEWELDIG uitzien? ​
Alstublieft laat een nuttig geef commentaar met je mening, deel dit dan op je Facebook-groep (en) die dit nuttig zouden vinden en laten we samen de vruchten plukken. Bedankt voor het delen en aardig zijn!

Disclosure: Deze pagina kan links bevatten naar externe sites voor producten die we geweldig vinden en die we van harte aanbevelen. Als u producten koopt die we aanbevelen, kunnen we een verwijzingsvergoeding verdienen. Dergelijke vergoedingen hebben geen invloed op onze aanbevelingen en we accepteren geen betalingen voor positieve beoordelingen.

Auteur (s) Uitgelicht op:  Inc Magazine-logo   Sitepoint-logo   CSS Tricks-logo    webdesignerdepot-logo   WPMU DEV-logo   en nog veel meer ...