Wordpress

Autoptimize instellen voor uw WordPress-site

Autoptimize is een gratis plug-in voor WordPress-optimalisatie. Naast HTML-, CSS- en JavaScript-optimalisatie bevat Autoptimize ook optimalisatiefuncties die zijn gericht op andere aspecten van moderne WordPress-sites.

In dit bericht zullen we de beste Autoptimize-plug-in-instellingen delen om de prestaties en paginasnelheid van uw WordPress-site te verbeteren.

Waarom automatiseren?

Voordat we ingaan op de beste Autoptimize-instellingen, laten we snel drie redenen bespreken waarom Autoptimize een geweldige optimalisatie-plug-in is.

  1. De gratis versie van Autoptimize heeft een complete set functies voor het optimaliseren van uw WordPress-site.
  2. Autoptimize is strikt een optimalisatie-plug-in en doet geen HTML-paginacaching. Dit betekent dat het compatibel is met alle webhosts - zelfs degenen met aangepaste paginacachingconfiguraties zoals Behmaster.
  3. Autoptimize heeft meer dan 1 miljoen actieve installaties in de WordPress-repository en wordt consequent bijgewerkt met nieuwe functies en bugfixes.

JS-, CSS- en HTML-instellingen automatisch optimaliseren

HTML, CSS en JavaScript zijn het brood en de boter van Autoptimize. Net als bij andere optimalisatie-plug-ins, kan het een ontmoedigende taak zijn om in de uitgebreide functies en instellingen van Autoptimize te graven. Om het u gemakkelijker te maken, hebben we de beste Autoptimize-instellingen samengesteld om de prestaties van uw site te verbeteren.

JavaScript-opties

JavaScript-optimalisatie in Autoptimize.
JavaScript-optimalisatie in Autoptimize.

Optimaliseer JavaScript-code

We raden aan om deze optie in te schakelen. Wanneer "optimaliseer JavaScript-code" is ingeschakeld, zal Autoptimize uw JavaScript-bestanden verkleinen.

Samengevoegde JS-bestanden

De optie "JS-bestanden samenvoegen" van Autoptimize combineert al uw JavaScript-bestanden in één enkel bestand. In het verleden was het combineren van JS- en CSS-bestanden een belangrijke stap in WordPress-optimalisatie. Bij Behmaster, gebruiken we moderne HTTP/2-servers die parallelle downloads en multiplexing ondersteunen - dit betekent dat het combineren van bestanden niet meer zo belangrijk is als vroeger, omdat met HTTP/2 meerdere bestanden tegelijk kunnen worden gedownload. Dat gezegd hebbende, zal het samenvoegen van CSS- en JS-bestanden nog steeds resulteren in een verkeersdrempel voor bepaalde typen WordPress-sites, dus we raden aan om je paginasnelheid te testen met deze optie in- en uitgeschakeld.

Ook geaggregeerde Inline JS

De optie "ook inline JS aggregeren" extraheert inline JS in uw HTML en combineert het met het geoptimaliseerde JS-bestand van Autoptimize. Aangezien deze optie een snelle toename van de cachegrootte van Autoptimize kan veroorzaken, raden we aan deze optie uitgeschakeld te laten, tenzij u een specifieke reden hebt om deze in te schakelen.

JavaScript forceren in

In de meeste gevallen raden we niet aan om JavaScript-bestanden te forceren om in de HTML van uw site te laden element. Als u JS dwingt om vroeg te laden, kan dit resulteren in renderblokkerende elementen die uw paginasnelheid kunnen vertragen. Als u JavaScript-bestanden heeft die moeten worden geladen in de element, raden we aan die scripts uit te sluiten van Autoptimize.

Scripts uitsluiten van Autoptimize

Met deze optie kunt u specifieke mappen en JavaScript-bestanden uitsluiten van aggregatie. Autoptimize sluit standaard de volgende scripts uit.

  • wp-inclusief/js/dist/
  • wp-inclusief/js/tinymce/
  • js/jquery/jquery.js

