Hoe de sitesnelheid te verbeteren door Gtmetrix-fouten op te lossen?

Sitesnelheid is een van de belangrijkste factoren bij optimalisatie en SEO-criteria. Gtmetrix is ​​een van de beste en meest praktische tools voor het meten van sitesnelheid.

Eigenlijk is laadsnelheid een van de belangrijkste factoren voor Google ranking en SEO. Aan de andere kant helpt het verbeteren van de laadsnelheid u bij het verbeteren van de "Eerste indruk" die u aan gebruikers geeft. Dus door de sitesnelheid te verbeteren, optimaliseert u uw website voor zoekmachines en UX-factoren.

Er zijn veel verschillende tools om je laadsnelheid te meten. GTmetrix, Google Page Speed, Pingdom, Web Page Test enzovoort. We kunnen zeggen dat GTmetrix een van de beste op de lijst is. In dit artikel gaan we het hebben over GTmetrix, de functie en de belangrijkste fouten die het je tijdens een test laat zien.

De snelheid van de site varieert op verschillende websites en is afhankelijk van verschillende factoren, zoals het thema dat u gebruikt, de plug-ins die u hebt geïnstalleerd, de aangepaste codes die u hebt gebruikt, de optimalisatiefactoren die u hebt gevolgd en vele andere factoren die we kunnen noemen.

In de onderstaande afbeelding kunnen we bijvoorbeeld het testresultaat zien op een van de Deep thema-demo's die verbluffend zijn page speed. Dit resultaat laat zien dat dit thema volledig is geoptimaliseerd door het ontwikkelaarsteam zelf en dat u zich geen zorgen hoeft te maken over optimalisatie van de sitesnelheid.

Dit laat zien hoe belangrijk je thema is. U moet deze factor overwegen voor: een thema kopen, vooral in WordPress. Laten we bij ons oorspronkelijke doel blijven. We zullen het hebben over GTmetrix-fouten en hun oplossingen.

Wat is GTmetrix precies?

Laten we uit GTmetrix zelf citeren:

GTmetrix is ​​een van de tools die we steeds vaker gebruiken om gedetailleerde rapporten te krijgen over de prestaties van onze site. Het is een gratis tool die de snelheidsprestaties van uw pagina analyseert met behulp van Google Page Speed ​​en YSlow. GTmetrix genereert vervolgens scores voor uw pagina's en biedt bruikbare aanbevelingen voor het oplossen ervan.

GTmetrix is ​​niet alleen een webservice, maar ook een plug-in en voor degenen die geen plug-in willen gebruiken, kunnen ze hun webgebaseerde versie gebruiken door naar "gtmetrix.com" te gaan.

Ondertussen kunt u ook de interactieve GTmetrix-bladwijzer toevoegen aan uw Firefox, Chrome, Safariof Internet Explorer-browsers.

Belang van geoptimaliseerde GTmetrix-elementen (PageSpeed ​​& YSlow):

Snelheid is een cruciaal element om bezoekers van uw site een prettige UX (gebruikerservaring) te bieden. Het leidt de aandacht en focus van de bezoekers om ervoor te zorgen dat ze de echte en actuele inhoud van de website zien en ook dat ze hun tijd besteden aan de echte inhoud en de laadtijd van uw afbeeldingen en scripts van de website verminderen.

Studies hebben aangetoond dat gebruikers een laadtijd van meer dan 4 seconden niet tolereren.

Als uw site niet snel reageert en laadt, zullen de gebruikers uw website verlaten. Op het gebied van SEO vermeldt Google het gebruik van PageSpeed-score in zijn ranking-algoritme. Met andere woorden, uw website kan hoger scoren wanneer u het PageSpeed-element gebruikt.

Als u als ontwikkelaar en marketeer uw website wilt optimaliseren, zou PageSpeed ​​een van de beste optimalisaties moeten zijn om te overwegen. zou kunnen Versnel WordPress-services door ons.

Check this out: Hoe de WordPress Site Performance Speed ​​Ultimate 2020-gids te versnellen?

PageSpeed

PageSpeed ​​evalueert de conformiteit van de pagina met een aantal verschillende regels. Deze regels zijn algemene best practices voor de front-end die u in elk stadium van webontwikkeling kunt toepassen.

YSlow

YSlow beoordeelt webpagina's op basis van een van de drie vooraf gedefinieerde regelsets of een door de gebruiker gedefinieerde regelset.

GTmetrix-analysefouten

Netwerkverbindingsfouten

Als u fouten krijgt zoals de volgende:

• "Time-out lezen"
• "Gebroken pijp"
• “Verbinding gereset door peer”

