TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur konfigureras autoptimering korrekt på WordPress -webbplats?

12

Autoptimize är en av de populära pluginsna för att påskynda din WordPress -webbplats. Det finns mer än 1 miljon aktiv installation av dessa plugins med ett genomsnittligt betyg på 4,7 från 1K+ användare. Det kan inte vara falskt att så många människor installerar och använder detta plugin för att optimera sin webbplats. Du måste dock se till att installationen fungerar för dig för att den ska fungera korrekt.

Relaterat: Topp 8 caching -plugins för WordPress.

Vad gör Autoptimera?

Först måste du förstå att Autoptimize inte är ett cacheminne -plugin som WP Rocket eller W3 Total Cache. Det är ett optimeringsplugin som hjälper till att göra följande saker:

  • Kombinera alla CSS- och JavaScript -filer
  • Minimera de komprimerade filerna och cacha dem, minimera även HTML -koden genom att ta bort kommentarer och mellanslag
  • Lägg till utgångsrubrik till filerna för att visa den cachade versionen
  • Flytta CSS till sidhuvud och skript till sidfot

Senare inkluderade utvecklaren också bildoptimeringen för lat laddning och servering av WebP -bilder för att påskynda mediefiler. Som nämnts på pluginsidan på WordPress.org kan HTTP/2 -servrar automatiskt göra många av de saker som detta plugin gör. Därför bör du testa med tester för att säkerställa att pluginet faktiskt tillför något värde för din installation.

Hur konfigureras autoptimering korrekt i WordPress?

Autoptimize är en av de enklaste insticksprogrammen att installera. Efter att du har installerat och aktiverat plugin, gå till menyn "Inställningar> Autoptimera". Den har alternativen för att optimera JS, CSS, HTML och bilder på din webbplats.

Hur konfigureras autoptimering korrekt på WordPress -webbplats?

Autoptimera inställningar

JS-, CSS- och HTML -inställningar

Denna flik har flera alternativ för att separera och optimera filerna på din webbplats. Autoptimera kommer att samla in och minimera skript, CSS och HTML från ditt tema och plugins. Därför kan val av några av alternativen bryta din webbplats, särskilt du använder jQuery -baserat tema.

JavaScript -alternativ

  • Optimera JavaScript -kod – Aktivera det här alternativet för att minimera JavaScript -filerna. Detta kommer att komprimera och minska storleken på skriptfilerna på din webbplats.
  • Sammanlagda JS-filer? – aktivera det här alternativet för att kombinera alla JavaScript -filer och server asynkront när du läser in sidor på din webbplats. Detta hjälper dig att ta bort problem med att blockera renderingsblockering i Google PageSpeed ​​Insights -verktyget. Men i de flesta fall kommer det att bryta din webbplats. Det bästa alternativet är att aktivera detta och tillhandahålla undantagen så att sidan kan laddas utan att gå sönder. Men det kommer att leda till problem med blockering i PageSpeed ​​Insights. Du kan inaktivera det här alternativet och aktivera endast "Optimera JavaScript -kod" för att endast minimera filerna.
  • Även aggregerad inline JS? – vi rekommenderar dig att inaktivera det här alternativet när ditt tema eller plugin injicerar massor av skript dynamiskt. Om du aktiverar detta kan cachestorleken växa snabbare och större och därmed påverka prestanda istället för att förbättra.

Hur konfigureras autoptimering korrekt på WordPress -webbplats?

