Hou je mond, Google PageSpeed! Herstel de belangrijkste foutmeldingen

Tobias Schüring Laatst bijgewerkt op 21.10.2020
11 Min.
Google-foutmeldingenPageSpeed Insights
Laatst bijgewerkt op 21.10.2020

Google PageSpeed Insights is een uitstekend hulpmiddel om snel een overzicht te krijgen van het optimalisatiepotentieel van uw site. Vandaag zal ik u laten zien hoe u dit potentieel kunt gebruiken en uw PageSpeed-score kunt verhogen. Maar je moet niet slaafs de Google-resultaten volgen. Omdat de PageSpeed-foutmeldingen niet altijd nuttig.

Enige tijd geleden heeft onze collega Caspar Hübinger... een van zijn blogberichtenlaten we zeggen, heel duidelijke woorden voor zijn Google PageSpeed Insights-resultaat gevonden. En hij bekritiseert niet alleen de tool, maar ook het gebruik ervan door de gebruikers. Want als u niet weet hoe u de individuele optimalisatievoorstellen moet interpreteren en corrigeren, kunt u zich snel verliezen in de onzinnige jacht op een 100-waardering. Maar dat zou onverstandig zijn. Omdat utopische hoge Google PageSpeed-waarderingen meestal een verspilling van tijd zijn. Belangrijker is de optimalisatie van de laadtijd.

Vandaag zal ik u laten zien hoe u de belangrijkste foutmeldingen van Google kunt interpreteren PageSpeed Insights en hoe u uw site dienovereenkomstig kunt optimaliseren.

Maar voordat ik u laat zien hoe u de individuele foutmeldingen kunt interpreteren en hoe u de fouten kunt herstellen, wil ik u graag uitleggen hoe u Google PageSpeed Insights correct kunt gebruiken. Want we hebben vaak gezien dat gebruikers erg gefixeerd zijn op hun PageSpeed-score zonder de laadtijd van hun pagina in de gaten te houden.

Als dit gedeelte je niet interesseert, Sla het maar over. en leer direct hoe de foutmelding "Compress CSS" te verhelpen.

Google PageSpeed-foutmeldingen zijn niet altijd correct en belangrijk

U mag nooit alleen vertrouwen op de resultaten of foutmeldingen van GooglePageSpeed Insights . De Google-tool meet niet de belangrijkste parameter van uw pagina: de laadtijd van de pagina. Om dit correct te meten, raad ik aan webpaginatest.org.

Alleen als u de laadtijd van de pagina's vanaf het begin van de optimalisatie van uw site in de gaten houdt, kunt u zinvolle uitspraken doen over het succes van de optimalisatie. Want het doel van elke optimalisatie moet altijd een verbeterde gebruikerservaring zijn. In het geval van performance-optimalisatie is dit natuurlijk de laadtijd van de pagina's en de waargenomen laadtijd van de pagina's.

OPMERKING!

Meet altijd eerst de laadtijd van de pagina voordat u de prestaties van uw pagina optimaliseert. Alleen zo kun je inschatten hoe succesvol de optimalisatie was.

Vanuit het oogpunt van de gebruiker zijn een snellere laadtijd van de pagina en een kleinere paginagrootte altijd een voordeel. Het geduld en de aandacht van de gemiddelde gebruiker neemt voortdurend af (zoals deze studie van Microsoft aantoont) - dit is met name cruciaal voor e-commerce - en steeds meer bezoekers komen via mobiele apparaten. Reeds in 2016 56 procent van de Duitsers gebruikt het internet regelmatig via smartphones of tablets geroepen. Verbindingssnelheden en datavolumes zijn niet altijd onbeperkt. Slanke, snelle pagina's zijn daarom geschikt.

Google PageSpeed geeft echter alleen hints over het optimalisatiepotentieel van uw site en laat slechts weinig conclusies toe over de gebruikerservaring. De lage betekenis van Google PageSpeed-foutmeldingen wordt versterkt door het feit dat de tool op bepaalde gebieden niet of slechts tegen aanzienlijke extra kosten kan worden geïmmobiliseerd.

Zo zal bijvoorbeeld de verwijzing naar de caching van de browser altijd verschijnen wanneer externe bronnen - waaronder de eigen diensten van Google - worden geïntegreerd. Maar deze middelen kunnen niet worden gedekt door de browser caching van uw site. De foutmelding is niet relevant voor de gebruikerservaring van uw site, maar komt voort uit de logica van de tool zelf. In het ergste geval wordt het bericht geïnterpreteerd alsof er geen browser caching actief is.

