Het hebben van snelle laadtijden is zó belangrijk geworden dat het nu echt aan komt op de details. Snelheid is een rankingsfactor in Google. Eerder schreef ik al over het optimaliseren van afbeeldingen. Daar vallen veelal de meeste winstpunten te behalen, maar het beperken van Javascript en CSS is de volgende stap in het proces. Hoe pak je dat aan?
Ga verstandig om met libraries
Voorbeeld van libraries zijn jQuery en Bootstrap. Dit zijn complete stukken aan functionaliteit, waarmee je een website snel en ogenschijnlijk goed laat werken. Er zit vaak zoveel code in, dat je het grootste deel ervan niet eens gebruikt. Bij de ontwikkeling van een nieuwe website maken front-end developers graag gebruik van libraries, want alles wat ze willen, kán dan ook gemaakt worden. Als de website eenmaal gelanceerd is, blijft al die overbodige CSS en Javascript staan. In het kader van snelle laadtijden moet je alleen die scripts behouden, die daadwerkelijk gebruikt worden en de rest moet je verwijderen. Webbrowsers laden alles in, dus ook alle overbodige scripts. Je vergroot de laadtijden aanzienlijk door die overbodige scripts te verwijderen.
Hoe verwijder je overbodige CSS en Javascript?
Als Google kan detecteren, welke Javascript- en CSS-regels niet gebruikt worden, dan is dat voor iedereen mogelijk! Chrome Console biedt de Coverage-tab, waarmee je per Javascript- en CSS-bestand kunt zien welke regel wel of niet gebruikt wordt. Je kunt dit regel voor regel nalopen en de overbodige regels verwijderen, maar dat is best een monnikenwerkje. Door gebruik te maken van WebPack kun je bij het publiceren van het webproject de Javascript en CSS laten bundelen (alle bestanden samenvoegen), splitten (= overbodige regels worden dan verwijderd) en comprimeren (= overbodige witruimtes verwijderen). Het eindresultaat is dan één Javascript- en één CSS-bestand, die alleen die codes bevatten die dan ook daadwerkelijk gebruikt worden.
Bij toekomstige uitbreidingen kun je -in geval van WebPack- als front-end developer in de ontwikkelomgeving volledig gebruik blijven maken van alle gemakken van libraries. Zodra de wijzigingen live worden gezet, berekent de splitter welke Javascript en CSS van dat moment relevant zijn. Een goede inrichting van het webproject vooraf, maakt dat je achteraf kwalitatieve oplossing blijft opleveren.
Defer en Async
Ben je niet zo’n NodeJS-koning, dan kun je voor Javascript-bestanden altijd nog de attributen defer en async toevoegen. Daarmee geef je aan wanneer webbrowsers het specifieke bestand moeten inladen. Bij defer worden de script ingeladen als de webpagina staat. Bij async wordt het direct ingeladen. Browsers willen graag begrijpen wat je als webdeveloper precies wilt. Elke vorm van onduidelijkheid leidt tot snelheidsverlies. Daar hebben uiteindelijk de websitebezoekers het meeste last van.
Google stuurt bezoekers liever door naar een gebruiksvriendelijke website en om die reden loont een website met snelle laadtijden. Wil jij ook meer resultaat uit jouw website? Schakel dan snel SEO Ninja in.