Treceți fiecare test CWV și PageSpeed ​​Insights cu aceste tehnici de dezvoltare WordPress

În 2021, la StrategiQ, o agenție digitală full stack cu sediul în Marea Britanie, am făcut ca obiectivul nostru să începem să dezvoltăm fiecare site web pe care îl dezvoltăm și îl lansăm pentru a depăși performanța Google Core Web Vitals (CWV) și PageSpeed ​​Insights (PSI) raport.

Core Web Vitals arată cum funcționează site-ul dvs. într-o varietate de moduri. Aceasta include viteza de încărcare a primului conținut pe o pagină (First and Large Contentful Paint), viteza de timp pe care un utilizator trebuie să aștepte înainte de a putea interacționa cu acesta (Time to Interactive) și schimbarea aspectului (Cumulative Layout Shift) .

Testarea CWV-ului este la fel de ușoară ca o plăcintă - pur și simplu accesați https://pagespeed.web.dev/ și introduceți adresa. Zona de sus afișează cele mai recente date din lumea reală din ultimele 28 de zile, în timp ce secțiunea inferioară (un scor din 100, atât pentru dispozitive mobile, cât și pentru desktop) sunt date generate de laborator.

De ce contează asta? Ei bine, pentru că așa spune Google.

În iulie 2018, Google a anunțat că viteza este un factor pentru modul în care un site apare în rezultatele căutării, în special pe mobil. Sursă.

În 2020, au anunțat, de asemenea, că valorile experienței utilizatorului (care formează Core Web Vitals / CVW) sunt acum utilizate în modul în care clasifică site-urile. Sursă.

Este simplu: cu cât un site este mai rapid și mai performant, cu atât este mai bine să se claseze.

Așa că echipa de dezvoltare de la StrategiQ a decis că este rândul nostru să ajutăm departamentul SEO. Experții SEO își pot scăpa cât de greu pot, dar un site care funcționează îngrozitor poate face mult mai mult rău decât bine. Un site care trece de CWV și PSI, totuși, se va asigura că munca lor excelentă are o trambulină genială.

Ceea ce merită remarcat, este că CWV și PSI sunt notoriu greu de trecut. Marea majoritate a site-urilor nu, chiar și multe dintre cele mai importante site-uri web din lume . Gândiți-vă că YouTube, BBC și chiar și WP Engine se luptă să obțină un permis atât pe mobil, cât și pe desktop ( scuze băieți ).

Deci, ce am făcut pentru a ne asigura că am văzut acele gogoși verzi încântătoare ale încântării?

Am dezbrăcat totul și am lucrat la o singură mantră simplă:

Încărcați cât mai puțin posibil, cât mai repede posibil.

Deși nu voi intra în cele mai mici detalii, voi trece prin metodele noastre principale pentru a menține temele WordPress personalizate cât mai simplificate posibil.

În primul rând, să vorbim despre hardware. Nu putem continua fără să vorbim mai întâi despre WP Engine. Fără îndoială, ei sunt unul dintre, dacă nu cei mai buni furnizori de găzduire specifici WordPress. Am fost încântați de suportul impresionant, timpul de funcționare, mediile pentru fiecare instalare, backup-urile și cât de ușor sunt gestionate certificatele SSL și domeniile, printre multe alte caracteristici. În plus, memorarea lor în cache și optimizarea rapidă a vitezei asigură ca site-ul să funcționeze cât de repede poate la nivel de server.

Cu un server de înaltă performanță la bază, știm că acum depinde de noi să facem ca un site web să funcționeze cât mai repede posibil.

La fel ca majoritatea agențiilor, avem propriul șablon de bază realizat manual, pe care îl folosim ca punct de plecare pentru toate site-urile noastre personalizate. Fiecare site pe care îl creăm este proiectat și codificat intern – nu o temă pre-construită la vedere.

Șablonul nostru de bază are metodele noastre de optimizare a vitezei, precum și o serie de funcții inteligente și componente reutilizabile pe care le avem nevoie pentru fiecare proiect. Având acel punct de pornire, ne economisește timp pe termen lung și ne asigură că fiecare site va funcționa cel mai bine, cu puțină suprasarcină cerută de dezvoltator.

Știu la ce te gândești – treci la lucrurile bune!

Nu mă voi deranja să enumerez lucrurile obișnuite plictisitoare pe care le vezi pe fiecare postare de pe blog, cum ar fi „imagini cu încărcare leneșă”. Dar dacă nu o faceți, este într-adevăr o necesitate – avem o funcție de imagine care imprimă imaginile noastre leneș încărcate cu etichete srcset și sizes (cunoscute ca imagini receptive).