Oordeel dus niet in de eerste plaats over de Google-rating, maar over de laadtijd. Dit is de enige echt belangrijke variabele.

Maar hoe zit het met mijn Google-ranking?

Het voorbeeld van de ontbrekende browser caching maakt heel duidelijk waarom u zich niet moet laten ontmoedigen door een zogenaamd slecht PageSpeed resultaat.

Als u bijvoorbeeld Google Maps of Google Analytics op uw site hebt geïntegreerd, zullen ze de volgende foutmelding veroorzaken:

Typische Google-foutmeldingenPageSpeed Insights: Browser caching wordt naar verluidt niet goed gebruikt

Hetzelfde geldt voor andere diensten van derden. Bijvoorbeeld onze support-chat.

Dus elke keer als we onze site PageSpeed Insights testen, staat dit punt bij ons in het krijt. Dat betekent dat we weten dat deze factor onze resultaten altijd negatief beïnvloedt en dus gewoonweg negeert.

Voor de SEO van uw site betekent dit: Ook voor de ranking bij Google zijn de laadtijd en de gebruikerservaring veel belangrijker dan de concrete PageSpeed rating.

Want als u de laadtijd van uw pagina optimaliseert, bewerkt u automatisch veel van de gebieden die belangrijk zijn voor Google. Een verbetering van de laadtijd en de Google PageSpeed score zijn dus op een bepaalde manier gerelateerd.

Maar naar mijn mening moet je jezelf niet verliezen in de jacht op een 100-tal punten.

Maar nu de optimalisatiestappen!

Foutbericht 1: Comprimeer CSS

Onze ervaring is dat dit een van de meest angstaanjagende foutmeldingen van Google PageSpeed Insightsis.

Hou je mond, Google PageSpeed! Herstel de belangrijkste foutmeldingen

Betekenis: Deze foutmelding geeft aan dat de CSS-bestanden van uw site nog steeds gecomprimeerd kunnen worden (of, in het bovenstaande geval, dat dit al met succes is gebeurd). Door deze compressie zal het aantal karakters in de documenten afnemen. Hierdoor krimpt de bestandsgrootte. Zo worden bijvoorbeeld opmerkingen, spaties en opmaak verwijderd.

Uitvoering: Zelfs als deze verwijzing een afschrikkend effect heeft, is de uitvoering zeer eenvoudig. In principe zijn er twee mogelijke oplossingen voor deze zaak: Als u zelf in CSS past, kunt u het aantal CSS-bestanden handmatig verminderen en een Verkorte vorm gebruik. U kunt de CSS-bestanden ook gebruiken via online tools, zoals CSS-compressor of CSS-mijnwerker...het met de hand te verminderen.

Hou je mond, Google PageSpeed! Herstel de belangrijkste foutmeldingen

Natuurlijk is er ook de comfortabele oplossing met behulp van CSS-miniaturisatiePlugins in WordPress . Sommige Plugins van hen doen direct een all-round wrapping en kunnen niet alleen CSS, maar ook JavaScript en HTML comprimeren en optimaliseren.

Meer informatie

Voor een gedetailleerde uitleg van de manieren waarop u kunt reduceren in WordPress HTML, CSS en JavaScript, zie in dit artikel.

Met HTTP/2 is het niet noodzakelijkerwijs zinvol om CSS te combineren.

De zojuist genoemde Minify-Plugins worden veel gebruikt. Omdat ze comfortabel zijn en de compressie en samenvatting van CSS (en nog veel meer) volledig automatisch overnemen. Tot voor kort had het samenvoegen van CSS-bestanden ook veel zin. Nu is het anders: sinds de HTTP/2-standaard browsers zijn in staat om meerdere bestanden tegelijk te laden vanaf de webserver.

Dit betekent dat de data niet langer gecombineerd hoeft te worden, aangezien met HTTP/2 meerdere datapakketten tegelijkertijd kunnen worden uitgewisseld. HTTP/2 moet bijvoorbeeld door de hoster zijn opgezet en kan alleen worden gestart met SSL-certificaat kan worden gebruikt.

Dus voordat u beslist over een Plugin met enkele tientallen functies en configuratiemogelijkheden, moet u goed nadenken of u het überhaupt nodig hebt. Zeker als je denkt dat je CSS zelf kunt optimaliseren.

Omdat een extra Plugin exemplaar onder bepaalde omstandigheden uw site kan vertragen. Vooral als de andere functies van de allrounders zichPlugins niet ten volle kunnen ontplooien.

Foutmelding 2: verwijder middelen die de weergave blokkeren