JavaScript -alternativ

  • Tvinga in JavaScript? – den bästa praxisen är att ladda JavaScript -filer i sidfoten så att de laddas i slutet av sidläsningen. Detta tar effektivt bort renderingsblockering och skriptrelaterade problem som visas i hastighetsmätningsverktygen. Men om du ser att de tidigare alternativen bryter din webbplats, aktivera detta för att ladda skript i rubriken för att testa om det hjälper. Återigen, om man läser in skript i rubriken visas varning för blockering av render i PageSpeed ​​Insights -verktyget.
  • Uteslut skript från Autoptimerapluginet som standard fyller den här rutan med jquery.js och andra viktiga filer på din webbplats. Om du märker att ett specifikt tema eller plugin -filer bryter din webbplats kan du inkludera filen här. Kom ihåg att fylla den relativa sökvägen till filen genom att ignorera domännamnet. också, som nämnts i beskrivningen, kommer pluginet fortfarande att minimera de uteslutna filerna om du inte utesluter dem i avsnittet "Övrigt". Efter att ha testat med olika teman rekommenderar vi dig att utesluta jquery.js för att undvika att layouten bryter problem på din webbplats. Ibland kanske du inte märker problemet på webbplatsen, men du kan se konsolfelet i utvecklarverktygen för Google Chrome. Felet visar något som "$ eller jQuery är inte definierat" eller "okänd funktion".
  • Lägg till try-catch-förpackning? – aktivera det här alternativet när du upptäcker att pluginprogrammet bryter din webbplats. Vi rekommenderar att du inaktiverar det här alternativet och utesluter filen som bryter i undantaget.

CSS -alternativ

CSS -alternativ liknar nästan JavaScript -alternativ.

  • Optimera CSS -kod? – aktivera det här alternativet för att komprimera och minimera CSS -filer på din webbplats.

Hur konfigureras autoptimering korrekt på WordPress -webbplats?

CSS -alternativ

  • Sammanlagda CSS-filer? – aktivera det här alternativet för att kombinera alla CSS -filer på din webbplats och fungera som en enda komprimerad och förminskad CSS -fil.
  • Samla också inline CSS – aktivera detta för att inkludera inline CSS för aggregering. Om ditt tema eller plugin injicerar massor av inline CSS, kommer detta alternativ att öka storleken på cacheminnet.
  • Generera data: URI för bilder? – aktivera det här alternativet så att Autoptimize kan infoga de små bilderna som laddats ner av ditt tema och plugins.
  • Infoga och skjuta upp CSS – för att aktivera det här alternativet bör du först känna till den kritiska CSS för din webbplats. Tyvärr är det inte lätt att få kritisk CSS eftersom varje mall på din webbplats behöver separat kritisk CSS. Till exempel, när du har WooCommerce på din webbplats kan du inte använda posten eller sidkritisk CSS för WooCommerce -produktsidor. Enligt vår uppfattning bör du inaktivera det här alternativet i Autoptimera. Annars kan du få premium -API: et från criticalcss.com och integrera med Autoptimera under fliken "Critical CSS".
  • Infoga alla CSS – aktivera detta för att infoga all CSS istället för att länka som en fil. När du har aktiverat det här alternativet kan du se källkoden för din webbplats för att se den enorma mängden CSS. Att infoga CSS -burk kommer att drastiskt förbättra hastigheten, men det kan påverka om du har en enorm CSS -fil.
  • Uteslut CSS från Autoptimera – om du upptäcker att webbplatsen går sönder kan du utesluta de specifika CSS -filerna i den här textrutan. I likhet med JavaScript -filer måste du ange den relativa sökvägen genom att ignorera domännamnet. Autoptimering kommer också att utesluta cacheminnet, ikoner och annan CSS som standard. Du kan också tillhandahålla de relativa mapparna som "wp-content/uploads/" för att utesluta alla CSS-filer i den mappen.

Lär dig WordPress: Kolla in 400+ kostnadsfria WordPress -självstudier.

HTML -alternativ

I likhet med JS och CSS, aktivera alternativet "Optimera HTML -kod" för att komprimera och förminska HTML -innehållet på din webbplats. Du kan också aktivera eller ta bort kommentarer genom att använda "Behåll HTML -kommentarer?" alternativ. Vi rekommenderar att du aktiverar båda dessa alternativ.

Hur konfigureras autoptimering korrekt på WordPress -webbplats?

HTML -alternativ

CDN -alternativ

Om du använder CDN som skapar zon -URL, bör du ange rot -URL: en här i textrutan "CDN Base URL". Du kan dock ignorera detta om du inte använder CDN eller använder Cloudflare eller andra CDN som använder DNS -namnservrar.