Er kunnen verbindingsproblemen zijn tussen onze server en de GTmetrix-testserver.

Serverstatusfouten

GTmetrix analyseert alleen pagina's die een succesvolle HTTP-statuscode retourneren. Dit betekent dat als u deze fout ontvangt, uw pagina een fout-HTTP-statuscode heeft. De meest voorkomende redenen hiervoor zijn:

• Uw webtoepassing die de pagina genereert, retourneert ten onrechte een HTTP-statuscode voor fouten, maar retourneert pagina-inhoud die geen fout aangeeft.
• Uw webtoepassing blokkeert de toegang van GTmetrix tot de pagina. Met WordPress kan dit te wijten zijn aan plug-ins zoals Bad Behaviour of Wordfence. Bij e-commercesoftware is het gebruikelijk dat de toegang wordt geblokkeerd op basis van het IP-adres.
• U gebruikt een omgekeerde volmacht zoals CloudFlare en het blokkeert GTmetrix om toegang te krijgen tot de pagina.

SSL-certificaatfouten

GTmetrix analyseert alleen HTTPS-sites die een geldig, vertrouwd SSL-certificaat hebben. Dit type fouten komt vaak voor wanneer de tussenliggende/ketencertificaten niet correct zijn geïnstalleerd.

DNS-fouten

Als GTmetrix problemen heeft met het oplossen van het domein van uw site, heeft u mogelijk problemen met de DNS-configuratie of zijn DNS-records in de cache opgeslagen als uw site onlangs van naamserver is veranderd.

Het laden van je pagina duurde te lang

De maximale tijd dat GTmetrix wacht tot een pagina is geladen, is 2 minuten. De meest voorkomende redenen voor deze fout zijn:

• Een extreem traag ladende pagina of bronnen
• JavaScript dat verhindert dat de gebeurtenis venster onload wordt geactiveerd.

De URL leek geen HTML-pagina te zijn

Om er zeker van te zijn dat uw pagina een HTML-pagina is, controleert GTmetrix de Content-Type header op tekst/HTML, omdat GTmetrix alleen HTML-pagina's analyseert.

U kunt deze fout ook krijgen als de Content-Type-header ontbreekt of als de waarde leeg is. Dit probleem treedt meestal op vanwege de webtoepassing, niet de server.

JavaScript-omleiding of metavernieuwing

Helaas verwerkt GTmetrix momenteel geen pagina's die Meta-verversingen uitvoeren of JavaScript gebruiken om de pagina om te leiden en kan dit type fout nog steeds niet oplossen.

404 fouten

404's zijn een van de belangrijkste fouten die u moet oplossen voor betere prestaties. 404-fouten veroorzaken valse verzoeken en enkele ernstige problemen voor de snelheid van uw site. Ofwel moet je ze volledig laten verdwijnen door ze in 410 te veranderen vanuit je zoekconsole of om te leiden naar een geldige URL.

Schakel WooCommerce Cart Fragment AJAX uit

als je een online winkel hebt en WooCommerce gebruikt, is er een Ajax-bestand dat te lang duurt om te laden. Dit Ajax-bestand duurt 2 of 3 seconden om volledig te laden, dus het uitschakelen ervan zou de laadsnelheid van uw site verbeteren. U kunt een gratis plug-in gebruiken om het WooCommerce-probleem met het winkelwagenfragment op te lossen.

Herschik uw CSS- en Javascript-bestanden in de juiste volgorde

Uw CSS- en JS-bestanden zouden de . moeten zijn inline tag van de hoofd label. als ze van elders worden geladen, moet u ze opnieuw ordenen of van uw website verwijderen.

Captcha-probleem met contactformulier

Als u het contactformulier gebruikt, kunt u uw laadsnelheid verbeteren door het cachingsysteem uit te schakelen. Het contactformulier probeert te voorkomen dat de captcha in de cache wordt opgeslagen, dus het kost veel tijd om het proces uit te voeren. U kunt uw laadsnelheid verhogen door deze uit te schakelen.

Vervolgens gaan we enkele van de belangrijkste fouten onderzoeken die u kunt vinden in het resultaat van uw websitesnelheidstest. We hebben praktische oplossingen geboden waarvan we hopen dat ze u helpen bij het optimaliseren van uw website.

Ontleden van javascript uitstellen

Allereerst moet u weten dat we twee opties hebben om het javascript-bestand op te roepen en dit type fout op te lossen.

Methode 1:

function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "java.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load",
downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;

Methode 2:

Verklein en combineer CSS en verklein Javascript

