performance versnellen.nl

Hoe kan ik de performance van de website www.HappyDelay.com versnellen ?

Praktijk case
de website www.HappyDelay.com is een nieuwe website voor het indienen van Vlucht vertraging compensatie.

De hele flow of funel voor het indienen van de gegevens is geautomatiseerd bij Happy Delay.

De eerste pagina of homepage van HappyDelay.com is geanalyseerd en gemeten met meerdere tools;

Uit metingen bleek dat de homepage bijna 9 seconden nodig had om te laden voor nieuwe bezoekers of first time visits.

Dit is te traag en er is een plan gemaakt om de website stukje voor stukje te verbeteren / versnellen.

1. De gebruikte png en jpg plaatjes zijn verkleind in grootte en beter gecomprimeerd.
    sommige plaatjes waren 900 x 900 pixels en 400 x 400 pixels werden er getoond.
    andere plaatjes werden eerst geladen uit een font library (of woff bestand) en zijn omgezet in een png.
2. op de server is zip compressie aangezet.
3. javascript en css files zijn gecomprimeerd door o.a. spaties en tab opmaak te verwijderen.
4. de langzame YouTube video op de homepage is verwijderd.
5. het aantal te laden woff bestanden is verminderd van 12 naar 4 ?
6. de externe datumprikker is lokaal neergezet.
7. de grootste javascript van bijna 600 KB is verkleind en geoptimaliseerd.

De performance is diverse malen gemeten met :
Google Developer Tools (van de Google Chrome browser.
Google page speed insights.
Webpagetest.org

Vooral de waterval grafiek toonde goed en snel inzicht in welke elementen van de website voor de meeste vertraging zorgden.
Deze zijn in die prioriteit opgepakt om te versnellen.
Na diverse optimalisatie slagen is de performance versneld van 9 naar 6 naar 4 naar 3 seconden.

17-10-2018 Web Page Performance Test for www.happydelay.com
First View (Run 1)
Load TimeFirst ByteStart RenderVisually CompleteTimeRequestsBytes In
1.786s0.205s1.200s1.800s1.786s42520 KB


29-6-2018 Web Page Performance Test for www.happydelay.com
First View (Run 1)
Document Complete
Load TimeFirst ByteStart RenderVisually CompleteTimeRequestsBytes In
7.912s0.198s3.038s8.087s7.912s572,467 KB

overal zijn nog vertragingen te zien, maar vooral:
  4. Style.css 1799 ms
20. header-7.jpg 1187 ms
26. totop.min.js 2428 ms
27. insta.png 2480 ms
30. youtube.com 1264 ms
39. + 40. + 41. extra youtube.com 762 + 1653 + 1438 ms
51. + 52. + 55. advertenties youtube 1125 + 1363 + 1568 ms
31 tm 49. 16x woff bestand 1642 ms tot 165 ms

de style.css en header-7.jpg en totop.min.js en insta.png waren erg traag.
YouTube filmpje kost extra veel door de advertenties en de player; totaal ruim 9 seconden.
16x een woff FONT bestand is wel erg veel en zorgt voor veel vertraging.


14-5-2018 Web Page Performance Test for www.happydelay.com
First View (Run 1)
Load TimeFirst ByteStart RenderVisually CompleteTimeRequestsBytes In
4.380s0.191s3.344s7.645s4.380s401,742 KB


17-10-2018 Web Page Performance Test for www.happydelay.com
First View (Run 1)
Load TimeFirst ByteStart RenderVisually CompleteTimeRequestsBytes In
1.786s0.205s1.20 s1.80 s1.786s42520 KB


Arie van der Giesen voerde deze performance tests uit en later heeft het HappyDelay development team dit ook zelf gedaan om via diverse iteraties de websites steeds verder te versnellen.





Website performance test kan uitgevoerd worden door performance specialist : Arie van der Giesen van Profias Internet Advies

Website snellere maken homepage.