High Performance Web Sites

Maandag 25 Juni 2007 12:35 Laatste aanpassing (Maandag 20 Oktober 2008 18:58)

Van alles en meer

Ik lees momenteel High Performance Web Sites. 14 Steps to Faster-Loading Web Sites. Essential Knowledge for Frontend Engineers.

Het boek legt uit dat de snelheid van een website voor 20% bepaald wordt door de back-end en voor maar liefst 80% door de front-end (gemiddeld gesproken). Werk aan de winkel voor mij als front-ender dus.

Eerst maar eens een back-end maatregel

Ik ben flink gaan nadenken over deze materie en heb gelijk maatregelen getroffen voor mijn eigen site. Die is nu aanmerkelijk sneller. Ik moet wel eerlijk zeggen dat alles begon met juist een back-end maatregel (een Joomla!-mambot verwijderen van mijn site die ik ge-unpublished had maar die nog steeds wel voor tientallen overbodige queries naar de database zorgde.)

Vervolgens heb ik het aantal Joomla!-modules op de meeste pagina's verminderd. De meeste heb ik nu alleen op de homepage. Dat scheelt ook een slok op een borrel. 

Dan de front-end maatregelen 

Daarna ben ik begonnen met de front-end maatregelen. Tot nu toe heb ik het aantal http-requests verlaagd door meerdere externe css-bestanden samen te voegen. Idem voor javascript-bestanden.

Tevens heb ik de javascript-call aan het einde van de template geplaatst; ook één van de 'rules' die het boek verschaft. De link naar het CSS-bestand had ik al in de HEAD staan natuurlijk. Ik heb een Flash-animatietje vervangen door een gewone achtergrond (het ei). Dat scheelt ook (hoewel niet direct een maatregel uit het boek), want het genereren van de vrij grote (in lengte x breedte) Flash-animatie kostte ook veel tijd.

Er is echter nog veel te doen. In het Engels: The rules include how to: 

• Make Fewer HTTP Requests
• Use a Content Delivery Network
• Add an Expires Header
• Gzip Components
• Put Stylesheets at the Top
• Put Scripts at the Bottom
• Avoid CSS Expressions
• Make JavaScript and CSS External
• Reduce DNS Lookups
• Minify JavaScript
• Avoid Redirects
• Remove Duplicates Scripts
• Configure ETags
• Make Ajax Cacheable

Conclusie

Naar aanleiding van het boek heb ik een aantal maatregelen getroffen die mijn site veel sneller hebben gemaakt. Een aantal van de maatregelen hadden niets te maken met het boek :-), maar leverden wel veel resultaat. Andere 'rules' uit het boek heb ik nog niet gebruikt. Misschien ga ik dat nog doen.

Het boek 

Boek: High Performance Web Sites. 14 Steps to Faster-Loading Web Sites. Essential Knowledge for Frontend Engineers. O'Reilly (Steve Souders).  ISBN-10: 0-596-52930-9, ISBN-13: 978-0-596-52930-7