Het betekent het verminderen van het volume van CSS- en Javascript-codes. Om deze fout op te lossen, verwijdert u eenvoudig extra spaties en beschrijvingen.

De GTmetrix-website geeft u een gecomprimeerde versie van uw stijl of script, genaamd Optimize-versie voor elke link, die u kunt proberen te vervangen door uw stijl en script op uw eigen website, maar houd er rekening mee dat u altijd een back-up moet maken van de stijlen en scripts van uw website. Er zijn enkele online tools of plug-ins die u kunnen helpen.

Eigenlijk zouden al je CSS- en JS-codes na het sluiten van de body-tag (after tag), dus u moet ze in de juiste volgorde verplaatsen om de prestaties van uw website te verbeteren.

Gebruikmaken van browsercaching

In dit geval toont GTmetrix u de gevallen die u beter kunt opslaan in de verkennercache van de gebruiker, om de laadsnelheid van de website te verhogen.

GTmetrix zei bijvoorbeeld dat "http://.../font/calibri.woff" moet worden opgeslagen in de cache van de gebruiker.

Je ziet aan de extensie en het adres dat het een lettertype is dat wordt gebruikt voor het ontwerpen van de website. Het is voldoende om te zeggen dat het lettertype met de extensie .woff moet worden opgeslagen in de verkennercache van de gebruiker. Kopieer hiervoor de volgende code en plak deze in het .htaccess-bestand:

ExpiresActive On ExpiresByType font/woff "toegang plus 1 jaar" ExpiresDefault "toegang 1 maand"

We hebben een voorbeeld gegeven van wat u moet doen om de browsercachingfout met hefboomwerking op te lossen, maar dat is niet alles. Er zijn veel verschillende elementen die beter in de browser kunnen worden opgeslagen. U kunt codes voor uw benodigde gegevens hieronder vinden:

  
  #Comprimeer HTML, CSS, JavaScript, Tekst, XML en lettertypen 
    AddOutputFilterByType DEFLATE-applicatie/javascript AddOutputFilterByType DEFLATE-applicatie/rss+xml AddOutputFilterByType DEFLATE-applicatie/vnd.ms-fontobject AddOutputFilterByType DEFLATE-applicatie/x-font AddOutputFilterByType-DEFLATE-applicatie/x-font-opentype AddOutputFilterByType x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterFilterType AddOutputFilterFLopenType AddOutputFilterFilterFLopenType AddOutputFilterByType image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE tekst/plain AddOutput DEFLATEFilterBy

  # Verwijder browserbugs (alleen nodig voor echt oude browsers)
    BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html Header toevoegen Vary User-Agent


## VERLOOPT HEADER CACHING ##
ExpiresActive On ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType image/svg+xml "access 1 month" ExpiresByType text/css "toegang 1 maand" ExpiresByType application/pdf "access 1 maand" ExpiresByType text/x-javascript "access plus 1 maand" ExpiresByType application/javascript "access plus 1 maand" ExpiresByType application/x-javascript "access plus 1 maand " ExpiresByType application/x-shockwave-flash "toegang 1 maand" ExpiresByType image/x-icon "toegang 1 jaar" ExpiresDefault "toegang 2 dagen"

Verklein HTML

Het betekent het verminderen van het aantal HTML-codes. Wijzig hiervoor handmatig de codes zoals hieronder:

of gebruik deze gecomprimeerde modus:

Inline klein JavaScript

Om dit op te lossen, kun je de body-sectiescripts beter overzetten naar de head-sectie van de website of aan het einde van de body-sectie. Zet dat tenslotte in een bestand en verwijs naar die link.

Keep-Alive inschakelen

Het verwijst naar het levend houden van het bestand tussen server en verkenner. Plaats gewoon deze volgende code in de htaccess-map van uw website:

Headerset Verbinding keep-alive

Vermijd slechte verzoeken

Het betekent dat het gevraagde adres niet meer bestaat. Om deze fout op te lossen, moet u de adressen vinden die GTMetrix u in uw sjabloon laat zien en deze verwijderen omdat er staat dat dit adres niet beschikbaar is.

Aantal verzoeken

GTmetrix zegt dat je minder dan 87 verzoeken op een website zou moeten hebben. Het is een gemiddeld aantal en hoe minder verzoeken je hebt, hoe beter de prestaties.

U kunt de plug-in WP-Rocket of Lazy Load gebruiken om dit probleem op te lossen. Lazy Load laat bijvoorbeeld de waardeattributen van de afbeeldingentag weg en laat de site volledig laden, waarna het de afbeeldingsattributen weer in hun vorige volgorde plaatst. Hierdoor worden verzoeken tijdens het laden verminderd en wordt uw "Time to first-byte"-factor verbeterd.

