Wat is pagespeed? De basis bij website sneller maken.
Pagespeed is een meting van hoe snel jouw website wordt geladen. Let op: veel mensen verwarren dit met sitesnelheid. Maar dát is in feite de paginasnelheid voor een voorbeeld van paginaweergaven op een site. Paginasnelheid kan worden beschreven als ‘laadtijd van de pagina’. Wil je weten wat de paginasnelheid is van jouw website? Dat kan met PageSpeed Insights van Google.
Waarom is pagespeed belangrijk?
Paginasnelheid is een cruciale factor om een website hoger te laten scoren in de zoekresultaten van Google. Immers, wees eens eerlijk, hoe lang wil jij wachten totdat een pagina is geladen…? Is je website dus niet op één lijn met de top 10 organische pagina’s? Dan kom je niet op de eerste pagina.
Focussen op paginasnelheid helpt dus enorm mee om een website te laten converteren en dus veel succes op te leveren voor jouw bedrijf. Wat hierbij de kunst is? Ontdekken wat ervoor zorgt dat een pagina langzaam laadt.
Belangrijkste ‘vertragers’
De meest voorkomende oorzaken van trage pagina’s zijn:
- zware afbeeldingen
- slecht ontworpen codering
Als je naar een moderne website kijkt, is deze waarschijnlijk tot het kantelpunt gevuld met afbeeldingen. Als je die niet optimaliseert, kom je zomaar uit op pagina’s die meerdere mb’s ruimte in beslag nemen. En dat kost veel rekenkracht bij je hostingpartij. Hoe goed je website het ook doet, het kan altijd beter.
Tip 1 – Comprimeer je fotobestanden
Een van de grootste snelheidswinsten die je kunt halen? Foto’s en andere mediabestanden in je website comprimeren. Met comprimeren bedoelen we: compacter maken in bestandsgrootte. Waarom? Zo hoeft je site minder data te laden bij elke webbezoeker.
Heeft dat comprimeren dan geen impact op de kwaliteit? Nee! Veel mensen denken dat foto’s er dan opeens niet meer mooi of scherp uit zien. In de praktijk hebben heel hoge kwaliteit foto’s echter zo veel detail, dat je die vaak niet terugziet op je scherm! Dus als je comprimeert, filter je deze overbodige kwaliteit eruit en wordt de foto een stuk compacter.
Resizen: verkleinen
Een ander aandachtspunt om rekening mee te houden? De resolutie van de afbeelding. Door te ‘resizen’ comprimeer je in de meeste gevallen ook veel data zonder dat dit ten koste gaat van de kwaliteit. Een handige tool die ik hiervoor gebruik: www.tinypng.com.
Probeer het zelf eens uit. Benieuwd of jij het verschil ziet 😉
Tip 2 – Gebruik een caching plugin
Caching is een term die je vaker tegenkomt als je een website laat ontwikkelen. Meestal als we spreken over websitecaching en gebeurt dit op applicatieniveau. Maar wat is het nut van caching?
Een doorsnee website heeft al gauw duizenden bestandjes. Telkens alle bestanden opnieuw weer uitlezen van de schijf (hosting), vraagt veel tijd. Zonder caching kost het seconden om deze bestanden op te halen.
Iedere vorm van vertraging pakt negatief uit voor de gebruikerservaring op je website. Met een goede caching plugin voorkom je dit. Zelf werk ik veel met de (betaalde) WordPress plugin WP Rocket. Goede, gratis alternatieven zijn W3C Total Cache en WP Super Cache.
Heb je hulp nodig bij het inrichten van goede caching? Neem dan contact met mij op.
Tip 3 – Maak gebruik van REDIS cache op serverniveau
Website sneller maken op serverniveau kan d,m.v. caching. Een bekende techniek die de laatste tijd veel voorkomt? REDIS. REDIS laat je tijdelijke gegevens supersnel uitlezen vanuit het RAM-geheugen; vooral voor webshops en zwaardere websites heel nuttig. REDIS kun je trouwens alleen activeren als je huidige hosting die mogelijkheid biedt. Bij je hostingpartij vind je meestal ook een handleiding hoe je REDIS installeert.
Zelf gebruik ik de gratis Redis Object Cache plugin. Activeren doe je door de volgende regels code toe te voegen in het wp-config.php bestand van je WordPress-website:
define(‘WP_REDIS_PATH’, ‘/tmp/redis.sock’);
define(‘WP_REDIS_SCHEME’, ‘unix’);
Zodra je deze code toevoegt, activeert de plugin en voilà, je REDIS cache is actief. Let op: dit hangt wel af van de partij waar je je website host.
Tip 4 - Gebruik zo weinig mogelijk html, Javascript en css
Je kunt je het volgende vast voorstellen: met meer in je website, des te meer er ‘uitgelezen’ moet worden om je website te tonen. Javascript, html en css vormen de basis van je site. Met meer scripts kan het zorgen dat een website langzamer laadt. Vooral plugins installeren pakt slecht uit voor je paginalaadtijd.
Probeer dus zo min mogelijk plugins te gebruiken als je een website ontwikkelt. En vraag je ontwikkelaar kritisch te kijken naar gebruik van code. Als je de code slim vermindert en te veel plugins vermijdt, haal je beslist voordelige snelheidswinsten voor je paginalaadtijd.
Tip 5 – Maak gebruik va instant.page
De instant.page is een stukje javascript code. Die code zorgt ervoor dat je pagina nóg sneller laadt. Het wordt ook wel ‘just in time preloading’ genoemd en reageert op het gedrag van een bezoeker. Als deze langer dan 65 milliseconden over een link beweegt (hovert), wordt de pagina als het ware alvast ingeladen. De kans is immers vrij groot dat de bezoeker op de link klikt.
Gemiddeld bespaar je 300 milliseconden laadtijd. Klinkt niet veel, maar alle kleine beetjes tellen zeker mee. Je past het toe op je website met onderstaande code:
src=”//instant.page/5.1.0″ type=”module” integrity=”sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw”>
Plak dit vóór de </body> tag en je bent klaar! Ik adviseer dit te gebruiken als je veel nieuws- en/of blogberichten hebt.
Tip 6 – Pas op met sliders
Sliders of carrousels op je website zijn heel leuk. Maar … ze brengen ook extra veel afbeeldingen met zich mee. Uit vele steekproeven met usability tests blijkt ook dat mensen er vaak op klikken. Een beetje nutteloos dus. Mijn advies: ga voor één goede afbeelding in plaats van een slider met meerdere afbeeldingen.
Tip 7 – Gebruik zoveel mogelijk SVG’s
SVG staat voor Scalable Vector Graphics. Dat betekent zoiets als: schaalbare vectorafbeeldingen die altijd scherp blijven, welke afbeelding je ook hebt. Een SVG is een afbeelding die bestaat uit complexe termen in plaats van pixels. Het voordeel hiervan? Dat het enorm licht is wat betreft grootte. Daarom is het ideaal voor webgebruik. Ik gebruik het vooral voor logo’s, keurmerken en achtergronden bij onze website ontwikkeling.
Tip 8 – Gebruik niet teveel verschillende fonts
Als je bezig gaat met webdesign, houd het aantal verschillende fonts dan beperkt. Ga liever voor één goede font of maximaal 2 fonts. Hoe meer fonts, des te meer externe bronnen je site moet laden. Ook adviseer ik: gebruik zo veel mogelijk Google Fonts, omdat deze het beste werken bij websites.
Tip 9 - Gebruik SSL
Een SSL gebruiken is eigenlijk een must. Zonder beveiligde https-verbinding wordt je website allereerst weggedrukt in de zoekresultaten van Google. Daarnaast, minstens zo belangrijk: je kunt ook het moderne en veel snellere HTTP/2 protocol niet gebruiken.
Zelf ontwikkel ik inmiddels al jaren websites met een https-verbinding. Heb jij nog geen groen slotje in je webbrowserbalk? En wil je ook zo’n veilige https-verbinding? Vraag dan een SSL aan bij de registrar van je domeinnaam. Of maak gauw een afspraak met Crossmedia House.
Tip 10 – Kies een snellere hosting om je website sneller te maken
Soms vormt de rekenkracht van je huidige webhosting een bottleneck. Bijvoorbeeld omdat je een grote website hebt. Of een webshop met ontzettend veel producten. Dan raad ik je aan ook een snelle hosting te nemen. Je zult zien dat je website dan stukken sneller laadt!
Wil jij je website ook eens onder de loep nemen om te kijken of jij snelheidswinst kunt halen? Maak dan een afspraak voor een second opinion. Of doe eerst zelf alvast een test op de website Google Pagespeed , pingdom.com en GTmetrix.com.
Ben heel benieuwd: hoe ga jij voor een snellere website zorgen?
