TechBlogSD - Alt for WordPress- og WEB -utvikling
WEB- og WordPress -instruksjoner, nyheter, anmeldelser av temaer og plugins

Hvordan konfigurere autoptimering riktig på WordPress -nettsted?

2

Autoptimize er en av de populære pluginene for å øke hastigheten på WordPress -nettstedet ditt. Det er mer enn 1 million aktiv installasjon av disse pluginene med en gjennomsnittlig vurdering på 4,7 fra 1K+ brukere. Det kan ikke være feil at så mange mennesker installerer og bruker denne pluginen for å optimalisere nettstedet sitt. Du må imidlertid sørge for riktig oppsett for å få pluginet til å fungere for deg.

Relatert: Topp 8 hurtigbuffer -plugins for WordPress.

Hva gjør Autoptimering?

Først må du forstå at Autoptimize ikke er et hurtigbufret plugin som WP Rocket eller W3 Total Cache. Det er et optimaliseringsplugin som hjelper deg med å gjøre følgende ting:

  • Kombiner alle CSS- og JavaScript -filer
  • Minimer de komprimerte filene og lagre dem, lagre også HTML -koden ved å fjerne kommentarer og mellomrom
  • Legg til utløpsoverskriften i filene for å vise den bufrede versjonen
  • Flytt CSS til topptekst og skript til bunntekst

Senere inkluderte utvikleren også bildeoptimalisering for lat lasting og servering av WebP -bilder for å øke hastigheten på mediefiler. Som nevnt på plugin -siden på WordPress.org, kan HTTP/2 -servere automatisk gjøre mange av tingene dette pluginet gjør. Derfor bør du teste med forsøk for å sikre at pluginen faktisk gir verdi for installasjonen din.

Hvordan konfigurere autoptimering på riktig måte i WordPress?

Autoptimize er en av de enkleste pluginene å sette opp. Etter at du har installert og aktivert programtillegget, går du til “Innstillinger> Autoptimer" -menyen. Den har mulighetene for å optimalisere JS, CSS, HTML og bilder på nettstedet ditt.

Hvordan konfigurere autoptimering riktig på WordPress -nettsted?

Autoptimaliser innstillinger

JS, CSS og HTML -innstillinger

Denne fanen har flere alternativer for å skille og optimalisere filene på nettstedet ditt. Autoptimering vil samle og minimere skript, CSS og HTML fra temaet og plugins. Derfor kan valg av noen av alternativene ødelegge nettstedet ditt, spesielt hvis du bruker jQuery -basert tema.

JavaScript -alternativer

  • Optimaliser JavaScript -kode – Aktiver dette alternativet for å minimere JavaScript -filene. Dette vil komprimere og redusere størrelsen på skriptfilene på nettstedet ditt.
  • Samlede JS-filer? – aktiver dette alternativet for å kombinere alle JavaScript -filer og server asynkront når du laster inn sider på nettstedet ditt. Dette hjelper deg med å fjerne gjengivelsesblokkerende skriptproblem i Google PageSpeed ​​Insights -verktøyet. I de fleste tilfeller vil det imidlertid ødelegge nettstedet ditt. Det beste alternativet er å aktivere dette og gi unntakene slik at siden kan lastes inn uten å bryte. Men det vil føre til gjengivelse av blokkeringsproblemer i PageSpeed ​​Insights. Du kan deaktivere dette alternativet og bare aktivere "Optimaliser JavaScript -kode" for bare å minifisere filene.
  • Også samlet inline JS? – Vi anbefaler deg å deaktivere dette alternativet når temaet eller programtillegget injiserer mange skript dynamisk. Hvis du aktiverer dette, kan cachestørrelsen vokse raskere og større og dermed påvirke ytelsen i stedet for å bli bedre.

Hvordan konfigurere autoptimering riktig på WordPress -nettsted?