Dit zijn plug-ins die u kunt aanschaffen in Deep thema met 20% korting en hun gids is volledig uitgelegd in de Deep thema documentatie.

Specificeer afbeeldingsafmetingen

Dit betekent het specificeren van waarden voor de breedte en hoogte van de afbeeldingen op onze website. Het is beter om niet alleen waarden voor onze afbeeldingen op te geven via CSS, maar ook in HTML, zoals het volgende:

Nadat je deze oplossing hebt gedaan, zal de SEO van je afbeeldingen worden verbeterd en geoptimaliseerd, daarom kun je zien dat de indexeringssnelheid van je afbeeldingen omhoog gaat.

Moeiteloze manieren om uw paginasnelheid te verhogen

1. plugins

Wanneer u een aantal plug-ins op uw site actief heeft, kan dit uw site vertragen. Deactiveer alle plug-ins behalve degene die in het thema zijn opgenomen en wis de browsercache. Vervolgens kunt u uw plug-ins één voor één activeren en controleren welke plug-in uw site vertraagt.

2. Afbeeldingen

Afbeeldingen zijn een belangrijke factor bij het optimaliseren van een website. Het is belangrijk om je afbeeldingen te optimaliseren voor je website. Afbeeldingen met grote formaten kunnen uw site vertragen. Upload geen afbeeldingen in groot formaat. Als uw weblog bijvoorbeeld is gemaakt met afbeeldingen met de grootte 800*600, moet u een afbeelding uploaden met dezelfde grootte en niet groter.

3. Gastheer

Uw host of server kan een reden zijn voor de lage snelheid van uw site. Als je VPS gebruikt voor je hosting, kan dit komen door slechte configuraties en weinig resources. Als je shared hosting gebruikt, moet je hierover contact opnemen met je hostprovider, zodat zij dit kunnen controleren.

4. JS- en CSS-bestanden

U moet een cache-plug-in gebruiken. Deze plug-ins verkleinen uw bestanden en combineren ze en slaan een versie van het bestand op in de cache om uw serververzoeken te verminderen en als gevolg daarvan zal het uw sitesnelheid verhogen.

Onze suggesties om de laadsnelheid van uw website te verhogen:

Je kunt altijd een gratis plug-in gebruiken om de snelheid te verhogen, maar natuurlijk zijn betaalde plug-ins hier beter in. We raden WP Rocket aan.

• WP-Rocket gebruiken (betaald)
• Een gratis plug-in gebruiken

A. WP-Rocket-plug-in gebruiken (aanbevolen)

1. Krijg een back-up

Voor alles krijgen we een back-up van de bestanden die kunnen veranderen. Bestanden zoals afbeeldingen en hoofdbestanden van het thema. Ga hiervoor naar je hostpaneel in wp-content/uploads/ en maak een back-up van de genoemde bestanden. Haal ook een back-up uit de themamap en noem deze before-minify.zip in de map: wp-content/themes/deep

2. Koop en installeer WP Rocket

Deep is in samenwerking met WP Rocket en we hebben een 20% kortingscode (promotie) voor je gereserveerd. Deze kortingscode kun je gebruiken voor het aanschaffen van WP Rocket Plugin. Volg dit adres: WordPress Dashboard > Deep > Prestaties

Opmerking: alle opties van de cache-plug-in (wp-rocket) zoals HTML, CSS Minify, JS Minify, CDN, Cache en Minify en alles wat met de plug-in te maken heeft, moeten worden gedeactiveerd omdat de plug-in vers is.

3. Bestandsoptimalisatie

Ga naar plug-in-instellingen en schakel op het tabblad Bestandsoptimalisatie alle 3 opties voor Basisinstellingen in. Zoals de afbeelding hieronder:

4. Cache wissen

U moet de cache wissen op het tabblad Dashboard

5. CSS-inhoud ophalen

Open de site in de gastmodus van de browser en druk vervolgens op CTRL + U om de sitebron weer te geven. Er is een CSS-bestand gemaakt door WP-Rocket boven de HTML, klik en open het bestand.

Open de inhoud van het bovenstaande bestand en kopieer het en plaats het vervolgens op het tabblad Bestandsoptimalisatie in CSS-levering optimaliseren. U dient deze optie aan te vinken om deze weer te geven.

