Setările ideale de autoptimizare + Cloudflare / StackPath CDN (2020)

Autoptimize este un plugin excelent, dar pentru cache, WP Rocket este de obicei numărul 1 în sondajele de Facebook.


Deci de ce ai folosi-o?

Pentru că unele gazde le place Hai tăticu și Motor WP lista neagră a majorității plugin-urilor de cache (din moment ce au propriul sistem integrat de memorie în cache), dar nu fac lucruri precum optimizarea HTML, CSS, JavaScript, fonturi Google sau CDN (rețea de livrare de conținut). Așa că, în timp ce sistemul de memorie în cache al gazdei ar putea funcționa bine pentru cache, Autoptimize ajută la „odihna” lucrurilor (remedierea elementelor din GTmetrix + Pingdom). Evitați Google PageSpeed ​​Insights ca atare nici măcar nu măsoară timpii de încărcare.

Chiar și dezvoltatorul Autoptimize spune în pagina pluginului că funcționează cel mai bine atunci când este combinat cu un plugin de cache. Îți recomand Swift dacă mergi pe ruta gratuită și Racheta WP dacă puteți face 49 de dolari / an, deoarece este mai ușor de configurat (este și ceea ce folosesc și am scoruri 100% în GTmetrix), deoarece vine cu multe caracteristici, majoritatea plugin-urilor din cache nu (curățarea bazei de date, găzduirea codului Google Analyitcs local, bătăile inimii control și integrare atât cu Cloudflare + alte CDN-uri). Am tutoriale pentru WP Rocket, Rapid, WP Fastest Cache, W3TC și chiar WP Super Cache.

Așadar, să configurăm setările Autoptimize. Vă voi arăta, de asemenea, cum să adăugați un CDN (în mod ideal ambele Cloudflare și StackPath) deoarece fiecare are propriul set de centre de date și mai multe centre de date = livrare mai rapidă de conținut. Se recomandă CDN în Ghidul de optimizare WordPress.

Plugin automat de optimizare

1. JS, CSS, & HTML

Activați toate acestea pentru a optimiza fișierele JavaScript, CSS și HTML, apoi consultați instrucțiunile de mai jos.

Autoptimize Setări HTML JS CSS

Optimizați codul JavaScript

  • Agregarea fișierelor JS: activează, aceasta combină fișierele JavaScript, așa cum recomandă GTmetrix. Dacă sunt dezactivate, fișierele individuale vor fi încărcate și nu se vor combina.
  • De asemenea, agregează JS în linie: activează, aceasta combină fișierele JavaScript care sunt localizate în fișiere HTML. Autoptimize oferă un avertisment, ceea ce înseamnă practic dacă rupe ceva de pe site-ul dvs., fie excludeți fișierele JavaScript, fie dezactivați acest lucru.
  • Forțați JavaScript în : dezactivați, dacă nu aveți erori JavaScript. Încercați să găsiți fișiere problematice și să le excludeți decât să selectați această opțiune, deoarece acest lucru face ca blocarea de redare JavaScript (nu este optimă pentru viteză).
  • Excludeți scripturile din Autoptimize: dacă vedeți erori după ce ați activat anumite setări JavaScript, găsiți JavaScript cu probleme și excludeți fișierele de aici.
  • Adăugați înfășurarea prin captură: dezactivați, dacă nu aveți erori JavaScript. Acesta este un alt mod de a remedia erorile JS fără a fi necesar să activați forța JavaScript în cap.

Optimizați codul CSS

  • Agregarea fișierelor CSS: activează, la fel ca agregarea fișierelor JS numai pentru CSS.
  • De asemenea, agregă CSS inline: activează, la fel ca agregarea fișierelor JS inline numai pentru CSS. Permiteți ambelor să îmbunătățească în continuare timpul de încărcare + scorurile GTmetrix.
  • Generați date: URI pentru imagini: dezactivați dacă utilizați un CDN. MaxCDN (StackPath) te avertizează care să permită acest lucru va forța difuzarea imaginilor de la originea dvs. în loc de CDN. Activarea acestui lucru poate duce inițial la mai puține solicitări HTTP, dar probabil nu după ce configurați un CDN și difuzați imagini prin aceasta.
  • CSS inline și amânare: activez, puteți activa această opțiune sau „inline all CSS” pe care Autoptimize nu o recomandă în întrebările frecvente ale acestora. Aceștia spun că „deși alinierea tuturor CSS va face ca CSS să nu blocheze, va rezulta că pagina dvs. HTML de bază va crește semnificativ, astfel că va fi nevoie de mai multe„ tururi ”..
  • Inline toate CSS: dezactivați, Autoptimize nu recomandă activarea.
  • Excludeți CSS de la Autoptimize: dacă vedeți erori după ce ați activat anumite setări CSS, găsiți fișierele CSS problematice și excludeți-le aici. Notă: opțiunea „Minify CSS and JS excluse” din Opțiunile diverse trebuie să fie dezactivată.