Dit bericht laat ook veel gebruikers zweten, omdat het niet zo eenvoudig te implementeren is en ook een van de eeuwige kritiek van Google PageSpeeds.

Hou je mond, Google PageSpeed! Herstel de belangrijkste foutmeldingen

Betekenis: Een webpagina wordt in een bepaalde volgorde gebouwd. Deze laadvolgorde kan worden geoptimaliseerd. PageSpeed klaagt bijna altijd dat CSS-bestanden deze optimale laadvolgorde blokkeren. Dit geldt zelfs voor pagina's die al zeer goed geoptimaliseerd zijn (zoals de Caspar Hübinger zaak laat zien). Desalniettemin kan de notitie zeer waardevol zijn voor het optimaliseren van de laadtijd. In principe vertelt deze hint u dat JavaScript of CSS-code die belangrijk is voor een te laden element - bijvoorbeeld een achtergrondkleur - nog niet beschikbaar is op het moment dat het element wordt geladen. Daarom zal het niet worden weergegeven totdat het corresponderende CSS-commando is geladen. Dit verhoogt de laadtijd van uw pagina, maar heeft vooral invloed op de gebruikerservaring, omdat de pagina aanvoelt alsof hij langer wordt geladen.

Implementatie: Een gemeenschappelijke oplossing is het implementeren van een vuistregel: CSS in de header. Dit betekent dat u CSS-code verplaatst van de body van het HTML-document, de , naar het begin van het document, de , en het daar als .

Dit voorbeeld maakt duidelijk wat ik bedoel. De onderstaande code snippet definieert onze specifieke achtergrondkleur voor het blog. Het



U kunt deze optimalisatiemaatregel op twee manieren implementeren: U kunt de code zelf aanraken en de CSS-code in de header plaatsen, of u kunt het werk laten Plugin doen. Nogmaals, u kunt gebruik maken vanPlugins Beter WordPress Minify Ga door.

PageSpeed Insights Google-foutmeldingen - uittreksel uit de Plugin Better WordPress  Minify

De Minify-Plugin laat bijvoorbeeld in de opties zien welke CSS-bestanden al in de header zijn verplaatst. U kunt hier ook handmatig meer CSS-middelen toevoegen.

Google-foutmeldingen PageSpeed Insights - uittreksel van de optimalisatieplugin Autoptimize

De Plugin Autoptimize, daarentegen, neemt een draai ten goede: Hier selecteert u de opties voor alle CSS-bestanden die niet zijn uitgesloten van het proces.

De uittreksels uit de opties van de Plugins show: plugin-variant kan niet worden geïmplementeerd zonder een basiskennis van het proces. Je moet Plugins dus ook leren hoe je ze moet gebruiken.

Foutmelding 3: Efficiënt coderen van beelden

Ook op dit punt is er veel geklaagdPageSpeed Insights . Dit geval is echter bijna altijd snel en eenvoudig te implementeren en levert meestal tastbare voordelen op in termen van laadtijd.

Hou je mond, Google PageSpeed! Herstel de belangrijkste foutmeldingen

Opzettelijke betekenis: Veel gebruikers onderschatten de rol van de beeldgrootte voor de laadtijd van hun pagina. Foto's zijn vaak een van de grootste remmen op de laadtijd. Zelfs als er slechts kleine hoeveelheden gegevens worden opgeslagen voor afzonderlijke beelden, kan het totaal opgeslagen volume oplopen tot een aanzienlijke hoeveelheid gegevens.

Omdat een afbeelding zelden slechts één beeld is. genereert het automatisch WordPress meerdere miniaturen van het beeld bij het uploaden. Dus als u de originelen op uw homepage niet gebruikt, maar kleinere versies ervan, d.w.z. thumbnails of Aanbevolen afbeeldingendan moeten deze natuurlijk ook geoptimaliseerd worden. Vanuit een foto zo snel meerdere bestanden, die ook een meervoudige gegevenslast met zich meebrengen.

Implementatie: In principe heeft u twee mogelijkheden om uw beelden te optimaliseren. Ofwel optimaliseert u de afbeeldingen voor het uploaden, ofwel na of tijdens het uploaden. De eerste kunt u doen via online of offline tools, de tweede doet u via overeenkomstige WordPress Plug-ins voor beeldverbetering.

Als u de compressie op een verstandige manier kunt integreren in uw workflow, is het zinvol om de beelden te optimaliseren voordat ze worden geüpload. Voor dit doel zijn er online tools, zoals Octopus.io. Of u kunt de kwaliteit en dus de bestandsgrootte van uw afbeeldingen offline verminderen, bijvoorbeeld direct in Photoshop. Zo bespaart u zich het extra Plugin werk en houdt u uw terrein slank.

