Blog over hamsters

Zoals je op mijn blog heb kunnen lezen heb ik afgelopen vakantieweken en daarna mij bezig gehouden met de performance verbeteringen rondom mijn website. Elke keer verbeter ik mijn scripts en draai ik aan tandwieltjes om de website sneller te laten laden. Hieronder de performance verbetering die ik tussen 25 augustus en 25 september heb gerealiseerd.



Ik kan natuurlijk ook een snelle CDN server tussen zetten, maar dat doe ik niet. Iemand vroeg me deze week waarom ik dit niet doe. Als kind programmeerde ik op een computer met 7 mhz processor. Dat betekende dat je scripts over en over moest nadenken en elke performance winst leidde tot een beter effect. Bijv. als je een sinus move met animatie balletjes maakte en script kon 10 ballen aan, als je 50% tijdwinst kon realiseren, dan kon je dit met 20 ballen doen. Dat was elke keer weer de kunst van uitdenken.

En dat beschouw ik ook mijn website. Wat de afgelopen maanden gedaan is:
1. Mijn website ziet automatisch of er een webp variant van de hoge kwaliteit foto aanwezig is en als de browser webp kan weergeven, wordt een webp geladen en niet de jpg foto.
2. Javascripts worden niet standaard altijd geladen, maar er wordt gekeken of ze wel gebruikt worden en als dat het geval is, dan wordt de javascript pas geladen.
3. CSS style voor het formulier wordt niet geladen indien er geen formulier aanwezig is, mijn script kijkt nu automatisch of dit het geval is.
4. Het automatisch verkleinen van foto's wordt nu niet meer elke keer verkleind, maar eenmalig verkleind, bewaard en hergebruikt.
5. CSS style is opgesplitst wat direct nodig is voor het renderen van het eerste blok dat weergegeven moet worden en wat later gerenderd wordt.
6. Font wordt geswapt en daarom wacht de browser niet meer op dat de font geladen is, maar zal eerst een standaard font gebruiken. Met preload wordt geregeld dat de font wel de belangrijkste is wat geladen moet worden om zo CLS shifting te voorkomen.
7. Image in viewpoort bij laden wordt met preload geladen. Of wel het krijgt de voorkeur bij laden.
8. Bepaalde javascripts worden defer geladen en browser wacht nu niet meer op dat alle javascripts geladen zijn.
9. Viewpoort is, ten nadele van ipad gebruikers, op 1.0 rendering gezet en niet meer op 0.88. Mijn inziens zorgt een viewpoort lager dan 1.0 voor een hoge first input delay (FID).
10. Logo was vroeger een png plaatje en is vervangen door tekst met style om als logo weer te geven.
11. Afscheid genomen van de doorzichtige border zodat er geen 4x png geladen wordt.
12. De footer kent een veel kleiner png plaatje t.b.v. ronding. Dit eveneens voor titel blok dat ook een achtergrond png heeft t.b.v. ronding effect.
13. Waar foto's een crop versie getoond wordt, worden nu eenmalig omgezet en bewaard en hergebruikt.
14. De javascripts worden niet meer in header geladen. Ook niet als mijn pagina script javascripts toevoegd. Deze worden automatisch gebufferd voor later output.
15. Cache tijden zijn verhoogd zodat terugkerend bezoeker bestanden minder snel opnieuw geladen worden.
16. Aanpassingen in Google reclame zodat deze geen invloed hebben op pagina rendering performance.
17. Google Analytics script aangepast i.p.v. standaard script gebruiken zodat deze sneller is geworden.
18. Deel css style aangepast zodat container en eerste blok sneller geladen wordt.

Google Analytics geeft aan dat de gemiddelde echte laadtijd van de website van ruim boven 5 seconden gedaald is naar onder de 2 seconden.

Toch zijn er nog verbeterpunten die ik nog moet doorvoeren:
1. De symbolen in het menu anders laden zodat bestand kleiner wordt (UPDATE 9 okt 2021: done!).
2. CSS style geheel kleiner maken om overbodige instellingen eruit te halen.
3. Afscheid nemen van JQuery en alle scripts op basis van javascript zonder JQuery commando's te gebruiken.

En dan ga ik een CDN server tussen zetten!