De ideala autoptimeringsinställningarna + Cloudflare / StackPath CDN (2020)

Autoptimize är ett bra plugin, men för caching är WP Rocket vanligtvis nummer 1 i Facebook-omröstningar.


Så varför skulle du använda det??

Eftersom vissa värdar gillar Kör pappa och WP-motor svartlista de flesta cache-plugins (eftersom de har sitt eget inbyggda cachesystem) men de gör inte saker som optimera HTML, CSS, JavaScript, Google-teckensnitt eller CDN (innehållsleveransnätverk). Så medan värdens cachningssystem kanske fungerar bra för cachning hjälper Autoptimize att göra “resten” av sakerna (fixa objekt i GTmetrix + Pingdom). Undvik Google PageSpeed ​​Insights som det mäter inte ens belastningstider.

Till och med Autoptimize-utvecklaren säger på sin plugin-sida att den fungerar bäst när den kombineras med en cache-plugin. Jag rekommenderar Swift om du går gratisvägen, och WP-raket om du kan göra $ 49 / år eftersom det är lättare att konfigurera (det är också det jag använder och jag har 100% poäng i GTmetrix) eftersom det kommer med många funktioner som de flesta cache-plugins inte gör (databasrensning, värd för Google Analyitcs-kod lokalt, hjärtslag kontroll och integration med både Cloudflare + andra CDN: er). Jag har tutorials för WP Rocket, Snabb, WP: s snabbaste cache, W3TC och till och med WP Super Cache.

Så låt oss konfigurera inställningarna Autoptimera. Jag ska också visa dig hur du lägger till ett CDN (helst båda CloudFlare och StackPath) eftersom var och en har sin egen uppsättning datacentra och fler datacenter = snabbare innehållsleverans. CDN: er rekommenderas i WordPress ‘optimeringsguide.

Autoptimera plugin

1. JS, CSS, & html

Aktivera alla dessa för att optimera JavaScript-, CSS- och HTML-filer och se instruktionerna nedan.

Automatisera JS CSS HTML-inställningar

Optimera JavaScript-koden

  • Samla JS-filer: aktivera, detta kombinerar JavaScript-filer som rekommenderas av GTmetrix. Om de är inaktiverade kommer enskilda filer att laddas och de kommer inte att kombineras.
  • Även aggregerad inline JS: aktivera, detta kombinerar JavaScript-filer som finns i HTML-filer. Autoptimize ger en varning som i princip innebär att om det bryter något på din webbplats, antingen utesluter JavaScript-filerna eller inaktivera detta.
  • Tvinga JavaScript in : inaktivera, om du inte har JavaScript-fel. Det är bättre för dig att försöka hitta problematiska filer och utesluta dem än att välja det här alternativet eftersom det gör att JavaScript-renderingen blockeras (inte optimal för hastighet).
  • Uteslut skript från Autoptimera: Om du ser fel efter aktivering av vissa JavaScript-inställningar, hitta det problematiska JavaScript och uteslut filer här.
  • Lägg till try-catch-inslagning: inaktivera, om du inte har JavaScript-fel. Detta är ett annat sätt att fixa JS-fel utan att behöva aktivera att tvinga JavaScript i huvudet.

Optimera CSS-koden

  • Samla CSS-filer: aktivera, samma sak som att samla JS-filer bara för CSS.
  • Även aggregerad inline CSS: aktivera, samma sak som att samla inbyggda JS-filer endast för CSS. Aktivera båda för att ytterligare förbättra belastningstiderna + GTmetrix-poäng.
  • Generera data: URI för bilder: inaktivera om du använder ett CDN. MaxCDN (StackPath) varnar dig att aktivering av detta kommer att tvinga bilder att serveras från ditt ursprung serverar istället för ditt CDN. Att aktivera detta kan initialt resultera i färre HTTP-förfrågningar, men troligen inte efter att du har installerat ett CDN och visat bilder genom det.
  • Inline and Defer CSS: aktivera, du kan bara aktivera det här alternativet eller “inline all CSS” som Autoptimera inte rekommenderar i deras vanliga frågor. De säger att “även om inline all CSS kommer att göra att CSS blockeras inte, kommer det att resultera i att din bas-HTML-sida blir betydligt större och därmed kräver mer” rundturer “.
  • Inline all CSS: inaktivera, Autoptimize rekommenderar inte att du aktiverar detta.
  • Uteslut CSS från Autoptimize: Om du ser fel efter aktivering av vissa CSS-inställningar, hitta de problematiska CSS-filerna och uteslut dem här. Obs: alternativet ”minifiera uteslutet CSS och JS” i Övriga alternativ måste inaktiveras.

