Je kunt ver gaan in het optimaliseren van je website, door requests en laadtijd te reduceren. Het één is eenvoudiger door te voeren dan het ander. Waar exact kun je verder optimaliseren?
Optimaliseren in fases
Welke vormen van optimalisatie überhaupt toegepast gaan worden, zal ook afhangen van het type website als ook budget. Maar naar mijn idee kun je niet ver genoeg gaan, en moet je altijd blijven experimenteren. Werk je aan een nieuw project/website? Probeer die ene techniek waar je recent over hebt gelezen, mee te nemen. Soms zijn er plugins voor (let op en doe het niet), soms valt het CMS eenvoudig te wijzigen om in te haken in nieuwe ontwikkelen, maar soms ben je gebonden aan het CMS dat je gebruikt, en mis je noodgedwongen de boot.
Ga vooral van jezelf uit, qua techniek. Waarom zou je bepaalde onderdelen bij third parties hosten, als het bijvoorbeeld perfect op de eigen omgeving kan?
Moeilijk te vervangen
Voor een reactie-systeem als Disqus valt veel te zeggen, doordat het vele voordelen met zich mee brengt en SEO vriendelijk lijkt (qua indexering, niet qua laadtijd). Hetzelfde geldt ook voor Google Analytics. Dit brengt gebruikers-aantallen op bruikbare wijze in kaart. Opoffering van dit soort externe instanties kan groot zijn, afhankelijk van of je het reeds in gebruik hebt.
Direct vervangen
Andere zaken zouden gewoonweg vervangen moeten worden. Denk aan social media icons en widgets voor twitter, instagram of pinterest. Vooral de laatste categorie, brengen veel bronbestanden in de vorm van afbeeldingen en dus requests met zich mee. Vooral Wordpress laadt externe toolsets in, waardoor een ander equivalent van een iconen-set niet optimaal benut wordt, waar deze perfect hergebruikt kan worden.
Een twitter-widget op de homepagina, zal er voor zorgen dat er al bij voorbaat veel afbeeldingen worden ingeladen, ongeacht of je bezoeker ze heeft gezien of überhaupt wilde zien. Dit terwijl je de bezoeker juist op de homepagina vast wil houden, en dus niet weg zou moeten jagen met onnodig veel http requests. Denk bijvoorbeeld ook aan mobiele gebruikers.
Onze social media knoppen zijn tot stand gekomen zonder gebruik van third parties als addthis of sharethis. Hooguit heb ik met wat JavaScript gestrooid, om de whatsapp-deel-knop onzichtbaar te maken voor niet-smartphone gebruikers.
Social media gebruik en daarmee ook buttons en keuze uit online diensten, rijzen de pan uit. In Wordpress wordt veelal gebruik gemaakt van plugins; eenvoudiger dan zelf programmeren of integreren. Dit soort plugins en toepassingen, brengen echter de nodige (JavaScript en CSS) requests als ook aanvullende bronnen met zich mee. Ook iconen worden extern (of hopelijk als SVG's) ingeladen, terwijl het wellicht goed te combineren was met een iconen-set dat je reeds zelf gebruikte.
Onderaan dit artikel tref je ook een deel-mogelijkheid. Hiervoor is geen plugin gebruikt. Volgens deze pagina bespaar je 155kb en 12 http requests door het realiseren van buttons op de eigen website plaats te laten vinden. Als aanvulling, tref je onderaan dit artikel op een smartphone tevens een Whats-app button aan. Gebruik je bijvoorbeeld een Wordpress plugin voor social media iconen, dan zit je al snel opgezadeld met extra requests.
Optimalisatie: JavaScripts dumpen
JavaScript is het zogenaamde 'behaviour'-aspect binnen de website-lagen; verantwoordelijk voor gedrag en interactiviteit van specifieke elementen. Ik zou dan ook niet zonder JavaScript kunnen om bepaalde wensen of functies te realiseren.
Op sommige vlakken kan het echter uitstekend achterwege worden gelaten. Denk aan mobiele uitklap navigaties of slideshows. Ook kan een website vaak prima af met één framework, laat staan framework versie. Soms kom je op een website meerdere malen dezelfde (JavaScript) framework tegen, maar gewoonweg verschillende versies. Dit zie je vooral terug bij websites gebouwd middels een open source framework. Ik heb het inderdaad alweer over Wordpress.
Nog meer frons ik mijn wenkbrauwen, wanneer ik in één website, verschillende JS frameworks tegen, zoals Mootools en jQuery. In beide gevallen kan geconcludeerd worden dat er geen frontend programmeur om de hoek is komen kijken, terwijl hiermee al erg geoptimaliseerd kan worden. Maar denk bij optimaliseren ook vooral een stap verder.
Thinking outside the box
Ook wanneer je de nodige third party widgets en koppelingen hebt uitgesloten, hoef je nog niet klaar te zijn. Ook op de eigen site, valt er genoeg te optimaliseren. Heb je bijvoorbeeld social media iconen op je eigen site via afbeeldingen gerealiseerd? En heb je ondertussen ook gebruik gemaakt van een iconen-set als Font-Awesome? Benut dat bestand dat toch al gedownload wordt. Font-Awesome bevat social media iconen, die je perfect kunt (her)gebruiken voor je knoppen.
CDN en DNS lookups
Kijk verder of je gebruik maakt van externe bronnen. Ga na in hoeverre je deze via eenzelfde externe domein (veelal een CDN) kunt laten lopen om DNS lookups te reduceren. Elk nieuwe domein waarmee je browser verbinding maakt, betekent een extra zoektocht om de locatie van de server te achterhalen. In het geval van een website met SSL certificaat, betekent dit ook nog eens extra handshakes. Als de wiederweerga reduceren dus.
Binnen blue2blond.nl kwamen Font-Awesome iconen vanuit een CDN, genaamd maxcdn. Echter, voor popups om foto's vergroot weer te geven, gebruikte ik de CDN van cloudflare. Dit kon beter. Om deze reden heb ik achterhaald of deze FontAwesome files ook op cloudflare CDN werden gehost, waarna ik de verwijzingen naar de Font-Awesome bestanden heb gewijzigd van maxcdn, naar cloudflare. Omdat ik toch bezig was, laat ik ook jquery inmiddels ook via cloudflare CDN inladen.
Kies voor kleinere bestanden
Ik gebruik tools om afbeeldingen te comprimeren. Online zijn goede tools te vinden, zoals tinypng.com, compresspng.com, tinyjpg.com en compressjpg.com. Gooi je afbeeldingen hier eerst doorheen voordat je ze upload naar je website. Ook loont het uiteraard, om de afbeeldingen alvast voor te snijden in het formaat, waarin je het op de website wilt publiceren.
Lettertype afhandeling optimaliseren
Optimaliseren omtrent Google Fonts ofwel lettertypes, heeft eerder gezien zijn omvang een eigen artikel verdiend.
De browser bevelen
Middels resource hints kun je bovendien de browser bepaalde taken meegeven. Wanneer je op voorhand weet dat je gebruik gaat maken van externe tools, kun je de browser er alvast op vooruit sturen om een DNS lookup te doen. Op het moment dat de browser gereed is om opvolgende bronnen te gaan downloaden, is de lookup en eventuele handshake al tot stand gekomen.
Doordat meerdere bronnen via cloudflare lopen, en vooral jQuery als eerste JavaScript file ingeladen moet zijn, heb ik ten opzichte van dit artikel onderscheid gemaakt tussen een preconnect (welke aangeeft dat deze verbinding op termijn tot stand moet komen) en dns-prefetch (welke aangeeft dat een verbinding naar de genoemde domein prioriteit moet hebben).
Cookies uitsluiten
Eén van de tips die onder meer een gmetrix.com test je mee zal geven, is het gebruik van Cookies uitsluiten voor andere bronnen dan het HTML document. Veelal zijn cookies niet nodig om een afbeelding, JS of CSS bron in te laden. Geadviseerd wordt dan ook om het gebruik van cookies voor deze bronnen uit te schakelen, bijvoorbeeld door een subdomein of CDN in te zetten voor deze bestanden. Voor een subdomain, kan een extra SSL certificaat benodigd zijn. Het kan dan ook laagdrempeliger, door de website te voorzien van de www-prefix, en bronbestand verwijzingen niet.
Resumerend
Bovenstaand zijn mogelijke manieren om te optimaliseren, die wanneer het nodig is, eenvoudig mee te nemen zijn bij de ontwikkeling van een website. Uiteraard kan de mate van implementatie, afhangen van de mate waarin het systeem zich er voor leent.
Andere niet beschreven tips voor handen? Schroom niet ze hieronder te delen.
