Cum să accelerăm WordPress (optimizările pe care le folosim pentru Core Web Vitals)

WordPress este cel mai important și mai popular sistem de management al conținutului (CMS) din lume. De fapt, în prezent alimentează peste 43% din toate site-urile web de pe internet și continuă să câștige cotă de piață an de an. Branduri și organizații prestigioase precum Stanford, Arhivele Naționale, Creative Commons, Sony Music, Fortune și chiar Casa Albă folosesc WordPress pentru a-și alimenta site-urile.

În cei peste 20 de ani de lucru pe internet, am folosit toate tipurile de platforme, cum ar fi Drupal, Joomla, Ghost, Medium și multe altele. Cred că WordPress este de departe cea mai bună soluție pentru fiecare sector: IMM-uri, instituții de învățământ, bloguri cu trafic ridicat și chiar site-uri pentru întreprinderi.

De ce? Pentru că WordPress vă oferă cel mai mare control și flexibilitate în construirea, gestionarea și comercializarea site-ului dvs. web. Cu toate acestea, doar utilizarea WordPress nu este suficientă; viteza joacă un rol important în asigurarea succesului. Și în asta ne vom scufunda mai jos.

Nimănui nu-i place un site web lent (inclusiv Google)

În timp ce WordPress este incredibil de popular, utilizarea acestuia poate avea și un cost de performanță dacă nu știi ce faci. Inițial, WordPress a fost în primul rând o platformă de blogging. Dar a evoluat în mult mai mult decât atât, deoarece au fost adăugate mai multe funcționalități de-a lungul anilor. Problema acum este că, cu atât de multe configurații și opțiuni diferite, WordPress poate rula lent dacă nu este configurat sau optimizat corect.

De ce contează un site web lent?

Pentru că va fi întotdeauna foarte dăunător experienței și primei impresii a unui vizitator. Joacă un factor semnificativ în ratele de respingere și de conversie. Zilele dial-up-ului au trecut de mult, iar oamenii nu mai au răbdarea pe care o aveau . Dacă trebuie să aștepte mult pentru încărcarea unei pagini, cel mai probabil vor apăsa butonul Înapoi și vor alege următorul rezultat al motorului de căutare.

La fel cum WordPress a evoluat de-a lungul anilor, la fel a evoluat și măsurarea performanței. Deși timpul total de încărcare este încă important, nu este o măsurătoare pe care ar trebui să vă mai concentrați. Google folosește acum ceea ce ei numesc Core Web Vitals. Site-ul dvs. primește un scor bazat pe o combinație de lucruri precum cea mai mare vopsea cu conținut (LCP), întârziere la prima introducere (FID) și schimbare cumulativă a aspectului (CLS).

Pentru a spune simplu, în timp ce cantitatea de cod va conta întotdeauna pentru performanță, acum trebuie să luați în considerare modul în care site-ul dvs. încarcă codul .

Și să mai arunc o cheie în amestec. Viteza paginii mobile este, de asemenea, un factor de clasare. De aceea, Core Web Vitals și modul în care acestea indexează SERP-urile se bazează în întregime pe dispozitive mobile. Google nu îi pasă cât de repede se încarcă site-ul dvs. pe computere desktop.

De unde începi?

Primul lucru pe care ar trebui să-l faceți este să testați viteza site-ului dvs. WordPress. Acest lucru vă va oferi un punct de referință pe care îl puteți utiliza ca bază. Recomand să utilizați instrumentul gratuit PageSpeed ​​Insights. Dacă doriți puțin mai multe date referitoare la accesibilitate, SEO etc., puteți folosi instrumentul de măsurare web.dev. Ambele sunt dezvoltate de Google, oferite de Lighthouse și folosesc Core Web Vitals pentru punctare.

GTmetrix este un alt instrument la îndemână care utilizează Core Web Vitals în multe dintre valorile sale de performanță. De asemenea, vă permit să vedeți o cascadă a activelor dvs., care uneori este necesară pentru a obține o imagine mai bună a ceea ce se întâmplă. Cu toate acestea, rețineți că versiunea gratuită vă arată scorurile doar pe desktop, nu pe mobil.

Datorită memoriei cache, CDN-urilor și altor scripturi terțe, asigurați-vă că rulați întotdeauna testele de viteză de cel puțin trei ori pentru a obține un rezultat precis. Și indiferent de instrumentul pe care îl utilizați, este important să alegeți unul și să rămâneți cu el. Fiecare instrument măsoară viteza în mod diferit și aveți nevoie de o linie de bază precisă pentru a monitoriza îmbunătățirile performanței.

Dacă trebuie să măsurați interogările și performanța încărcării bazei de date, Query Monitor și New Relic APM sunt soluții excelente. Dacă găzduiți cu Kinsta, aceștia au și un instrument APM gratuit în tabloul de bord MyKinsta.

Accelerează WordPress (front-end, back-end)

Această postare va acoperi, pas cu pas, exact modul în care îmi configurez toate site-urile WordPress, un amestec de bloguri cu trafic ridicat și site-uri de comerț electronic. Conține recomandări care se aplică atât pentru front-end, cât și pentru back-end (tabloul de bord de administrare WordPress) și optimizări special adaptate pentru Google Core Web Vitals.

În primul rând, puțin despre mine: folosesc WordPress de peste 14 ani. Am lucrat anterior pentru Kinsta; o companie de găzduire WordPress gestionată de înaltă performanță. Înainte de asta, am lucrat pentru KeyCDN, o rețea globală de livrare de conținut. Deci ai putea spune că performanța web este în sângele meu.

Am petrecut mii de ore optimizând site-urile WordPress pentru a mă asigura că rulează la performanțe optime. Ca agent de marketing pe internet, WordPress m-a ajutat să realizez lucruri incredibile și te poate ajuta și pe tine! Doar urmați pașii de mai jos pentru a accelera WordPress instantaneu .

Îți promit, indiferent de antecedentele tale sau de nivelul de expertiză, vei găsi ceva util în această postare.

1. Investește în hosting rapid WordPress

Impact: viteză front-end și back-end (tabloul de bord de administrare WordPress).

Una dintre cele mai simple și mai importante moduri de a accelera WordPress este să începeți cu o bază solidă. Și asta înseamnă că trebuie să alegeți o gazdă WordPress rapidă și de încredere . Din nefericire, acest prim pas este locul în care mulți oameni încurcă. Mulți subestimează cât de mult impactul are un furnizor de găzduire asupra performanței tale. Obținerea corectă vă va economisi atât de mult timp și frustrare.

Dacă sunteți pe un site web mic, cel mai probabil sunteți pe un plan de găzduire web partajată ieftin. Numele planului în sine definește ce este acesta. Termenul „partajat” înseamnă că site-ul dvs. este găzduit pe un server împreună cu multe site-uri web ale altor persoane. Aceasta înseamnă că toți se luptă pentru aceleași resurse.

Sunt sigur că vezi bloggeri și agenți de marketing afiliați tot timpul reclamând furnizori de găzduire ieftini precum BlueHost sau GoDaddy. Îmi pare rău că sunt purtător de vești proaste, dar 99% dintre aceste site-uri sunt conduse de agenți de marketing afiliați, care încearcă doar să câștige bani rapid. De cele mai multe ori, nici nu le folosesc; încearcă doar să trimită cât mai multe.

Alegerea unei gazde ieftine este una dintre cele mai proaste decizii pe care le-ați putea lua vreodată atunci când vă găzduiți site-ul. De exemplu, știați că BlueHost este deținut de EIG? EIG este o corporație care cumpără de ani de zile toate gazdele cu performanțe scăzute. Iată o listă completă a gazdelor deținute de EIG. Vă puteți aștepta aproape la același serviciu oribil de la toți. Tot ce le pasă este rezultatul lor.

Deși este adevărat că sunt și un agent de marketing afiliat, pasiunea mea pentru performanța web a depășit întotdeauna asta. Recomand doar furnizorii de găzduire pe care îi folosesc de fapt pentru propriile mele site-uri (inclusiv pentru lucru). Alegerea gazdei potrivite înseamnă că nu trebuie să vă faceți griji cu privire la timpul de nefuncționare sau viteza. Mai jos sunt doi furnizori de găzduire WordPress pe care îi susțin 100%.

SiteGround

Dacă sunteți în căutarea unei găzduiri WordPress mai accesibile , vă recomand SiteGround. Oferă găzduire WordPress gestionată pe Google Cloud Platform cu HTTP/3 (QUIC), PHP 8, SSD și o mulțime de alte funcții, începând de la doar 6,99 USD pe lună! Acest lucru este la fel de bun pentru cei mai ieftini care găzduiesc. Asigurați-vă că verificați recenzia mea aprofundată SiteGround.

SiteGround este o alegere excelentă dacă aveți nevoie de o gazdă accesibilă, care să fie mereu la curent cu cea mai recentă tehnologie. Cu toate acestea, odată ce începeți să obțineți mult trafic, vă recomand să investiți într-un furnizor de găzduire mai premium precum Kinsta.

Kinsta

Dacă sunteți în căutarea unei găzduiri WordPress gestionate de înaltă performanță , nu am decât laude pentru Kinsta. Setul lor vast de caracteristici este ceea ce îi diferențiază de alți furnizori de găzduire. Infrastructura Kinsta este alimentată de Google Cloud Platform și de rețeaua sa de nivel premium. Ei folosesc cele mai rapide mașini disponibile (VM C2 optimizate pentru calcul) în toate planurile lor.