2. Opțiuni CDN

Acesta este locul tău URL CDN merge (instrucțiuni de mai jos). Cloudflare nu vă oferă o adresă URL CDN (în schimb veți schimba serverele de nume). URL-ul de bază CDN este specific pentru StackPath, KeyCDN și alte CDN-uri – nu Cloudflare. Vă sugerez să folosiți atât StackPath + Cloudflare, cât CDN-urile dvs. vor avea mai multe centre de date și mai multe centre de date = site-ul mai rapid.

Pasul 1: Înscrieți-vă pentru un CDN. Folosesc StackPath care are peste 34 de centre de date, care sunt amplu localizate în Statele Unite și este acolo unde sunt cei mai mulți vizitatori. Sunt 10 dolari / lună cu un proces gratuit de 30 de zile.

StackPath-data-Centre

Pasul 2: În tabloul de bord StackPath, faceți clic pe fila CDN și creați un site CDN StackPath.

StackPath-CDN-Tab

StackPath-CDN-domeniu

StackPath-Server-IP Address

* Copiați adresa IP a serverului, așa cum este necesar la pasul 5 al acestei secțiuni.

StackPath-CDN-URL-Autoptimize

Pasul 3: Lipiți URL-ul dvs. CDN în autoptimize cu http: // sau https: // (oricare ați utiliza).

Autoptimize URL CDN

Pasul 4: În StackPath accesați CDN → Setări de memorie cache, apoi faceți clic pe „Purge Everything”.

StackPath-Purge-Cache

Pasul 5: Lista listă a adresei IP a serverului dvs. în StackPath (WAF → Firewall).

StackPath-IP-listă albă

Pasul 6: Rulați site-ul dvs. în GTmetrix și „rețeaua de livrare a conținutului” ar trebui să fie verde în YSlow.

CDN GTmetrix YSlow

3. Setări diverse

Iată setările Diverse:

Autoptimize Setări diverse

Salvați scriptul / css agregat ca fișiere statice – dacă este activat, acest lucru înseamnă că fișierele CSS și JS sunt salvate în cache și difuzate prin serverul dvs., deci dacă găzduirea dvs. nu se ocupă de acestea, activați-l.

Minimizați fișierele CSS și JS excluse – dacă excludeți anumite fișiere CSS și JavaScript, se datorează faptului că există o problemă atunci când încercați să le optimizați și nu doriți ca acestea să fie reduse.

De asemenea, optimizați pentru editori / administratori conectați – dezactivați, de obicei doriți să dezactivați funcțiile de performanță în administratorul WordPress, inclusiv funcțiile de performanță Cloudflare.

4. Setări imagini

Autoptimizarea poate ajuta, de asemenea, ca imaginile să se încarce mai rapid.

Autoptimize Setări imagini

Optimizarea imaginilor – URL-urile de pe site-ul dvs. vor fi modificate pentru a indica CDN-ul lui ShortPixel. Acest lucru nu ar trebui să afecteze modul în care acestea arată atâta timp cât este o compresie fără pierderi, dar se vor încărca mai repede.

Calitatea optimizării imaginii – găsiți propriul dvs. echilibru între compresie și calitate (eu folosesc Glossy). Iată diferențele în fiecare nivel de compresie de la ShortPixel:

Niveluri de compresie imagine ShortPixel

  • lossy: cea mai mare compresie, cea mai mare pierdere de calitate.
  • Lucios: compresie medie, pierdere de calitate redusă.
  • Fara pierderi: compresie scăzută, pierderi calitative minime.

Încărcați WebP în browserele acceptate – activat dacă utilizați imagini WebP și imagini de încărcare leneșă.