Hur konfigureras autoptimering korrekt på WordPress -webbplats?

CDN -alternativ

Cache -information

Under avsnittet "Cache -information" kan du hitta status för Autoptimera cacheminnet. Det visar dig sökvägen, storleken och antalet cachade filer.

Hur konfigureras autoptimering korrekt på WordPress -webbplats?

Cache -information

Övriga alternativ

  • Spara aggregerade skript/CSS som statiska filer? – detta bör aktiveras som standard eftersom de komprimerade filerna måste fungera som en statisk resurs för att förbättra hastigheten. Som nämnts i beskrivningen, om det finns ett visningsproblem, inaktivera det här alternativet och försök som hjälper.

Hur konfigureras autoptimering korrekt på WordPress -webbplats?

Övriga alternativ

  • Minimera uteslutna CSS- och JS -filer? – pluginprogrammet minskar automatiskt alla CSS- och JS -filer även om du har uteslutit specifika filer i CSS- eller JS -inställningarna. Inaktivera den här kryssrutan om du vill inaktivera minifieringen av de uteslutna CSS- och JS -filerna.
  • Även optimera för inloggade redaktörer / administratörer? – vi rekommenderar att du inaktiverar det här alternativet så att du kan se själva webbplatsen utan Autoptimera när du är inloggad som administratör eller redaktör. Annars kan du märka problem med att arbeta med sidbyggare -plugins.

Spara alla dina ändringar för att pluginet ska börja arbeta på din webbplats.

Bilder

Fliken "Bilder" erbjuder alternativ för att optimera bilder.

  • Optimera bilder – det här alternativet hjälper dig att använda Shortpixel global CDN för att optimera och visa dina bilder när du är på språng. Shortpixel är en premium bildkomprimeringslösning som låter dig optimera 150 bilder per månad. Du kan se den aktuella statusen och kvotanvändningen i det här avsnittet.

Hur konfigureras autoptimering korrekt på WordPress -webbplats?

Bildoptimering

  • Bildoptimeringskvalitet – du kan välja ett av de blanka, förlorande eller förlustfria alternativen. Du kan kontrollera skillnaderna mellan dessa alternativ och testa dina bilder på sidan Shortpixel. Detta hjälper dig att välja det bästa alternativet för ditt behov.
  • Ladda WebP i webbläsare som stöds? – välj det här alternativet för att visa WebP -bilder för Chrome och andra webbläsare som stöds.
  • Ladda bilder?lat last kommer att skjuta upp bilderna från skärmen och laddas endast när användaren når bildpositionen i webbläsaren. Aktivera det här alternativet för att förbättra laddningshastigheten och förbättra poängen i Google PageSpeed ​​Insights -verktyget.
  • Undantag för lat belastning- här kan du ange bildtyper eller filnamn för att utesluta dem från lat laddning.

Observera att de flesta plugins och teman har lat laddning som ett inbyggt alternativ. Till exempel har tidningstema, Jetpack -plugin, WP Smush -plugin och SG Optimizer -plugin för SiteGround -användare alla lata laddningsalternativ. Vi rekommenderar att du bara använder lat laddning när du inte använder liknande alternativ på andra plugins eller tema på din webbplats. På samma sätt kan du bara aktivera Shortpixel när du inte har extern CDN för bildcachning. Använd också detta med försiktighet eftersom det har begränsningar i användningen.

Extra

Användning av tredjepartsresurser på webbplatsen påverkar sidhastigheten. På fliken "Extra" finns ytterligare alternativ för att optimera standardinnehåll från tredje part på din webbplats.

  • Google Fonts – om du använder Google Fonts på din webbplats har du alternativ att inaktivera eller kombinera.
  • Ta bort emojis – WordPress använder som standard Unicode emoji -skript för att lägga till emoji -symboler på din webbplats. Om du inte använder emojis rekommenderar vi att du aktiverar det här alternativet för att inaktivera emojis.
  • Ta bort frågesträngar från statiska resurser – CSS- och JS -filer använder versionskontroll och lägger till en parameter i URL: en med "ver". Om du har en statisk webbplats (detta är fallet för de flesta WordPress -webbplatser utom forum och anpassade webbplatser), behöver du inte använda versionering eftersom filerna också är statiska. När du sammanställer alla CSS- och JS -filer kommer plugin -filen automatiskt att fungera som den cachade filen som en statisk resurs. Men om du har uteslutit vissa filer eller inte aggregerat CSS eller JS, aktivera det här alternativet för att ta bort versionerna från webbadressen.