Kinsta utilizează containere software izolate, ceea ce înseamnă că nu sunt partajate resurse între site-uri, ceea ce îl face ideal pentru scalabilitate și securitate. Dacă doriți un tablou de bord de administrare WordPress rapid sau sunteți pe cale să difuzați pe Shark Tank, aceasta este gazda de care aveți nevoie. Unii dintre clienții lor actuali includ nume mari precum Buffer, Flippa, Mint.com, Ubisoft și TripAdvisor.

Unele dintre funcțiile și tehnologia Kinsta includ peste 29 de locații de centre de date, Nginx, PHP 8.1, HTTP/3, CDN și SSL gratuite, site-uri de staging, MariaDB, monitorizare a timpului de funcționare, APM și protecție DDoS. A avea cea mai recentă versiune PHP este mai important decât ți-ai putea da seama. De ce? Pentru că PHP 8.1 este cu 47,10% mai rapid decât PHP 8.0 (măsurat în solicitări pe secundă) și cu 50% mai rapid decât PHP 7.2 (sursă). Acesta este un spor gratuit de performanță, fără nicio muncă din partea dvs.

Kinsta are, de asemenea, cel mai bun suport din domeniu! Echipa lor expertă WordPress este acolo pentru a vă ajuta 24/7. Toate site-urile mele, inclusiv programul de lucru, sunt găzduite cu Kinsta . Asigurați-vă că verificați recenzia mea aprofundată Kinsta.

Dincolo de găzduire, Kinsta oferă un instrument de dezvoltare locală gratuit incredibil, numit DevKinsta. Puteți folosi acest lucru pentru a configura cu ușurință mediile locale de testare WordPress în câteva minute. Un mare avantaj al utilizării acestuia față de un site de staging este că nu există latență în rețea.

2. Implementați memorarea în cache

Impact: viteză front-end și back-end (tabloul de bord de administrare WordPress)

Când un utilizator accesează site-ul dvs. pentru prima dată, serverul procesează cererea, inclusiv toate interogările de bază de date necesare pentru a reda pagina. Pagina este apoi livrată în browserul utilizatorului. Timpul inițial de procesare este motivul pentru care este atât de important să ai un furnizor de găzduire rapid.

Cache-ul este stratul care se află între serverul dvs. Cache-ul este construit și stocat în RAM sau disc în timpul acelei solicitări inițiale, iar cererile ulterioare ajung în stratul cache în loc de serverul dvs. Acest lucru are ca rezultat viteze fulgerătoare (până la 40% mai rapide în testarea mea) pentru utilizator, deoarece ocolește în esență faza de procesare a serverului. Un alt beneficiu este că reduce, de asemenea, sarcina pe server.

Dacă memorarea în cache nu este configurată corect, aceasta va duce la un timp mai mare până la primul octet (TTFB) și ceea ce se mai numește „timp de așteptare”. În ceea ce privește Google Core Web Vitals, aceasta va genera un avertisment pentru „reducerea timpului inițial de răspuns al serverului”. Avertismentul se declanșează dacă TTFB este mai mare de 600 ms (sursă).

După cum am menționat mai devreme, datorită stocării în cache, asigurați-vă că rulați întotdeauna testele de viteză de cel puțin trei ori pentru a obține un rezultat precis. Dacă memoria cache a site-ului dvs. tocmai a expirat, veți vedea avertismentul de mai sus la prima executare a testului.

Memorarea în cache este de obicei implementată în două moduri diferite:

• Memorarea în cache la nivel de server
• Plugin de cache WordPress

Memorarea în cache la nivel de server

Memorarea în cache la nivel de server este ceea ce recomand pentru că este rapidă și ușoară. Furnizorii de găzduire WordPress precum Kinsta au deja cache la nivel de server pentru dvs. și nu există nicio bătaie de cap cu pluginuri sau setări. Totul funcționează imediat, indiferent dacă aveți un blog cu trafic ridicat sau un site de comerț electronic mai dinamic. Nu am niciun plugin de cache care rulează pe acest site web.

Plugin de cache WordPress

Dacă furnizorul dvs. de găzduire nu are memorarea în cache la nivel de server, atunci trebuie să instalați un plugin de stocare în cache WordPress. Am testat multe pluginuri de cache de-a lungul anilor și recomand să merg cu una dintre următoarele:

• Cel mai rapid cache WP (gratuit)
• Activator cache (gratuit)
• WP Rocket (premium)

Îmbunătățiți-vă memoria cache

O modalitate ușoară de a vă îmbunătăți stocarea în cache este să creșteți timpul de expirare a memoriei cache pe site-ul dvs. WordPress. Timpi mai lungi de cache duc la o performanță îmbunătățită a site-ului și la rate HIT mai bune ale memoriei cache. De asemenea, poate remedia avertismentul de la Google de a „servirea activelor statice cu o politică eficientă de cache”.

Mai jos este un exemplu de ceea ce s-a întâmplat când am mărit timpul de expirare a memoriei cache Kinsta de la 1 oră la 7 zile. După cum puteți vedea, procentul raportului HIT cache a crescut dramatic! Aceasta înseamnă că mai mulți vizitatori primesc site-ul nostru livrat folosind memoria cache fulgerătoare și sunt necesari mai puțini lucrători PHP.

Dacă găzduiți cu Kinsta, următoarele durate de cache sunt disponibile direct din tabloul de bord MyKinsta:

• 1 oră
• 2 ore
• 4 ore
• 8 ore
• 24 de ore
• 7 zile

Kinsta are reguli pentru a elimina automat paginile individuale și paginile critice, cum ar fi pagina de pornire, imediat când faceți actualizări. Acest lucru asigură disponibilitate ridicată în orice moment și, de asemenea, se asigură că vizitatorii dvs. văd cele mai recente actualizări.

Dacă utilizați un alt furnizor de găzduire sau un plugin de stocare în cache, verificați documentația acestuia sau cereți asistență pentru a vedea cum să creșteți timpul de expirare a site-ului dvs. WordPress.

3. Utilizați o temă WordPress ușoară

Impact: viteză front-end și back-end (tabloul de bord de administrare WordPress)

Temele WordPress pot face sau distruge site-ul dvs. Există o mulțime de teme umflate care vă pot aduce site-ul la accesare cu crawlere. Chiar și cu găzduirea și memorarea în cache WordPress rapide, cantitatea de cod și solicitări încă contează, mai ales când vine vorba de Google Core Web Vitals.

Când căutați o temă WordPress, doriți să vă asigurați că cumpărați de la o companie de renume, cu dezvoltatori buni și asistență.

Am folosit GeneratePress pentru toate site-urile mele WordPress, inclusiv blogurile și site-urile mele de comerț electronic, în ultimii peste 5 ani. Nu aș putea fi mai fericit și nu o pot recomanda suficient! GeneratePress este ușor și încă include o mulțime de funcționalități.

Instalarea de bază a temei GeneratePress WordPress a obținut un scor 100/100 conform Google. Și acest test este emulat pentru dispozitivele mobile. Foarte impresionant!

De asemenea, vreau să menționez că ar trebui să fiți atenți când cumpărați teme și produse pe ThemeForest. Nu spun că toți dezvoltatorii de pe ThemeForest sunt răi, dar, din păcate, mulți dintre ei adaugă pur și simplu umflare pentru a-și crește vânzările. Consultați recenzia mea aprofundată GeneratePress.

Creatorii de pagini distrug internetul

Am lucrat pe mii de site-uri WordPress de-a lungul anilor și toate cele cu adevărat lente au un lucru în comun: creatorii de pagini. Dacă doriți un site rapid, trebuie să vă îndepărtați acum de generatorii de pagini.

Creatorii de pagini au fost dezvoltați inițial din cauza lipsei de a putea proiecta cu ușurință un site web fără cod. Sa fim cinstiti; a fost greu să construiești un site WordPress în urmă cu cinci ani, dacă nu știai cum să codificați. Creatorii de pagini și-au îndeplinit scopul, deoarece mulți oameni din WordPress sunt „implementatori de site-uri web”, nu programatori. Și de aceea mulți creatori de pagini au experimentat o creștere vertiginoasă.

Cu toate acestea, în zilele noastre, lucrurile stau foarte diferit. Acum aveți plugin-uri uimitoare precum GenerateBlocks, care vă permite să creați site-uri web cu 1/10 din cantitatea de cod ! Ah, și nici nu trebuie să faci nicio codificare reală.

Aruncă o privire la dimensiunea generală a bazei de cod a GenerateBlocks față de Elementor, Oxygen și Divi.

• Este cu 87% mai mic decât oxigenul.
• Este cu 93% mai mic decât Elementor.
• Este cu 96% mai mic decât Divi Builder.

Desigur, nu aveți toate clopotele și fluierele fanteziste, dar acestea sunt exact lucrurile care vă cauzează probleme când încercați să vă clasați mai sus cu Core Web Vitals. Să luăm cursoarele, de exemplu. Glisorii ar fi trebuit să moară cu ani în urmă, dar încă sunt în jur. Acestea provoacă avertismente privind schimbarea aspectului cumulativ (CLS). Este mult mai bine să proiectați un antet static. Renunță la animații, renunță la părțile în mișcare.

