Inventis

Zoals vorige week aangekondigd stond er deze week een nieuwe testrun op de planning. Tom heeft deze taak opnieuw op zich genomen en weer feedback gegeven. Het grootste deel van deze feedback is deze week ook al verwerkt. Hierdoor is PigResults nu sneller dan ooit!

Front-end optimalisaties

Twee weken geleden kreeg PigResults caching om de resultaten sneller op het scherm van de gebruiker te krijgen. Caching versnelt echter alleen de back-end en niet de front-end. Het optimaliseren van de front-end is desondanks toch een belangrijk punt. PigResults maakt bijvoorbeeld gebruik van sprites. Sprites zijn afbeeldingen die meerdere afbeeldingen bevatten om zo het aantal requests naar de server te verlagen. Ieder request naar de server geeft immers overhead zoals de http headers. Moderne browsers beperken ook het aantal parallelle verbindingen naar een server om deze te ontlasten, dit heeft als gevolg dat afbeeldingen en andere resources na elkaar geladen moeten worden. Door afbeeldingen samen in één afbeeldingen te plaatsten en achteraf te positioneren met CSS worden extra nodeloze requests vermeden en zal de pagina sneller opgebouwd kunnen worden door de browser.

Naast de sprites worden er op PigResults nog andere methodes toegepast om pagina’s sneller te laden. De CSS en Javascript bestanden worden geminified. Hierbij wordt alle onnodige data zoals witregels, spaties en commentaar weggehaald. Zo wordt het bestand zelf verkleint en kan het sneller gedownload worden door de browser. Niet alleen bestanden kunnen zo verkleint worden maar ook afbeeldingen. Je kan afbeeldingen door een dienst als smush.it laten verkleinen. Bij PigResults leverde dit een winst van bijna 20% op.

Om het inladen of downloaden van resources nog verder te versnellen worden deze door de PigResults webserver ge-gezipped. De resources worden hierbij door de server gecomprimeerd en door de client terug gedecomprimeerd. Als laatste optimalisatie stuurt de PigResults server ook expire of cache headers mee voor statische resources. Statische resources zijn afbeeldingen, css en javascript bestanden die niet veranderen. Door deze headers mee te sturen zal de browser deze resources opslaan in zijn lokale cache en deze niet meer van de server downloaden tot ze verlopen (expired) zijn.

Al deze optimalisaties zorgen ervoor dat PigResults merkbaar sneller laadt. Wil je zelf ook je eigen website aanpakken? Yahoo! biedt een aantal handige tools aan die je hiermee zullen helpen.

Handleiding

Niet meteen een traditionele taak voor een web developer maar ik mag ook een handleiding schrijven voor PigResults. Dit is een extra opdracht vanuit school om zo Frans te integreren in mijn stage. Tijdens het wachten op feedback van het testen ben ik hieraan begonnen. De handleiding zal opgesteld worden in het Engels en in het Frans. Alle belangrijke onderdelen van de PigResults website zullen hier mooi in uitgelegd worden aan de hand van screenshots en tekst.

Tot volgende week

Inventis heeft met PigResults een schitterend concept uitgedacht. Ik ben zelf super tevreden over het resultaat en hopelijk jullie ook wanneer we PigResults op het internet loslaten. Hou deze blog dus zeker in de gaten, want lang gaat het niet meer duren!