JavaScript -alternativer

  • Vil du tvinge inn JavaScript? – den beste fremgangsmåten er å laste inn JavaScript -filer i bunnteksten slik at de lastes på slutten av sidelastingen. Dette vil effektivt fjerne gjengivelsesblokkering og skriptrelaterte problemer vist i hastighetsmålerverktøyene. Men hvis du ser de tidligere alternativene bryte nettstedet ditt, kan du aktivere dette for å laste inn skript i topptekst for å teste om det hjelper. Igjen vil lasting av skript i topptekst vise advarsel om blokkering i PageSpeed ​​Insights -verktøyet.
  • Ekskluder skript fra Autoptimizepluginet som standard fyll denne boksen med jquery.js og andre viktige filer på nettstedet ditt. Hvis du merker at et bestemt tema eller plugin -filer bryter nettstedet ditt, kan du inkludere filen her. Husk å fylle den relative banen til filen ved å ignorere domenenavnet. også, som nevnt i beskrivelsen, vil pluginen fortsatt minimere de ekskluderte filene med mindre du ekskluderer dem i "Diverse" -delen. Etter å ha testet med forskjellige temaer, anbefaler vi deg å ekskludere jquery.js for å unngå at layouten bryter problemer på nettstedet ditt. Noen ganger merker du kanskje ikke problemet på nettstedet, men du kan se konsollfeilen i utviklerverktøyene for Google Chrome. Feilen viser noe som "$ eller jQuery er ikke definert" eller "ukjent funksjon".
  • Vil du legge til try-catch-innpakning? – aktiver dette alternativet når du finner at programtillegget bryter nettstedet ditt. Vi anbefaler deg å deaktivere dette alternativet og ekskludere filen som bryter unntaket.

CSS -alternativer

CSS -alternativer ligner nesten på JavaScript -alternativer.

  • Optimalisere CSS -koden? – aktiver dette alternativet for å komprimere og minifisere CSS -filer på nettstedet ditt.

Hvordan konfigurere autoptimering riktig på WordPress -nettsted?

CSS -alternativer

  • Samlede CSS-filer? – aktiver dette alternativet for å kombinere alle CSS -filer på nettstedet ditt og fungere som en enkelt komprimert og minifisert CSS -fil.
  • Samle også innebygd CSS – aktiver dette for å inkludere innebygd CSS for aggregering. Hvis temaet eller pluginet ditt injiserer mye innebygd CSS, vil dette alternativet øke størrelsen på hurtigbufferen.
  • Generer data: URIer for bilder? – aktiver dette alternativet slik at Autoptimize kan innebygde de små bildene som er lastet ned av temaet ditt og plugins.
  • Inline og utsett CSS – for å aktivere dette alternativet, bør du først kjenne den kritiske CSS for nettstedet ditt. Dessverre er det ikke lett å få kritisk CSS ettersom hver mal på nettstedet ditt trenger separat kritisk CSS. For eksempel, når du har WooCommerce på nettstedet ditt, kan du ikke bruke posten eller sidekritisk CSS for WooCommerce -produktsider. Etter vår mening bør du deaktivere dette alternativet i Autoptimering. Ellers kan du få premium API fra criticalcss.com og integrere med Autoptimize under "Critical CSS" -fanen.
  • Inline all CSS – aktiver dette for å integrere all CSS i stedet for å koble som en fil. Etter at du har aktivert dette alternativet, kan du se kildekoden til nettstedet ditt for å se den enorme mengden CSS. Inlining CSS kan vil forbedre hastigheten drastisk, men det kan påvirke negativt hvis du har stor CSS -fil.
  • Ekskluder CSS fra Autoptimize – hvis du finner ut at nettstedet går i stykker, kan du ekskludere de spesifikke CSS -filene i denne tekstboksen. I likhet med JavaScript -filer må du oppgi den relative banen ved å ignorere domenenavnet. Autoptimering vil også ekskludere hurtigbufferen, ikonene og annen CSS som standard. Du kan også gi de relative mappene som "wp-content/uploads/" for å ekskludere alle CSS-filer i den mappen.

Lær WordPress: Ta en titt på 400+ gratis WordPress -opplæringsprogrammer.

HTML -alternativer

I likhet med JS og CSS, aktiver alternativet "Optimaliser HTML -kode" for å komprimere og minifisere HTML -innholdet på nettstedet ditt. Du kan også aktivere eller fjerne kommentarene ved å bruke "Behold HTML -kommentarer?" alternativ. Vi anbefaler å aktivere begge disse alternativene.

Hvordan konfigurere autoptimering riktig på WordPress -nettsted?

HTML -alternativer

CDN -alternativer

Hvis du bruker CDN som lager sone -URL, bør du skrive inn rot -URL -en her i tekstboksen "CDN Base URL". Du kan imidlertid ignorere dette hvis du ikke bruker CDN eller bruker Cloudflare eller andre CDN -er som bruker DNS -navneservere.