Apoi aveți DOM (Document Object Model). Pentru a spune simplu, ori de câte ori se încarcă o pagină, browserul analizează HTML-ul unei pagini și redă DOM-ul. Gândiți-vă la asta ca la un arbore structurat într-un anumit sens. Cu toate acestea, acesta nu este doar codul sursă HTML, deoarece JavaScript îl poate manipula. Consultați acest articol despre ce este, mai exact, DOM-ul?

Nu trebuie să înțelegeți pe deplin DOM, doar că cu cât aveți mai multe straturi de cod, cu atât mai multe elemente DOM vor fi pe o pagină. O problemă comună în rândul creatorilor de pagini este dimensiunea excesivă a DOM. Acest lucru se datorează faptului că, în esență, adaugă cod suplimentar, cum ar fi div-urile imbricate, care creează un DOM mai mare. Cu cât DOM este mai mare, cu atât vei fi penalizat mai mult din punct de vedere al performanței.

Plugin-urile precum GenerateBlocks funcționează puțin diferit. Deși încă adaugă cod, ei lucrează mai strâns în cadrul parametrilor de cod deja existenți în miezul WordPress. De asemenea, adaugă mai puțin cod în general, pentru că a fost dezvoltat de la zero, având în vedere performanță. De aceea, multe avertismente Core Web Vitals pur și simplu nu apar niciodată.

GenerateBlocks adaugă doar un fișier CSS pe pagină, care conține toate CSS-urile generate de opțiunile tale. Nu există JavaScript sau CSS inline – totul este într-un singur loc, ordonat. Creatorii de pagini, pe de altă parte, încarcă de obicei zeci de fișiere pe fiecare pagină.

Mulți cred că totul se reduce la un compromis între performanță sau design. Cu toate acestea, acesta nu mai este cazul. Multe dintre site-urile de creare de pagini la care am lucrat pot fi re-create cu ușurință cu un plugin precum GenerateBlocks. Asigurați-vă că verificați recenzia mea aprofundată GenerateBlocks.

De aceea GeneratePress + GenerateBlocks este cea mai bună combinație pentru site-uri chiar acum. Puteți construi literalmente orice tip de site doriți (fără a fi nevoie să știți cum să codificați), și de aceea vă recomand cu căldură să utilizați ambele soluții. Site-ul dvs. va fi protejat pentru viitor pentru performanță și pentru Google Core Web Vitals.

4. CDN

Impact: viteza front-end.

Indiferent cât de rapid este furnizorul dvs. de găzduire WordPress, nu puteți depăși niciodată problema latenței rețelei. Este matematică de bază. Datele dvs. sunt stocate fizic pe un server într-un centru de date, iar lucrurile devin mai încet pentru utilizatori cu cât sunt mai departe, deoarece trebuie să vă descarce site-ul pe o distanță mare.

O rețea de livrare de conținut (CDN) remediază acest lucru prin stocarea de copii ale activelor dvs. (imagini, CSS, JS și chiar HTML) pe servere edge din întreaga lume. De asemenea, îi memorează în cache . Când un vizitator caută site-ul dvs. web, conținutul este livrat de la cel mai apropiat server de margine geografică (cache) în loc de serverul dvs. web. Asigurați-vă că consultați articolul meu despre un CDN pentru manechin dacă doriți să aflați mai multe despre cum funcționează CDN-urile.

Cât de mult ajută un CDN? Am văzut că un CDN crește vitezele unui site WordPress cu până la 68%! Iată dovada. O mare parte va depinde de distanță.

De asemenea, este important de menționat că acest lucru nu anulează importanța de a avea o soluție robustă de stocare în cache configurată cu furnizorul dvs. de găzduire. Motivul este că memoria cache pe un CDN expiră. Când o face, doriți un strat de rezervă rapid.

Există doi furnizori CDN pe care îi recomand, fiecare cu o abordare ușor diferită pe care o puteți lua:

• Cloudflare cu APO
• KeyCDN

Cloudflare cu APO

Cloudflare este de departe cel mai popular și proeminent furnizor CDN, cu peste 270 de locații marginale de pe tot globul. Cu toate acestea, nu sunt un CDN tradițional. Un CDN tradițional seamănă mai mult cu un supliment care memorează în cache și oferă numai activele dvs. (imagini, CSS, JS) pe tot globul. Cloudflare este un proxy invers.

Un proxy invers înseamnă că direcționați site-ul dvs. web (DNS) către Cloudflare și direcționați tot traficul prin acestea. Ele se află între site-ul dvs. web și internetul public.

Dezavantajul de a fi un serviciu full-proxy este că rutarea necesită timp. În trecut, Cloudflare a avut o problemă în care această suprasarcină ar putea crește timpul de așteptare (TTFB). Cu toate acestea, acele zile au trecut. Acum au un serviciu numit Automatic Platform Optimization (APO), care memorează în cache întregul site, nu doar activele, ci și HTML, la serverul edge.

De ce este asta atât de mare? Pentru că în trecut, o solicitare mergea la serverul furnizorului dvs. de găzduire pentru a descărca codul HTML și CDN-ul dvs. pentru a descărca activele (imagini, CSS, JS). Cu APO, toate solicitările ajung direct la serverul edge Cloudflare cel mai apropiat de utilizator (imagini, CSS, JS și HTML).

Acest lucru elimină problema timpului de așteptare (TTFB) și este nebun de rapid ! De asemenea, nu trebuie să preîncarce memoria cache pe server edge, ca un CDN tradițional. APO își folosește KV pentru a stoca cache-ul, iar la prima vizită, acesta este distribuit instantaneu pe toate serverele lor edge. Pentru majoritatea site-urilor, puteți crede că găzduiește automat o copie separată a site-ului dvs. de pe tot globul. De asemenea, nu trebuie să te încurci cu regulile confuze ale paginii.

Serviciul CDN de la Cloudflare este gratuit, iar serviciul APO costă 5 USD/lună pe domeniu, indiferent de cât trafic obțineți. Deci este foarte rentabil! Dacă sunteți curios, folosesc serviciul APO al Cloudflare pe acest site. Tot ce faceți este să vă înscrieți la APO și să instalați pluginul gratuit Cloudflare WordPress.

Notă: Kinsta va integra în curând serviciul APO gratuit pentru toți clienții lor!

Asigurați-vă că verificați și aceste setări recomandate pentru Cloudflare pentru cea mai bună performanță.

Soluție alternativă Cloudflare

Dacă doriți o soluție complet gratuită, foarte personalizabilă, vă recomand și pluginul WP Cloudflare Super Page Cache. Acest lucru realizează același tip de cache de margine a paginii întregi și timp de așteptare redus (TTFB). Singura diferență este că trebuie să preîncarce memoria cache pe server edge. Dezvoltatorii acestui plugin sunt incredibil de utile și rapid în a răspunde.

KeyCDN

Dacă sunteți în căutarea unui CDN tradițional, atunci vă recomand KeyCDN. La 0,04 USD/GB, sunt incredibil de accesibile, iar viteza lor este ridicol de rapidă. Un blog cu o cantitate decentă de trafic se află de obicei în intervalul de lățime de bandă de 20-25 GB, iar cu KeyCDN, ar costa mai puțin de 5 USD pe lună.

KeyCDN există de mulți ani, iar serviciul lor este excepțional de fiabil (chiar mai mult decât Cloudflare), ceea ce este foarte important atunci când vine vorba de furnizorii CDN. Ele oferă peste 40 de locații de margine, Let's Encrypt SSL, scut de origine și jetoane securizate gratuit. Ele oferă, de asemenea, cache WebP.

Asigurați-vă că ați verificat recenzia mea completă KeyCDN. De asemenea, puteți utiliza pluginul nostru Perfmatters pentru a implementa KeyCDN pe site-ul dvs. WordPress.

5. Optimizarea imaginii

Impact: viteza front-end.

Optimizarea dimensiunilor imaginii și a livrării este ceva ce nu puteți ignora. Potrivit The HTTP Archive, din februarie 2021, imaginile reprezintă în medie 48% din greutatea totală a paginii unui site web pe dispozitivele mobile. Este aproape jumătate din activele pe care browserul trebuie să le descarce și să le livreze unui utilizator.

Acolo intră în joc compresia imaginii.

Comprimarea imaginii

Comprimarea este o modalitate de a face fișierele de imagine mai mici prin eliminarea datelor. Este una dintre cele mai ușoare modalități de a reduce dimensiunea totală a site-ului dvs. și, odată ce aveți un sistem de sunet la locul său, poate fi în cele din urmă fără mâini.

Încărcarea imaginilor cu rezoluție completă pe site-uri web, în ​​special pe cele cu planuri mici de găzduire web partajată, va încetini instantaneu timpul de încărcare a site-ului dvs. Ai fi surprins de cât de mult pot fi comprimate unele imagini fără nicio degradare a calității.

Îmi comprim toate imaginile folosind compresia cu pierderi cu pluginul ShortPixel WordPress. Acest lucru asigură dimensiuni mici ale paginilor și imagini de încărcare rapidă care arată în continuare frumos. Fiecare imagine pe care o adaug la o pagină sau la o postare este comprimată automat în culise în biblioteca media. Recomandarea mea este să păstrați întotdeauna imaginile sub 100 KB .

Profit și de formatul de imagine .webp. Acesta este un format de imagine dezvoltat de Google, care este mult mai mic decât PNG-urile sau JPG-urile. Acum este acceptat de toate browserele moderne. Folosesc imagini WebP pe toate site-urile mele . Pluginul ShortPixel poate face acest lucru automat pentru dvs.

