Google Pagespeed optimalisatie

Op het moment dat je aan de slag gaat met website optimalisatie, zijn er verschillende tools en analyse methoden beschikbaar. Vaak krijgt onze support de vraag hoe het precies zit met de verschillende tools, en met name hoe je de mobiele score binnen Google Pagespeed kunt verbeteren. 

Er zijn verschillende tests die je kunt inzetten met verschillende doeleinden. Zo zijn GTmetrix en Webpagetest.org perfect voor snelheid optimalisatie en is Googe Pagespeed Insights handig voor gebruikerservaring optimalisatie. Als je een 100/100-score hebt in Pagespeed, wil dat niet zetten dat jouw website supersnel is. Tevens werkt ook andersom: een supersnelle website hoeft niet per se een 100/100-score te hebben.

Stap 1: Optimaliseren van desktop score

Ieder hosting pakket heeft bevat alle tools en technieken om 100% te scoren op zowel desktop als mobiel (zie demo). Hoasted is namelijk een voorstander van het gebruik van de nieuwste tools en technieken, en probeert deze ook zo snel mogelijk beschikbaar te maken voor alle klanten. Onder andere HTTP/3 en nextgen afbeeldingstype WebP zijn daar een voorbeeld van.

Desktop score zelf optimaliseren
Wanneer je zelf aan de slag wilt met optimalisatie voor Google Pagespeed Insights, is het bij de analyse van scores als eerst van belang te optimaliseren op basis van de desktop score alvorens te kijken naar de score op mobiel. Pas nadat je desktop versie van jouw website goed geoptimaliseerd is, kan de mobiele score verbeterd worden. Dat is de meest effici├źnte en slimme werkwijze hierin.

Op dat voor elkaar te krijgen, richt je je op de vijf zaken dei de meeste impact hebben op de performance van een website. Zie onderstaand de verschillende onderdelen en tevens de link naar bijbehorende uitleg:

  1. PHP versie hoogst mogelijk (zie PHP versies en modules aanpassen)
  2. Gebruik caching (zie Caching instellen WordPress)
  3. Optimalisatie afbeeldingen uitgevoerd (zie Afbeeldingen optimaliseren met imagecrunch)
  4. Activatie gebruik nextgen type afbeeldingen (zie Afbeeldingen uitserveren op basis van WebP)
  5. Slim uitsluiten van onderdelen met een plugin load filter (https://nl.wordpress.org/plugins/plugin-load-filter/)
  6. Het aantal database queries omlaag brengen. Je kunt daarvoor de instellingen aanpassen en vervolgens met onderstaande plugin (zie ook de handleiding) snel testen hoeveel database verzoeken er worden gedaan en of de aanpassingen veel minder worden: https://nl.wordpress.org/plugins/query-monitor/
  7. Optimaliseren van de database. Er zitten in de LiteSpeed plugin ook een aantal database optimalisatie mogelijkheden. Een lichtere (kleinere) database maakt het uitvoeren van verzoeken namelijk ook een stuk sneller. We kunnen ook deze plugin zeer aanraden: https://lt.wordpress.org/plugins/plugins-garbage-collector/

Desktop score professioneel laten optimaliseren
Indien je graag wilt dat wij de desktop versie van je website professioneel optimaliseren, dan kan dat. We hebben verschillende opties, passend bij ieder budget. Zie via deze link alle details en uitleg daarover: Aangezien mobiele pagespeed optimalisatie voor iedere website totaal anders is, optimaliseren enkel voor desktop in deze dienstverlening. De score op mobiel zal na een professionele optimalisatie echter ook mee profiteren van de optimalisatie.

Stap 2: Optimaliseren van mobiele score

Wanneer de Google Pagespeed op desktop boven de 80% zit, heeft het zin om aan de slag te gaan met de optimalisatie van de mobiele score. Op het gebied van hosting instellingen of optimalisaties zijn er op dat moment geen verbeterpunten meer, waardoor de winst dan enkel nog in de code van de website zelf zit (waaronder in het thema, de plugins, externe scripts, content en functionaliteit).

Maximale score niet altijd het beste voor jou
Ieder hosting pakket dat wij aanbieden heeft de mogelijkheid om 100% te scoren binnen Google Pagespeed, GTmetrix, Pingdom en webpagetest.org, op zowel desktop als mobiel. Het kan echter zijn dat een 100% score voor jouw website niet ideaal is, omdat jullie bijvoorbeeld gebruik willen blijven maken van bepaalde tracking scripts of functies in het kader van marketing of conversie-tracking. Vaak is het daarom het vinden van een juiste balans tussen het verbeteren van score en het behouden van gewenste functionaliteit op mobiel. Google Pagespeed houd bij de beoordeling namelijk geen enkele rekening met conversie-tools of scripts die je in je website willen gebruiken, maar enkel met de gebruikerservaring.

Werking analyse
Bij de optimalisatie van je mobiele score komt het neer op een aanpassing van code en functionaliteit in je website, om zo laag mogelijke 'load' te veroorzaken op het mobiele apparaat waarmee de website wordt uitgeladen. De mobiele Pagespeed tool van Google gebruikt daarvoor een gesimuleerde 3G verbinding waardoor zaken als afbeeldingen of grote (en externe) JavaScript bestanden worden gemeten als het gaat om de tijd die nodig is om volledig uit te laden. Daarnaast simuleren ze de CPU kracht en netwerk verbinding van een gemiddelde mobiele telefoon.

Oplossingsrichtingen
Hoe dan ook, om de Pagespeed score op mobiel zo dicht bij de 100% te krijgen, zijn er eigenlijk twee mogelijke oplossingsrichtingen:

  • Content & functionaliteit aanpassen
    Minder afbeeldingen, uitschakelen scripts, functies, popups (enkel op mobiel uitschakelen)
  • Gebruik maken van mobiele site
    Een losse mobiele website maken (niet een responsive versie van de bestaande site) die extreem licht is. Deze is volledig ge-ent op het uitladen op mobiel en daarmee ook super licht opgezet als het gaat om content en functionaliteit. Vaak zijn deze pagina's volledig statisch en niet verbonden met aparte scripts of PHP functionaliteit.
Hoe te optimaliseren voor mobiel
We raden aan om goed te kijken welke huidige functionaliteiten eventueel uitgeschakeld zouden kunnen worden op mobiel en eventueel ook op desktop. Denk hierbij aan scripts, animaties, lettertypes, popups of externe scripts. Vaak is de oorzaak van een lage score het resultaat van meerdere zware (externe) scripts. Door de gesimuleerde verbinding kan dit zorgen voor een relatief zware load. Wanneer je de mobiele score omhoog wilt krijgen is het noodzakelijk om (na de desktop optimalisatie onderdelen) nog een aantal extra optimalisaties door te voeren:
  1. Minder code uitleden in minder onderdelen
  2. Prioriteit van uitladen om pagina's sneller te maken
  3. Prioriteren van zichtbare inhoud (zogenaamde 'above the fold content'_
  4. Minimaliseren van redirects
  5. Elimineren van niet noodzakelijke en onzichtbare onderdelen die het uitladen kunnen vertragen ( bijvoorbeeld tracking scripts).

Om alle verbeterpunten voor jouw website op basis van de Pagespeed analyse te volgen, open je de details in de rapportage. We raden aan om de stappen te volgen die in de Google Pagespeed rapportage onderdelen zelf zijn toegelicht. In onze ervaring zijn de tips en detail-toelichting per aspect zeer goed op te volgen en ook vaak ge-ent op WordPress optimalisatie.

Nog steeds hulp nodig? Contact ons Contact ons