De meest comfortabele oplossing is natuurlijk een Plugin. Add-ons zoals Optimus of Smush niet alleen het hoofdbeeld te optimaliseren, maar ook alle varianten ervan. Smush is ook in staat om al uw bestaande beelden achteraf te optimaliseren.

Ze Plugins werken onder andere met een zogenaamde "verliesloze compressie". Dit betekent dat de bestandsgrootte van de beelden weliswaar kleiner wordt, maar dat de zichtbare kwaliteit niet afneemt.

Foutmelding 4: Activeer tekstcompressie

Deze foutmelding van Google PageSpeed kan zeer snel worden verholpen en kan de laadtijd van uw pagina aanzienlijk verkorten.

Hou je mond, Google PageSpeed! Herstel de belangrijkste foutmeldingen

Opzettelijke betekenis: U heeft de grootte van de afbeeldingen en CSS van uw site al zoveel mogelijk gereduceerd. Dat is goed! Maar dit is niet het einde van het verhaal. Want nu kun je een ander compressiemechanisme gebruiken. U kent dit proces waarschijnlijk van het downloaden van grote datapakketten: Deze zijn meestal in gecomprimeerde vorm met rits. Dit maakt de data kleiner tijdens het downloaden en dus sneller. De gegevenspakketten moeten echter nog steeds worden uitgepakt na het downloaden. Precies hetzelfde gebeurt tijdens het bouwen van de pagina's: De webserver levert de gegevenspakketten in gecomprimeerde vorm aan, de webserver pakt ze uit. Dit maakt de gegevensoverdracht sneller en verkort de laadtijd van de pagina.

Implementatie: Ofwel is de datacompressie al ingesteld aan de serverzijde, ofwel moet u deze zelf activeren. Als u een RAIDBOXES klant bent, hoeft u zich nergens zorgen over te maken. Omdat we de bijzonder sterke Brotli compressie actief.

Met de volgende vermelding in uw .htaccess kunt u ook de zogenaamde GZIP-compressie handmatig activeren. Op voorwaarde dat u een Apache-webserver heeft.


 mod_gzip_on Ja
 mod_gzip_dechunk Ja
 mod_gzip_item_include bestand .(html? |txt|css|js|php|pl)$
 mod_gzip_item_inclusief handler ^cgi-script$
 mod_gzip_item_inclusief mime ^tekst/.*
 mod_gzip_item_inclusief mime ^application/x-javascript.*
 mod_gzip_item_excludeer mime ^image/.*
 mod_gzip_item_excludeer rspheader ^Inhoudscodering:.*gzip.*
 
 
 
 AddOutputFilterByType DEFLATE tekst/plafond
 AddOutputFilterByType DEFLATE tekst/html
 AddOutputFilterByType DEFLATE tekst/xml
 AddOutputFilterByType DEFLATE tekst/css
 AddOutputFilterByType DEFLATE applicatie/xml
 AddOutputFilterByType DEFLATE applicatie/xhtml+xml
 AddOutputFilterByType DEFLATE applicatie/rss+xml
 AddOutputFilterByType DEFLATE applicatie/javascript
 AddOutputFilterByType DEFLATE applicatie/x-javascript
 

Foutbericht 5: Zorg voor statische inhoud met een efficiënt cachingbeleid 

Naar mijn mening is de verwijzing naar browser caching veruit het meest vervelende op GooglePageSpeed Insights. Omdat u alleen browser caching kunt instellen voor uw eigen middelen. Browser caching is niet mogelijk voor externe bronnen.

Hou je mond, Google PageSpeed! Herstel de belangrijkste foutmeldingen

Betekenis: Browser caching betekent dat de browser een statische versie van uw pagina opslaat en niet de webserver hoeft op te vragen voor een herhaald bezoek, maar de pagina is al geladen.

Implementatie: Of uw hoster heeft de browser caching al ingeschakeld aan de serverkant, of u kunt het instellen door het .htaccess bestand te manipuleren (onthoud: deze instelling werkt alleen op Apache webservers). De onderstaande voorbeeldcode stelt bijvoorbeeld de browser cache in op één maand, d.w.z. dat de statische versie van uw pagina gedurende één maand in de browser van de bezoeker wordt opgeslagen.