Cât de mic este formatul de fișier WebP? Ei bine, luați una dintre imaginile de pe această postare pe blog, de exemplu. Imaginea PNG are 60,6 KB, în timp ce versiunea WebP a aceleiași imagini este de 16,3 KB. Este o scădere cu 73,1% a dimensiunii!

De asemenea, Google recomandă utilizarea imaginilor WebP. Procedând astfel, se va remedia avertismentul „servire imagini în formate de generație următoare”.

De asemenea, este important în setările pluginului ShortPixel să excludeți dimensiunile miniaturilor pe care nu le utilizați pe site-ul dvs. Acest lucru vă va economisi credite și, de asemenea, va face o compresie mai rapidă a imaginii. După cum puteți vedea mai jos, pe acest site, exclud totul, cu excepția medium , medium_large și large .

Puteți consulta și celelalte pluginuri de compresie a imaginii pe care le recomand.

Imagini de încărcare leneșă

Dincolo de comprimarea imaginilor, puteți, de asemenea, să optimizați difuzarea imaginilor dvs. utilizând încărcarea leneră. Aceasta este metoda de amânare sau amânare a încărcării imaginilor până când un utilizator defilează în jos pe pagină (imaginile intră în fereastra de vizualizare).

De ce funcționează așa de bine? Să presupunem că aveți o postare de blog de lungă durată cu 50 de imagini pe ea. În mod implicit, browserul va încărca toate cele 50 de imagini atunci când cineva vizitează site-ul. Chiar și cu imagini optimizate, acest lucru poate dura ceva timp, mai ales pe mobil.

Dacă încărcați leneș imaginile, acestea vor încărca doar imaginile în partea de sus a paginii pe care utilizatorul o vede în browser. Numărul de imagini variază în funcție de tipul de browser, metoda de încărcare leneșă, dimensiunea ferestrei de vizualizare etc. Dar, indiferent, ideea este că de obicei reduce cu 85%+ din solicitările de imagini.

De fapt, Google recomandă încărcarea leneșă. Dacă nu o implementați, veți vedea următorul avertisment pentru a „amâna imaginile în afara ecranului”.

WordPress 5.5+ are încărcare leneșă nativă în mod implicit. Cu toate acestea, vă recomandăm să utilizați soluția de încărcare leneșă din Perfmatters. De ce? Pentru că soluția noastră este mai rapidă și mai bună decât încărcarea leneșă nativă. Puteți citi mai multe despre încărcarea leneșă în Perfmatters.

Pentru a activa încărcarea leneșă în Perfmatters, pur și simplu activați-l și sunteți gata.

Lățimea și înălțimea imaginii

S-ar putea să sune relativ simplu, dar o modalitate ușoară de a vă îmbunătăți CLS și de a reduce schimbările de aspect este să confirmați că toate imaginile dvs. au un set de atribute pentru lățime și înălțime. Dacă unei imagini lipsesc aceste atribute, cel mai probabil veți vedea un avertisment „elementele imaginii nu au lățime și înălțime explicite” de la Google.

Orice temă bine codificată precum GeneratePress ar trebui să adauge aceste atribute pentru tine. Dacă tema dvs. nu este, vă recomand să contactați dezvoltatorul, deoarece chiar ar trebui să fie abordată la sursă. Sau puteți adăuga automat atributele de lățime și înălțime lipsă cu pluginul nostru Perfmatters.

Dimensiunea corectă a imaginilor

Un alt avertisment comun care apare este dimensiunea corectă a imaginilor. Dacă te-ai mutat la o nouă temă WordPress la un moment dat, probabil că vei vedea asta.

Acest avertisment este declanșat dacă o imagine difuzată de browser este mai mare decât containerul său. Aveți două moduri diferite de a remedia acest lucru:

1. Regenerați-vă miniaturile imaginii. Destul de rapid și ușor.
2. Forțați imaginile mai mici pe ecrane mai mici. Acest lucru necesită puțin cod. Dezvoltatorul dvs. de teme vă poate oferi probabil acest lucru.

Consultați mai multe detalii despre cum să remediați avertismentul imaginilor cu dimensiunea corectă.

Preîncărcați imaginile critice

Preîncărcarea imaginilor principale (cele de deasupra pliului) poate ajuta la scăderea timpilor de cea mai mare vopsea de conținut (LCP) în Core Web Vitals. Acestea sunt de obicei imagini precum un logo, o imagine prezentată într-o postare de blog, o imagine erou pe o pagină de destinație etc. Prin preîncărcarea lor, le mutați în partea de sus a cascadei și, în esență, îi spuneți browserului că acestea au prioritate. și ar trebui să fie încărcat imediat.

Puteți preîncărca manual imagini în pluginul nostru Perfmatters sau chiar puteți preîncărca automat imaginile critice.

6. Optimizați baza de date și reduceți spațiul pe disc

Impact: viteză front-end și back-end (tabloul de bord de administrare WordPress).

Următorul lucru de făcut este să vă asigurați că baza de date WordPress este optimizată și că nu pierdeți spațiu pe disc.

Înainte de a continua, este întotdeauna o practică bună să faceți o copie de rezervă a site-ului dvs. WordPress. Dacă utilizați o gazdă precum Kinsta, puteți face un instantaneu cu un singur clic. În caz contrar, puteți utiliza un plugin de backup WordPress.

Tabelele bazei de date InnoDB

Dacă nu ați mai făcut niciodată nicio optimizare a bazei de date, primul lucru pe care veți dori să-l verificați este că nu aveți tabele mixte MyISAM și InnoDB.

Multă vreme, au existat două tipuri diferite de motoare de stocare: MyISAM și InnoDB. MyISAM este acum depreciat, iar InnoDB a fost motorul de stocare implicit de la lansarea MySQL 5.5. Până în prezent, încă văd site-uri cu tabele MyISAM vechi. InnoDB s-a dovedit a fi mult mai rapid și asta ar trebui să utilizați pentru tabelele bazei de date.

Urmați acest tutorial despre cum să verificați și să convertiți MyISAM în InnoDB. Când vine vorba de modalități ușoare de a accelera WordPress, aceasta este adesea o optimizare trecută cu vederea.

Pagină și postează revizuiri

Din cutie, WordPress stochează revizuiri ale postărilor și paginilor atunci când faceți modificări. Acest lucru este util în cazul în care trebuie să reveniți la o versiune mai veche. Vestea proastă este că nu există o limită a numărului de revizuiri stocate. Pe site-urile mari, acest lucru vă poate bloca rapid baza de date. De câte revizuiri ai nevoie de fapt?

Primul pe care veți dori să îl faceți este să curățați vechile revizuiri și apoi să stabiliți o limită în continuare.

Pluginul nostru Perfmatters oferă o modalitate ușoară de a curăța și șterge revizuirile pentru postări, pagini și tipuri de postări personalizate. Dacă sunteți în căutarea unei soluții gratuite, funcționează și pluginul WP-Optimize.

După cum puteți vedea mai jos, în cazul meu, în baza de date erau 630 de revizuiri. Probabil că niciunul dintre acestea nu va fi folosit vreodată, așa că este bine să le curățați și să începeți cu o ardezie proaspătă.

După curățarea versiunilor vechi ale postărilor, este timpul să limitați numărul de revizuiri. Acest lucru va asigura că nu vor începe să umple baza de date din nou pe drum. Există câteva moduri în care puteți face acest lucru. Recomand să utilizați pluginul nostru Perfmatters. Le puteți limita sau dezactiva cu un singur clic, așa cum se vede mai jos.

Sau o puteți face manual, adăugând următorul cod în fișierul wp-config.php . În acest exemplu, îl limitez la trei revizuiri.

 define('AUTOSAVE_INTERVAL', 300); // secunde
define('WP_POST_REVISIONS', 3);

Este important să adăugați codul deasupra 'ABSPATH' ; altfel, nu va merge.

De asemenea, puteți dezactiva complet revizuirile.

Ștergeți imaginile vechi sau nefolosite

Over time you probably have unused images that are taking up disk space on your server. This can cause performance issues in various places, even just when taking backups of your site.

I recommend using the Media Cleaner plugin. This helps clean up your media library from the entries (and files) which aren't used on your WordPress site. Make sure to take a backup before running this .

Another thing to watch out for is if you've previously migrated from one image optimization plugin to another. Some use different file extensions. For example, if you migrated over from Imagify to ShortPixel, you might have leftover images with a .jpg.webp and .png.webp extensions sitting in your site's uploads folder. This can easily account for hundreds if not thousands of additional images.

You can use a script or connect to your site via SFTP and do a quick search for these extensions and delete them. Make sure to check with your current image optimization solution to confirm which extensions they are using.

Clean up auto-drafts, spam comments, transients, etc.

It's also important to clean up other old data you might have lying around. This includes auto-drafts, spam comments, comments in trash, posts and pages in trash, expired transients, etc. All of these things contribute to a larger WordPress database size.

The database optimization features in our Perfmatters plugin provide is an easy and fast solution for this. Just a few clicks and you're good to go.

Check wp_options table (autoloaded data)

Autoloaded data is a field that accumulates in your wp_options table. Over time, this can quickly bring a WordPress site to a crawl. This data is loaded by plugins on every page of your site. It's healthy to keep this field's total size below 5 MB, or 1 MB if possible. To check the size of autoloaded data on your site, open phpMyAdmin from your hosting provider's control panel and use the following query:

 SELECT SUM(LENGTH(option_value)) as autoload_size FROM wp_options WHERE autoload='yes';

