De ideelle autoptimeringsindstillinger + Cloudflare / StackPath CDN (2020)

Autoptimize er et fantastisk plugin, men til cache er WP Rocket normalt nr. 1 i Facebook-afstemninger.


Så hvorfor ville du bruge det?

Fordi nogle værter kan lide Kom så far og WP-motor sortliste de fleste cache-plugins (da de har deres eget indbyggede cache-system), men de gør ikke ting som at optimere HTML, CSS, JavaScript, Google Fonts eller CDN (indholdsleveringsnetværk). Så selvom din værts cachesystem muligvis fungerer godt til cache, hjælper Autoptimering med at gøre “resten” af de ting (fixing af ting i GTmetrix + Pingdom). Undgå Google PageSpeed ​​Insights som det måler ikke engang belastningstider.

Selv Autoptimize-udvikleren siger på sin pluginside, at det fungerer bedst, når det kombineres med et cache-plugin. Jeg anbefaler Swift, hvis du går den gratis rute, og WP-raket hvis du kan gøre $ 49 / år, da det er lettere at konfigurere (det er også det, jeg bruger, og jeg har 100% scores i GTmetrix), da det kommer med mange funktioner, som de fleste cache-plugins ikke gør (databaseoprydning, hosting af Google Analyitcs-kode lokalt, hjerteslag kontrol og integration med begge Cloudflare + andre CDN’er). Jeg har selvstudier til WP Rocket, Swift, WP hurtigste cache, W3TC og endda WP super cache.

Så lad os konfigurere indstillingerne for autoptimering. Jeg viser dig også, hvordan du tilføjer et CDN (ideelt begge dele) CloudFlare og StackPath) da hver har deres eget sæt af datacentre, og flere datacentre = hurtigere levering af indhold. CDN’er anbefales i WordPress ‘optimeringsvejledning.

Autotimér plugin

1. JS, CSS, & HTML

Aktivér alle disse for at optimere JavaScript-, CSS- og HTML-filer, og se derefter instruktionerne nedenfor.

Optimer JS CSS HTML-indstillinger automatisk

Optimer JavaScript-kode

  • Samlede JS-filer: Aktivér, dette kombinerer JavaScript-filer som anbefalet af GTmetrix. Hvis det er deaktiveret, indlæses individuelle filer, og de kombineres ikke.
  • Også samlet inline JS: Aktivér, dette kombinerer JavaScript-filer, der er placeret i HTML-filer. Autoptimering giver en advarsel, som dybest set betyder, at hvis det bryder noget på dit websted, skal du enten udelukke JavaScript-filer eller deaktivere dette.
  • Tving JavaScript ind : deaktiver, medmindre du har JavaScript-fejl. Du har det bedre med at prøve at finde problematiske filer og ekskludere dem end at vælge denne indstilling, da dette gør JavaScript-blokerende (ikke optimalt for hastighed).
  • Ekskluder scripts fra Autoptimering: Hvis du ser fejl efter aktivering af visse JavaScript-indstillinger, skal du finde det problematiske JavaScript og ekskludere filer her.
  • Tilføj try-fang indpakning: deaktiver, medmindre du har JavaScript-fejl. Dette er en anden måde at løse JS-fejl uden at skulle aktivere at tvinge JavaScript i hovedet.

