headersitespeed
headersitespeed

WordPress optimaliseren

| 2 Comments

 Beeld compressie

De belangrijkste dader blijkt de afbeelding bovenaan de pagina te zijn,deze is bijna 0.5 MB groot. Ik heb hier het PNG bestandsformaat gebruikt, omdat het lossless is, en niet gepatenteerd zoals GIF.  De afbeelding wordt weliswaar gecomprimeerd, maar het DEFLATE algorithme werkt voornamelijk goed voor grote vlakken van de zelfde kleur. In ons geval, een afbeelding met veel variatie levert het een flink bestand op. Als ik het bestand omzet naar JPG en als ik wat kwaliteitsverlies toesta (kwaliteit = 60%)  dan daalt de bestandsgrootte naar 90 KB, zo’n 20% van de PNG. Helaas, voor niets gaat de zon op, en als je goed kijkt is het kwaliteitsverschil ook echt te zien. Hieronder zie je een ingezoomd stukje van de afbeelding voor en na compressie.

losslessVsLossy Wordpress optimaliseren image

ongecomprimeerde en comprimeerde afbeelding vergeleken

De randen die je om scherpe overgangen ziet zijn typerend for JPG afbeeldingen en hebben te maken met de wijze waarmee .jpg zijn informatie codeert. Zoals Cruijf zei “Je gaat het pas zien als je het door hebt.” Als je oplet zal je op internet (en in PowerPoint presentaties, en in buurtkrantjes, enzovoort) precies deze beeldfouten terug zien.

In onze afbeelding zijn de fouten nog vrij klein, maar in onderstaande video kun je zien wat er gebeurt als je een JPG bestand 600 opent en opslaat met wisselende kwaliteits instelling.

In de JavaScript files valt me op dat in het bijzonder JQuery nogal groot is. Dit is tegenwoordig het Zwitsers zakmes voor interactieve elementen op websites, en dus niet zo makkelijk te verwijderen. JavaScript is vaak kleiner te maken met een tool zoals minify. Helaas is dit bij JQuery al standaard het geval, dus daar is in dit geval niks te winnen. Gelukkig is er wel een andere weg die we kunnen bewandelen, namelijk deze file door Google laten hosten. De file wordt niet kleiner, maar het laden wordt wel sneller.

Na nog een paar kleine optimalisaties is dit het resultaat:

Origineel Geoptimaliseerd
HTML 6.15 k 5.86 k
images 776.08 k 374.24 k
Javascript 82.72 k 74.27 k
CSS 9.31 k 9.31 k
Total 874.26 k 463.67 k

Het totale hoeveelheid dataverkeer is nu gehalveerd, en dat is vrijwel allemaal te danken aan de afbeelding compressie. Maar leidt dit nou echt tot een sneller ladende website? Het antwoord daarop is duidelijk ja: Ik heb met de dienst WebpageTest de laadtijd van de webpagina thijs.elenbaas.net bepaald, en hieruit blijkt dat de PNG file (thijs.elenbaas1.png in de waterval hieronder) 5.5 sec kost om te laden, terwijl de JPG file (thijs.elenbaas.jpg in de de tweede waterval grafiek) 0.9 sec kost om te laden.

waterfall 1 Amsterdam un optimized Wordpress optimaliseren image

Waterval grafiek laadtijd niet geoptimaliseerde website

De kleur codering in bovenstaande waterval grafiek volgt deze legenda
legenda Wordpress optimaliseren image

 

waterfall 1 Amsterdam optimized Wordpress optimaliseren image

Waterval grafiek laadtijd geoptimaliseerde website

En daar is onze eerste winst: van een totale laadtijd van bijna 9 sec naar iets minder dan 5 sec! Bedenk wel dat dit een enkele steekproef is, en dat door allerlei externe factoren er aanzienlijke variatie kan ontstaan. Maar als we zo verder gaan kijken, zullen we zien dat deze trend blijft bestaan. Wanneer we de pagina voor een tweede keer laden ziet de waterval grafiek er een heel stuk anders uit. De meeste files al gebufferd  in de webbrowser, dus gaat het laden sowieso aanzienlijk sneller en heeft maakt de kleinere afbeelding niet meer uit.

waterfall 2 Amsterdam un optimized1 Wordpress optimaliseren image

Waterval grafiek geoptimaliseerde webpagina bij tweede aanvraag

Wat opvalt is dat de HTML file niet wordt gebufferd en nog steeds een dikke seconde kost, en de afbeelding google-analytics…..gif. Deze afbeelding wordt gebruikt door Google om site bezoek bij te houden. Vreemd genoeg lijkt er buitensporig veel tijd in te zitten in de DNS resolutie.

2 Comments

  1. It would be fine if you could write this is English too!
    (The pages you have in English are very impressing!)
    Ole Jacob Bryhni Frostad (Norway)

Leave a Reply

Required fields are marked *.