To dive even deeper into this topic, check out this article on how to clean up autoloaded data.

Delete data from old plugins

How many plugins have you tried over the years and removed? Probably a lot. Unfortunately, many plugins don't remove everything when you uninstall them, which leaves you with an ever-growing database.

If it's a well-developed plugin, it should have a clean uninstall option. You can check its documentation. If it has one, you can temporarily install the plugin again and run the uninstaller the right way.

If they don't have a clean uninstall option, you can manually delete the tables from your database. Be careful with this and make sure to take a backup first.

7. Implement web fonts the right way

Impact: Front-end speed.

According to The HTTP Archive, as of February 2021, fonts make up on average 6% of a total website's page weight on mobile devices. While that might seem small, it still impacts how your site loads. There are areas regarding performance that you can't fix on your site, so you should take the wins where you can.

First, I don't recommend using third-party font services such as Adobe Fonts (previously Typekit). In my testing, I saw an additional 300ms delay. Adobe Fonts adds two external HTTP requests, and it also base64 encodes all the font formats. You no longer need to serve all the font formats; you really only need WOFF 2, if you're going for extra compression. WOFF 2 is supported by over 95% of all browsers (source).

Second, many websites use more fonts than they need. Make sure to check how many fonts you are loading. You can easily see this in the GTmetrix waterfall.

Below are a couple of options I recommend for better-performing fonts.

Option 1: System font stack (what I do)

I'll start with my favorite and fastest option you have for web fonts. It's moving to what they call a system font stack.

Big-name brands such as GitHub, Bootstrap, Medium, Ghost, and even your WordPress admin dashboard all use what they call a system font stack. This means they use the fonts on your computer. A few years ago, this wouldn't have looked very good. But with today's newer operating systems, they all have nicer looking fonts pre-installed.

When using a system font stack, there is no need to load any fonts on the page! That is pretty huge! It also eliminates any FOUT (flash of unstyled text) or FOIT (flash of invisible text) ugliness. Our site uses system fonts, and I bet you didn't even notice. Asta e corect; this site doesn't load a single font .

You still might want to weigh the pros and cons. Do you want something that looks fancy, or do you want blazing fast? If you're using a theme like GeneratePress, it has a one-click option to use system stack fonts. You can also check out my more in-depth tutorial on how to move to a system font stack.

Opțiunea 2: Auto-găzduiește fonturi Google (sau fonturi personalizate)

Fonturile Google sunt gratuite, foarte populare și utilizate de peste 42 de milioane de site-uri web din întreaga lume (sursă). Au avut un avantaj de performanță în trecut și acesta a fost că fonturile ar putea fi deja stocate în cache din CDN-ul Google în browserul unui utilizator. Cu toate acestea, acele zile au trecut.

Începând cu Chrome 86 (octombrie 2020), au trecut la partiționarea cache HTTP. Aceasta înseamnă că fonturile Google vor fi redescărcate pentru fiecare site web, indiferent de fonturile stocate în cache în browserul unui utilizator. Safari a făcut acest lucru de ani de zile, iar Firefox a implementat acest lucru în versiunea 85 (ianuarie 2021).

Soluția este să găzduiești fonturi Google pe serverul tău sau CDN . Acest lucru elimină, de asemenea, căutarea DNS la Google, iar anteturile HTTP de stocare în cache ale serverului dvs. vor fi aplicate automat.

Pentru a face acest lucru, puteți descărca fonturile Google, le puteți încărca pe serverul dvs. și puteți adăuga HTML și CSS adecvat. Cu toate acestea, o modalitate mult mai ușoară este să utilizați unul dintre următoarele pluginuri pentru a automatiza procesul:

• Perfmatters
• Plugin pentru fonturi

Există două lucruri esențiale pe care ar trebui să le configurați:

1. Utilizați swap pentru proprietatea font-display. Acest lucru este acceptat în toate browserele moderne și se va asigura că fonturile nu blochează randarea. De asemenea, va rezolva avertismentul „Asigurați-vă că textul rămâne vizibil în timpul încărcării fontului web” de la Google.

2. Preîncărcați fonturile pentru a specifica că sunt necesare imediat sau foarte curând în timpul încărcării paginii. De asemenea, vă puteți preîncărca fonturile cu pluginul nostru Perfmatters.

Aceleași tehnici menționate mai sus pot fi aplicate și dacă utilizați un font personalizat premium.

Utilizatori GeneratePress

Pentru utilizatorii de teme GeneratePress care doresc încă să găzduiască fonturi Google extern, puteți face următoarele pentru a remedia toate avertismentele pentru Core Web Vitals. Notă: GeneratePress adaugă automat schimbul de font-afișare la fonturile dvs. Google.

1. Luați adresa URL a foii de stil Google din codul sursă al site-ului dvs. și adăugați-o la secțiunea Preîncărcare a pluginului Perfmatters. Asigurați-vă că selectați „stil”. Exemplu de URL:

 https://fonts.googleapis.com/css?family=Roboto:regular,500,700&display=swap 

2. Adăugați următorul URL la Preconnect în Perfmatters și bifați caseta „CrossOrigin”.

 https://fonts.gstatic.com

Cele de mai sus vor remedia atât avertismentul „Eliminați resursele de blocare a redării”, cât și avertismentul „Asigurați-vă că textul rămâne vizibil în timpul încărcării fontului web”.

8. Modificați pictogramele fonturilor

Impact: viteza front-end.

Font Awesome este grozav și milioane de site-uri îl folosesc pe web pentru a afișa pictogramele pe care le vedeți zilnic. Cu toate acestea, în mod implicit, își încarcă întreaga bibliotecă de pictograme pentru site-ul dvs.

Cel mai bun mod din punct de vedere al performanței de a aborda Font Awesome este să împachetați numai pictogramele pe care le utilizați pe site-ul dvs. Iată un tutorial excelent despre cum să găzduiești pictogramele fonturilor la nivel local (doar cele de care ai nevoie).

Sau, dacă utilizați o temă precum GeneratePress cu GenerateBlocks, puteți lipi codul SVG al oricărei pictograme dorite. Acest lucru este uimitor! Pentru că înseamnă că nu este nevoie să împachetați pictograme. Puteți adăuga cu ușurință doar ceea ce aveți nevoie .

De asemenea, ar trebui să preîncărcați pictogramele fonturilor dvs. web. În caz contrar, veți vedea următorul avertisment de la Google despre necesitatea „preîncărcării solicitărilor de cheie”.

Puteți preîncărca fonturile dvs. web adăugând eticheta de preîncărcare la antetul site-ului dvs. WordPress. Iată un exemplu:

 <link rel='preload' href='font-icon.ttf' as='font' type='font/ttf' crossorigin>

Puteți face acest lucru cu ușurință și în pluginul nostru Perfmatters.

9. Optimizați JavaScript

Impact: viteza front-end.

Potrivit The HTTP Archive, începând cu 2021, JavaScript reprezintă în medie 22% din greutatea totală a paginii unui site web pe dispozitivele mobile. După imagini și videoclipuri, JavaScript este a treia cea mai mare sursă de greutate a paginii.

Mai jos voi aborda câteva moduri diferite în care puteți optimiza JavaScript pe site-ul dvs. WordPress.

Auditează-ți pluginurile

De unde provine majoritatea JavaScript-ului? Două locuri: temă și pluginuri. Așa că prima recomandare este să faci un audit al pluginurilor tale și să scapi de cele fără de care poți trăi.

Acesta este unul dintre motivele pentru care îmi place să folosesc WordPress. Există atât de multe moduri diferite de a realiza lucrurile. Dacă mergi cu o altă platformă, cum ar fi Shopify sau Wix, ești blocat să o faci într-un fel sau mai rău; nu ai cum sa o repari deloc.

De-a lungul anilor, iată câteva plugin-uri de care am scăpat de pe site-urile mele:

• Butonul de derulare până la partea de sus: butoanele de derulare până la partea de sus sunt deja incluse în tema GeneratePress. Cu toate acestea, am renunțat cu totul la derularea în sus, deoarece nu cred că mulți utilizatori chiar dau clic pe ele.
• Bloom: Acest plugin are prea multe solicitări, așa că am trecut înapoi la pluginul MTS WP Subscribe Pro.
• TablePress: Un plugin grozav, dar editorul de blocuri din WordPress are acum tabele receptive, la fel și GenerateBlocks.
• TweetDis: Am trecut la Novashare, pluginul nostru de partajare socială pentru WordPress, care include un cod scurt pentru tweet și un bloc de tweet cu o bază de cod mai optimizată.
• Evidențiator de sintaxă Crayon: am trecut la sintaxa codului nativ WordPress fără niciun plugin.
• Butoane Mango: am trecut la butoanele native în tema GeneratePress.
• Cuprins Plus: le codific acum. Editorul de blocuri WordPress are acum o modalitate ușoară de a adăuga ancore.

După cum puteți vedea, au existat câteva plugin-uri de care nu aveam nevoie sau alternative mai bune. Scăpând de acestea, am redus semnificativ solicitările de pe site-ul meu și dimensiunea totală a paginii. Vă sfătuiesc să faceți imediat un audit și o evaluare a pluginurilor pe site-ul dvs.!

Google Analytics local