2. CDN-alternativ

Det är här din CDN URL går (instruktioner nedan). Cloudflare förser dig inte med en CDN-URL (du ändrar namnservrar istället). CDN Base URL är specifikt för StackPath, KeyCDN och andra CDN: er – inte Cloudflare. Jag föreslår att du använder både StackPath + Cloudflare eftersom dina CDN: er kommer att ha fler datacenter och fler datacenter = snabbare webbplats.

Steg 1: Registrera dig för ett CDN. Jag använder StackPath som har 34+ datacenter som är starkt belägna i USA och är där de flesta mina besökare är. Det är $ 10 / månad med en kostnadsfri 30-dagars provperiod.

StackPath-data-Centers

Steg 2: Klicka på CDN-fliken i StackPath-instrumentpanelen och skapa en StackPath CDN-webbplats.

StackPath-CDN-Tab

StackPath-CDN-Domain

StackPath-server-IP-adress

* Kopiera din server-IP-adress som den behövs i steg 5 i det här avsnittet.

StackPath-CDN-URL-Autoptimize

Steg 3: Klistra in din CDN-URL i Autoptimera med http: // eller https: // (vilken du än använder).

Automatisera CDN-URL

Steg 4: Gå till CDN → Cache-inställningar i StackPath och klicka sedan på “Rensa allt.”

StackPath-Purge-Cache

Steg 5: Vitlista din server-IP-adress i StackPath (WAF → brandvägg).

StackPath-vitlista-IP

Steg 6: Kör din webbplats i GTmetrix och “innehållsleveransnätverk” ska vara grönt i YSlow.

CDN GTmetrix YSlow

3. Övriga inställningar

Här är de olika inställningarna:

Automatisera olika inställningar

Spara aggregerat skript / css som statiska filer – om det är aktiverat betyder det att CSS- och JS-filerna sparas i cachen och serveras via din server, så om din värd inte hanterar dessa, aktivera den.

Minifiera exkluderade CSS- och JS-filer – om du utesluter vissa CSS- och JavaScript-filer beror det på att det finns problem när du försöker optimera dem, och du vill inte att de ska förminskas.

Optimera också för inloggade redaktörer / administratörer – inaktivera, du vill vanligtvis inaktivera prestandafunktioner i WordPress-administratören, inklusive Cloudflare-prestandafunktioner.

4. Bilderinställningar

Autoptimering kan också hjälpa till att få bilder att ladda snabbare.

Automatisera bildinställningarna

Optimera bilder – URL: er på din webbplats kommer att ändras för att peka på ShortPixels CDN. Detta bör inte påverka hur de ser ut så länge det är en förlustfri komprimering, men de kommer att ladda snabbare.

Bildoptimeringskvalitet – hitta din egen unika balans mellan komprimering och kvalitet (jag använder glansigt). Här är skillnaderna i varje komprimeringsnivå från ShortPixel:

ShortPixel-bildkomprimeringsnivåer

  • förstörande: mest komprimering, mest kvalitetsförlust.
  • Glansig: medelkomprimering, liten kvalitetsförlust.
  • Förlust mindre: låg komprimering, lägsta kvalitetsförlust.

Ladda WebP i webbläsare som stöds – aktiverat om du använder WebP-bilder och lata laddningsbilder.