Să intrăm direct în asta.

Metoda 1: blocare și coadă

Se întâmplă foarte multe: un proiect are doar un fișier css și un fișier js și ajung să se baloneze la dimensiunea unei planete mici. Ce urmează? Google vă întreabă „de ce încărcați stiluri și javascript nu sunt folosite pe această pagină?”. De ce? De ce?!

Este un punct valid. De ce ar trebui să încărcați o mulțime de css și javascript pentru un întreg site web când aveți nevoie doar de o fracțiune din acestea pe pagină?

Toate site-urile noastre sunt construite în întregime cu blocuri Gutenberg. Aceasta înseamnă că, pentru fiecare bloc, puteți utiliza puterea genială de a pune în coadă fișierele dvs. css și js.

Pentru fiecare bloc, creăm un fișier separat css și js doar pentru acel fișier (dacă este necesar). Acestea sunt apoi minimizate (a se vedea punctul următor pentru mai multe informații) și puse în coadă bloc cu bloc.

Rezultatul? Încarcăm doar ceea ce este de fapt acolo pe fiecare pagină.

Metoda 2: utilizați un program de rulare a sarcinilor, cum ar fi gulp, pentru a vă combina și a reduce activele

Toate activele generate sunt diminuate de o funcție gulp (altele sunt disponibile, cum ar fi grunt). Este demn de remarcat faptul că în urmă cu multe luni, Google ar fi preferat concatenarea în locul minificării (o solicitare mare ar fi fost de preferat celor 5 cereri mici), dar, din moment ce apariția HTTP/2 (care multiplexează mai multe solicitări simultan), acesta nu mai este un problema.

Din nou, facem acest lucru pentru a păstra fișierele cât mai mici posibil. Așa că acum nu numai că încărcăm doar activele care se află pe pagină, ci și ele sunt de dimensiuni mici.

Metoda 3: opriți redarea activelor care blochează

Ne asigurăm că toate aceste active puse în coadă sunt în partea de jos a paginii și, prin urmare, nu blochează randarea.

Chiar și scoatem din coadă jQuery care vine cu WordPress și punem în coadă o nouă versiune (una care nu are vulnerabilități de securitate), tot în partea de jos a paginii.

Dar ce zici de un FOUC (Flash of Unstyled Content) te aud spunând?

Metoda 4: deasupra pliului css

Un fulger de conținut fără stil are loc atunci când o pagină se încarcă inițial fără stiluri, deoarece foaia de stil este în partea de jos a paginii. Odată ce foaia de stil se încarcă, stilurile sunt aplicate, site-ul clipește și în sfârșit pare corect.

Pentru a remedia acest lucru, am împărțit stilurile de pliere de mai sus și le-am adăugat ca etichetă <style> inline în cap. Nu este un activ care blochează randarea și nu primim un FOUC.

Metoda 5: WP Rocket

Ultima piesă a puzzle-ului este cel mai bun plugin de performanță WP Rocket. Construit împreună cu inginerii WP Engine, este singurul plugin de cache permis pe platforma lor de găzduire.

Rezultatele?

Ei bine, scorurile vorbesc de la sine.

SportsAidEastern este o organizație caritabilă care sprijină sportivii britanici. Potrivit PSI, site-ul pe care l-am dezvoltat pentru ei are un scor extraordinar de 97/100 pe mobil și 100/100 pe desktop.

Calligo oferă servicii de date transformatoare, iar scorurile site-ului lor sunt chiar mai bune decât SportsAid; ajungând la un 99/100 aproape perfect pe mobil și 100/100 pe desktop.

Concluzie

Sperăm că aceasta a fost o gură de aer proaspăt de la toate celelalte postări de pe site-ul „cum să-ți accelerezi WordPress” de pe site și dacă te chinui să obții un permis, atunci poate că am evidențiat ceva ce poți încerca.

StrategiQ este prima agenție de marketing strategică. Prin descoperirea unor perspective valoroase de piață, dezvăluirea oportunităților de a învinge concurenții, definirea și furnizarea de strategii de marketing eficiente, echipa noastră ajută mărcile ambițioase să-și depășească obiectivele prin consultanță, creativitate, marketing și tehnologie.
Indiferent dacă aveți nevoie de strategie, consiliere, resurse sau expertiză, faceți primul pas. Povestește-ne despre tine și vom vedea cum te putem ajuta.