În mod ironic, Google Analytics are propriul set de probleme cu performanța. În primul rând, aveți o solicitare DNS imediată a unei terțe părți. În al doilea rând, și cea mai importantă problemă este cu timpul de expirare a memoriei cache. Google setează expirarea memoriei cache foarte scurtă, iar acest lucru poate duce la apariția avertismentelor.

O modalitate simplă de a rezolva aceste probleme este să găzduiți Google Analytics local pe serverul dvs. sau CDN. Există câteva avantaje în acest sens:

1. Profitați de o singură conexiune HTTP/3.
2. Scriptul dvs. Google Analytics primește antetele de stocare în cache de la serverul dvs. și/sau CDN .
3. Există o solicitare mai puțin imediată a terților.

Analiza găzduirii la nivel local nu este susținută oficial de Google, dar mulți fac acest lucru de ani de zile. Puteți găzdui cu ușurință Google Analytics local cu pluginul nostru Perfmatters.

Amână JavaScript

Datorită naturii modului în care funcționează JavaScript, cel mai probabil veți vedea un avertisment „Eliminați resursele de blocare a redării” de la Google. Aceasta înseamnă că fișierele dvs. JavaScript încetinesc (blochează) prima vopsea a paginii site-ului dvs. WordPress la încărcare.

O modalitate ușoară de a accelera vopsirea unei pagini este amânarea tuturor JavaScript-ului necritic. Aceasta înseamnă că scripturile se vor încărca după ce restul paginii s-a încărcat. Practic îi împingi la fundul cascadei. Acest lucru se face prin adăugarea unui atribut defer pe fiecare fișier JavaScript.

Puteți amâna cu ușurință JavaScript în pluginul nostru Perfmatters.

Este important să rețineți că nu puteți amâna jQuery core ( jquery.js ) pe majoritatea site-urilor, în special pe cele mai mari. Totul depinde de ordinea de încărcare a JavaScript-ului. Dacă ceva trebuie să se încarce imediat, va provoca o eroare în cascadă.

Reduceți JavaScript

Minificarea este procesul de eliminare a tuturor spațiului alb din codul dvs. Mulți dezvoltatori își minimizează scripturile în prealabil. Puteți observa acest lucru rapid dacă scriptul are .min.js la sfârșit. (Exemplu: file.min.js ). Prin urmare, aceasta nu este o prioritate uriașă, deoarece 90% din JavaScript este probabil deja miniat.

Acestea fiind spuse, puteți în continuare să vă reduceți JavaScript. Pentru aceasta, recomand pluginul gratuit Autoptimize. Sau, dacă utilizați Cloudflare, puteți activa cu ușurință minimizarea pentru JavaScript în fila „Viteză → Optimizare”.

Întârzie JavaScript

În timp ce amânarea JavaScript împinge scriptul în partea de jos a încărcării paginii, puteți, alternativ, să amânați JavaScript pe baza interacțiunii utilizatorului. Aceasta poate fi o modalitate excelentă de a accelera vopsirea paginii pentru Core Web Vitals atunci când ceva nu este necesar imediat. Mai ales scripturi grele de la terți, cum ar fi Google Adsense, Google Analytics, pixeli de conversie (FB, Google Ads), etc.

De asemenea, funcționează excelent pentru lucruri precum fragmentele de coș, care este o problemă comună de performanță WooCommerce.

Citiți mai multe despre amânarea JavaScript cu pluginul nostru Perfmatters.

Eliminați JavaScript neutilizat

Apoi, aveți avertismentul de la Google de a „elimina JavaScript neutilizat”. Aceasta înseamnă că nu tot codul din fișierul JavaScript încărcat (din tema sau pluginul dvs. WordPress) este utilizat pe pagina pe care o testați.

Există câteva moduri de a aborda această problemă. Cu toate acestea, nu pot exprima cât de important este acest lucru. Dacă urmați toate sfaturile de mai sus cu privire la o temă WordPress ușoară și la renunțarea la constructorii de pagini pentru o alternativă precum GenerateBlocks, JavaScript neutilizat nu va fi o problemă uriașă.

Google recomandă mai întâi ceea ce am descris mai sus și anume reducerea sau schimbarea numărului de pluginuri WordPress care încarcă JavaScript neutilizat. Nu uitați, numărul de pluginuri nu este la fel de important ca cât de bine sunt codificate.

Puteți utiliza funcția de acoperire a codului Google din Chrome DevTools pentru a identifica tema sau pluginul responsabil pentru adăugarea JavaScript străin. Uitați-vă la scripturile din listă care au mult roșu în acoperirea codului. O temă sau un plugin ar trebui să pună în coadă un script numai dacă este folosit efectiv pe pagină.

Acolo intră în joc Perfmatters Script Manager. Vă permite să dezactivați scripturile, interogările și CSS/JS inline pe o postare/pagină sau chiar la nivel de site, cu un clic pe un buton. De asemenea, puteți dezactiva pluginuri întregi. Acesta este foarte puternic și poate crește drastic viteza site-ului dvs. (în special a paginii dvs. de pornire).

Managerul de script acceptă, de asemenea, Regex. Acest lucru vă permite să dezactivați scripturile pe paginile de arhivă generate dinamic, rezultatele căutării etc. Practic, orice combinație de scripturi la care vă puteți gândi poate fi dezactivată sau activată.

Parcurgând și optimizându-vă site-ul, puteți reduce drastic cantitatea de încărcare JavaScript. Acest lucru nu va remedia complet avertismentul JavaScript neutilizat, dar va ajuta foarte mult.

De asemenea, puteți utiliza funcția JavaScript de întârziere din pluginul nostru Perfmatters pentru a rezolva avertismentele JavaScript neutilizate.

10. Optimizează CSS

Impact: viteza front-end.

Conform Arhivei HTTP, din 2021, CSS reprezintă în medie 4% din greutatea totală a paginii unui site web pe dispozitivele mobile. După imagini, videoclipuri și JavaScript, CSS este a patra cea mai mare sursă de greutate a paginii.

Mai jos voi aborda câteva moduri diferite în care puteți optimiza CSS pe site-ul dvs. WordPress.

Reduceți CSS personalizat

Primul lucru pe care ar trebui să-l faceți este să reduceți orice CSS personalizat de pe site-ul dvs. WordPress.

Este firesc să adăugați CSS în WordPress Customizer și apoi să treceți la următoarea problemă când vă grăbiți. Cu toate acestea, aceasta înseamnă că, de-a lungul timpului, probabil că ați acumulat CSS suplimentar de care nu aveți nevoie. Sau ați schimbat teme sau pluginuri, iar CSS-ul nici măcar nu mai este aplicabil. Acum este momentul să te întorci și să o curățăm.

De asemenea, nu recomand să utilizați un plugin terță parte pentru CSS. În timp ce pluginurile precum Simple Custom CSS sunt grozave, WordPress Customizer a devenit destul de bun de-a lungul anilor și acum face colorarea de bază a sintaxei și corectarea erorilor.

Încărcați CSS personalizat numai acolo unde este necesar

Există momente în care ar putea fi necesar să adăugați un CSS personalizat pe site-ul dvs., dar nu trebuie neapărat să se încarce peste tot. Dacă îl aruncați în WordPress Customizer, acest lucru este rău! Pentru că îl va încărca pe întregul site.

Aici GeneratePress și hooks vin în ajutor. Puteți crea un cârlig cu GeneratePress, puteți adăuga CSS personalizat și puteți selecta unde doriți să se încarce.

De exemplu, pe paginile mele de contact, am ceva CSS personalizat pentru pluginul meu de contact NinjaForms. Am un cârlig GeneratePress care încarcă acest cod numai pe pagina mea de contact. Acesta este cel mai optim mod de a încărca CSS personalizat .

Minimizează CSS

La fel ca JavaScript, mulți dezvoltatori își minimizează foile de stil în prealabil. Puteți observa acest lucru rapid dacă fișierul are .min.css la sfârșit. (Exemplu: file.min.css ). Prin urmare, aceasta nu este o prioritate uriașă, deoarece 90% din CSS-ul dvs. este probabil deja miniat.

Acestea fiind spuse, vă puteți reduce în continuare CSS-ul. Pentru aceasta, recomand pluginul gratuit Autoptimize. Sau, dacă utilizați Cloudflare, puteți activa cu ușurință minimizarea pentru CSS în fila „Viteză → Optimizare”.

Eliminați CSS neutilizat

La fel ca JavaScript, este posibil să aveți avertismentul de la Google pentru a „elimina CSS neutilizat”. Aceasta înseamnă că nu tot codul din fișierul CSS încărcat (din tema sau pluginul dvs. WordPress) este utilizat pe pagina pe care o testați.

Există câteva moduri de a aborda această problemă. Cu toate acestea, nu pot exprima cât de important este acest lucru. Dacă urmați toate sfaturile de mai sus cu privire la o temă WordPress ușoară și la renunțarea la constructorii de pagini pentru o alternativă precum GenerateBlocks, CSS neutilizat nu va fi o problemă uriașă.

Google recomandă mai întâi să reducă sau să schimbe numărul de pluginuri WordPress care încarcă CSS neutilizat. Nu uitați, numărul de pluginuri nu este la fel de important ca cât de bine sunt codificate.

Puteți utiliza funcția de acoperire a codului Google din Chrome DevTools pentru a identifica tema sau pluginul responsabil pentru adăugarea CSS-ului străin. Uitați-vă la scripturile din listă care au mult roșu în acoperirea codului. O temă sau un plugin ar trebui să pună în coadă o foaie de stil numai dacă este folosită efectiv pe pagină.

