Autoptimize is een gratis plugin waarmee je WordPress kan optimaliseren. Naast optimalisatie van HTML, CSS en JavaScript, bevat Autoptimize ook optimalisatie-features die zijn gericht op andere aspecten van moderne WordPress sites.
In dit artikel bespreken we hoe je de Autoptimize plugin het beste kan instellen om de prestaties en paginasnelheid van je WordPress site te verbeteren.
Waarom Autoptimize?
Voordat we bespreken hoe je Autoptimize het beste kan instellen, wil ik je graag drie redenen geven waarom Autoptimize nou zo’n goede optimalisatieplugin is.
- De gratis versie van Autoptimize bevat een uitgebreide en complete functieset waarmee je je WordPress site kan optimaliseren.
- Autoptimize is uitsluitend een optimalisatieplugin en voert geen HTML paginacaching uit. Dit betekent dat het compatibel is met alle webhosts – zelfs hosts met custom paginacaching-configuraties zoals Kinsta.
- Autoptimize heeft meer dan 1 miljoen actieve installaties in de WordPress repository en wordt voortdurend bijgewerkt met nieuwe features en bugfixes.
Autoptimize JS, CSS en HTML instellingen
Het draait bij Autoptimize allemaal om HTML, CSS en JavaScript. Net als bij andere optimalisatieplugins kan het bij Autoptimize een hele klus zijn om de uitgebreide functieset en instellingen onder de knie te krijgen. Om het je gemakkelijker te maken, hebben we de beste instellingen van Autoptimize uitgezocht om de prestaties van je site te verbeteren.
JavaScript opties
Optimize JavaScript code
We raden aan om deze optie in te schakelen. Wanneer “Optimize CSS code” is ingeschakeld, verkleint Autoptimize je CSS bestanden.
Aggregate JS files
Met Autoptimize’s “Aggregate JS files” voeg je alle JavaScript bestanden samen in een enkel bestand. In het verleden was het combineren van JS en CSS bestanden een cruciale stap voor WordPress optimalisatie. Bij Kinsta gebruiken we moderne HTTP/2 servers die parallelle downloads en multiplexing ondersteunen – dit betekent dat het samenvoegen van bestanden niet meer zo belangrijk is als vroeger. Met HTTP/2 kunnen namelijk meerdere bestanden tegelijkertijd worden gedownload. Dat gezegd hebbende: het samenvoegen van CSS en JS bestanden kan voor bepaalde soorten WordPress sites wel degelijk goed uitpakken, dus we raden aan om je paginasnelheid te testen met deze optie ingeschakeld en uitgeschakeld.
Also aggregate inline JS
De optie “Also aggregate inline JS” haalt de inline JS uit je HTML en combineert deze met het door Autoptimize geoptimaliseerde JS bestand. Deze optie kan zorgen dat de cachegrootte van Autoptimize snel toeneemt, dus we raden aan om deze optie uitgeschakeld te laten, tenzij je een specifieke reden hebt om deze in te schakelen.
Force JavaScript in
In de meeste gevallen raden we af om af te dwingen van JavaScript bestanden in het <head> element van de HTML van je site worden geladen. Afdwingen dat JS vroeg wordt geladen, kan leiden tot render-blocking elementen die de paginasnelheid kunnen vertragen. Als je JavaScript bestanden hebt die je in het <head> element wil laden, dan raden we aan om deze uit te sluiten van Autoptimize.
Exclude scripts from Autoptimize
Met deze optie kan je specifieke mappen en JavaScript bestanden uitsluiten van samenvoegen. Autoptimize sluit standaard de volgende scripts uit.
- wp-includes/js/dist/
- wp-includes/js/tinymce/
- js/jquery/jquery.js
Let op dat het toevoegen van een script aan deze lijst alleen van invloed is op het samenvoegen (aggregation). De uitgesloten JavaScript bestanden worden nog steeds verkleind, tenzij je in “Misc Options” de feature “Minify excluded CSS and JS files” uitschakelt.
Add try-catch wrapping
Als je de optie “Add try-catch wrapping” inschakelt, dan wrap je je JavaScript code in try-catch blokken. Deze optie is met name handig als je problemen wil debuggen die zijn veroorzaakt door het verkleinen/samenvoegen van JS. Als je site alleen werkt wanneer je “Add try-catch wrapping” hebt ingeschakeld, dan raden we aan om een developer in te schakelen, met wie je samen je JavaScript bestanden doorloopt om te kijken welke het probleem veroorzaakt. Overmatig gebruik van try-catch blokken kan namelijk de prestaties van JS verminderen.
CSS Options
Optimize CSS code
We raden aan om deze optie in te schakelen. Wanneer “Optimize CSS code” is ingeschakeld, verkleint Autoptimize je CSS bestanden.
Aggregate CSS files
Met Autoptimize’s “Aggregate CSS files” voeg je alle CSS bestanden samen in een enkel bestand. Zoals eerder al aangegeven, is deze feature min of meer overbodig voor sites die HTTP/2 ondersteunen. We raden aan om deze optie op je site te A/B-testen om te zien of deze functie de paginasnelheid van je site ten goede komt.
Also aggregate inline CSS
Met deze optie verplaats je alle inline CSS naar Autoptimize’s CSS bestand. Hoewel het verplaatsen van inline CSS naar een door de browser te cachen CSS bestand de paginagrootte kan verkleinen, raden we aan om deze optie in de meeste gevallen uitgeschakeld te laten.
Generate data: URIs for images
Als deze optie is ingeschakeld, zal Autoptimize kleine achtergrondafbeeldingen coderen met base64 en deze in CSS insluiten. We raden aan om deze optie te testen en de impact ervan op je paginasnelheid te meten. Hoewel het coderen van afbeeldingen naar het base64 format het aantal HTTP verzoeken vermindert, zijn de bijbehorende base64 bestanden doorgaans 20-30% groter dan hun binaire tegenhangers.
Inline and defer CSS
Het inline plaatsen van belangrijke CSS kan sommige sites een aanzienlijke snelheidsboost opleveren. Met belangrijke CSS bedoel ik in dit geval de styles die nodig zijn voor “above the fold” elementen. In de praktijk richt inline CSS zich meestal op elementen zoals structurele elementen, global font families en groottes en navigatie-styling.
Door deze belangrijke groepen inline te plaatsen, kan het volledige complete CSS bestand op een later tijdstip worden geladen, zonder het uiterlijk van de pagina te beïnvloeden. Hoewel het mogelijk is om handmatig de belangrijkste styles eruit te vissen, raden we aan om een tool als deze te gebruiken om de styles te generen. Een dergelijke zou een goed beginpunt moeten zijn.
Nadat je de cruciale CSS hebt gegenereerd, moet je deze kopiëren en plakken naar de Autoptimize instellingen.
De volgende stap is om de front-end ervaring van je site te testen. Als je vreemde dingen ziet als “flashes of unstyled content (FUOC)”, dan is het zaak om de elementen die niet gestylet zijn op te zoeken en deze toe te voegen aan de bijbehorende styles in Autoptimize, zodat ze inline geplaatst kunnen worden.
Autoptimize biedt een “power-up” die automatisch cruciale CSS genereert voor je WordPress-pagina’s. Uit onze ervaring kan deze functie je site af en toe vertragen, omdat deze externe API calls gebruikt om de cruciale CSS te genereren. Met andere woorden, het genereren van de initiële cruciale CSS is afhankelijk van het reactievermogen van een externe server. In de meeste gevallen is de bovengenoemde methode, waarvoor geen externe API calls nodig zijn, de “nettere” oplossing.
Inline all CSS
Voor de meeste sites raden we af om alle CSS inline te plaatsen, omdat het de paginagrootte aanzienlijk kan verhogen. Bovendien maak je het de browser zo goed als onmogelijk om CSS te cachen wanneer je alle CSS inline plaatst.
Exclude CSS from Autoptimize
Standaard sluit Autoptimize de volgende directory’s en CSS bestanden uit van samenvoeging. Als je wil voorkomen dat Autoptimize specifieke CSS bestanden samenvoegt, kan je ze aan deze lijst toevoegen. Net als bij het uitsluiten van JavaScript, worden deze CSS nog wel verkleind. Je zorgt er dus alleen voor dat ze niet worden samengevoegd.
- wp-content/cache/
- wp-content/uploads/
- admin-bar.min.css
- dashicons.min.css
HTML options
De HTML optimalisatie van Autoptimize kan je helpen de grootte van je pagina’s te verkleinen door witruimte te verwijderen.
Optimize HTML code
We raden aan om de codefeature “Optimize HTML” in te schakelen, omdat het de paginagrootte verkleint door onnodige witruimte uit je HTML te verwijderen. Deze feature zorgt bij de meeste sites niet voor problemen, maar in een enkel geval kan het glitches veroorzaken. Daarom raden we aan om de HTML code-optimalisatie grondig te testen voordat je het in een productieomgeving gebruikt.
Keep HTML comments
Schakel deze functie in als je HTML opmerkingen wil behouden voor je geoptimaliseerde pagina’s.
CDN options
Als je Kinsta CDN of een proxyservice met CDN mogelijkheden zoals Cloudflare gebruikt, hoef je niets te configureren in de CDN opties van Autoptimize. Voor een nog snellere en eenvoudigere boost van je algehele optimalisatie, kun je overwegen om je code te minificeren. Dit kan rechtstreeks in het MyKinsta dashboard worden gedaan met behulp van de codeminificatiefeature.
Als je echter een andere CDN service gebruikt om je assets te versnellen, voert je de CDN URL in dit veld in.
Cache info
De “Cache info” van Autoptimize toont belangrijkte informat zoals de locatie en permissies van de cachemap, evenals de totalle grootte van de gecachte styles en scripts. Als naast “Can we write?” de tekst “No” ziet staan, dan moet je bij je host aankloppen om de map-permissies in te stellen.
Misc Options
Hier vind je de overige instellingen en Autoptimize heeft hier een paar interessante tussen staan. Als je problemen ondervindt bij het laden van geoptimaliseerde CSS en JS bestanden, dan is het misschien nodig om een aantal van onderstaande instellingen opnieuw te configureren.
Save aggregated scripts/CSS as static files
We raden aan om deze optie in te schakelen om samengevoegde bestanden als statische bestanden lokaal op te slaan. Mogelijk wil je deze functie uitschakelen als je server niet is geconfigureerd om bestandscompressie en vervaldata af te handelen.
Minify excluded CSS and JS files
We raden aan om deze optie in te schakelen, omdat je hiermee zorgt dat alle CSS en JS bestanden worden verkleind. Als je echter merkt dat het verkleinen van bestanden bij bepaalde CSS en JS bestanden voor problemen zorgt, kan je deze optie uitschakelen.
Also optimize for logged in editor/administrators
We raden aan om dit in te schakelen, omdat je hiermee zorgt dat assets ook worden geoptimaliseerd voor ingelogde editors en administrators. Dit is met name belangrijk als je optimalisatie-instellingen wil testen als een ingelogd gebruiker.
Afbeeldingsoptimalisatie in Autoptimize
Autoptimize beschikt over een ingebouwde integratie met ShortPixel voor het optimaliseren van afbeeldingen. Naast de instellingen voor afbeeldingskwaliteit, kun je met de integratie van Autoptimize ook WEBP versies van je afbeeldingen generen en leveren.
We raden het Kinsta gebruikers overigens af om gebruik te maken van de afbeeldingsoptimalisatie-feature van Autoptimize. In plaats daarvan raden we aan om rechtstreeks gebruik te maken van de geavanceerde plugins van ShortPixel of Imagify. Met de volledige plugin heb je meer controle over optimalisatie-instellingen, inclusief het herschrijven van afbeeldingen om gebruik te maken van de <picture> tag. Deze is vereist voor WEBP ondersteuning op Kinsta.
Autoptimize bevat ook lazyloading features voor afbeeldingen. We raden aan om deze functie in te schakelen om de laadsnelheid van pagina’s te verbeteren. Wanneer lazyloading is ingeschakeld, kan je met Autoptimize het lazyloaden van bepaalde afbeeldings-classes en bestandsnamen uitsluiten.
Deze uitsluitingsfeature is met name nuttig voor logo’s, sociale iconen en andere belangrijke afbeeldingselementen die je niet wil lazyloaden. Als je op zoek bent naar een oplossing die meer controle geeft over het lazyloaden, bekijk dan onze gids over het lazyloaden van afbeeldingen en video’s in WordPress.
Aanvullende optimalisaties in Autoptimize
Google fonts
Autoptimize biedt verschillende mogelijkheden om Google Fonts te optimaliseren. Welke opties het beste bij jouw site passen, hangt af van hoe jouw site Google Fonts gebruikt.
- Leave as is (zo laten).
- Remove Google Fonts (Google Fonts verwijderen).
- Combine and link in head (samenvoegen en in head ernaar linken).
- Combine and preload in head (samenvoegen en in head preloaden).
- Combine and load fonts asynchronously with webfont.js (samenvoegen en de fonts asynchroon laden met webfont.js).
We raden af om gebruik te maken van de optie “Leave as is”, omdat dit geen snelheidsvoordelen biedt.
Als Google Fonts geen cruciale rol speelt in het reilen en zeilen van je site, is het verwijderen ervan en het gebruiken van een system font stack iets wat een enorme positieve impact kan hebben op de snelheid van je site.
Als je Google Fonts wil behouden op je site, dan raden we aan om de laatste drie opties te testen en te kijken welke het beste werkt op jouw site.
Remove emojis
Met die optie verwijdert Autoptimize de CSS en JavaScript die gerelateerd zijn aan de emoji’s van de WordPress kern. We raden aan om deze optie in te schakelen, want dit kan de paginagrootte verminderen. Bovendien zijn de meeste reguliere besturingssystemen uitgerust met een font stack die emoji’s bevatten. Natuurlijk zijn er ook andere manieren om emoji’s uit te schakelen op je WordPress site.
Remove query strings from static resources
Als je graag queryreeksen (bijvoorbeeld ?ver=) uit statische bronnen wil verwijderen, dan kan je deze optie inschakelen. Het verwijderen van queryreeksen heeft geen invloed op de laadtijd, maar het kan wel helpen om de score van je site in GTmetrix, Google Pagespeed en andere test-sites te verbeteren.
Preconnect to 3rd party domains
Met de preconnect directive kan je browser verbinding maken met gespecificeerde domeinen om DNS look-ups en SSL handshake-onderhandelingen uit te voeren voordat een volledige HTTP wordt verstuurd.
Als je site bijvoorbeeld een logo-afbeelding heeft die wordt aangeboden via https://site.kinsta.cdn.com/logo.png, dan kan je Autoptimize instrueren om een preconnect directive toe te voegen. Dit kan je doen om de initiële DNS en SSL verbindingen in het <head> element af te handelen voordat je HTTPS verzoek is gemaakt in het <body> element van je HTML.
Je kan de developers-tool of inspector van je browser gebruiken om belangrijke externe domeinen te vinden waarmee je kan preconnecten. In de onderstaande voorbeeldpagina zijn er externe aanvragen voor de volgende domeinen.
https://cdn.brianli.comhttps://www.google-analytics.comhttps://www.googletagmanager.com
Deze drie domeinen kunnen worden toegevoegd aan de preconnect lijst van Autoptimize.
Om prestatieredenen raden we aan om niet meer dan zes domeinen toe te voegen aan de preconnect lijst van Autoptimize, omdat het specificeren van preconnect directives voor teveel domeinen kan resulteren in slechtere prestaties.
Preload specific requests
Preload directives instrueren je webbrowser om een asset zo snel mogelijk te downloaden. Dit directive is handig voor het downloaden van middelen die heel vroeg in het laadproces van de pagina nodig zijn. In de praktijk wordt preloading vaak gebruikt om laadtijden van aangepaste fonts te versnellen door ze te laden voordat ze worden opgevraagd in de CSS van de pagina.
We raden aan om met een developer te overleggen welke assets, indien aanwezig, vooraf op je WordPress site moeten worden geladen. Zoals met veel andere prestatiegerelateerde tweaks, kan het preloaden van te veel items ertoe leiden dat je site langzamer wordt geladen.
Async JavaScript files
Met de functie “Async JavaScript files” van Autoptimize kan je specifieke externe JavaScript bestanden specificeren om asynchroon te laden via de async HTML flag. Hoewel het asynchroon laden van JS bestanden de paginasnelheid kan verbeteren, raden we aan om voldoende tests uit te voeren om er zeker van te zijn dat de functionaliteit van de site niet wordt beïnvloedt.
Samenvatting
Wanneer je een beetje doorhebt hoe je deze plugin het beste kan instellen, dan is de Autoptimize plugin een solide keuze voor WordPress gebruikers die de prestaties van hun site willen verbeteren.
Met basisfuncties zoals HTML- en CSS optimalisatie en meer geavanceerde features, zoals de mogelijkheid om preconnect en preload directives op te geven, heeft Autoptimize alles wat je nodig hebt om de frontend-prestaties van je WordPress site te optimaliseren.
Als je meer wil weten over WordPress optimalisatie en hoe je de backend van je site kan optimaliseren, bekijk dan onze uitgebreide WordPress performance handleiding.
Laat een reactie achter