Autoptimize är ett kostnadsfritt plugin för WordPress-optimering. Förutom HTML, CSS och JavaScript-optimering, inkluderar Autoptimize även optimeringsfunktioner som är riktade till andra aspekter av moderna WordPress-webbplatser.
I det här inlägget, ska vi gå igenom de bästa inställningarna för Autoptimize-pluginet för att förbättra prestandan och sidhastigheten på din WordPress-webbplats.
Varför ska man använda Autoptimize?
Innan vi djupdyker bland de bästa inställningarna för Autoptimize, ska vi lite snabbt gå igenom tre anledningar till att Autoptimize är ett fantastiskt optimerings-plugin.
- Den kostnadsfria versionen av Autoptimize har en komplett funktionsuppsättning för optimering av din WordPress-webbplats.
- Autoptimize är strikt ett optimerings-plugin och gör inte någon cachelagring av HTML-sidor. Detta innebär att det är kompatibelt med alla hosting-leverantörer – även de med anpassade konfigurationer för sid-cachelagring som Kinsta.
- Autoptimize har över 1 miljon aktiva installationer i WordPress-databasen och blir konsekvent uppdaterat med nya funktioner och buggfixar.
Autoptimize JS, CSS och HTML-inställningar
HTML, CSS, och JavaScript är vad Autoptimize lever av. Det kan vara en skrämmande upplevelse att gräva i Autoptimize´s omfattande funktionsuppsättning och inställningar. För att göra det enklare har vi sammanställt de bästa Autoptimize-inställningarna för förbättring av webbplatsens prestanda.
JavaScript-alternativ
Optimera JavaScript-kod
Vi rekommenderar att du aktiverar det här alternativet. När ”optimera JavaScript-kod” är aktiverat, kommer Autoptimize att förminska dina JavaScript-filer.
Samla ihop JS-filer
Autoptimize´s alternativ för att ”samla ihop JS-filer” kommer att slå ihop alla dina JavaScript-filer till en enda fil. Förr i tiden, var det revolutionerande för WordPress optimering att kunna slå ihop JS och CSS-filer. Kinsta använder moderna HTTP/2-servrar som stöder parallella nedladdningar och multiplexing – det innebär att det inte längre är lika viktigt att kunna slå ihop filer eftersom HTTP/2 gör att flera filer kan laddas ner samtidigt. Men att slå ihop CSS och JS-filer kan fortfarande påverka hastigheten för vissa typer av WordPress-webbplatser, så vi rekommenderar att du testar din sidhastighet med detta alternativ aktiverat och inaktiverat.
Även slå ihop Inline JS
Alternativet ”även slå ihop inline JS” extraherar inline JS i din HTML, och kombinerar detta med Autoptimize´s optimerade JS-fil. Det här alternativet kan skapa en snabb ökning av Autoptimize´s cachestorlek. Därför rekommenderar vi att du har det här alternativet inaktiverat om du inte har en specifik anledning att aktivera det.
Force JavaScript in
I de flesta fall rekommenderar vi inte att JavaScript-filer ska behöva läsas in i webbplatsens HTML<head>-element. Om JS ska läsas in tidigt kan det leda till render-blockerande element som kan göra din sidhastighet långsammare. Om du har JavaScript-filer som behöver laddas i <head>-elementet, rekommenderar vi att du utesluter de skripten från Autoptimize.
Exkludera skript från Autoptimize
Med det här alternativet kan du utesluta specifika kataloger och JavaScript-filer från ihopslagning. Som standard utesluter Autoptimize följande skript.
- wp-includes/js/dist/
- wp-includes/js/tinymce/
- js/jquery/jquery.js
Observera att tillägg av ett skript som ska undantas endast påverkar ihopslagningen som standard. Uteslutna JavaScript-filer kommer fortfarande att minifieras om inte ”minifiera uteslutna CSS och JS-filer” är omarkerat under ”övrigt-alternativet”.
Lägg till Try-Catch Wrapping
Aktivering av ”try-catch Wrapping”-alternativet kommer att linda in din JavaScript-kod i try-catch block. Det här alternativet är användbart för felsökningsproblem som orsakas av JS-minifiering och ihopslagning. Om din webbplats endast fungerar när ”try-catch wrapping” är aktiverat, rekommenderar vi att du arbetar ihop med en utvecklare och går igenom dina JavaScript-filer för att identifiera den fil som orsakar problemet. Överdriven användning av try-catch block kan nämligen minska JS- prestanda.
Alternativ för CSS
Optimera CSS-kod
Vi rekommenderar att du aktiverar det här alternativet. När ”optimera CSS-kod” är aktiverat, kommer Autoptimize att minifiera dina CSS-filer.
Samla ihop CSS-filer
Autoptimize´s alternativ ”samla ihop CSS-filer” kommer att slå ihop alla dina CSS-filer till en enda fil. Som vi nämnde tidigare gynnar den här funktionen inte webbplatser som stöder HTTP/2. Vi rekommenderar att du A / B-testar det här alternativet på din webbplats för att avgöra om det blir någon positiv inverkan på sidhastigheten.
Även slå ihop inline CSS
Detta alternativ kommer att flytta inline CSS till Autoptimizes CSS-fil. Att flytta inline CSS till en cachelagringsbar CSS-fil kan dock minska sidstorleken, så vi rekommenderar att du lämnar detta alternativ inaktiverat i de flesta fall.
Generera data: URI:er för bilder
När det här alternativet är aktiverat kommer Autoptimize att base64-koda små bakgrundsbilder och bädda in dem i CSS. Vi rekommenderar att du testar det här alternativet för att mäta effekten på din sidhastighet. Kodning av bilder i base64-format minskar visserligen antalet HTTP-begäranden, men base64´s representationsfiler är vanligtvis 20-30% större än sina binära motsvarigheter.
Inline och Defer CSS
Inline av kritisk CSS kan resultera i en betydande hastighetsökning för vissa webbplatser. Tanken här är inlining av stilar som krävs för element som är ”ovanför luckan”. I praktiken riktar sig inline CSS vanligtvis till element som strukturella element, globala typsnittsfamiljer och storlekar, och navigerings-styling.
Genom inlining av dessa nyckelelement, kan den större kompletta CSS-filen laddas vid ett senare tillfälle utan att påverka utseendet på sidan. Även om det är möjligt att manuellt extrahera kritiska stilar, rekommenderar vi att du använder ett verktyg som det här för att generera stilarna som utgångspunkt.
Efter att du har genererat den kritiska CSS:en kopierar och klistrar du in den i Autoptimize-inställningarna.
Nästa steg är att testa webbplatsens frontend-upplevelse. Om du märker några konstiga flashes of unstyled content (FOUC), måste du sannolikt identifiera de icke-stylade elementen och lägga till motsvarande stilar i Autoptimize för inlining.
Autoptimize erbjuder en ”power-up” som automatiskt genererar kritisk CSS för dina WordPress-sidor. Enligt vår erfarenhet kan den här funktionen ibland sakta ner din webbplats eftersom den använder externa API-anrop för att generera den kritiska CSS:en. Den initiala kritiska CSS-genereringen är alltså beroende av en extern servers reaktionsförmåga. I de flesta fall är det bättre att nyttja den tidigare nämnda metoden som inte kräver några externa API-anrop.
Inline all CSS
För de flesta webbplatser, rekommenderar vi inte inlining av all CSS eftersom det kan öka sidstorleken dramatiskt. Dessutom gör inlining av all CSS att det blir omöjligt för webbläsaren att cachelagra CSS.
Exkludera CSS från Autoptimize
Som standard utesluter Autoptimize följande kataloger och CSS-filer från ihopslagning. Om du skulle vilja förhindra att Autoptimize slår ihop någon av dina CSS-filer, kan du lägga till dem i den här listan. I likhet med JavaScript-uteslutning förhindrar den här funktionens standardbeteende inte att CSS-filer minifieras – bara att de slås ihop.
- wp-content/cache/
- wp-content/uploads/
- admin-bar.min.css
- dashicons.min.css
HTML-alternativ
Med hjälp av Autoptimizes HTML-optimering kan du minska sidornas storlek genom att ta bort blanktecken.
Optimering av HTML-kod
Vi rekommenderar att du aktiverar kodfunktionen ”optimera HTML” eftersom den minskar sidstorleken genom att ta bort onödiga blanktecken i din HTML. Även om den här funktionen är kompatibel med de flesta webbplatser, kan borttagning av blanktecken orsaka glapp på vissa webbplatser. Vi rekommenderar med andra ord att du testar HTML-kodoptimering noggrant innan du använder den i en produktionsmiljö.
Behåll HTML-kommentarer
Aktivera den här funktionen om du skulle vilja behålla HTML-kommentarer för dina optimerade sidor.
Alternativ för CDN
Om du använder Kinsta CDN eller en proxytjänst med CDN-funktioner som Cloudflare behöver du inte konfigurera något i Autoptimize’s CDN-alternativ. För en ännu snabbare och enklare ökning av din totala optimering kan du överväga att minifiera din kod. Detta kan göras direkt i MyKinsta-instrumentpanelen med hjälp av kodminifieringsfunktionen.
Om du däremot använder en annan CDN-tjänst för att accelerera dina tillgångar, anger du CDN-webbadressen i det här fältet.
Info om cacheminne
Autoptimizes ”cache info” visar viktig information som placering och behörigheter för cachemappen, samt den totala storleken på de cachelagrade stilarna och skripten. Om du ser ett ”Nej” bredvid ”Kan vi skriva?”, måste du arbeta med din host för att åtgärda mappbehörigheterna.
Övriga alternativ
Autoptimize har några övriga optimeringsinställningar. Om du har problem med att få optimerade CSS- och JS-filer att läsas in på din webbplats kan du behöva konfigurera några av inställningarna nedan.
Spara sammanställda skript/CSS som statiska filer
Vi rekommenderar att du aktiverar alternativet för att spara ihopslagna filer som statiska filer lokalt. Du kan behöva inaktivera detta om din server inte är konfigurerad för att hantera filkomprimering och upphörande.
Minifiera uteslutna CSS och JS-filer
Vi rekommenderar att du aktiverar detta alternativ för att säkerställa att alla CSS och JS-filer minifieras. Men om du märker några minifierings-relaterade problem med några av dina uteslutna CSS och JS-filer, kan du inaktivera det här alternativet.
Även optimera för inloggade redigerare / administratörer
Vi rekommenderar att du aktiverar detta för att säkerställa att tillgångarna är optimerade för inloggade redigerare och administratörer. Detta är viktigt om du testar Autoptimize´s inställningar som en inloggad användare.
Bildoptimering i Autoptimize
Autoptimize har en inbyggd integrering med ShortPixel för optimering av bilder. Förutom en bildkvalitetsinställning, ger dig autoptimize´s integrering även möjlighet att generera och tjäna WEBP-versioner av dina bilder.
För Kinsta´s användare rekommenderar vi inte funktionen för bildoptimering i Autoptimize. Istället rekommenderar vi att du använder de fullfjädrade pluginen från ShortPixel eller Imagify direkt. Med hela pluginet får du en mer detaljerad kontroll över optimeringsinställningarna inklusive omskrivning av bilder för att använda taggen <picture> som krävs för WEBP-stöd på Kinsta.
Autoptimize inkluderar även lazy-loading för bilder. Vi rekommenderar att du aktiverar den här funktionen för att förbättra sidhastigheten för bild-tunga sidor. När lazy-loading är aktiverat tillåter Autoptimize att du utesluter vissa bildklasser och filnamn från att vara lazy-loaded.
Inställningen för uteslutning är användbar för bilder som logotyper, sociala ikoner och andra viktiga bild-element som inte bör vara lazy-loaded. Om du letar efter en lösning som erbjuder mer kontroll över lazy-loading, kolla in vår guide om lazy-loading av bilder och videor i WordPress.
Extra optimeringar i Autoptimize
Google Fonts
Autoptimize har några olika alternativ för att optimera Google Fonts. Vilket alternativ som är bäst för dig beror på hur din webbplats utnyttjar Google Fonts.
- Lämna det som det är.
- Ta bort Google Fonts.
- Kombinera och länka i huvud.
- Kombinera och förladda i huvud.
- Kombinera och ladda teckensnitt asynkront med webfont.js.
Vi rekommenderar inte att du använder alternativet ”lämna det som det är” eftersom det inte erbjuder någon hastighetsförmån.
Om Google Fonts inte krävs för din webbplats kan det däremot få en enormt positiv inverkan på din sidhastighet att ta bort det och istället använda en systemtypsnittsstack.
Om du vill behålla Google Fonts på din webbplats rekommenderar vi att du testar de tre sista alternativen för att ta reda på vilket som fungerar bäst för din webbplats.
Ta bort Emojis
Detta Autoptimize-alternativ tar bort CSS och JavaScript som är relaterade till WordPress emojis. Vi rekommenderar att du aktiverar det här alternativet eftersom det kan hjälpa till att minska din sidstorlek. Dessutom levereras de flesta vanliga operativsystem med teckensnittsstackar som inkluderar emojis. Det finns självklart även andra sätt att inaktivera emojis på din WordPress-webbplats.
Ta bort frågesträngar från statiska resurser
Om du vill ta bort frågesträngar (t.ex. ?ver=) från statiska resurser, kan du aktivera det här alternativet. Borttagningen av frågesträngar kommer inte att påverka laddningstiden, men kan hjälpa till att förbättra webbplatsens poäng i GTmetrix, Google Pagespeed och andra prestanda-tjänster.
Föranslut till 3:e parts domäner
Föranslut-direktivet gör att din webbläsare kan ansluta sig till angivna domäner för att bearbeta DNS-uppslag och SSL-handskakningsförhandlingar innan en fullständig HTTP-begäran skickas.
For example, if your site has a logo image that’s served from https://site.kinsta.cdn.com/logo.png, you can instruct Autoptimize to add a preconnect directive to handle the initial DNS and SSL connections in the <head> element before the HTTP request is made in the <body> element of your HTML.
Om webbplatsen exempelvis har en logotypbild som serveras från https://site.kinsta.cdn.com/logo.png kan du instruera Autoptimize att lägga till ett direktiv för föranslutning. Då kan Autoptimize hantera de inledande DNS- och SSL-anslutningarna i <head>-elementet innan HTTP-begäranden görs i <body>-elementet i din HTML.
Du kan använda webbläsarens utvecklarverktyg eller inspektör för att hitta viktiga externa domäner att föransluta till. I exempelsidan nedan finns externa begäranden till följande domäner.
https://cdn.brianli.comhttps://www.google-analytics.comhttps://www.googletagmanager.com
Dessa tre domäner kan läggas till i Autoptimizes föranslutnings-lista.
Av prestandaskäl rekommenderar vi att du inte lägger till fler än sex domäner i Autoptimizes föranslutnings-lista eftersom det kan påverka din prestanda att ange föranslutnings-direktiv till för många domäner.
Förladda specifika förfrågningar
Förhandsinläsnings-direktiv instruerar din webbläsare att hämta en tillgång så snart som möjligt. Detta direktiv är användbart för att ladda ner tillgångar som behövs mycket tidigt i sidinläsningsprocessen. I praktiken används förinläsning ofta för att påskynda laddningstider för anpassade teckensnitt genom att läsa in dem innan de begärs i sidans CSS.
Vi rekommenderar att du pratar med en utvecklare om vilka tillgångar, om några, som ska förladdas på din WordPress-webbplats. Som med många andra prestandarelaterade tweaks, kan förinläsning av många tillgångar göra att din webbplats laddas långsammare.
Asynkronisera JavaScript-filer
Med Autoptimize´s ”asynkronisera JavaScript-filer”-funktion kan du göra att vissa externa JavaScript-filer laddas asynkront viaflaggan async HTML. Asynkron inläsning av JS-filer kan förbättra sidhastigheten men vi rekommenderar att du gör adekvata tester för att se till att ingen webbplatsfunktionalitet påverkas.
Sammanfattning
Om du vet vilka inställningar du ska göra, är pluginet Autoptimize ett stabilt alternativ för WordPress-användare som vill öka webbplatsens prestanda.
Det inkluderas grundläggande funktioner som HTML och CSS-optimering, och mer avancerade som möjligheten att ange föranslutning och förladdnings-direktiv. Autoptimize har med andra ord allt du behöver för att optimera prestandan på frontend för din WordPress-webbplats.
Om du är intresserad av att lära dig mer om WordPress-optimering och hur du optimerar webbplatsens backend, se till att kolla in vår omfattande guide om WordPress-prestanda.
Brian has been a WordPress user for over 10 years, and enjoys sharing his knowledge with the community. In his free time, Brian enjoys playing the piano and exploring Tokyo with his camera. Connect with Brian on his website at brianli.com.
Lämna ett svar