VerlooptActief Aan
VerlooptStoring "toegang 60 seconden
VerlooptPertypebeeld/jpg "toegang plus 1 maand
VerlooptPertypebeeld/jpeg "toegang plus 1 maand
VerlooptPertypebeeld/gif "toegang plus 1 maand
VerlooptPertypeafbeelding/png "toegang plus 1 maand
VerlooptPertypebeeld/ico "toegang plus 1 maand
VerlooptPerType tekst/css "toegang 1 maand
VerlooptPer type tekst/javascript "toegang 1 maand
VerlooptPerType applicatie/javascript "toegang 1 maand
VerlooptPerType toepassing/x-schokgolf-"toegang" 1 maand

Ook hier geldt: Als u een RAIDBOXES klant bent, dan is de caching van de browser standaard al actief.

Mijn 2 cent: Zonder cache is alles niets...

Welnu, nu heeft u de afbeeldingen op uw site geoptimaliseerd, CSS gereduceerd, gecomprimeerd en in de juiste volgorde geplaatst en de browsers van uw bezoekers in de cache geplaatst. Al deze maatregelen verkorten de laadtijd van uw site.

Opzettelijke betekenis: Zonder een goede cache vergeef je echter veel van dit potentieel. Caching is en blijft veruit de belangrijkste prestatiefactor. Een cache slaat de inhoud van uw WordPress pagina tijdelijk op en zorgt ervoor dat de hele pagina niet telkens opnieuw hoeft te worden geladen. In plaats daarvan wordt een statische, reeds gerenderde versie van uw pagina geleverd vanuit een cache. Dit omzeilt vooral de trage PHP en de database.

Uitvoering: Ook hier geldt: Ofwel heeft uw hoster reeds serverzijdige cache of je kunt een cachingPlugingebruiken. Hier zijn een aantal zeer krachtige Pluginsdie grote delen van uw pagina in de cache plaatsen en leiden tot een aanzienlijke vermindering van de laadtijd voor terugkerende bezoekers.

De hoge potentie van cachingPlugins is ook de grootste zwakte ervan. Het kan goed zijn dat cachingPlugin uw site vertraagt voor de eerste keer bezoekers. Hoe ingewikkelder uw blog of site is, hoe ingewikkelder en uitgebreider de cache-engine die uw blog moet zijn. Dit is vooral relevant voor winkels.

Als je een relatief eenvoudige website hebt, zijn minimalistische oplossingen misschien wel beter dan het cachen van allrounders. Een van deze slanke Plugins oplossingen is bijvoorbeeld cache enabler.

U moet er rekening mee houden dat cachingPlugins meestal ook wordt gebruikt om CSS of JavaScript te verminderen en samen te voegen. Daarom moet u controleren of uw cachingPlugin de Plugins CSS-optimalisatie niet al overbodig maakt.

Als u gebruik maakt van server-side caching, is het aan te raden om de cachingfuncties van Plugins, zoals Autoptimize, uit te schakelen of eenmalig te testen, als deze een verder prestatievoordeel opleveren.

Conclusie: Verplaats Plugins veel met slechts een paar

U heeft het al gemerkt tijdens het lezen: Voor de optimalisatie van CSS, afbeeldingen en de optimalisatie van de laadvolgorde Pluginszijn er enkele die u veel werk besparen. Maar niet al het werk. CachingPlugins heeft ook snel een merkbaar effect, maar is soms zeer uitgebreid en biedt veel configuratiemogelijkheden en deels overbodige functies.

Kijk goed naar degene die Pluginsje gebruikt. Alleen als je weet wat er gebeurt als je bepaalde functies gebruikt, kun je verstandig optimaliseren. Overbelasting van de pagina met optimalisatiePlugins brengt weinig op.

En u moet ervoor zorgen dat u uw successen correct meet wanneer u optimaliseert. Of u nu met de hand of via Plugin het internet optimaliseert. Gebruik PageSpeed Insights als eerste oriëntatiepunt om de zwakke punten van uw site te identificeren. Meet vervolgens de laadtijd van uw site alvorens deze te optimaliseren. Pas nadat de beginsituatie is vastgelegd, heeft het echt zin om uw site stap voor stap te optimaliseren. Want alleen dan, als u de laadtijd voor en na elke optimalisatiestap kent, kunt u bepalen wat de individuele optimalisatiemaatregelen hebben opgeleverd.

Als systeembeheerder waakt Tobias over onze infrastructuur en vindt hij alle mogelijke manieren om de prestaties van onze servers te optimaliseren. Door zijn onvermoeibare inzet is hij vaak 's nachts bij Slack te vinden.

Gerelateerde artikelen

Commentaar op dit artikel

Schrijf een opmerking

Je e-mail adres wordt niet gepubliceerd. Verplichte velden zijn met * gemarkeerd.