Acing Evaluarea PageSpeed ​​Insights de la Google

Dacă sunteți proprietarul unei afaceri, sunteți interesat să obțineți un clasament de căutare mai bun pentru site-ul dvs. Dacă sunteți dezvoltator, va trebui să răspundeți nevoilor clientului și să creați un site capabil să se claseze bine. Google ia în considerare sute de caracteristici atunci când determină ordinea site-urilor web în pagina sa de clasare pentru motoarele de căutare (SERP).

Viteza paginii a fost menționată oficial ca un atribut important de clasare la jumătatea anului 2018. În acest articol, vom explica scorurile de performanță cărora proprietarii de afaceri ar trebui să le acorde atenție: PageSpeed ​​Insights. Vom aprofunda câteva detalii tehnice care vor ajuta dezvoltatorii de software să facă îmbunătățiri în cazuri complicate, cum ar fi cele legate de aplicațiile cu o singură pagină.

De ce contează testul Acing Google PageSpeed ​​Insights

Când Google a introdus PageSpeed ​​Tools în 2010, majoritatea proprietarilor de site-uri au făcut cunoștință cu acesta. Cei care nu au făcut-o ar trebui să deschidă PageSpeed ​​Insights pentru a-și verifica site-urile.

Serviciul oferă detalii despre modul în care un site web funcționează atât pe browsere desktop, cât și pe cele mobile. Este ușor să ratezi faptul că poți comuta între ele folosind filele Mobile și Desktop din partea de sus a analizei:

Deoarece dispozitivele mobile sunt compacte și urmăresc să păstreze durata de viață a bateriei, browserele lor web tind să prezinte performanțe mai scăzute decât dispozitivele care rulează sisteme de operare desktop, așa că așteptați-vă ca scorul desktop să fie mai mare.

Companiile mari de tehnologie nu vor nota în roșu în niciun domeniu, dar site-urile mai mici care rulează cu bugete mai strânse pot. Proprietarii de afaceri pot rula PageSpeed ​​Insights și pe site-urile concurenților și pot compara rezultatele cu ale lor pentru a vedea dacă trebuie să investească în îmbunătățirea performanței.

Ce scor este suficient pentru a promova evaluarea PageSpeed?

PageSpeed ​​folosește valorile de la Core Web Vitals pentru a oferi o evaluare de promovare/eșec.

Acest instrument are trei scoruri:

1. PageSpeed ​​afișează în mod vizibil scorul de performanță într-un cerc colorat în secțiunea Diagnosticare probleme de performanță. Este calculat folosind mașinile virtuale încorporate ale PageSpeed, cu caracteristici care se potrivesc cu dispozitivul mobil sau desktop mediu. Vă rugăm să rețineți că această valoare este pentru încărcarea paginii și pentru mașina virtuală a lui PageSpeed ​​și nu este luată în considerare de motorul de căutare Google.

   Această cifră este utilă atunci când dezvoltatorii implementează modificări la un site web, deoarece le permite să verifice efectul modificărilor asupra performanței. Cu toate acestea, motorul de căutare Google ia în considerare doar scorurile detaliate.

2. Scorurile detaliate pentru o anumită pagină — și pentru cele pe care PageSpeed ​​le consideră similare cu pagina analizată — sunt calculate din statisticile pe care browserele Chrome le colectează pe computere reale și le trimit la Google. Aceasta înseamnă că performanța pe Firefox, Safari și alte browsere non-Chromium nu sunt luate în considerare.

3. Rezumatul pentru toate paginile site-ului este obținut în același mod ca scorul pe o singură pagină. Pentru a-l accesa, selectați fila Origine în loc de fila Această adresă URL. Adresa URL listată sub bara de file va fi diferită, deoarece Origin va afișa pagina principală a site-ului (numai domeniul).

Google actualizează constant lista de valori luate în considerare de PageSpeed, așa că cea mai bună sursă a ceea ce este important este secțiunea Experience / Core Web Vitals din Google Search Console, presupunând că ați adăugat deja site-ul dvs. acolo.

Pentru a promova Evaluarea Core Web Vitals, toate scorurile trebuie să fie verzi:

Pentru ca valorile să fie verzi, pagina trebuie să obțină un punctaj de cel puțin 75% în test, iar mulți utilizatori trebuie să experimenteze valori egale sau mai bune. Pragul diferă pentru fiecare scor și este semnificativ mai mare pentru FID.

Pentru a înțelege mai bine valorile, faceți clic pe titlul scorului:

Acest link face trimitere la o postare de blog care explică mai detaliat pragurile pentru categoria dată.

Datele sunt acumulate timp de 28 de zile și există alte două diferențe majore față de ceea ce ar putea experimenta utilizatorii reali:

1. Performanța dispozitivelor reale și vitezele de internet variază, așa că acest test produce rezultate diferite de rezultatele mașinii virtuale de la PageSpeed.
2. Evaluările detaliate sunt calculate pe toată durata de viață a paginii, luând cele mai slabe valori din fiecare interval de cinci secunde în care pagina este deschisă.

Dacă mulți dintre utilizatorii unui site locuiesc în regiuni cu acces lent la internet și folosesc dispozitive învechite sau cu performanțe slabe, diferența poate fi surprinzătoare. Aceasta nu este una dintre recomandările de îmbunătățire ale PageSpeed ​​Insights. La prima vedere, nu este evident cum să rezolvăm această problemă, dar vom încerca să explicăm mai târziu.

Îmbunătățirea scorurilor utilizând recomandările PageSpeed ​​Insights

Partea principală a evaluării provine din modul în care majoritatea utilizatorilor deschid pagina. În ciuda faptului că nu toți utilizatorii vizitează un site web pentru o perioadă lungă de timp și majoritatea vizitează un site ocazional, toți utilizatorii sunt luați în considerare în evaluări, așa că îmbunătățirea vitezei de încărcare a paginii, care afectează toată lumea, este un loc bun de început.

Putem găsi recomandări în secțiunea Oportunități de sub rezultatele evaluării.

Putem extinde fiecare articol și obține recomandări detaliate pentru îmbunătățiri. Există multe informații, dar iată cele mai de bază și importante sfaturi:

• Îmbunătățiți viteza de răspuns a serverului. De exemplu, dacă utilizați găzduire partajată, actualizați-vă planul sau migrați la un server privat virtual (VPS) sau chiar la un server dedicat. De asemenea, nu toate gazdele sunt egale. Încercați să alegeți găzduire de încredere, cu hardware bun și garanții de funcționare.
• Reduceți volumul de trafic necesar pentru a vă deschide site-ul. Pentru a realiza acest lucru, puteți înlocui imaginile cu altele optimizate: schimbați formatul acestora, ajustați rezoluția și compresia, înlocuiți imaginile animate cu unele statice, dacă este necesar, etc. Sistemele populare de gestionare a conținutului au plug-in-uri care simplifică acest proces.
• Memorați mai multe date în cache. Cel mai simplu mod de a face acest lucru este să utilizați o rețea de livrare de conținut (CDN) precum Cloudflare pentru conținut static (imagini, stiluri, scripturi, pagini care nu se modifică). Puteți configura regulile de stocare în cache pentru a optimiza performanța.

Acum să aruncăm o privire la factorii mai complicati, în care un programator cu experiență poate ajuta.

Cum să depanați scorurile în timpul vieții paginii

După cum sa menționat, Google Search Console ia în considerare scorurile medii obținute de la browserele bazate pe Chromium pentru ultimele 28 de zile și include, de asemenea, valori pentru întreaga durată de viață a paginii.

Incapacitatea de a vedea ce se întâmplă în timpul vieții paginii este o problemă. Mașina virtuală a lui PageSpeed ​​nu poate lua în considerare modul în care funcționează pagina odată ce este încărcată și utilizatorii interacționează cu ea, ceea ce înseamnă că dezvoltatorii site-ului nu vor avea acces la recomandări pentru îmbunătățiri.

Soluția este să includeți biblioteca Google Chrome Web Vitals în versiunea de dezvoltator a unui proiect de site pentru a vedea ce se întâmplă în timp ce un utilizator interacționează cu pagina.