Houd er rekening mee dat het toevoegen van een script dat moet worden uitgesloten, standaard alleen van invloed is op de aggregatie. Uitgesloten JavaScript-bestanden worden nog steeds verkleind, tenzij "Uitgesloten CSS- en JS-bestanden verkleinen" is uitgeschakeld onder "Diverse opties".

Try-Catch Wrapping toevoegen

Als u de optie "try-catch-verpakking toevoegen" inschakelt, wordt uw JavaScript-code in try-catch-blokken verpakt. Deze optie is handig voor het opsporen van fouten die worden veroorzaakt door JS-minificatie en aggregatie. Als uw site alleen werkt met "add try-catch-wrapping" ingeschakeld, raden we u aan samen te werken met een ontwikkelaar om uw JavaScript-bestanden te doorzoeken om degene te identificeren die het probleem veroorzaakt, omdat overmatig gebruik van try-catch-blokken de JS-prestaties kan verminderen.

Autoptimize: de gratis plug-in voor WordPress-optimalisatie waarvan u niet wist dat u deze nodig had... maar die uw site razendsnel zal maken ⚡️Deze gids legt precies uit waarom u deze nodig heeft 🚀Klik om Tweet

CSS-opties

Autoptimize CSS-optimalisatie.
Autoptimize CSS-optimalisatie.

CSS-code optimaliseren

We raden aan om deze optie in te schakelen. Wanneer "optimaliseer CSS-code" is ingeschakeld, zal Autoptimize uw CSS-bestanden verkleinen.

Samengevoegde CSS-bestanden

De optie "aggregaat CSS-bestanden" van Autoptimize combineert al uw CSS-bestanden in één enkel bestand. Zoals we eerder vermeldden, komt deze functie mogelijk niet ten goede aan sites die HTTP/2 ondersteunen. We raden aan om deze optie A/B te testen op je site om te bepalen of er een positief effect is op de paginasnelheid.

Ook geaggregeerde inline CSS

Met deze optie wordt inline CSS naar het CSS-bestand van Autoptimize verplaatst. Hoewel het verplaatsen van inline CSS naar een in de browser cachebaar CSS-bestand de paginagrootte kan verkleinen, raden we aan deze optie in de meeste gevallen uitgeschakeld te laten.

Gegevens genereren: URI's voor afbeeldingen

Als deze optie is ingeschakeld, zal Autoptimize kleine achtergrondafbeeldingen base64-coderen en insluiten in CSS. We raden u aan deze optie uit te proberen om de impact op uw paginasnelheid te meten. Hoewel het coderen van afbeeldingen in base64-indeling het aantal HTTP-verzoeken vermindert, zijn base64-representatiebestanden doorgaans 20-30% groter dan hun binaire tegenhangers.

Inline en CSS uitstellen

Het inlijnen van kritische CSS kan voor sommige sites een aanzienlijke snelheidsboost opleveren. Het idee hier is inline-stijlen die nodig zijn voor elementen die "boven de vouw" zijn. In de praktijk richt inline CSS zich meestal op elementen zoals structurele elementen, algemene lettertypefamilies en -groottes en navigatiestijl.

Door deze belangrijke elementen in te lijnen, kan het grotere volledige CSS-bestand op een later tijdstip worden geladen zonder het uiterlijk van de pagina te beïnvloeden. Hoewel het mogelijk is om kritieke stijlen handmatig te extraheren, raden we aan om een ​​tool als deze te gebruiken om de stijlen als uitgangspunt te gebruiken.

Genereer kritische CSS.
Genereer kritische CSS.

Na het genereren van de kritieke CSS, kopieer en plak je deze in de Autoptimize-instellingen.

CSS inline en uitstellen in Autoptimize.
CSS inline en uitstellen in Autoptimize.

De volgende stap is het testen van de frontend-ervaring van uw site. Als je vreemde flitsen van niet-gestileerde inhoud (FOUC) opmerkt, moet je waarschijnlijk die niet-gestileerde elementen identificeren en de bijbehorende stijlen toevoegen aan Autoptimize voor inlining.