Imagini cu încărcătură leneșă – Eu personal nu-mi încarc imaginile, deoarece încărcarea constantă a imaginilor în timp ce defilați pe pagină poate fi enervantă pentru utilizatori. Da, rezultă mai puține solicitări și este recomandat de Google pentru perioade de încărcare mai rapide, dar mi se pare enervant. Acest lucru depinde de tine.

5. CSS critic

Aceasta se referă la Autoptimizez plugin-ul de pornire criticcss.com.

Necesită o primă plan platit de la criticcss.com (7 $ / luna).

Pluginul creează reguli critice CSS pentru a vă asigura că paginile sunt redate înainte de încărcarea completă a CSS, îmbunătățind „începerea redării timpului”. Tot ce trebuie să faceți este să instalați pluginul, să vă înscrieți la un plan, să introduceți cheia API critică CSS în secțiunea „CSS critic” din Autoptimize, iar pluginul va face restul. Verificați pluginul Pagina de întrebări frecvente pentru detalii despre configurațiile personalizate.

Eu personal nu îl folosesc și mai degrabă folosesc 7 $ / lună în plus pe un server mai puternic.

Autoptimize criticcss com pornire

Autoptimize Setări critice CSS

6. Setări suplimentare

Autoptimize-Extra-Setări

Fonturi Google – activați dacă utilizați Fonturi Google care încetinesc timpul de încărcare pe măsură ce sunt trase din resurse externe (biblioteca Google Font). Prefer opțiunea „combinați și conectați în cap”, deoarece aceasta îmbunătățește timpul de încărcare fără vizibilitate, văzând încărcarea fonturilor (ceea ce se întâmplă de obicei la încărcarea asincronă. De asemenea, testați ultima opțiune Google Font „combinați și încărcați fonturile în mod asincron cu webfont.js”Și vezi care dă rezultate mai bune în GTmetrix.

Eliminați Emojis – activare (emoji-urile sunt rele pentru timpul de încărcare).

Eliminați șirurile de interogare din resurse statice – șirurile de interogare sunt de obicei generate de plugin-uri și nu pot fi fixate (în GTmetrix / Pingdom) pur și simplu activând acest lucru, dar puteți încerca. Soluția mai bună este să verificați site-ul dvs. dacă există plugin-uri cu procesor ridicat și să le înlocuiți cu plugin-uri ușoare. Cele mai multe plugin-uri cu procesor ridicat includ distribuirea socială, galeria, constructorii de pagini, postări conexe, statistici și pluginuri de chat live. De asemenea, ar trebui să ștergeți toate pluginurile inutile și să curățați baza de date (folosind un plugin ca WP-Optimize) pentru a șterge tabelele lăsate de pluginurile dezinstalate.

Preconectați la domenii terțe – ajută browserele să anticipeze solicitările din resurse externe (fonturi Google, Analytics, hărți, manager de etichete, magazin Amazon etc.). Acestea vor apărea de obicei ca „reduce căutările DNS” în raportul dvs. GTmetrix, dar mai jos sunt exemple obișnuite.

  • 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

Preîncărcați solicitările specifice – puteți afla mai multe despre preîncărcare și sugestii de resurse browser de la WP Rocket, dar acest lucru face ca astfel de fișiere să fie descărcate ca prioritate.

Async Javascript-Files – asta înseamnă că ceva împiedică încărcarea rapidă a conținutului de deasupra. Acest tutorial pe redă blocarea JavaScript-urilor explică bine, dar dacă vedeți erori JavaScript în GTmetrix și Pingdom, Pluginul Async JavaScipt s-ar putea să facă trucul.

Optimizați videoclipurile YouTube – dacă site-ul dvs. are videoclipuri, WP YouTube Lyte leneșii le încarcă, astfel încât acestea se încarcă doar atunci când utilizatorii defilează în jos și fac clic pe butonul Redare, eliminând astfel cererile inițiale către serverele YouTube. Acest lucru poate radia mai multe secunde de la încărcarea timpului de conținut cu videoclipuri, deoarece sunt unul dintre cele mai grele elemente dintr-o pagină. Racheta WP și performanța rapidă au această setare încorporată, astfel încât nu aveți nevoie de acest lucru dacă utilizați una dintre ele ca plugin pentru cache.

7. Optimizează mai multe

Dacă doriți să optimizați în continuare site-ul dvs., aici sunt instrumentele recomandate:

Racheta WP – a evaluat pluginul cache # 1 în mai multe sondaje Facebook și are multe opțiuni neincluse cu Autoptimize (curățarea bazelor de date, controlul bătăilor inimii, găzduirea Google Analytics local, înlocuirea iframe YouTube cu o imagine de previzualizare, adăugarea browserului Cache la Facebook Pixel etc). WP Rocket se ocupă, de asemenea, de aproape tot ceea ce face Autoptimize, așa că ai nevoie doar de 1 plugin pentru toate acele optimizări ale vitezei. Acesta este motivul pentru care este atât de grozav. De asemenea, puteți beneficia de 10% reducere aici.

ShortPixel – pluginul popular de optimizare a imaginii și cel pe care îl folosesc.

StackPath – CDN cu 30+ centre de date. Foarte ușor de configurat; doar înscrieți-vă la un plan (10 USD / lună), apoi copiați / inserați URL-ul dvs. CDN în opțiunea URL automată CDN.

SiteGround – de obicei a evaluat gazda # 1 în sondajele de Facebook și, de asemenea folosit de Yoast.

Yoast-la-Twitter-ne-doar-pornit-la-Siteground

Sondaj de gazduire 2019

2017-WordPress-Hosting-FB-Poll

Recomandări de găzduire Elementor

Recomandare de găzduire în iulie 2019

WordPress-Host-Poll-Aug-2018

Shared-Hosting-Poll-2017

2019-Hosting-Sondaj

Go-To-hosting-companie

WordPress-Hosting-Poll-2017

Gestionat-Hosting-Poll

WooCommerce-Hosting-FB-Poll

2016-Web-Hosting-Sondaj

Cel mai bun-WordPress-Hosting Provider-Poll-

Cel mai bun Web-Hosting-2019-Poll

WP Friendly Sondaj de gazduire

2016-WordPress-Hosting-FB-Poll

Gazduire preferată pentru Elementor

Recomandări de găzduire 2018

Gestionat-WordPress-Hosting-Poll-2017

2019-Hosts-Poll-1

Hosting-Poll-For-Speed

WordPress-Hosting-Poll-iunie-1

SiteGround-Recomandare

2014-Managed-WordPress-Hosting-FB-Poll

Cel mai bun Web-Hosting Provider-Poll-

Hosting-Poll-Feb-2019

Hosting-Recomandări-Sondaj

Bluehost vs SiteGround

Sondaj Web Gazdă WordPress

Oamenii migrează de obicei pentru că tehnologie de viteză este mult mai rapid decât EIG sau GoDaddy:

Trecerea la SiteGround

Migrarea timpului de încărcare a site-ului

Bluehost to SiteGround GTmetrix

HostGator către SiteGround

SiteGround Google PageSpeed ​​Insights

100 Scor perfect pe SiteGround

SiteGround Genesis

Viteza livrată de SiteGround

Timpuri de încărcare reduse cu SiteGround

Timpuri noi de răspuns a site-ului

HostGator către migrația SiteGround

SiteGround Timpuri de răspuns pe Joomla

Trecut la SiteGround Hosting

SiteGround Rocket Imagify Combo

SiteGround PageSpeed ​​Insights

SiteGround On Joomla

SiteGround Timpuri de încărcare reduse

SiteGround Speedy Gazduire

Timp de răspuns nou pentru SiteGround

Îmbunătățirea timpului de răspuns a site-ului

SiteGround face și el migrații gratuite cu GrowBig+.

Cloudways – mai rapid decât SiteGround (este cloud hosting, nu este distribuit) și a fost evaluat foarte bine în sondajele de Facebook. Începe de la 10 USD / lună odată cu Planul DigitalOcean. Ele oferă 1 migrare gratuită (pe care le-am preluat) și iată ce s-a întâmplat cu timpul meu de răspuns al serverului:

SiteGround-vs-Cloudways-Cloud-Hosting

Recomandări de găzduire Facebook

VPS Cloud Gazduire WooCommerce Sondaj

VPS Cloud Gazduire sondaj

Sugestii de gazduire WordPress

Timpuri de răspuns la Cloudways

Motor WP către Cloudways

fără titlu

Timpuri de încărcare Pingdom Cloudways

Cloudways-Facebook-opinie

Puteți beneficia de 25% din primele 2 luni de Cloudways cu cod promoțional OMM25.

Kinsta – Găzduire premium de 30 de dolari / lună și, în timp ce nu le-am încercat, nu am auzit altceva decât lucruri grozave despre viteza, suportul, timpul de funcționare și aproape totul despre găzduirea Kinsta.

Perfmatters – plugin de Kinsta care are grijă de ceea ce îmi place să numesc „optimizări diverse”, cum ar fi dezactivarea selectivă a pluginurilor, limitarea reviziilor post, dezactivarea automelor, găzduirea Google Analytics local și multe altele. Are grijă de 10% din viteza finală.

Unele dintre acestea sunt recomandate de Autoptimize, altele nu:

Adăugări automate

8. Cloudflare

Autoptimize nu are setări de adăugat CDN-ul Cloudflare ”, dar acest lucru este ușor de configurat. Și cu siguranță ar trebui să facă, deoarece acest lucru adaugă Încă 200 de centre la rețeaua dvs. de livrare de conținut (CDN).

Centre de date Cloudflare

Pasul 1. Înscrieți-vă la Cloudflare și vi se va solicita să adăugați site-ul dvs. și să începeți o scanare.

Cloudflare-begin-scan

Pasul 2. După ce scanarea este făcută, selectați planul gratuit, apoi Cloudflare vă va duce printr-un set de pagini. În cele din urmă, veți fi dus la o pagină în care Cloudflare vă atribuie 2 nameserverele.

Cloudflare-Name-servere-Tablou de bord

Pasul 3. Conectați-vă la registratorul dvs. de domeniu (de ex. Namecheap) și efectuați o căutare Google pentru „cum să schimbați serverele de nume pe Namecheap” (căutați doar registrul dvs. de domeniu), apoi urmați instrucțiunile lor. Veți copia cele 2 servere de nume furnizate de Cloudflare și le lipiți într-o opțiune personalizată de nume de nume din registratorul dvs. de domeniu. Se lasă 72 de ore pentru propagare.

Godaddy Cloudflare nume de nume

Asta e!

Ce urmeaza?

Urmărește videoclipul meu – este un videoclip de 42 de minute, dar am acoperit aproape toate (timpe-uri în descrierea videoclipului) și ar trebui să înveți o mulțime de informații excelente despre viteza site-ului WordPress:

Vreți să știu cum am obținut scoruri 100% în GTmetrix?
Vedeți ghidul meu complet de optimizare a vitezei WordPress, care are peste 38 de sfaturi pentru remedierea articolelor GTmetrix / Pingdom, inclusiv actualizarea la PHP 7, servirea imaginilor scalate, specificarea dimensiunilor imaginii, curățarea bazelor de date, găzduirea locală a Google Analytics, WP Disable și altele..

întrebări frecvente

&# X1f680; Am nevoie de alte plugin-uri de viteză, în afară de Autoptimize?

Da, de obicei doriți să utilizați și un plugin pentru memorie în cache, optimizarea imaginii, curățarea bazelor de date, controlul bătăilor inimii și dezactivarea selectivă a pluginurilor. Recomand WP Rocket, ShortPixel și Perfmatters pentru aceia.

&# X1f680; Cum configurați un CDN cu Autoptimize?

Alegeți-vă CDN-ul (eu folosesc StackPath), copiați URL-ul CDN și lipiți-l în câmpul CDN UR al Autoptimize.

&# X1f680; Cum optimizați fonturile Google cu Autoptimize?

Vă recomand să utilizați opțiunea Combinare și legătură în cap și să vă preconectați fonturile utilizând Autoptimize.

&# X1f680; Autoptimize are grijă de cache?

Nu, va trebui să utilizați un plugin separat pentru memorie în cache. Recomand WP Rocket sau SG Optimizer dacă utilizați SiteGround.

&# X1f680; Cum configurați setările Autoptimize?

Totul este listat în acest tutorial – trebuie doar să fii atent la raportul GTmetrix și la ce elemente specifice trebuie să fie rezolvate. Dacă configurarea setărilor în Autoptimize nu o rezolvă, luați în considerare utilizarea unui alt plugin pentru a remedia elementele.

Întrebări? Da-mi un vers!
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