Hvordan konfigurere autoptimering riktig på WordPress -nettsted?

CDN -alternativer

Cache -informasjon

Under “Cache Info” -delen finner du statusen for Autoptimize caching. Den viser deg banen, størrelsen og antallet bufrede filer.

Hvordan konfigurere autoptimering riktig på WordPress -nettsted?

Cache -informasjon

Diverse alternativer

  • Vil du lagre samlede skript/CSS som statiske filer? – dette bør være aktivert som standard ettersom de komprimerte filene må betjenes som en statisk ressurs for å forbedre hastigheten. Som nevnt i beskrivelsen, hvis det er et visningsproblem, deaktiver dette alternativet og prøv det som hjelper.

Hvordan konfigurere autoptimering riktig på WordPress -nettsted?

Diverse alternativer

  • Vil du begrense ekskluderte CSS- og JS -filer? – programtillegget minifiserer automatisk alle CSS- og JS -filer selv om du har ekskludert spesifikke filer i CSS- eller JS -innstillingene. Deaktiver denne avmerkingsboksen hvis du vil deaktivere minifisering av de ekskluderte CSS- og JS -filene.
  • Også optimalisere for påloggede redaktører / administratorer? – vi anbefaler å deaktivere dette alternativet slik at du kan se det faktiske nettstedet uten Autoptimering når du er logget inn som administrator eller redaktør. Ellers kan du legge merke til problemer med å jobbe med sidebygger -plugins.

Lagre alle endringene dine for at programtillegget skal begynne å jobbe på nettstedet ditt.

Bilder

Fanen "Bilder" tilbyr alternativer for optimalisering av bilder.

  • Optimaliser bilder – dette alternativet hjelper deg med å bruke Shortpixel global CDN for å optimalisere og betjene bildene dine mens du er på farten. Shortpixel er en førsteklasses bildekomprimeringsløsning som lar deg optimalisere 150 bilder per måned. Du kan se gjeldende status og kvotebruk i denne delen.

Hvordan konfigurere autoptimering riktig på WordPress -nettsted?

Bildeoptimalisering

  • Bildeoptimaliseringskvalitet – du kan velge et av de blanke, tapende eller tapsløse alternativene. Du kan sjekke forskjellene mellom disse alternativene og teste bildene dine på Shortpixel -siden. Dette vil hjelpe deg med å velge det beste alternativet for ditt behov.
  • Vil du laste inn WebP i nettlesere som støttes? – velg dette alternativet for å vise WebP -bilder for Chrome og andre nettlesere som støttes.
  • Lat-laste bilder?lat last vil utsette bildene utenfor skjermen og lastes bare når brukeren når bildeposisjonen i nettleseren. Aktiver dette alternativet for å forbedre lastehastigheten og forbedre poengsummen på Google PageSpeed ​​Insights -verktøyet.
  • Lazy-load ekskluderinger -her kan du skrive inn bildetyper eller filnavn for å ekskludere dem fra lat lasting.

Vær oppmerksom på at de fleste plugins og temaer leveres med lat lasting som et innebygd alternativ. For eksempel har Avis -tema, Jetpack -plugin, WP Smush -plugin og SG Optimizer -plugin for SiteGround -brukere alle de late lastemulighetene. Vi anbefaler deg å bruke lat lasting bare når du ikke bruker lignende alternativer på andre plugins eller temaer på nettstedet ditt. På samme måte kan du bare aktivere Shortpixel når du ikke har ekstern CDN for bildebufring. Bruk også dette med forsiktighet, da dette har begrensninger i bruken.

Ekstra

Bruk av tredjepartsressurser på nettstedet vil påvirke sidehastigheten. Fanen "Ekstra" tilbyr flere alternativer for å optimalisere noe standard tredjepartsinnhold på nettstedet ditt.

  • Google Fonts – hvis du bruker Google Fonts på nettstedet ditt, har du alternativer for å deaktivere eller kombinere.
  • Fjern emojis – WordPress bruker som standard Unicode emoji -skript for å legge til emoji -symboler på nettstedet ditt. Hvis du ikke bruker emojis, anbefaler vi deg å aktivere dette alternativet for å deaktivere emojis.
  • Fjern søkestrenger fra statiske ressurser – CSS- og JS -filer bruker versjonskontroll og legger til en parameter i URL -en ved hjelp av "ver". Hvis du har et statisk nettsted (dette er tilfellet for de fleste WordPress -sider bortsett fra fora og egendefinerte nettsteder), er det ikke nødvendig å bruke versjonering, ettersom filene også er statiske. Når du samler alle CSS- og JS -filer, vil pluginet automatisk tjene den bufrede filen som en statisk ressurs. Hvis du imidlertid har ekskludert noen filer eller ikke har samlet CSS eller JS, kan du aktivere dette alternativet for å fjerne versjonene fra URL -en.