Optimer CSS-kode

  • Samlede CSS-filer: aktivere det samme som at aggregere JS-filer kun til CSS.
  • Også samlet inline CSS: aktivere det samme som at sammenlægge inline JS-filer kun til CSS. Aktivér begge for yderligere at forbedre belastningstider + GTmetrix-scoringer.
  • Generer data: URI’er til billeder: deaktiver hvis du bruger et CDN. MaxCDN (StackPath) advarer dig at aktivering af dette tvinger billeder, der skal serveres fra din oprindelse, tjener i stedet for dit CDN. Aktivering af dette resulterer muligvis oprindeligt i færre HTTP-anmodninger, men sandsynligvis ikke efter, at du har opsat et CDN og serveret billeder gennem det.
  • Inline og udsæt CSS: aktivere, du kan kun aktivere denne indstilling eller “inline all CSS”, som Autoptimering ikke anbefaler i deres ofte stillede spørgsmål. De siger, at selv om indlister alle CSS vil gøre CSS ikke-renderende blokerende, vil det resultere i, at din bas-HTML-side bliver væsentligt større, hvilket kræver flere “rundrejser”.
  • Inline al CSS: deaktiver, Autoptimering anbefaler ikke at aktivere dette.
  • Ekskluder CSS fra Autoptimering: Hvis du ser fejl efter aktivering af visse CSS-indstillinger, skal du finde de problematiske CSS-filer og ekskludere dem her. Bemærk: indstillingen “minify ekskluderet CSS og JS” i Diverse indstillinger skal deaktiveres.

2. CDN-indstillinger

Det er her din CDN URL går (instruktioner nedenfor). Cloudflare giver dig ikke en CDN URL (du ændrer navneservere i stedet). CDN Base URL er specifikt til StackPath, KeyCDN og andre CDN’er – ikke Cloudflare. Jeg foreslår at du bruger både StackPath + Cloudflare, da dine CDN’er vil have flere datacentre, og flere datacentre = hurtigere websted.

Trin 1: Tilmeld dig et CDN. Jeg bruger StackPath, der har 34+ datacentre, som er stærkt placeret i USA og hvor de fleste af mine besøgende er. Det er $ 10 / måned med en gratis 30-dages prøveperiode.

StackPath-Data-centre

Trin 2: Klik på fanen CDN i StackPath-betjeningspanelet og oprette et StackPath CDN-sted.

StackPath-CDN-Tab

StackPath-CDN-Domain

StackPath-server-IP-adresse

* Kopier din server IP-adresse, som den er nødvendig i trin 5 i dette afsnit.

StackPath-CDN URL-Autoptimize

Trin 3: Indsæt din CDN URL i Autoptimering med http: // eller https: // (alt efter hvad du bruger).

Optimaliser CDN URL

Trin 4: Gå til CDN → Cache-indstillinger i StackPath, og klik derefter på “Rens alt.”

StackPath-Purge-Cache

Trin 5: Hvidliste din server IP-adresse i StackPath (WAF → Firewall).

StackPath-whitelist-IP

Trin 6: Kør dit websted i GTmetrix, og “indholdsleveringsnetværk” skal være grønt i YSlow.

CDN GTmetrix YSlow

3. Diverse indstillinger

Her er de forskellige indstillinger:

Optimaliser forskellige indstillinger

Gem aggregeret script / css som statiske filer – hvis det er aktiveret, betyder det, at CSS- og JS-filer gemmes i cachen og serveres via din server, så hvis din hosting ikke håndterer disse, skal du aktivere den.

Komprimer ekskluderede CSS- og JS-filer – Hvis du ekskluderer visse CSS- og JavaScript-filer, skyldes det, at der er et problem, når du prøver at optimere dem, og du vil ikke have dem minimeret.

Optimer også for loggede redaktører / administratorer – deaktiver, du vil normalt deaktivere ydelsesfunktioner i WordPress-admin, herunder Cloudflare-ydelsesfunktioner.

4. Indstillinger for billeder

Autoptimering kan også hjælpe med at få billeder til at indlæses hurtigere.

Autotimér billederindstillinger

Optimer billeder – Webadresser på dit websted ændres til at pege på ShortPixels CDN. Dette bør ikke påvirke, hvordan de ser ud, så længe det er tabsfri komprimering, men de vil indlæses hurtigere.

Billedoptimeringskvalitet – find din egen unikke balance mellem komprimering og kvalitet (jeg bruger glanset). Her er forskellene i hvert komprimeringsniveau fra ShortPixel:

ShortPixel-billedkomprimeringsniveauer

  • lossy: mest komprimering, mest kvalitetstab.
  • Blank: medium komprimering, lidt kvalitetstab.
  • Lossless: lav komprimering, laveste kvalitetstab.