Lazy-load bilder – Jag personligen inte lata ladda mina bilder för att ständigt ladda bilder när du bläddrar ner på sidan kan vara irriterande för användare. Ja, det resulterar i färre förfrågningar och är det rekommenderas av Google för snabbare belastningstider, men jag tycker det är irriterande. Detta är helt upp till dig.

5. Kritisk CSS

Detta hänvisar till Autoptimera criticalcss.com power-up plugin.

Det kräver en premie betalad plan från criticalcss.com ($ 7 / månad).

Plugin skapar kritiska CSS-regler för att se till att sidor återges innan hela CSS laddas, vilket förbättrar “börja att återge tid.” Allt du behöver göra är att installera plugin, registrera dig för en plan, ange din kritiska CSS API-nyckel i avsnittet “Kritisk CSS” i Autoptimize, och plugin gör resten. Kontrollera insticksprogrammet FAQ-sida för detaljer om anpassade konfigurationer.

Jag personligen använder det inte och vill hellre använda de extra $ 7 / månaden på en kraftfullare server.

Autoptimera criticalcss com power-up

Autoptimera kritiska CSS-inställningar

6. Extra inställningar

Autoptimize-Extra-inställningar

Google-teckensnitt – aktivera om du använder Google-teckensnitt som bromsar belastningstiderna när de dras från externa resurser (Google Font-biblioteket). Jag föredrar alternativet “kombinera och länka i huvudet” eftersom detta förbättrar belastningstiderna utan att synligheten ser teckensnitt laddas (vilket är vad som vanligtvis händer när du laddar asynkront. Testa också det senaste Google Font-alternativet “kombinera och ladda typsnitt asynkront med webfont.js”Och se vilka som ger bättre resultat i GTmetrix.

Ta bort Emojis – aktivera (emojis är dåliga för belastningstider).

Ta bort frågesträngar från statiska resurser – Frågesträngar genereras vanligtvis av plugins och kan inte fixas (i GTmetrix / Pingdom) helt enkelt för att aktivera detta, men du kan prova. Den bättre lösningen är att kontrollera din webbplats för plugins med hög CPU och ersätta dem med lätta plugins. De flesta höga CPU-plugins inkluderar social delning, galleri, sidbyggare, relaterade inlägg, statistik och livechat-plugins. Du bör också ta bort alla onödiga plugins och rengöra databasen (med ett plugin som WP-Optimera) för att rensa tabeller kvar av avinstallerade plugins.

Föransluta till tredje parts domäner – hjälper webbläsare att förutse förfrågningar från externa resurser (Google-teckensnitt, Analytics, kartor, taghanterare, Amazon-butik, etc.). Dessa kommer vanligtvis att visas som ”minska DNS-sökningar” i din GTmetrix-rapport, men nedan är vanliga exempel.

  • https://fonts.googleapis.com
  • https://fonts.gstatic.com
  • https://www.google-analytics.com
  • https://ajax.googleapis.com
  • https://connect.facebook.net
  • https://www.googletagmanager.com
  • https://maps.google.com

Förbelastning specifika förfrågningar – Du kan hitta mer om förbelastning och tips på webbläsaresursen från WP Rocket, men det gör det i princip så att vissa filer laddas ner med hög prioritet.

Async Javascript-Files – detta innebär att något förhindrar innehåll ovanför mitten från att laddas snabbt. Denna handledning om gör blockerande JavaScripts förklarar det väl, men om du ser JavaScript-fel i GTmetrix och Pingdom, Async JavaScipt-plugin kan göra tricket.

Optimera YouTube-videor – om din webbplats har videor, WP YouTube Lyte lata laddar dem så att de bara laddas när användare bläddrar ner och klickar på uppspelningsknappen, vilket eliminerar de första begäran till YouTubes servrar. Detta kan raka flera sekunder av och laddar gånger på innehåll med videor, eftersom de är ett av de tyngsta elementen på en sida. WP Rocket och Swift Performance har detta inbyggda i sina inställningar, så du behöver inte detta om du använder en av dem som din cache-plugin.

7. Optimera mer

Om du vill optimera din webbplats ytterligare är de verktyg som rekommenderas:

WP-raket – rankade cache-plugin nr 1 i flera Facebook-enkäter och har många alternativ som inte ingår i Autoptimize (databasrensning, hjärtslagskontroll, värd för Google Analytics lokalt, ersättande av YouTube iframe med en förhandsgranskningsbild, lägg till webbläsarcache till Facebook Pixel, etc.). WP Rocket hanterar också nästan allt som Autoptimize gör, så du behöver bara 1 plugin för alla dessa hastighetsoptimeringar. Det är därför det är så bra. Du kan också få 10% rabatt här.

ShortPixel – populärt plugin för bildoptimering och den jag använder.

StackPath – CDN med 30+ datacenter. Mycket lätt att installera; bara registrera dig för en plan ($ 10 / månad) och sedan kopiera / klistra in din CDN-URL i alternativet Autoptimera CDN URL.

Siteground – rankade vanligtvis värd nr 1 i Facebook-omröstningar och också används av Yoast.

Yoast-on-Twitter-We-bara kopplade till Siteground

2019 värdeförfrågan

2017-Wordpress-värd-FB-Poll

Rekommendationer för Elementor Hosting

Juli 2019 värdrekommendation

Wordpress-Host-Poll-Aug-2018

Delad hosting-Poll-2017

2019-värd-Poll

Go-To-Hosting-Company

Wordpress-värd-Poll-2017

Managed-Hosting-Poll

WooCommerce-Hosting-FB-Poll

2016-Web-Hosting-Poll

Bäst-Wordpress-värd-Provider-Poll

Bäst Webbhotell-2019-Poll

WP Friendly Hosting Poll

2016-Wordpress-värd-FB-Poll

Favorithotell för Elementor

Rekommendationer för värd för 2018

Managed-Wordpress-värd-Poll-2017

2019-Hosts-Poll-1

Värd-Poll-For-hastighet

Wordpress-värd-Poll-juni-1

Siteground-rekommendation

2014 förvaltade-Wordpress-värd-FB-Poll

Bäst Webbhotell-Provider-Poll

Värd-Poll-Feb-2019

Hosting-Rekommendationer-Poll

Bluehost vs SiteGround

Utvärdering av WordPress webbhotell

Människor migrerar vanligtvis eftersom deras hastighetsteknologi är mycket snabbare än EIG eller GoDaddy:

Byt till SiteGround

SiteGround Load Time Migration

Bluehost till SiteGround GTmetrix

HostGator till SiteGround

SiteGround Google PageSpeed ​​Insights

100 perfekt poäng på SiteGround

SiteGround Genesis

Hastighet levererad av SiteGround

Minskade belastningstider med SiteGround

Nya svarstider för SiteGround

HostGator till SiteGround-migrering

SiteGround-svarstider på Joomla

Bytta till SiteGround Hosting

SiteGround Rocket Imagify Combo

SiteGround PageSpeed ​​Insights

SiteGround On Joomla

Minskade belastningstider för SiteGround

SiteGround Speedy Hosting

Ny SiteGround-responstid

SiteGround-svarstidsförbättring

SiteGround gör det också gratis migrationer med GrowBig+.

Cloudways – snabbare än SiteGround (det är molnvärd, inte delat) och rankades också högt i Facebook-omröstningar. Börjar på $ 10 / månad med deras DigitalOcean-plan. De erbjuder 1 gratis migrering (som jag tog upp dem på) och här är vad som hände med min server svarstid:

Siteground-vs-Cloudways-Cloud-Hosting

Hosting rekommendationer Facebook

VPS Cloud Hosting WooCommerce Poll

VPS Cloud Hosting Poll

WordPress Hosting-förslag

Cloudways svarstider

WP-motor till Cloudways

Ofrälse

Cloudways Pingdom Load Times

Cloudways-Facebook-Review

Du kan få 25% rabatt på dina första 2 månader av Cloudways med kampanjkod OMM25.

Kinsta – $ 30 / månad premiumhotell och medan jag inte har provat dem har jag hört något annat än bra saker om Kinstas hastighet, support, uppetider och nästan allt om deras värd.

Perfmatters – plugin av Kinsta som tar hand om vad jag gillar att kalla “diverse optimeringar” som att selektivt inaktivera plugins, begränsa inläggsrevisioner, inaktivera autosave, värda Google Analytics lokalt och mycket mer. Det tar hand om de sista 10% av hastigheten.

Vissa av dessa rekommenderas av Autoptimize, andra är inte:

Autoptimera Lägg till Ons

8. Cloudflare

Autoptimera har inga inställningar att lägga till Cloudflare-CDN, men det är enkelt att installera. Och du borde definitivt för att detta lägger till 200 fler centra till ditt innehållsleveransnätverk (CDN).

Cloudflare-datacenter

Steg 1. Registrera dig för Cloudflare så blir du ombedd att lägga till din webbplats och starta en skanning.

CloudFlare-börja-scan

Steg 2. När skanningen är klar väljer du gratisplanet och Cloudflare tar dig igenom en uppsättning sidor. Du kommer så småningom att föras till en sida där Cloudflare tilldelar dig 2 namnservrar.

CloudFlare-name-servrar-Dashboard

Steg 3. Logga in på din domänregistrator (t.ex. Namecheap) och gör en Google-sökning efter “hur man ändrar namnservrar på Namecheap” (sök bara efter din domänregistrar) och följ sedan instruktionerna. Du kopierar de två namnservrarna som tillhandahålls av Cloudflare och klistrar in dem i ett anpassat namnserversalternativ i din domänregistrator. Låt 72 timmar förökas.

Godaddy Cloudflare namnservrar

Det är allt!

Vad kommer härnäst?

Se min video – Det är en 42 minuters video, men jag täcker stort sett allt (tidsstämplar i videobeskrivning) och du bör lära dig massor av bra information om WordPress-webbplatsens hastighet:

Vill du veta hur jag fick 100% poäng i GTmetrix?
Se min fulla WordPress-hastighetsoptimeringsguide som har över 38 tips för att fixa GTmetrix / Pingdom-objekt inklusive uppgradering till PHP 7, servera skalade bilder, specificera bilddimensioner, databasrensning, värd för Google Analytics lokalt, WP Disable och andra.

Vanliga frågor

&# X1f680; Behöver jag andra speed plugins förutom Autoptimize?

Ja, du brukar också använda ett plugin för cache, bildoptimering, databasrensning, hjärtslagskontroll och selektiv inaktivering av plugins. Jag rekommenderar WP Rocket, ShortPixel och Perfmatters för dem.

&# X1f680; Hur konfigurerar du ett CDN med Autoptimize?

Välj ditt CDN (jag använder StackPath), kopiera din CDN URL och klistra in den i Autoptimize’s CDN UR-fält.

&# X1f680; Hur optimerar du Google-teckensnitt med Autoptimera?

Jag rekommenderar att du använder alternativet Kombinera och koppla in huvud och att förkoppla dina teckensnitt med Autoptimera.

&# X1f680; Tar autoptimering hand om cache?

Nej, du måste använda en separat plugin för cache. Jag rekommenderar WP Rocket eller SG Optimizer om du använder SiteGround.

&# X1f680; Hur konfigurerar du inställningarna Autoptimera?

Allt är listat i den här självstudien – bara hålla ett öga på din GTmetrix-rapport och vilka specifika objekt som måste fixas. Om konfigurering av inställningarna i Autoptimize inte fixar det, överväg att använda ett annat plugin för att fixa objekt.

Frågor? Hör av dig!
Tom

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map