Hur konfigureras autoptimering korrekt på WordPress -webbplats?

Extra alternativ

  • Föranslut till tredjepartsdomäner- föranslutning gör det möjligt att ansluta till tredjepartsservern innan du faktiskt skickar HTTP-webbläsarbegäran. du kan lägga till domänerna som du vill förbinda i denna textruta.
  • Förladdning av specifika förfrågningarförladdning hjälper till att ladda de länkade webbadresserna, vilket i förväg ökar sidhastigheten. Ange eventuella tredjepartsdomäner som fonts.google.com för förinställning.
  • Asynkronisera JavaScript-filer- ange JS-filer från tredje part som du vill ladda asynkront med egenskapen "asynkronisering".
  • Optimera YouTube -videor – det här alternativet behöver ett extra plugin för att ladda YouTube -videor lat.

Står ofta inför problem med Autoptimize

När den är optimerad på rätt sätt kan Autoptimera -pluginet förbättra webbplatsens hastighet och poäng i Google PageSpeed ​​Insights -verktyget. Den har dock få problem när den används som en lösning för hastighetsoptimering.

1 Användning med andra plugins

Problemet med Autoptimize är att detta inte är en cachning utan innehåller hälften av optimeringsalternativen som erbjuds av ett fullvärdigt caching-plugin. Du måste välja plugins som WP Super Cache för att arbeta med Autoptimize för att undvika redundanta alternativ. Annars behöver du inte använda Autoptimize när du har plugins som W3 Total Cache eller WP Rocket.

2 Säljande integrationer

Med de få tillgängliga alternativen kan du se att plugin -programmet säljer integrationen med Shortpixel, WP YouTube Lyte och criticalcss.com. varje integration behöver ytterligare plugin eller konto som inte är nödvändigt när du väljer ett premiumcaching -plugin som WP Rocket med ett bra CDN. Dessutom finns det en separat "Optimera mer!" flik för att sälja partnerprodukterna.

3 Kritisk CSS

Kritisk CSS är CSS som krävs för att ladda ovanför innehållet på en sida. Problemet är att varje sidlayout som inlägg, sida, produkt, portfölj, etc. behöver separata kritiska CSS för att ladda ovanför vikningen korrekt. Detta är en komplicerad uppgift att generera kritisk CSS med hjälp av ett annat "Autoptimize criticalcss.com power-up" plugin och premium API-nyckel från crticialcss.com.

4 Brytande webbplatsens layout

I de flesta fall kommer pluginet att bryta din webbplats layout. Du måste manuellt kontrollera och analysera för att hitta skriptet eller alternativet som bryter din webbplats och utesluta dem från Autoptimize plugin.

5 Växande cachestorlek

Inlining av CSS och JS kommer att få cachestorleken att växa drastiskt. Vi har testat med det populära Newspaper -temat för att hitta cachestorleken 100% på en enda dag. Problemet är att pluginprogrammet erbjuder dessa alternativ utan automatisk cache -rensning. Det betyder att du måste logga in manuellt på instrumentpanelen och radera cachen varje gång storleken växer.

Hur konfigureras autoptimering korrekt på WordPress -webbplats?

Autoptimera cachen full

Slutsats

Enligt vår mening fungerar det här pluginet bra när du har ett enkelt tema och använder enkla caching -plugins som WP Super Cache. De flesta användare kommer dock att använda standard plugins som Jetpack eller W3 Total Cache på sin webbplats. I det här fallet kommer Autoptimering att vara ett redundant alternativ att du antingen inte gör hela pluginet eller inaktiverar vissa alternativ.

Inspelningskälla: www.webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer