De ideelle innstillingene for autoptimering + Cloudflare / StackPath CDN (2020)

Autoptimize er en flott plugin, men for cache er WP Rocket vanligvis nr. 1 i Facebook-avstemninger.


Så hvorfor vil du bruke den?

Fordi noen verter liker Gå pappa og WP-motor svarteliste de fleste hurtigbuffer-plugins (siden de har sitt eget innebygde cache-system), men de gjør ikke ting som å optimalisere HTML, CSS, JavaScript, Google Fonts eller CDN (innholdsleveringsnettverk). Så mens hostens cache-system kan fungere bra for hurtigbufring, hjelper Autoptimize med å gjøre “resten” av tingene (å fikse elementer i GTmetrix + Pingdom). Unngå Google PageSpeed ​​Insights som det måler ikke engang lastetider.

Selv Autoptimize-utvikleren sier på pluginsiden sin at den fungerer best når den kombineres med en cache-plugin. Jeg anbefaler Swift hvis du går gratis rute, og WP-rakett Hvis du kan gjøre $ 49 / år, da det er enklere å konfigurere (det er også det jeg bruker og jeg har 100% score i GTmetrix) siden det kommer med mange funksjoner de fleste cache-plugins ikke har (databaseopprydding, hosting av Google Analyitcs-kode lokalt, hjerteslag kontroll og integrasjon med både Cloudflare + andre CDN-er). Jeg har tutorials for WP Rocket, Fort, WP raskeste hurtigbuffer, W3TC og til og med WP superbuffer.

La oss konfigurere innstillingene for autoptimering. Jeg vil også vise deg hvordan du legger til et CDN (helst begge deler Cloudflare og StackPath) siden hver og en har sitt eget sett med datasentre, og flere datasentre = raskere levering av innhold. CDN-er anbefales i WordPress ‘optimaliseringsveiledning.

Optimaliser plugin-en

1. JS, CSS, & HTML

Aktiver alle disse for å optimalisere JavaScript-, CSS- og HTML-filer, og se instruksjonene nedenfor.

Optimaliser JS CSS HTML-innstillinger automatisk

Optimaliser JavaScript-koden

  • Samlede JS-filer: enable, dette kombinerer JavaScript-filer som anbefalt av GTmetrix. Hvis den er deaktivert, lastes individuelle filer og kombineres ikke.
  • Også samlet inline JS: enable, dette kombinerer JavaScript-filer som er lokalisert i HTML-filer. Autoptimize gir en advarsel som i utgangspunktet betyr at hvis det bryter noe på nettstedet ditt, enten ekskludere JavaScript-filene eller deaktivere dette.
  • Tving JavaScript inn : deaktiver, med mindre du har JavaScript-feil. Du har det bedre å prøve å finne problematiske filer og ekskludere dem enn å velge dette alternativet, siden dette gjør at JavaScript blir gjengivende (ikke optimalt for hastighet).
  • Ekskluder skript fra Autoptimize: Hvis du ser feil etter at du har aktivert visse JavaScript-innstillinger, kan du finne det problematiske JavaScript og ekskludere filer her.
  • Legg til fangstpakking: deaktiver, med mindre du har JavaScript-feil. Dette er en annen måte å fikse JS-feil uten å måtte aktivere å tvinge JavaScript i hodet.

Optimaliser CSS-koden

  • Samlede CSS-filer: aktiverer det samme som å samle JS-filer bare for CSS.
  • Også samlet inline CSS: aktiverer det samme som å samle innlagte JS-filer bare for CSS. Aktiver begge for å forbedre lastetidene + GTmetrix-poengsummer ytterligere.
  • Generer data: URI-er for bilder: deaktiver hvis du bruker en CDN. MaxCDN (StackPath) advarer deg at hvis du aktiverer dette, tvinger du bilder som skal serveres fra din opprinnelse, i stedet for på CDN. Aktivering av dette kan i utgangspunktet føre til færre HTTP-forespørsler, men sannsynligvis ikke etter at du har konfigurert et CDN og servert bilder gjennom det.
  • Inline and Defer CSS: enable, du kan bare aktivere dette alternativet eller “inline all CSS” som Autoptimize ikke anbefaler i vanlige spørsmål. De sier at “selv om det å omfatte all CSS vil gjøre at CSS ikke-gjengis blokkeres, vil det føre til at HTML-siden til basen din blir betydelig større og dermed krever flere” tur-retur “.
  • Inline all CSS: deaktiver, Autoptimize anbefaler ikke å aktivere dette.
  • Ekskluder CSS fra Autoptimize: Hvis du ser feil etter at du har aktivert visse CSS-innstillinger, kan du finne de problematiske CSS-filene og ekskludere dem her. Merk: alternativet “minify ekskludert CSS og JS” i Diverse alternativer må deaktiveres.

2. CDN-alternativer

Det er her din CDN URL går (instruksjoner nedenfor). Cloudflare gir deg ikke en CDN-URL (du vil endre navneservere i stedet). CDN Base URL er spesifikt for StackPath, KeyCDN og andre CDN-er – ikke Cloudflare. Jeg foreslår at du bruker både StackPath + Cloudflare da CDN-ene vil ha flere datasentre, og flere datasentre = raskere nettsted.

Trinn 1: Registrer deg for et CDN. Jeg bruker StackPath som har 34+ datasentre som ligger tungt i USA og er der de fleste besøkende er. Det er $ 10 per måned med en gratis prøveperiode på 30 dager.

StackPath-datasentre

Steg 2: Klikk på CDN-fanen i StackPath-oversikten opprett et StackPath CDN-nettsted.

StackPath-CDN-Tab

StackPath-CDN-domene

StackPath-Server-IP-adresse

* Kopier serverens IP-adresse slik den er nødvendig i trinn 5 i denne delen.

StackPath-CDN-URL-Autoptimize

Trinn 3: Lim inn CDN-URL-en din i Automatisk optimalisering med http: // eller https: // (avhengig av hva du bruker).

Optimaliser CDN URL

Trinn 4: Gå til CDN → Cache-innstillinger i StackPath, og klikk deretter på “Purge Everything.”

StackPath-Purge-Cache

Trinn 5: Hviteliste serverens IP-adresse i StackPath (WAF → brannmur).

StackPath-Hviteliste-IP

Trinn 6: Kjør nettstedet ditt i GTmetrix og “innholdsleveringsnettverk” skal være grønt i YSlow.

CDN GTmetrix YSlow

3. Diverse innstillinger

Her er Diverse innstillinger:

Optimaliser forskjellige innstillinger

Lagre aggregerte skript / css som statiske filer – hvis aktivert, betyr dette at CSS- og JS-filene er lagret i hurtigbufferen og servert via serveren din, så hvis vertskapet ikke håndterer disse, aktiver det.

Komprimer ekskluderte CSS- og JS-filer – Hvis du ekskluderer visse CSS- og JavaScript-filer, skyldes det at det er et problem når du prøver å optimalisere dem, og du vil ikke at de skal bli mindre.

Optimaliser også for påloggede redaktører / administratorer – deaktiver, du vil vanligvis deaktivere ytelsesfunksjoner i WordPress-administratoren, inkludert ytelsesfunksjoner for Cloudflare.

4. Innstillinger for bilder

Autoptimering kan også bidra til at bilder lastes raskere.

Optimaliser bilderinnstillinger automatisk

Optimaliser bilder – URL-er på nettstedet ditt vil bli endret til å peke på ShortPixels CDN. Dette skal ikke påvirke hvordan de ser ut så lenge det er tapsfri komprimering, men de vil laste raskere.

Bildeoptimaliseringskvalitet – finn din egen unike balanse mellom komprimering og kvalitet (jeg bruker glanset). Her er forskjellene i hvert kompresjonsnivå fra ShortPixel:

ShortPixel Image Compression Levels

  • lossy: mest komprimering, mest kvalitetstap.
  • Blank: middels komprimering, lite kvalitetstap.
  • Lossless: lav komprimering, laveste kvalitetstap.

Last WebP i støttede nettlesere – aktivert hvis du bruker WebP-bilder og late bilder.

Lazy-bilder – Jeg personlig lat ikke laster bildene mine fordi det å laste bilder alltid mens du ruller nedover siden kan være irriterende for brukere. Ja, det resulterer i færre forespørsler og er det anbefalt av Google for raskere belastningstid, men jeg synes det er irriterende. Dette er helt opp til deg.

5. Kritisk CSS

Dette refererer til Automatisk optimalisering av criticalcss.com power-up plugin.

Det krever en premie betalt plan fra criticalcss.com ($ 7 / måned).

Plugin-en oppretter kritiske CSS-regler for å sikre at sider blir gjengitt før hele CSS-en lastes inn, noe som forbedrer “begynnelsen til å gjengi tiden.” Alt du trenger å gjøre er å installere plugin-en, registrere deg for en plan, legge inn Critical CSS API-nøkkelen i delen “Critical CSS” i Autoptimize, og plugin-en gjør resten. Sjekk programtillegget FAQ side for detaljer om tilpassede konfigurasjoner.

Jeg personlig bruker det ikke, og vil heller bruke de ekstra $ 7 per måned på en kraftigere server.

Automatisk optimalisering av criticalcss com

Optimaliser kritiske CSS-innstillinger

6. Ekstra innstillinger

Autoptimize-Extra-innstillinger