Belangrijk: Gebruik @import niet binnen de CSS omdat het verzoek naar een andere site wordt gestuurd en de laadtijd toeneemt. @import heeft een URL die u moet openen en de inhoud ervan moet kopiëren en in Optimize CSS Delivery moet plaatsen en vervolgens @import naast de URL moet verwijderen.

Maak nu de cache leeg en controleer de site in de gastmodus van de browser en zorg ervoor dat alles netjes is. Opmerking: De CSS die in de war is, gebeurt wanneer er een open opmerking in de CSS is en deze niet is gesloten. Het kan zijn veroorzaakt door een plug-in die door de plug-ins één voor één te deactiveren, kunt achterhalen welke plug-in het probleem veroorzaakt.

6. Javascript-bestanden

Ga naar het tabblad Bestandsoptimalisatie en schakel in JavaScript-bestanden alle opties uit zoals in de onderstaande afbeelding:

7. Luie lading

Om LazyLoad voor de afbeelding te gebruiken, gaat u naar het tabblad Media en past u de instellingen aan, zoals de onderstaande afbeelding:

8. CDN

Door deze content delivery-netwerken te gebruiken, kunt u de snelheid van uw site aanzienlijk verhogen. Het netwerk voor inhoudslevering zal uw statische items zoals afbeeldingen en scripts aan de gebruikers leveren op het dichtstbijzijnde punt bij de server.

B. Gratis plug-ins gebruiken

1. Download en installeer Autoptimize

Ga naar je WordPress admin > Instellingen menu > Autoptimize. Klik vervolgens op de Toon geavanceerde instellingen en handel net als dit voorbeeld voor de instellingen:

2. Download en installeer LazyLoad door WP Rocket

WordPress admin > Instellingen > LazyLoad en zet de lazyload aan voor je afbeeldingen en video's.

3. Download en installeer Schakel Gzip-compressie in

A. Ga naar WordPress admin > Instellingen > gzip-compressie en schakel de Gzip-compressie in

4. Download en installeer WP Super Cache

A. Ga naar WordPress admin > Instellingen > WP Super Cache en schakel de cache-optie in

5. Slider Revolution

Als je Slider Revolution-plug-ins gebruikt, ga dan naar Algemene instellingen en handel als dit voorbeeld voor de instellingen:

Openbare suggesties

Fix 404-fout

Afbeelding optimaliseren

Wij gebruiken WP Smush-plug-in om de afbeeldingen te optimaliseren. Als u ziet dat op de GTMetrix-website op het tabblad Waterval de afbeelding lang duurt bij het laden van uw site, moet u de volgende oplossing gebruiken: We gebruiken de gratis tools van de website http://compressjpeg.com/ om de afbeeldingen te optimaliseren.

Bij de eerste stap wordt de afbeeldingsgrootte automatisch verkleind, maar om de afbeeldingsgrootte beter te maken, klikt u op de afbeelding, waarna de instellingen worden geopend en u uw afbeeldingsgrootte zo veel verkleinen als u wilt

Door op de knop Downloaden te klikken, kunt u uiteindelijk de gecomprimeerde afbeelding downloaden. Een van de kenmerken van deze website is dat u een aantal afbeeldingen tegelijk kunt uploaden en deze als een groep afbeeldingen kunt comprimeren.

Schakel WooCommerce Cart Fragments AJAX uit

Het AJAX-bestand van WooCommerce neemt veel tijd in beslag van de laadtijd van de site en om deze AJAX uit te schakelen, moet u de plug-in voor winkelwagenfragmenten uitschakelen gebruiken. U kunt de plug-in downloaden hier

Als je de Polylang-plug-in naast WP Rocket gebruikt, installeer dan wp-raket-cache-donotchangepage Plugin ook.
Als je Refill ziet dat gerelateerd is aan Contact Form 7 Plugin in GTMetrix op het tabblad Waterfall, ga dan naar het volgende adres:
/wp-content/plugins/contact-form-7/includes/controller.php :: Regel :: 69 – 71
En becommentarieer (deactiveer) de code:

/* if (defined('WP_CACHE') && WP_CACHE) { $wpcf7['cached'] = 1; } */

we plaatsen tussen /**/ om het uit te schakelen.
– Onthoud dat u de cache van de plug-in moet wissen na elke taak die u uitvoert.
Onthoud ten slotte altijd dat u na het bijwerken van de site, inclusief het toevoegen van nieuwe afbeeldingen, moet nadenken over wat hierboven voor hen is uitgelegd.
Nadat de plug-ins zijn bijgewerkt, worden uw wijzigingen verwijderd en moet u de stappen na elke update opnieuw uitvoeren. Bijvoorbeeld Contact Form 7 Plugin.