Indlæs WebP i understøttede browsere – aktiveret, hvis du bruger WebP-billeder og doven indlæse billeder.

Lazy-load billeder – Jeg personlig laver ikke doven indlæsning af mine billeder, fordi det konstant kan være irriterende for indlæsning af billeder, når du ruller ned ad siden. Ja, det resulterer i færre anmodninger og er anbefalet af Google for hurtigere belastningstider, men jeg synes det er irriterende. Dette er helt op til dig.

5. Kritisk CSS

Dette henviser til Autoptimér criticalcss.com power-up plugin.

Det kræver en præmie betalt plan fra criticalcss.com ($ 7 / måned).

Plugin opretter kritiske CSS-regler for at sikre, at sider gengives, før den fulde CSS indlæses, hvilket forbedrer “start til at gengive tid.” Alt hvad du skal gøre er at installere plugin, tilmelde dig en plan, indtaste din Critical CSS API-nøgle i afsnittet “Critical CSS” i Autoptimize, og plugin gør resten. Kontroller plugin’et FAQ side for detaljer om tilpassede konfigurationer.

Jeg bruger personligt ikke det og vil hellere bruge den ekstra $ 7 / måned på en mere kraftfuld server.

Automatisk optimering af criticalcss com

Optimer kritiske CSS-indstillinger automatisk

6. Ekstra indstillinger

Autoptimize-Extra-indstillinger