Google-skrifter – aktiver hvis du bruker Google-skrifter som bremser lastetidene når de blir hentet fra eksterne ressurser (Google Font-biblioteket). Jeg foretrekker alternativet “kombinere og lenke i hodet” siden dette forbedrer lastetidene uten at synligheten ser skrifter lastes (det er det som vanligvis skjer når du laster asynkront. Test også det siste Google Font-alternativet “kombinere og last inn skrifter asynkront med webfont.js”Og se hvilke som gir bedre resultater i GTmetrix.

Fjern Emojis – aktiver (emoji er dårlig for belastningstider).

Fjern spørsmålstrenger fra statiske ressurser – spørringstrenger genereres vanligvis av plugins og kan ikke fikses (i GTmetrix / Pingdom) bare for å aktivere dette, men du kan prøve. Den bedre løsningen er å sjekke nettstedet ditt for høye CPU-plugins og erstatte dem med lette plugins. De fleste høye CPU-plugins inkluderer sosiale deling, galleri, sidebyggere, beslektede innlegg, statistikk og live chat-plugins. Du bør også slette alle unødvendige plugins og rengjøre databasen (ved hjelp av en plugin som WP-Optimize) for å fjerne tabeller igjen av avinstallerte plugins.

Forhåndsforbindelse til tredjepartsdomener – hjelper nettlesere med å forutse forespørsler fra eksterne ressurser (Google Font, Analytics, Maps, Tag Manager, Amazon store, etc.). Disse vil vanligvis vises som “redusere DNS-oppslag” i GTmetrix-rapporten, men nedenfor er vanlige 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

Last inn spesifikke forespørsler – du kan finne mer om forhåndsinnlasting og tips om nettleserressurs fra WP Rocket, men dette gjør det i utgangspunktet slik at visse filer lastes ned med høy prioritet.

Async Javascript-Files – dette betyr at noe forhindrer at innholdet over folden lastes raskt. Denne opplæringen på gjengi blokkerende JavaScripts forklarer det godt, men hvis du ser JavaScript-feil i GTmetrix og Pingdom, vil Async JavaScipt-plugin kan gjøre susen.

Optimaliser YouTube-videoer – hvis nettstedet ditt har videoer, WP YouTube Lyte late laster dem, slik at de bare lastes inn når brukere ruller ned og klikker på avspillingsknappen, og eliminerer dermed de første forespørslene til YouTube-serverne. Dette kan barbere flere sekunder av mange ganger på innhold med videoer, ettersom de er et av de tyngste elementene på en side. WP Rocket og Swift Performance har denne innebygde innstillingene sine, så du trenger ikke dette hvis du bruker en av dem som hurtigbuffertillegg.

7. Optimaliser mer

Hvis du vil optimalisere nettstedet ditt ytterligere, er her verktøyene som anbefales:

WP-rakett – rangert cache-plugin nr. 1 i flere Facebook-avstemninger, og har mange alternativer som ikke er inkludert i Autoptimize (databasens opprydding, hjerteryttskontroll, hosting av Google Analytics lokalt, erstatning av YouTube iframe med et forhåndsvisningsbilde, legge til nettleserbuffer til Facebook Pixel, osv.). WP Rocket håndterer også nesten alt Autoptimize gjør, så du trenger bare 1 plugin for alle disse hastighetsoptimaliseringene. Derfor er det så flott. Du kan også få 10% avslag her.

ShortPixel – populær plugin for optimalisering av bilder og den jeg bruker.

StackPath – CDN med 30+ datasentre. Veldig enkelt å konfigurere; bare registrere deg for en plan ($ 10 / måned) og deretter kopiere / lime inn CDN-URL-en i alternativet Autoptimize CDN URL.

Siteground – rangert vanligvis nummer 1-verten i Facebook-avstemninger og også brukt av Yoast.

Yoast-på-Twitter-We-bare-slått-til-Siteground

2019 Hosting Poll

2017-WordPress-hosting-FB-Poll

Anbefalinger for Elementor Hosting

Juli 2019 Hosting-anbefaling

WordPress-Host-Poll-Aug-2018

Delt-hosting-Poll-2017

2019-Hosting-Poll

Go-To-Hosting-Company

WordPress-hosting-Poll-2017

Managed-Hosting-Poll

WooCommerce-hosting-FB-Poll

2016-Web-Hosting-Poll

Best-WordPress-hosting-leverandør-Poll

Best-Web-Hosting-2019-Poll

WP Friendly Hosting Poll

2016-WordPress-hosting-FB-Poll

Favoritthotell for Elementor

Anbefalinger for vert for 2018

Managed-WordPress-hosting-Poll-2017

2019-vertene-Poll-1

Hosting-Poll-For-tilgang

WordPress-hosting-Poll-juni-1

Siteground-anbefaling

2014-Managed-WordPress-hosting-FB-Poll

Best-Web-Hosting-Provider-Poll

Hosting-Poll-Feb-2019

Hosting-anbefalingene-Poll

Bluehost vs SiteGround

WordPress-avstemning for webverten

Folk migrerer vanligvis fordi deres hastighetsteknologi er mye raskere enn Atten eller GoDaddy:

Bytter til SiteGround

SiteGround Load Time Migration

Bluehost til SiteGround GTmetrix

HostGator til nettstedgrunnen

SiteGround Google PageSpeed ​​Insights

100 perfekt poengsum på nettstedet

SiteGround Genesis

Hastighet levert av SiteGround

Reduserte belastningstider med SiteGround

Nye svartider på SiteGround

HostGator til SiteGround-migrasjon

SiteGround responstid på Joomla

Byttet til SiteGround Hosting

SiteGround Rocket Forestill deg Combo

SideGround PageSpeed ​​Insights

SiteGround On Joomla

Reduserte belastningstider for SiteGround

SiteGround Speedy Hosting

Ny svartid på SiteGround

SiteGround responstid forbedring

SiteGround gjør det også gratis migrasjoner med GrowBig+.

Cloudways – raskere enn SiteGround (det er netthosting, ikke delt) og ble også vurdert høyt i Facebook-avstemninger. Begynner $ 10 per måned med sine DigitalOcean-plan. De tilbyr 1 gratis migrering (som jeg tok dem opp på), og her er hva som skjedde med serverens responstid:

Siteground-vs-Cloudways-Cloud-Hosting

Hosting-anbefalinger Facebook

VPS Cloud Hosting WooCommerce Poll

VPS Cloud Hosting Poll

WordPress Hosting-forslag

Cloudways responstid

WP-motor til Cloudways

Uten navn

Cloudways Pingdom Load Times

Cloudways-Facebook-omtale

Du kan få 25% avslag på de første 2 månedene med Cloudways med kampanjekode OMM25.

Kinsta – Premium hosting på $ 30 / måned, og selv om jeg ikke har prøvd dem, har jeg ikke hørt noe annet enn gode ting om Kinstas hastighet, støtte, oppetid og nesten alt om hosting deres.

Perfmatters – plugin av Kinsta som tar seg av det jeg liker å kalle “diverse optimaliseringer”, som selektivt å deaktivere plugins, begrense postrevisjoner, deaktivere autosave, være vert for Google Analytics lokalt og mye mer. Den tar vare på de endelige 10% av hastigheten.

Noen av disse er anbefalt av Autoptimize, andre er ikke:

Optimaliser tilleggsutstyr

8. Cloudflare

Autoptimize har ikke innstillinger å legge til Cloudflare ‘CDN, men dette er enkelt å konfigurere. Og du bør absolutt fordi dette legger til 200 sentre til til ditt innholdsleveringsnettverk (CDN).

Cloudflare datasentre

Trinn 1. Registrer deg for Cloudflare, så blir du bedt om å legge til nettstedet ditt og begynne en skanning.

cloudflare-begynne-scan

Steg 2. Når skanningen er fullført, velger du gratisplanen, og Cloudflare tar deg gjennom et sett med sider. Du blir etter hvert ført til en side der Cloudflare tildeler deg 2 navnetjenere.

CloudFlare-name-servere-Dashboard

Trinn 3. Logg inn på domeneregistratoren din (f.eks. Namecheap) og gjør et Google-søk etter “hvordan du endrer navneservere på Namecheap” (bare søk etter domeneregistratoren), og følg deretter instruksjonene deres. Du kopierer de to navneservere levert av Cloudflare og limer dem inn i et tilpasset navneserver-alternativ i domeneregistratoren. Tillat 72 timer for utbredelse.

Godaddy Cloudflare-navneservere

Det er det!

Hva blir det neste?

Se min video – det er en video på 42 minutter, men jeg dekker stort sett alt (tidsstempler i videobeskrivelse), og du bør lære deg masse god informasjon om WordPress-nettstedets hastighet:

Vil du vite hvordan jeg fikk 100% poengsummer i GTmetrix?
Se den fulle WordPress-hastighetsoptimaliseringsguiden som har over 38 tips for å fikse GTmetrix / Pingdom-elementer, inkludert oppgradering til PHP 7, tjene skalerte bilder, spesifisere bildedimensjoner, databaseopprydding, være vert for Google Analytics lokalt, WP Disable og andre.

ofte stilte spørsmål

&# X1f680; Trenger jeg andre speed plugins foruten Autoptimize?

Ja, du vil vanligvis også bruke en plugin for hurtigbufring, optimalisering av bilder, databaseopprydding, hjerteslagskontroll og selektiv deaktivering av plugins. Jeg anbefaler WP Rocket, ShortPixel og Perfmatters for de.

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

Velg CDN (jeg bruker StackPath), kopier CDN URL, og lim den inn i Autoptimize’s CDN UR felt.

&# X1f680; Hvordan optimaliserer du Google Font med Autoptimize?

Jeg anbefaler å bruke alternativet Kombiner og lenke i hode, og for å koble sammen skriftene dine på forhånd med Autoptimize.

&# X1f680; Tar autoptimering vare på hurtigbufring?

Nei, du må bruke en egen plugin for hurtigbufring. Jeg anbefaler WP Rocket eller SG Optimizer hvis du bruker SiteGround.

&# X1f680; Hvordan konfigurerer du innstillingene for autoptimering?

Alt er oppført i denne opplæringen – bare følg med på GTmetrix-rapporten og hvilke spesifikke elementer som må fikses. Hvis konfigurering av innstillingene i Autoptimize ikke fikser det, kan du vurdere å bruke en annen plugin for å fikse elementer.

Spørsmål? Slipp meg 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