CSS, javascript en HTML optimaliseren met de plugin Autoptimze

Het onderdeel waar de meeste mensen slecht op scoren wanneer ze een snelheid test uitvoeren via een tool zoals Google Pagespeed Insight, Pingdom tools of Gtmetrix  is bij het optimaliseren van CSS, Javascript en HTML.

 

Met de plugin Autoptimize kun je de CSS, JavaScript en HTML bestanden van jouw website eenvoudig optimaliseren. De plugin richt zich hierbij op een aantal punten. 

  • Voegt Javascript en CSS bestanden bij elkaar: Het aanroepen van meerdere Javascripts en CSS bestanden kan voor vertraging zorgen op de website. Door deze bestanden samen te voegen en weg te schrijven als 1 bestand kan de website sneller geladen worden.
  • Verwijdert overbodige informatie: Verwijdert overbodige codering wat de plugin niet nodig vind om te gebruiken.
  • Voegt ‘expires headers’ toe: Hiermee wordt aan de browser verteld hoe lang een bepaald bestand in de cache opgeslagen mag worden. Er wordt dan niet gekeken of er dan een nieuwere versie aanwezig is.
  • Plaatst de CSS in het begin van de HTML en kan de Javascript naar het einde van de HTML verplaatsen: Dit zorgt ervoor dat bepaalde elementen op een andere volgorde worden ingeladen.

Dit zorgt ervoor dat jouw pagina lichter wordt en dus sneller geladen kan worden. Omdat iedere website anders is gebouwd kunnen de scores – en de verbetering qua laadtijd – per website verschillen. In deze handleiding zal ik uitleggen hoe je de plugin Autoptimize toepast op jouw WordPress website.

CSS, javascript en HTML optimaliseren met de plugin Autoptimze 

We starten met het installeren en activeren van de Autoptimze plugin.

  1. Klik vervolgens in het linkermenu op Plugins en dan op de subcategorie Nieuwe plugin
  2. Vul bij de zoekfunctie vervolgens Autoptimze in en klik op Plugins zoeken
  3. Zoek de plugin Autoptimze (waarschijnlijk de eerste) en klik op Nu installeren
  4. Klik vervolgens op Activeren

Autoptimze instellen

De instellingen van de plugin kun je terug vinden in het dashboard. Je kan het tabje vinden onder Instellingen > Autoptimize. Vink de opties aan die je wilt optimaliseren en klik vervolgens op ‘Save changes’ and ‘Empty cache’. Het is slim om alles aan te vinken.

Mocht je gebruik maken van CDN (content delivery network) en je wilt dit ook optimaliseren, dan dien je de url op te geven in het invoerveld ‘CDN base url’. Na het invoeren van de url die je nog een keer op ‘Save changes’ en ‘Empty cache’ te klikken.

Vernieuw vervolgens de cache van de website en voer de tests uit op de tool die je gebruikt.

Een overzicht van optimalisatie tools:

Op de onderstaande afbeeldingen is te zien dat de score aanzienlijk omhoog is gegaan na het toepassen van de plugin Autoptimize. Mocht je score gelijk zijn gebleven of slechter zijn geworden? Dan zullen er eerst andere aspecten nagekeken moeten worden om dat op te lossen. Het beste is om dan de analyse te bekijken van de test. Hierin wordt namelijk exact aangegeven waar jij je het beste op kunt concentreren.

Geeft Pagespeed Insights nog steeds aan dat er CSS of Javascript bestanden niet zijn geoptimaliseerd? Klik dan op de ‘download’-knop en vervang de desbetreffende bestanden op de server. Google heeft deze namelijk voor je geoptimaliseerd tijdens het scannen.

 

Kom je er nog niet uit neem dat gerust contact op met de supportdesk.