Google-skrifttyper – aktiver, hvis du bruger Google-skrifttyper som bremser belastningstider, når de trækkes fra eksterne ressourcer (Google Font-biblioteket). Jeg foretrækker indstillingen “kombinere og link i hovedet”, da dette forbedrer belastningstider uden at synligheden ser skrifttyper indlæse (hvilket er, hvad der normalt sker, når du indlæser asynkront. Test også den sidste Google Font-indstilling “kombinere og indlæse skrifttyper asynkront med webfont.js”Og se hvilke der giver bedre resultater i GTmetrix.

Fjern Emojis – aktiver (emojier er dårlige for belastningstider).

Fjern forespørgselsstrenge fra statiske ressourcer – forespørgselsstrenge genereres normalt af plugins og kan ikke rettes (i GTmetrix / Pingdom) blot aktiveres dette, men du kan prøve. Den bedre løsning er at tjekke dit websted for plugins med høj CPU og erstatte dem med lette plugins. De fleste høje CPU-plugins inkluderer social deling, galleri, sidebygere, relateret post, statistik og live chat plugins. Du skal også slette alle unødvendige plugins og rense databasen (ved hjælp af et plugin som WP-Optimize) for at rydde tabeller efterladt af afinstallerede plugins.

Forbindelse til tredjepartsdomæner – hjælper browsere med at forudse anmodninger fra eksterne ressourcer (Google Skrifttyper, Analytics, Maps, Tag Manager, Amazon butik osv.). Disse vises normalt som “reducer DNS-opslag” i din GTmetrix-rapport, men nedenfor er almindelige eksempler.

  • 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

Forudindlæs specifikke anmodninger – Du kan finde mere om forudindlæsning og tip om browserressourcer fra WP Rocket, men det gør det dybest set, at visse filer downloades som en høj prioritet.

Async Javascript-filer – dette betyder, at noget forhindrer indhold over skillelinjen fra at indlæses hurtigt. Denne tutorial om gengive blokerende JavaScripts forklarer det godt, men hvis du ser JavaScript-fejl i GTmetrix og Pingdom, vil Async JavaScipt-plugin måske gøre tricket.

Optimer YouTube-videoer – hvis dit websted har videoer, WP YouTube Lyte doven indlæser dem, så de kun indlæses, når brugerne ruller ned og klikker på afspilningsknappen, hvilket fjerner de første anmodninger til YouTubes servere. Dette kan barbere flere sekunder fra, indlæsningstider på indhold med videoer, da de er et af de tyngste elementer på en side. WP Rocket og Swift Performance har denne indbyggede indstilling til deres indstillinger, så du behøver ikke dette, hvis du bruger en af ​​dem som dit cache-plugin.

7. Optimer mere

Hvis du vil optimere dit websted yderligere, er de værktøjer, der anbefales:

WP-raket – bedømte cache-plugin nr. 1 i flere Facebook-afstemninger og har mange muligheder, der ikke er inkluderet i Autoptimize (databaseoprydning, hjerteslagskontrol, hosting af Google Analytics lokalt, erstatning af YouTube iframe med et eksempelbillede, tilføjelse af browsercache til Facebook Pixel osv.). WP Rocket håndterer også næsten alt, hvad Autoptimize gør, så du behøver kun 1 plugin til alle disse hastighedsoptimeringer. Derfor er det så fantastisk. Du kan også få 10% rabat her.

ShortPixel – populært plugin til billedoptimering og det, jeg bruger.

StackPath – CDN med 30+ datacentre. Meget let at konfigurere; bare tilmeld dig en plan ($ 10 / måned) og kopier / indsæt derefter din CDN URL i indstillingen Autotimize CDN URL.

SiteGround – vurderede normalt vært nr. 1 i Facebook-afstemninger og også brugt af Yoast.

Yoast-på-Twitter-Vi-bare-switched-til-Siteground

2019 Hosting Poll

2017-WordPress-hosting-FB-Poll

Anbefalinger for Elementor Hosting

Juli 2019 Hosting-anbefaling

WordPress-Host-Poll Aug 2018

Shared-Hosting-Poll-2017

2019-hosting-Poll

Go-To-Hosting-selskab

WordPress-hosting-Poll-2017

Managed-Hosting-Poll

WooCommerce-Hosting-FB-Poll

2016-Web-hosting-Poll

Bedste-WordPress-hosting-udbyder-Poll

Bedste-Web-hosting-2019-Poll

WP Friendly Hosting Poll

2016-WordPress-hosting-FB-Poll

Foretrukne hosting til Elementor

Anbefalinger for 2018-vært

Managed-WordPress-hosting-Poll-2017

2019-værter-Poll-1

Hosting-Poll-For-Speed

WordPress-hosting-Poll-Juni-1

SiteGround-anbefaling

2014-Managed-WordPress-hosting-FB-Poll

Bedste-Web-hosting-udbyder-Poll

Hosting-Poll Feb 2019

Hosting-Anbefalinger-Poll

Bluehost vs SiteGround

Afstemning af WordPress-webhost

Folk migrerer normalt, fordi deres hastighedsteknologi er meget hurtigere end EIG eller GoDaddy:

Skift til SiteGround

SiteGround Load Time Migration

Bluehost til SiteGround GTmetrix

HostGator til SiteGround

SiteGround Google PageSpeed ​​Insights

100 perfekt score på SiteGround

SiteGround-genesis

Hastighed leveret af SiteGround

Reducerede belastningstider med SiteGround

Nye svartider på SiteGround

HostGator til SiteGround-migrering

SiteGround-svarstider på Joomla

Skiftet til SiteGround Hosting

SiteGround-raket Forestil dig combo

SiteGround PageSpeed ​​Insights

SiteGround On Joomla

SiteGround reducerede belastningstider

SiteGround Speedy Hosting

Ny SiteGround-responstid

SiteGround responstid forbedring

SiteGround gør det også gratis migrationer med GrowBig+.

Cloudways – hurtigere end SiteGround (det er cloud-hosting, ikke delt) og blev også bedømt højt i Facebook-afstemninger. Begynder $ 10 / måned med deres DigitalOcean-plan. De tilbyder 1 gratis migrering (som jeg tog dem op på), og her er hvad der skete med min server responstid:

SiteGround-vs-Cloudways-Cloud-hosting

Hostinganbefalinger Facebook

VPS Cloud Hosting WooCommerce Poll

VPS Cloud Hosting Poll

WordPress Hosting-forslag

Cloudways responstid

WP-motor til Cloudways

Untitled

Cloudways Pingdom Load Times

Cloudways-Facebook-anmeldelse

Du kan få 25% rabat på dine første 2 måneder af Cloudways med promo-kode OMM25.

Kinsta – $ 30 / måned premium hosting, og selvom jeg ikke har prøvet dem, har jeg ikke hørt andet end gode ting om Kinsta’s hastighed, support, oppetider og næsten alt om deres hosting.

Perfmatters – plugin af Kinsta, der tager sig af det, jeg gerne kalder “diverse optimeringer”, som selektiv at deaktivere plugins, begrænse post-revisioner, deaktivere autosave, være vært for Google Analytics lokalt og meget mere. Det tager sig af de sidste 10% af hastigheden.

Nogle af disse anbefales af Autoptimize, andre er ikke:

Autotimér Tilføj ons

8. Cloudflare

Autoptimering har ikke indstillinger, der skal tilføjes Cloudflare ‘CDN, men dette er let at konfigurere. Og det skal du bestemt, fordi dette tilføjer 200 flere centre til dit indholdsleveringsnetværk (CDN).

Cloudflare-datacentre

Trin 1. Tilmeld dig Cloudflare, og du bliver bedt om at tilføje dit websted og begynde en scanning.

CloudFlare-begynder-scanning

Trin 2. Når scanningen er udført, skal du vælge den gratis plan, og Cloudflare fører dig gennem et sæt sider. Du vil til sidst blive ført til en side, hvor Cloudflare tildeler dig 2 navneservere.

CloudFlare-name-servere-Dashboard

Trin 3. Log ind på din domæneregistrator (f.eks. Namecheap) og foretag en Google-søgning efter “hvordan du ændrer navneservere på Namecheap” (søg kun efter dit domæneregister), og følg derefter deres instruktioner. Du kopierer de 2 navneservere, der leveres af Cloudflare, og indsætter dem i en brugerdefineret navneserver-indstilling i din domæneregistrator. Tillad 72 timer til udbredelse.

Godaddy Cloudflare navneservere

Det er det!

Hvad er det næste?

Se min video – det er en 42 minutters video, men jeg dækker stort set alt (tidsstempler i videobeskrivelsen), og du bør lære masser af god information om WordPress-webstedshastighed:

Vil du vide, hvordan jeg fik 100% scoringer i GTmetrix?
Se min fulde WordPress-hastighedsoptimeringsvejledning, der har over 38 tip til fastsættelse af GTmetrix / Pingdom-elementer, herunder opgradering til PHP 7, server skaleret billeder, specificering af billeddimensioner, databaseoprydning, hosting af Google Analytics lokalt, WP Disable og andre.

Ofte stillede spørgsmål

&# X1f680; Har jeg brug for andre speed plugins udover Autoptimize?

Ja, du vil normalt også bruge et plugin til cache, billedeoptimering, databaseoprydning, hjerteslagskontrol og selektiv deaktivering af plugins. Jeg anbefaler WP Rocket, ShortPixel og Perfmatters til dem.

&# X1f680; Hvordan konfigurerer du et CDN med Autoptimize?

Vælg dit CDN (jeg bruger StackPath), kopier din CDN URL, og indsæt den i Autoptimize’s CDN UR felt.

&# X1f680; Hvordan optimerer du Google-skrifttyper med Autoptimering?

Jeg anbefaler at bruge indstillingen Kombiner og link i hovedet og for at forbinde dine skrifttyper ved hjælp af Autoptimering.

&# X1f680; Tager autoptimering sig af cache?

Nej, du bliver nødt til at bruge et separat plugin til cache. Jeg anbefaler WP Rocket eller SG Optimizer, hvis du bruger SiteGround.

&# X1f680; Hvordan konfigureres indstillingerne for Autoptimering?

Alt er anført i denne tutorial – bare hold øje med din GTmetrix-rapport, og hvilke specifikke elementer der skal rettes. Hvis konfiguration af indstillingerne i Autoptimering ikke løser det, skal du overveje at bruge et andet plugin til at rette emner.

Spørgsmål? Kast mig en linje!
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