Din nou, aici intervine Managerul nostru de scripturi Perfmatters. Vă permite să dezactivați scripturile, interogările și CSS/JS inline pe o postare/pagină sau chiar la nivel de site, cu un clic pe un buton. De asemenea, puteți dezactiva pluginuri întregi.

Parcurgând și optimizându-vă site-ul, puteți reduce drastic cantitatea de încărcare CSS. Este posibil ca acest lucru să nu rezolve complet avertismentele CSS neutilizate, dar va ajuta foarte mult. Apoi puteți utiliza pluginul nostru Perfmatters pentru a elimina automat CSS neutilizat. Acest lucru ar trebui să clarifice restul avertismentelor. De asemenea, va remedia avertismentele „eliminați resursele care blochează redarea” referitoare la CSS.

Eliminarea CSS neutilizate va ajuta, de asemenea, la scăderea FCP și LCP. De fapt, pe multe dintre site-urile mele, a făcut diferența între adresele URL care încă „au nevoie de îmbunătățiri” și care au punctat „bun” sau verde în general pentru Mobile și Core Web Vitals.

11. Optimizează HTML

Impact: viteza front-end.

Conform The HTTP Archive, începând cu 2021, HTML reprezintă în medie 1,5% din greutatea totală a paginii unui site web pe dispozitivele mobile. Deși aceasta nu este o sumă mare, este totuși importantă.

Mai jos voi aborda câteva moduri diferite în care puteți optimiza HTML pe site-ul dvs. WordPress.

Serviți HTML din Cloudflare Edge

Am atins asta mai sus; Recomand să utilizați Cloudflare APO. Cu un CDN tradițional, HTML-ul dvs. este difuzat de la serverul de origine, în timp ce activele dvs. sunt difuzate de la CDN. Cu Cloudflare APO, activele și codul HTML sunt furnizate de la CDN. Gândiți-vă la asta mai degrabă ca la conversia site-ului dvs. WordPress într-un site HTML static. Acest lucru are ca rezultat viteze incredibil de rapide și TTFB scăzut.

Minimizează HTML

La fel ca JavaScript și CSS, puteți reduce codul HTML. Pentru aceasta, recomand pluginul gratuit Autoptimize. Sau, dacă utilizați Cloudflare, puteți activa cu ușurință minimizarea pentru HTML în fila „Viteză → Optimizare”.

12. Diverse. optimizări, resurse și sfaturi

Am optimizat mii de site-uri WordPress de-a lungul anilor, așa că m-am gândit că ar fi util să includ o altă secțiune care conține diverse optimizări, sfaturi și resurse. Multe dintre acestea sunt lucruri pe care le văd zilnic lucrând cu clienții.

• Nu utilizați Google AMP . În primul rând, Google AMP vă îngreunează depanarea problemelor, deoarece, în anumite privințe, este un siloz de la site-ul dvs. principal. În al doilea rând, Google AMP este, de asemenea, greu de migrat, deoarece încearcă să te blocheze în ecosistemul lor. Doar petreceți acest timp suplimentar și concentrați-vă pe a face site-ul dvs. receptiv rapid pentru utilizatorii de dispozitive mobile și desktop. Va da roade pe termen lung. Din 2021, Google nu mai acordă tratament preferențial celor care folosesc AMP (sursă).
• Fiți foarte atenți cu Google Maps și doar plasați acest lucru în subsolul site-ului dvs. Este groaznic pentru performanță datorită dimensiunii mari de transfer. Am văzut că o hartă generează până la 26 de solicitări HTTP (aceasta nu este o greșeală de scriere). Recomand să folosiți pluginul nostru Perfmatters pentru a dezactiva Google Maps acolo unde nu ar trebui să se încarce. Sau fiți și mai creativ și înlocuiți-o cu o imagine bine concepută cu CTA și un link extern către Google Maps.
• Renunță la glisoarele și folosește în schimb un antet static. Glisoarele provoacă schimbări oribile de aspect (CLS) pentru Core Web Vitals, în special pe mobil. De asemenea, acestea au un impact negativ asupra conversiilor dvs.
• Nu combinați CSS sau JS . Aceasta este o tehnică depreciată de la HTTP/2 (acum HTTP/3/QUIC). Este mai rapid să vă încărcați fișierele individuale în paralel. De asemenea, facilitează mult depanarea problemelor de performanță.
• Lucrurile mărunte contează. De exemplu, am decis să dezactivez butonul „defilare în sus”. Aceasta înseamnă încărcarea unui fișier JavaScript mai puțin. Mi-am dat seama ca utilizator; Nu dau clic niciodată pe acestea.
• Utilizați Instrumentul Yellow Labs și Waterfaller pentru a efectua un audit al codului site-ului dvs. Acestea pot fi o imagine alternativă excelentă a lucrurilor de optimizat pe site-ul dvs., diferită de Core Web Vitals sau GTmetrix.
• Încărcați Gravatar-urile dvs. de pe CDN și încărcați-le leneș.
• ReCAPTCHA de la Google este un ucigaș de performanță . Am văzut că a scăzut scorurile mobile cu peste 30 de puncte de la sine. Încarcă 12 scripturi la o dimensiune totală de 480 KB, ceea ce este uriaș. Important este să nu îl folosiți pe tot site-ul. Cel mult, asigurați-vă că acest lucru se încarcă numai pe pagina dvs. de contact. Cu toate acestea, majoritatea pluginurilor de formulare de contact au măsuri anti-spam și honeypot deja încorporate. Dacă al tău nu, poți folosi un plugin gratuit precum WP Armour. Prin urmare, recomand să nu utilizați deloc un reCAPTCHA.
• Dacă utilizați Cloudflare, dezactivați Rocket Loader. Această funcție ar trebui să ajute la accelerarea site-urilor mobile, dar tot ce am văzut că face este să le încetinească și să provoace probleme. Dezactivarea acestuia va scăpa și de o solicitare de pe site-ul dvs. ( rocket-loader.min.js ).
• Dacă utilizați Cloudflare, dezactivați Obfuscarea adresei de e-mail. În primul rând, nu ar trebui să vă puneți adresa de e-mail nicăieri la vedere. Cere doar spam. Formularele de contact există pentru un motiv. În al doilea rând, dezactivarea acestei funcții va scăpa și de o solicitare pe site-ul dvs. ( email-decode.min.js ).

Buletine informative

Mai jos sunt câteva buletine informative la care vă recomand să vă abonați, deoarece oferă informații incredibile despre performanța web și industriile de dezvoltare.

• wdrl.info: O listă realizată manual, atent selectată de resurse legate de dezvoltarea web. Organizat și publicat de obicei în fiecare săptămână . Condus de @helloanselm.
• weekly.statuscode.com: Un buletin informativ săptămânal despre operațiuni web, infrastructură, performanță și instrumente, de la browser până la metal. Condus de @peterc.
• kinsta.com: Un buletin informativ săptămânal cu sfaturi și strategii WordPress pentru a genera mai mult trafic și venituri către afacerea dvs.! Fiind că Kinsta este o companie de găzduire de înaltă performanță, multe dintre articole sunt axate pe performanță.
• keycdn.com: Webperf, webdev, WordPress, livrare de conținut, o dată pe săptămână .
• smashingmagazine.com: Smashing Magazine este o revistă online pentru designeri și dezvoltatori web profesioniști. Sfaturi utile și resurse valoroase, trimise în fiecare a doua marți.

Utilizați pluginul nostru Perfmatters

Impact: viteză front-end și back-end (tabloul de bord de administrare WordPress).

Pluginul nostru Perfmatters poate ajuta la rezolvarea multor avertismente Core Web Vitals. Include, de asemenea, toate modificările pe care le folosim pe site-urile noastre pentru a câștiga un avantaj față de concurență.

Aceste caracteristici, dintre care unele le-am aprofundat mai sus, includ:

• Optimizați-vă baza de date (reviziuni, spam, coș de gunoi, tranzitorii și multe altele).
• Încărcați-vă leneș imaginile, cadrele iframe, videoclipurile YouTube și multe altele.
• Preîncărcați resurse și preluați link-urile pentru timpi de încărcare instantanee.
• Amânați JavaScript pentru a remedia resursele care blochează redarea.
• Întârzieți JavaScript la interacțiunea utilizatorului pentru a remedia JSS neutilizat.
• Eliminați CSS neutilizat.
• Dezactivați scripturile, interogările și CSS/JS inline pe o postare/pagină sau chiar la nivel de site cu Managerul de scripturi.
• Dezactivează emoji-urile, auto-pingback-urile, XML-RPC, încorporarea și multe altele.
• Găzduiește Google Analytics local.
• Rescriere CDN (conectați furnizorul dvs. CDN preferat).
• Schimbați-vă adresa URL de conectare WordPress (reduceți traficul botului și protejați-vă site-ul).
• Dezactivați și sau limitați revizuirile WordPress.
• Schimbați frecvența și sau dezactivați API-ul Heartbeat. Acest lucru poate ajuta la remedierea încetinirii admin-ajax.php.
• Modificați intervalul de salvare automată.

Evitați redirecționările

Impact: viteză front-end și back-end (tabloul de bord de administrare WordPress).

Fiecare redirecționare pe care o adăugați pe site-ul dvs. va afecta performanța, chiar dacă este doar puțin. Marea problemă a multor plugin-uri populare WordPress este că folosesc funcția wp_redirect (în special cele care rulează pe Nginx).