Diverse opțiuni despre cum să includeți această bibliotecă se află în fișierul README.md de pe GitHub. Cel mai simplu mod este să adăugați următorul script. Este ajustat pentru a afișa valori pe durata de viață a paginii în <head> al șablonului principal :

 <script> (function() { var script = document.createElement('script'); script.src = 'https://unpkg.com/web-vitals/dist/web-vitals.iife.js'; script.onload = function() { // When loading `web-vitals` using a classic script, all the public // methods can be found on the `webVitals` global namespace. webVitals.getCLS(console.log, true); // CLS supported only in Chromium. webVitals.getLCP(console.log, true); // LCP supported only in Chromium. webVitals.getFID(console.log, true); webVitals.getFCP(console.log, true); webVitals.getTTFB(console.log, true); } document.head.appendChild(script); }()) </script>

Rețineți că calculul Cumulative Layout Shift (CLS) și Largest Contentful Paint (LCP) este disponibil numai pentru browserele bazate pe Chromium, inclusiv Chrome, Opera, Brave (dezactivați Brave Shields pentru ca biblioteca să funcționeze) și majoritatea celorlalte browsere moderne, cu excepția Firefox , care se bazează pe un motor Mozilla și pe browserul Apple Safari.

După ce adăugați scriptul și reîncărcați pagina, deschideți instrumentele de dezvoltare ale browserului și comutați la fila Consolă.

Pentru a vedea cum sunt calculate acele valori pentru versiunea mobilă, comutați la dispozitivul mobil utilizând bara de instrumente Dispozitiv. Pentru a-l accesa, faceți clic pe butonul Comutați bara de instrumente dispozitiv din instrumentele pentru dezvoltatori ale browserului dvs.

Acest lucru va ajuta la identificarea problemelor. Extinderea rândului în consolă va afișa detalii despre ceea ce a declanșat schimbarea scorului.

De cele mai multe ori, sfatul automat pentru alte scoruri este suficient pentru a vă face o idee despre cum să le îmbunătățiți. Cu toate acestea, CLS se modifică după ce pagina este încărcată cu interacțiunile utilizatorului și pur și simplu este posibil să nu existe recomandări, în special pentru aplicațiile cu o singură pagină. Este posibil să vedeți un scor perfect de 100 în secțiunea Diagnosticare probleme de performanță, chiar dacă pagina dvs. nu trece de evaluarea pentru factorii luați în considerare de motorul de căutare.

Pentru cei dintre noi care se confruntă cu CLS, acest lucru va fi de ajutor. Extindeți înregistrarea jurnalului, apoi intrări, intrare specifică, surse, sursă specifică și comparați currentRect cu previousRect :

Acum că putem vedea ce s-a schimbat, putem identifica câteva modalități de remediere.

Reducerea deplasării cumulative a aspectului

Dintre toate scorurile, CLS este cel mai greu de înțeles, dar este crucial pentru experiența utilizatorului. Schimbarea aspectului are loc atunci când un element este adăugat la modelul obiect document (DOM) sau dimensiunea sau poziția unui element existent este modificată. Determină schimbarea elementelor de sub acel element, iar utilizatorul simte că nu poate controla ce se întâmplă, făcându-i să părăsească site-ul web.

Este relativ ușor să gestionați acest lucru pe o pagină HTML simplă. Setați atributele de lățime și înălțime pentru imagini, astfel încât textul de sub ele să nu fie deplasat în timp ce se încarcă. Acest lucru va rezolva probabil problema.

Dacă pagina dvs. este dinamică și utilizatorii lucrează cu ea ca și cu o aplicație, luați în considerare următorii pași pentru a rezolva problemele CLS:

1. Setați pagina să afișeze conținut la 500 de milisecunde după ce utilizatorul face clic pe un buton sau pe un link fără a declanșa CLS.
2. Modificați parametrii care nu provoacă deplasarea altor elemente DOM: fundal, culoare etc.
3. Asigurați-vă că alte elemente nu se vor deplasa atunci când schimbați dimensiunea sau poziția unui element.

Recomandări mai detaliate sunt disponibile pe pagina Google Developers Optimize CLS.

Cum 500 de milisecunde pot reduce CLS

Pentru a ilustra modul de utilizare a pragului de 500 de milisecunde, vom folosi un exemplu care implică încărcarea unei imagini.

În mod normal, când un utilizator încarcă un fișier, scriptul adaugă un element <img> în DOM, iar apoi browserul client descarcă imaginea de pe server. Preluarea unei imagini de pe un server poate dura mai mult de 500 de milisecunde și poate cauza o schimbare a aspectului.

Dar există o modalitate de a obține imaginea mai rapid, deoarece este deja pe computerul client și, astfel, de a crea elementul <img> înainte de expirarea termenului de 500 de milisecunde.

Iată un exemplu universal pe ECMAScript pur fără biblioteci care vor funcționa pe majoritatea browserelor moderne:

 <!DOCTYPE html> <html> <head></head> <body> <input type="file"> <img> <script> document.getElementById('input').addEventListener('change', function() { var imageInput = document.getElementById('input'); if (imageInput.files && imageInput.files[0]) { var fileReader = new FileReader(); fileReader.onload = function (event) { var imageElement = document.getElementById('image'); imageElement.setAttribute('src', event.target.result); } fileReader.readAsDataURL(imageInput.files[0]); } }); </script> </body> </html>

După cum am văzut mai devreme, rezolvarea acestor tipuri de probleme ar putea necesita agilitate mentală. Cu dispozitivele mobile, în special cele ieftine, și cu internetul mobil lent, arta anilor '90 a optimizării performanței devine utilă, iar abordările de programare web de școală veche ne pot inspira tehnica. Instrumentele moderne de depanare a browserului vă vor ajuta în acest sens.

Actualizați Google Search Console

După găsirea și eliminarea problemelor, motorul de căutare Google poate dura ceva timp pentru a înregistra modificările. Pentru a actualiza rezultatele puțin mai rapid, informați Google Search Console că ați remediat problemele.

Selectați pagina la care lucrați folosind caseta de proprietate Căutare din colțul din stânga sus. Apoi navigați la Core Web Vitals în meniul hamburger din stânga:

Faceți clic pe butonul Deschidere raport din partea dreaptă sus a raportului mobil sau desktop. (Dacă ați întâmpinat probleme cu ambele, nu uitați să repetați aceleași acțiuni pentru al doilea raport mai târziu.)

Apoi, accesați secțiunea Detalii de sub diagramă și faceți clic pe rândul cu avertismentul de validare eșuată.

Apoi faceți clic pe butonul Vedeți detaliile pentru această problemă.

Și, în sfârșit, faceți clic pe Start New Validation.

Nu vă așteptați la rezultate imediate. Validarea poate dura până la 28 de zile.

Optimizarea este o luptă continuă

Optimizarea SEO este un proces continuu și același lucru este valabil și pentru optimizarea performanței. Pe măsură ce publicul tău crește, serverele primesc mai multe solicitări, iar răspunsurile devin mai lente. Creșterea cererii înseamnă, de obicei, că noi funcții sunt adăugate site-ului dvs. și pot afecta performanța.

Când vine vorba de aspectul cost/beneficiu al optimizării performanței, este necesar să se găsească echilibrul corect. Dezvoltatorii nu trebuie să obțină cele mai bune valori pe toate site-urile, tot timpul. Concentrați-vă pe ceea ce cauzează cele mai semnificative probleme de performanță; veți obține rezultate mai repede și cu mai puțin efort. Corporațiile majore își permit să investească o mulțime de resurse și să obțină toate scorurile, dar acesta nu este cazul întreprinderilor mici și mijlocii. În realitate, o afacere mică, cel mai probabil, trebuie doar să egaleze sau să depășească performanța concurenților lor, nu grele din industrie precum Amazon.

Proprietarii de afaceri ar trebui să înțeleagă de ce optimizarea site-ului este critică, ce aspecte ale muncii sunt cele mai importante și ce abilități să caute la oamenii pe care îi angajează pentru a o face. Dezvoltatorii, la rândul lor, ar trebui să țină cont de performanță în orice moment, ajutându-și clienții să creeze site-uri care nu numai că se simt rapide pentru utilizatorii finali, ci și scor bine în PageSpeed ​​Insights.