Hvordan konfigurere autoptimering riktig på WordPress -nettsted?

Ekstra alternativer

  • Forhåndskoble til tredjepartsdomener -forhåndskoble gjør det mulig å koble til tredjepartsserveren før du faktisk sender HTTP-nettleserforespørselen. du kan legge til domenene du vil koble til på forhånd i denne tekstboksen.
  • Forhåndsinnlasting av spesifikke forespørslerforhåndsinnlasting hjelper til med å laste inn de koblede nettadressene, og øker dermed sidehastigheten. Angi tredjepartsdomener som fonts.google.com for å forhåndslaste.
  • Asynkroniser JavaScript-filer -skriv inn tredjeparts JS-filer som du vil laste asynkront ved hjelp av “async” -egenskapen.
  • Optimaliser YouTube -videoer – dette alternativet trenger en ekstra plugin for å laste YouTube -videoer late.

Ofte står det overfor problemer med Autoptimize

Når den er optimalisert riktig, kan Autoptimize -pluginet forbedre nettstedets hastighet og poengsum i Google PageSpeed ​​Insights -verktøyet. Den har imidlertid få problemer når den brukes som en løsning for hastighetsoptimalisering.

1 Bruk med andre plugins

Problemet med Autoptimize er at dette ikke er en hurtigbufring, men inkluderer halvparten av optimaliseringsalternativene som tilbys av et fullverdig hurtigbuffer-plugin. Du må velge plugins som WP Super Cache for å jobbe med Autoptimize for å unngå overflødige alternativer. Ellers trenger du ikke bruke Autoptimize når du har plugins som W3 Total Cache eller WP Rocket.

2 Seller som selger integrasjoner

Med de få tilgjengelige alternativene, kan du se at pluginet selger integrasjonen med Shortpixel, WP YouTube Lyte og criticalcss.com. hver integrasjon trenger ekstra plugin eller konto som ikke er nødvendig når du velger en premium caching -plugin som WP Rocket med en god CDN. I tillegg er det en egen "Optimaliser mer!" kategorien for å selge partnerproduktene.

3 Kritisk CSS

Kritisk CSS er CSS som kreves for å laste over innholdet på brettet på en side. Problemet er at hver sideoppsett som innlegg, side, produkt, portefølje, etc. trenger separat kritisk CSS for å laste inn brettet over riktig. Dette er en komplisert oppgave for å generere kritisk CSS ved å bruke en annen "Autoptimize criticalcss.com power-up" plugin og premium API-nøkkel fra crticialcss.com.

4 Breaking Site’s Layout

I de fleste tilfeller vil pluginet bryte nettstedets layout. Du må sjekke og analysere manuelt for å finne skriptet eller alternativet som bryter nettstedet ditt og ekskludere dem fra Autoptimize plugin.

5 Voksende hurtigstørrelse

Inlining av CSS og JS vil få bufferstørrelsen til å vokse drastisk. Vi har testet med det populære Newspaper -temaet for å finne hurtigbufferstørrelsen 100% på en enkelt dag. Problemet er at programtillegget gir disse alternativene uten automatisk cache -rensing. Det betyr at du må logge på dashbordet manuelt og slette hurtigbufferen hver gang størrelsen vokser.

Hvordan konfigurere autoptimering riktig på WordPress -nettsted?

Autoptimaliser hurtigbufferen full

Konklusjon

Etter vår mening fungerer denne pluginen godt når du har et enkelt tema og bruker enkle hurtigbufremoduler som WP Super Cache. Imidlertid vil de fleste brukerne bruke standard plugins som Jetpack eller W3 Total Cache på nettstedet deres. I dette tilfellet vil Autoptimering være et overflødig alternativ som enten du ikke fullfører pluginet eller deaktiverer visse alternativer.

Opptakskilde: www.webnots.com
Leave A Reply

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg aksepterer Mer informasjon