Înseamnă că fiecare redirecționare primită va trebui să execute cod PHP pe serverul tău pentru a procesa și a redirecționa cererea. Deși acest lucru ar putea să nu sune rău, imaginați-vă că aveți 2.000 de redirecționări (ceea ce este foarte comun), iar site-ul dvs. primește 500.000 de vizitatori pe lună. Vor fi mulți utilizatori care vor atinge redirecționările dvs.

O modalitate mai bună de a gestiona redirecționările WordPress este la nivel de server. În acest fel, puteți ocoli un strat și nu trebuie să executați niciun cod pe serverul dvs.

Un furnizor de găzduire WordPress precum Kinsta vă permite să vă gestionați toate redirecționările în tabloul de bord MyKinsta. Totul se face la nivel de server și există mai puțină umflare în baza de date WordPress.

Dezactivează WP-CRON

Impact: viteză front-end și back-end (tabloul de bord de administrare WordPress).

WP-CRON este un programator de sarcini pentru WordPress. Problema este că verifică lista sarcinilor programate care trebuie să ruleze la fiecare încărcare a paginii . Pe site-urile cu trafic ridicat, acest lucru poate deveni rapid o problemă de performanță. Din fericire, puteți dezactiva WP-CRON și, în schimb, puteți utiliza un cron la nivel de server (sistem).

Notă: nu recomand acest lucru pentru fiecare site WordPress. Dar dacă observați o activitate cron ridicată și credeți că ar putea încetini site-ul dvs., este un lucru bun să încercați.

Pentru a dezactiva WP-CRON, adăugați următoarele în fișierul dvs. wp-config.php , chiar deasupra liniei care spune „Asta e tot, opriți editarea! Blog fericit.”

 define('DISABLE_WP_CRON', true);

După ce este dezactivat, va trebui să apelați wp-cron.php de pe serverul dvs. sau de la un serviciu terță parte pentru a vă asigura că sarcinile programate încă se declanșează corect pe site-ul dvs. WordPress. Avantajul este că îl puteți avea să ruleze într-un program, în loc de tot timpul.

Dacă găzduiți cu un furnizor precum Kinsta și aveți WP-CRON dezactivat, cron-ul lor de pe server declanșează automat wp-cron.php la fiecare 15 minute. Nu este necesară o configurare suplimentară.

Pentru mai multe informații, Tom Mcfarlin are un articol bun despre cum să configurați corect joburile cron WordPress.

13. Rezultatele testului de viteză

Acum pentru partea distractivă. Iată rezultatele testelor de viteză pentru câteva dintre site-urile mele. Acestea includ bloguri, comerț electronic, afaceri mici etc. Toate au fost construite în întregime cu blocuri folosind GeneratePress și GenerateBlocks.

Am inclus atât rezultatele Google Core Web Vital, cât și rezultatele GTmetrix. Ambele sunt instrumente pe care le folosesc în mod regulat pentru a evalua îmbunătățirile pe măsură ce fac optimizări. Rețineți că Google Core Web Vitals emulează testul de pe un dispozitiv mobil. Testele GTmetrix sunt pe desktop.

workkup.com

Acesta este un blog.

Google Core Web Vitals

GTmetrix

perfmatters.io

Acesta este un site de comerț electronic.

Google Core Web Vitals

GTmetrix

nogluten.com

Aceasta este o proprietate Google AdSense grea care utilizează populara rețea de gestionare a reclamelor Mediavine. Își realizează toate veniturile din publicitate. După cum puteți vedea, este încă posibil să obțineți un scor bun chiar și atunci când rulați reclame. Urmărirea fiecărei optimizări menționate mai sus devine și mai critică în acest scenariu.

Google Core Web Vitals

GTmetrix

Nu pierde timpul urmărind un scor perfect de 100

Acum câțiva ani, am fost primul care a spus că scorurile PageSpeed ​​nu contează. Și asta era adevărat atunci. Cu toate acestea, vremurile s-au schimbat. Odată cu lansarea Google Core Web Vitals și faptul că acum este un factor de clasare, scorurile se datorează materiei într-o oarecare măsură. Trebuie să ieși din mentalitatea timpului total de încărcare și să-ți concentrezi atenția asupra modului în care se încarcă pagina ta .

Vestea bună este că, de obicei, scorurile se corelează mult mai bine acum cu timpul total de încărcare decât în ​​trecut. Pe măsură ce obțineți un scor mai mare, sperăm că veți obține timpi de încărcare mai rapid. Și amintiți-vă, vorbim mereu despre mobil în zilele noastre, deoarece acesta este ceea ce Google folosește pentru Core Web Vitals.

Acestea fiind spuse, vă îndemn să nu pierdeți prea mult timp urmărind un scor perfect de 100. Eu nu; În general, țintesc praguri. Există un lucru precum supraoptimizarea site-ului dvs. Dacă sunteți în verde, atunci petreceți-vă timpul construindu-vă afacerea. La ce este bun un factor de clasare dacă aveți conținut oribil? Urmărirea unui scor perfect poate fi cu ușurință o pierdere de timp.

Gândind dincolo de scoruri, ar trebui să țineți cont și de performanța percepută. Performanța percepută este cât de repede se simte site-ul dvs. pentru o persoană care îl vizitează. Dacă performanța percepută a site-ului dvs. este proastă, aceasta poate avea un impact direct asupra ratei de respingere și a timpului petrecut pe site. Și aceștia sunt, de asemenea, factori pe care îi folosește Google.

14. Convertiți site-ul sau obțineți un audit de performanță

Dacă tot nu sunteți mulțumit de viteza dvs., iată ce vă recomand să faceți.

Transformați site-ul dvs. în GeneratePress + GenerateBlocks

În primul rând, dacă utilizați o temă umflată sau un generator de pagini, vă recomand întotdeauna să treceți la o temă ușoară precum GeneratePress (împreună cu GenerateBlocks). Baza lor de cod este super ușoară și dezvoltată de la zero, având în vedere performanță. Uneori trebuie să reparați stratul de bază al site-ului dvs. și apoi totul va cădea la loc.

Dacă nu aveți timp să faceți acest lucru singur, vă recomand să contactați prietenii mei de la WP Boosters. Îți pot converti site-ul și designul existent în GeneratePress + GenerateBlocks .

Obțineți un audit de performanță web

Dacă aveți nevoie de ajutor suplimentar, vă recomand să obțineți un audit complet de performanță web al site-ului dvs. WordPress. Într-o zi s-ar putea să le ofer acestea, dar în prezent, nu am timp. Deocamdată, îl recomand cu căldură pe Mike Andreasen, un expert Codeable, pentru auditurile de performanță web. Mai jos este un exemplu de site al unui client înainte și după optimizările lui Mike.

Vorbesc regulat cu Mike. Este unul dintre puținii oameni de performanță web cu care sunt de acord cu aproape tot ceea ce privește optimizarea, care servicii și instrumente funcționează cel mai bine etc. Și, credeți-mă, este rar.

El a finalizat peste 1.300 de proiecte pentru clienți. Pot să garantez personal pentru munca lui, deoarece am graficele, testele de viteză și datele reale ale clienților pentru a le susține!

rezumat

Când vine vorba de accelerarea WordPress, se poate simți ca un loc de muncă cu normă întreagă. Dar nu trebuie. Dacă alegeți soluțiile potrivite de la început, de la găzduire, la teme și pluginuri, până la respectarea celor mai bune practici de optimizare, puteți obține vitezele dorite. Cu toate acestea, dacă încercați să săriți peste unul dintre acești pași, probabil că nu veți fi mulțumit de rezultate.

Văd atât de mulți clienți care aproape fac totul bine. Dar au o temă sau un generator de pagini prost codificat, care le distruge performanța. Sau au ales o temă de calitate, dar sunt pe un furnizor de găzduire ieftin. Trebuie să urmați toate sfaturile de mai sus.

Și da, poate fi nevoie de puțină muncă pentru a ajunge acolo. Vestea bună este că totul de mai sus se poate aplica cu ușurință la toate site-urile dvs. WordPress de acum înainte. În cele din urmă, veți ajunge la punctul în care obținerea acestor scoruri Core Web Vitals nu este o problemă atât de mare.

Înțeleg, de asemenea, că poate fi dificil pentru cei dintre voi care lucrează cu clienții. Tot ce le pasă este un scor mai rapid. Ei nu înțeleg ce trebuie făcut, achiziționat sau optimizat. Aveţi încredere în mine; Îți simt durerea și am fost acolo.

Dacă aveți de-a face cu un client frustrant, cea mai bună recomandare a mea este să îi transmiteți această postare pe blog. S-ar putea să fii surprins de răspunsul lor. De asemenea, s-ar putea să trebuiască să le explicați că vor trebui să investească puțini bani pentru a ajunge acolo. Odată ce înțeleg că nu există doar un comutator magic, poți să răsuci; poți începe să faci progrese.

Asigurați-vă că marcați această postare, deoarece o actualizez continuu. Tot ceea ce fac de acum înainte se concentrează în întregime pe Google Core Web Vitals, inclusiv pe dezvoltarea pluginului nostru Perfmatters.

Sperăm că unele dintre sfaturile și recomandările despre cum să accelerezi WordPress ți-au fost utile sau deschise ochii. Mi-ar plăcea să aud orice feedback de mai jos!