In dit artikel zal ik jullie een aantal tips geven over hoe jij de pagespeed kunt optimaliseren. Je kunt de pagespeed van je website op verschillende manieren verbeteren.

Waarom zou ik mijn pagespeed optimaliseren?

De snelheid van de pagina speelt een belangrijke rol bij zowel gebruikers als bij zoekmachines. Voor gebruikers is het belangrijk omdat zij de pagina direct willen zien en voor zoekmachines als Google speelt het een belangrijke rol op het gebied van SEO.
Het eerste doel is dat je inzage wilt hebben wat precies de pagespeed verminderd, zodat je het probleem kunt analyseren. Nadat je het probleem geanalyseerd hebt kun je een passende oplossing bedenken (met je team) en dit toepassen in je project.

Welke problemen zorgen voor een lagere pagespeed?

Hoe doe je dit precies zal je misschien wel denken? Je kunt ervoor kiezen om de developer console te gebruiken van Google Chrome of je kunt de Firebug plug-in van Firefox gebruiken.
Kijk vooral naar de “waterfall” kolom als je het probleem via de developer console probeert te ontdekken. Welk script duurt het langst? Zijn er grote afbeeldingen die ingeladen worden? Zijn er third-party scripts (zoals bv. Analytics) die traag ingeladen worden? En het meest belangrijke: wat is de TTFB, de time to first byte van het document?

Je kunt ook gebruik maken van third-party tools zoals bijvoorbeeld PageSpeed Insights van Google. Dit geeft je een rapportage terug van wat je kunt optimaliseren aan de website.
In dit blog artikel zal ik meer in gaan op het gebruik van Google PageSpeed Insights, maar naast deze tool van Google PageSpeed Insights heb je nog vele andere hulpmiddelen die je vooruit kunnen helpen.

Analyseer het snelheidsprobleem

Ga hier naar de PageSpeed Insights pagina van Google. Vul het domeinnaam in dat je wilt controleren op de pagespeed en klik op analyseren.

Zoals je ziet is er onderscheid gemaakt tussen mobiel en desktop pagespeed. We willen natuurlijk een score zien van 100/100. We gaan er mee aan de slag!
Mijn tip aan iedereen is: kijk eerst naar de desktop analyse, want hiermee tackle je hoogstwaarschijnlijk ook al een aantal mobiele optimalisaties.

Afbeeldingen optimaliseren

Zorg ervoor dat de afbeeldingen niet te groot zijn in opslag; comprimeer ze dus. Waar je ook rekening mee moet houden is het formaat van de afbeelding. Als een afbeelding bijv. getoond wordt als een afbeelding van 250x250 pixels maar de afbeelding is oorspronkelijk 500x500 pixels, zijn er onnodige pixels aanwezig; verklein de afbeelding naar 250x250 pixels. Houdt hierbij wel rekening met schermen die een hogere DPI, dots per inch, hebben.
Daarnaast wordt er ook gekeken naar de kleurtonen die gebruikt worden in de afbeelding. Als een afbeelding bijv. volledig rood is, dan zijn de kleuren groen en blauw grotendeels overbodig van de RGB-kleuren. Dit kun je aanpassen door bijv. Photoshop te gebruiken en te spelen met de kleur waardes.

Javascript optimaliseren

Optimaliseer de Javascript bestanden door ze samen te voegen tot één bestand. Vervolgens kun je dit bestand ook nog comprimeren. Dit wordt ook wel minify genoemd. Je kunt dit doen m.b.v. bijv. Gulp of websites die deze service aanbieden. Daarnaast is Google er ook dol op als je alle scripts asynchroon inlaadt. Dit zorgt er namelijk voor dat de pageload niet wacht op de http requests.

CSS optimaliseren

Optimaliseer de CSS door ook deze allemaal samen te voegen en te minifyen m.b.v. Gulp of andere websites die dit kunnen aanbieden. CSS kun je ook asynchroon inladen, maar houdt er rekening mee dat veel scripts de volledige CSS asynchroon inladen. Daarom wordt aangeraden om essentiële CSS inline te plaatsen in de <header> tag. Essentiele CSS is wat de gebruiker ziet zodra de pagina laadt; de navigatiebalk en een stuk van de content. Zoals bij Javascript kun je ook bij CSS-gebruik maken van een CDN (Content-Delivery-Network).

Browsercaching

Maak gebruik van browsercache. Je kunt headers toevoegen die het mogelijk maken om statische bronnen uit de browser cache te halen. Geef deze een vervaldatum of een maximale tijd dat deze statische bronnen mogen hebben. De browser zal deze bestanden dan niet elke keer opnieuw downloaden.
Als je applicatie gebruikt maakt van PHP, kun je binnen je applicatie ook nog gebruik maken van opcache

Reactietijd van server beperken

Zorg ervoor dat de server snel reageert: optimaliseer de time to first byte (TTFB). Google wilt dat dit het liefst onder de 200 milliseconden ligt. Je kunt hiervoor gebruikmaken van verschillende populaire caches: Varnish of Memcached.

Compressie inschakelen

Zet GZIP-compressie aan op de server. GZIP-compressie zorgt ervoor dat de bestanden verkleint naar de browser gestuurd worden.

Output compressie

Zoals je Javascript en CSS kunt comprimeren, kun je bijna alles comprimeren. Dus ook de HTML-output. Zorg ervoor dat er bijna geen spatie meer in zit!

Vermijd redirects

Zou je het fijn vinden als je google.nl intypt in je adres-balk en je wordt verwezen naar www.google.nl en daarna naar http://www.google.nl en vervolgens naar https://google.nl en tot slot naar https://www.google.nl/? Nee ik ook niet. En Google ook niet. Zorg er dus voor, mocht je gebruikmaken van omleidingen, dat de gebruiker niet te vaak omgeleid wordt.
Dit geldt ook voor externe CSS en Javascript bestanden die ingeladen worden. Als je een CSS-bestand inlaadt via een http request, maar de source van de CSS staat op https, dan wordt deze request ook omgeleid. Momenteel heeft Google dit niet door, maar de kans is aanwezig dat de gebruiker dit wel merkt aan de snelheid van de pagina.

Applicatie optimalisatie

Naast de zojuist genoemde verbeteringen die je kunt toepassen, kun je er ook nog voor zorgen dat de applicatie/website de benodigde optimalisaties bevat. Controleer de code m.b.v. een profiling tool zoals bijv. Blackfire en controleer de database, optimaliseer dit waar het nodig is.

Succes met het optimaliseren!