Autoptimize biedt een "power-up" die automatisch kritieke CSS voor uw WordPress-pagina's genereert. Onze ervaring is dat deze functie uw site af en toe kan vertragen omdat deze externe API-aanroepen gebruikt om de kritieke CSS te genereren. De initiële kritische CSS-generatie is dus afhankelijk van het reactievermogen van een externe server. In de meeste gevallen is de bovengenoemde methode, die geen externe API-aanroepen vereist, een schonere oplossing.

Inline alle CSS

Voor de meeste sites raden we niet aan om alle CSS te inlinen, omdat dit de paginagrootte drastisch kan vergroten. Bovendien maakt het inlinen van alle CSS het onmogelijk voor de webbrowser om CSS te cachen.

Sluit CSS uit van Autoptimize

Standaard sluit Autoptimize de volgende mappen en CSS-bestanden uit van aggregatie. Als u wilt voorkomen dat Autoptimize uw CSS-bestanden samenvoegt, kunt u ze aan deze lijst toevoegen. Net als bij JavaScript-uitsluiting, verhindert het standaardgedrag van deze functie niet dat CSS-bestanden worden verkleind - alleen geaggregeerd.

  • wp-inhoud/cache/
  • wp-content/uploads/
  • admin-Bar.min.css
  • dashicons.min.css

HTML-opties

De HTML-optimalisatie van Autoptimize kan helpen de grootte van uw pagina's te verkleinen door witruimte te verwijderen.

HTML-optimalisatie in Autoptimize.
HTML-optimalisatie in Autoptimize.

Optimaliseer HTML-code

We raden aan de codefunctie "HTML optimaliseren" in te schakelen, omdat deze de paginagrootte verkleint door onnodige witruimte in uw HTML te verwijderen. Hoewel deze functie compatibel is met de meeste sites, kan het verwijderen van witruimte op sommige sites storingen veroorzaken. Daarom raden we aan de optimalisatie van HTML-code grondig te testen voordat u deze in een productieomgeving gebruikt.

HTML-opmerkingen behouden

Schakel deze functie in als u HTML-opmerkingen voor uw geoptimaliseerde pagina's wilt behouden.

CDN-opties

Als je een CDN gebruikt zoals BehmasterCDN om statische activa te versnellen, moet u de CDN-URL toevoegen aan Autoptimize. Als u een proxyservice gebruikt met CDN-mogelijkheden zoals Cloudflare, hoeft u niets te configureren in de CDN-opties van Autoptimize.

Configureer CDN-instellingen in Autoptimize.
Configureer CDN-instellingen in Autoptimize.

cache-info

De "cache-info" van Autoptimize geeft belangrijke informatie weer, zoals de locatie en machtigingen van de cachemap, evenals de totale grootte van de in de cache opgeslagen stijlen en scripts. Als u "Nee" ziet naast "Kunnen we schrijven?", moet u samenwerken met uw host om de mapmachtigingen te herstellen.

Auto-optimaliseer cache-informatie.
Auto-optimaliseer cache-informatie.

Diverse opties

Autoptimize heeft een aantal verschillende optimalisatie-instellingen. Als u problemen ondervindt bij het laden van geoptimaliseerde CSS- en JS-bestanden op uw site, moet u mogelijk enkele van de onderstaande instellingen opnieuw configureren.

Diverse optimalisaties in Autoptimize.
Diverse optimalisaties in Autoptimize.

Geaggregeerde scripts/CSS opslaan als statische bestanden

We raden aan deze optie in te schakelen om geaggregeerde bestanden lokaal als statische bestanden op te slaan. Mogelijk moet u dit uitschakelen als uw server niet is geconfigureerd voor bestandscompressie en vervaldatum.

Uitgesloten CSS- en JS-bestanden verkleinen

We raden aan deze optie in te schakelen om ervoor te zorgen dat alle CSS- en JS-bestanden worden verkleind. Als u echter enkele minificatie-gerelateerde problemen opmerkt met sommige van uw uitgesloten CSS- en JS-bestanden, kunt u doorgaan en deze optie uitschakelen.

Ook optimaliseren voor ingelogde editors/beheerders

We raden aan om dit in te schakelen om ervoor te zorgen dat activa zijn geoptimaliseerd voor ingelogde editors en beheerders. Dit is belangrijk als u Autoptimize-instellingen test als ingelogde gebruiker.

Een eersteklas, snelle en veilige hosting nodig voor uw nieuwe e-commerce website? Behmaster biedt razendsnelle servers en 24/7 ondersteuning van wereldklasse door WooCommerce-experts. Bekijk onze plannen

Beeldoptimalisatie in Autoptimize

Autoptimize heeft een ingebouwde integratie met ShortPixel voor het optimaliseren van afbeeldingen. Naast een instelling voor de beeldkwaliteit, stelt de integratie van Autoptimize u ook in staat om WEBP-versies van uw afbeeldingen te genereren en weer te geven.

Voor Behmaster gebruikers, raden we het gebruik van de functie voor beeldoptimalisatie in Autoptimize niet aan. In plaats daarvan raden we aan om de volledige plug-ins van ShortPixel of Imagify rechtstreeks te gebruiken. Met de volledige plug-in heb je meer gedetailleerde controle over optimalisatie-instellingen, inclusief het herschrijven van afbeeldingen om de tag, die vereist is voor WEBP-ondersteuning op Behmaster.

Lazy-load afbeeldingen met Autoptimize.
Lazy-load afbeeldingen met Autoptimize.

Autoptimize bevat ook een luie laadfunctie voor afbeeldingen. We raden aan deze functie in te schakelen om de paginasnelheid te verbeteren voor pagina's met veel afbeeldingen. Als lui laden is ingeschakeld, kunt u met Autoptimize bepaalde afbeeldingsklassen en bestandsnamen uitsluiten van lui laden.

De uitsluitingsinstelling is handig voor afbeeldingen zoals logo's, sociale pictogrammen en andere belangrijke afbeeldingselementen die niet lui moeten worden geladen. Als je op zoek bent naar een oplossing die meer controle biedt over lui laden, bekijk dan onze gids over lui laden van afbeeldingen en video's in WordPress.

Extra optimalisaties in Autoptimize

Extra optimalisaties in Autoptimize.
Extra optimalisaties in Autoptimize.

Google Fonts

Autoptimize heeft een paar verschillende opties voor het optimaliseren van Google Fonts. De beste optie voor u hangt af van hoe uw site Google Fonts gebruikt.

  • Laat het zoals het is.
  • Google-lettertypen verwijderen.
  • Combineren en koppelen in hoofd.
  • Combineren en voorladen in kop.
  • Combineer en laad lettertypen asynchroon met webfont.js.

We raden het gebruik van de optie "laten zoals het is" niet aan, omdat dit geen snelheidsvoordeel biedt.

Als Google Fonts geen essentiële vereiste voor uw site is, kan het verwijderen ervan en het gebruik van een systeemlettertypestapel een enorm positief effect hebben op uw paginasnelheid.

Als u Google Fonts op uw site wilt behouden, raden we u aan de laatste drie opties te testen om erachter te komen welke het beste werkt voor uw site.

Emoji's verwijderen

Deze Autoptimize-optie verwijdert CSS en JavaScript met betrekking tot WordPress-kernemoji's. We raden u aan deze optie in te schakelen, omdat dit kan helpen uw paginaformaat te verkleinen. Bovendien worden de meeste reguliere besturingssystemen geleverd met lettertypestapels die emoji's bevatten. Natuurlijk zijn er ook andere manieren om emoji's op je WordPress-site uit te schakelen.

Queryreeksen uit statische bronnen verwijderen

Als u queryreeksen (bijv. ?ver=) uit statische bronnen wilt verwijderen, kunt u deze optie inschakelen. Het verwijderen van queryreeksen heeft geen invloed op de laadtijd, maar kan de score van uw site in GTmetrix, Google Pagespeed en andere prestatietestservices helpen verbeteren.

Maak vooraf verbinding met domeinen van derden

Met de preconnect-richtlijn kan uw browser verbinding maken met gespecificeerde domeinen om DNS-lookups en SSL-handshake-onderhandelingen te verwerken voordat een volledig HTTP-verzoek wordt verzonden.

Als uw site bijvoorbeeld een logo-afbeelding heeft die wordt weergegeven vanuit https://site.behmaster.cdn.com/logo.png, kunt u Autoptimize opdracht geven om een ​​preconnect-instructie toe te voegen om de initiële DNS- en SSL-verbindingen in de element voordat het HTTP-verzoek wordt gedaan in de element van uw HTML.

U kunt de ontwikkelaarstools of het infovenster van uw browser gebruiken om belangrijke externe domeinen te vinden om vooraf verbinding mee te maken. Op de voorbeeldpagina hieronder zijn er externe verzoeken naar de volgende domeinen.

  • https://cdn.brianli.com
  • https://www.google-analytics.com
  • https://www.googletagmanager.com

Deze drie domeinen kunnen worden toegevoegd aan de preconnect-lijst van Autoptimize.

Vind externe middelen met hulpprogramma's voor ontwikkelaars.
Vind externe middelen met hulpprogramma's voor ontwikkelaars.

Om prestatieredenen raden we aan niet meer dan zes domeinen toe te voegen aan de preconnect-lijst van Autoptimize, omdat het specificeren van preconnect-richtlijnen voor te veel domeinen kan resulteren in een prestatiehit.

Specifieke verzoeken vooraf laden

Preload-richtlijnen geven uw webbrowser de opdracht om een ​​asset zo snel mogelijk te downloaden. Deze richtlijn is handig voor het downloaden van activa die heel vroeg in het laadproces van de pagina nodig zijn. In de praktijk wordt preloading vaak gebruikt om de laadtijden voor aangepaste lettertypen te versnellen door ze te laden voordat ze worden opgevraagd in de CSS van de pagina.

We raden aan om een ​​ontwikkelaar te raadplegen over welke middelen, indien aanwezig, vooraf moeten worden geladen op uw WordPress-site. Zoals met veel andere prestatiegerelateerde tweaks, kan het vooraf laden van te veel middelen ervoor zorgen dat uw site langzamer laadt.

Asynchrone JavaScript-bestanden

Met de functie "async JavaScript-bestanden" van Autoptimize kunt u bepaalde externe JavaScript-bestanden specificeren om asynchroon te laden via de async HTML-vlag. Hoewel het asynchroon laden van JS-bestanden de paginasnelheid kan verbeteren, raden we aan om adequate tests uit te voeren om er zeker van te zijn dat de functionaliteit van de site niet wordt aangetast.

Als u Autoptimize nog niet gebruikt, wilt u deze WordPress-optimalisatieplug-in zo snel mogelijk aan uw site toevoegen na het lezen van deze handleiding 🚀Klik om Tweet

Samengevat

Als je weet hoe je de instellingen moet aanpassen, is de Autoptimize-plug-in een solide optie voor WordPress-gebruikers die de prestaties van de site willen verbeteren.

Met basisfuncties zoals HTML- en CSS-optimalisatie en meer geavanceerde, zoals CDN-integratie en de mogelijkheid om preconnect- en preload-richtlijnen te specificeren, heeft Autoptimize alles wat je nodig hebt om de frontendprestaties van je WordPress-site te optimaliseren.

Als je meer wilt weten over WordPress-optimalisatie en hoe je de backend van je site kunt optimaliseren, bekijk dan zeker onze uitgebreide WordPress-prestatiegids.

Gerelateerde artikelen

0 Comments
Inline feedbacks
Bekijk alle reacties
Terug naar boven knop