Framehole: PageSpeed ​​6.0 lacună pentru un scor perfect ușor

Fiecare dezvoltator web bun știe că PageSpeed ​​Insights de la Google și Lighthouse cu sursă deschisă utilizate în culise sunt instrumentele cele mai de ultimă generație pentru a ajuta la identificarea performanței relative a unui site web. De asemenea, oferă informații cheie asupra modificărilor pe care le puteți face pentru a îmbunătăți această viteză percepută. PageSpeed ​​a devenit standardul de aur pentru viteza și lent pe web.

Nu strică faptul că Google însuși urmărește acum acest scor PageSpeed ​​al fiecărui site web și îl folosește ca una dintre numeroasele intrări pentru a determina cine ajunge în partea de sus a rezultatelor căutării și cine este exilat în purgatoriul paginii 10.

Există o întreagă industrie și multe milioane de dolari care își schimbă mâinile doar pentru a optimiza și îmbunătăți acest scor în speranța de a ajunge mai aproape de scorul perfect de neatins de 100. Cea mai nouă versiune a PageSpeed/Lighthouse 6.0 include un nou set de valori preferate pentru dezvoltatorii de pretutindeni a optimiza pentru. Aceste noi valori sunt: ​​Cea mai mare vopsea de conținut (LCP), Schimbarea aspectului cumulativ (CLS) și Timpul total de blocare (TBT). Google are un articol întreg care explică aceste noi „Vitale web”, care face o treabă excelentă, detaliind esențialul modului în care sunt măsurate.

Cu această nouă lansare, este o nouă oportunitate pentru industria performanței web de a vinde mai multe servicii, deoarece site-urile web au nevoie acum de schimbări noi și diferite pentru a obține acel punctaj maxim. Ei bine, nu este nevoie să cheltuiți un ban, vă voi arăta o schimbare simplă care vă duce imediat chiar și din adâncurile iadului de 60 de scoruri, până la paradisul de 100 de scoruri.

TLDR: PageSpeed ​​nu mai ține cont de impactul vitezei încorporate de terțe părți, cum ar fi YouTube și Reclame

Dacă vrei doar carnea, răspunsul este că cele mai recente modificări ale Google pun o greutate mare pe Largest Contentful Paint. Aceasta este măsurarea cât timp durează pentru ca cel mai mare element de pe ecran să apară la încărcarea unui site web. Este un bun proxy pentru percepția utilizatorului asupra vitezei de încărcare. Problema este că Largest Contentful Paint nu ia în considerare niciun conținut încorporat, chiar dacă acel conținut se califică din punct de vedere tehnic drept cel mai mare element de deasupra pliului.

Fără să speculez cu privire la motivațiile pentru a nu evidenția impactul asupra performanței al conținutului încorporat terță parte, cum ar fi videoclipurile YouTube și încorporațiile mari de publicitate, aș spune pur și simplu că va stimula oamenii să facă modificări greșite pentru a îmbunătăți viteza și va muta web-ul înapoi.

De exemplu, acest lucru ar părea absurd, deși nu este puțin probabil, având în vedere cât de important a devenit scorul PageSpeed. Îmbunătățim scorul PageSpeed ​​al unui site web de la 60 până la 100, doar prin iframing versiunea lentă originală a site-ului. Comenzile rapide doar pentru a confirma rezultatele sunt aici, dar citiți mai jos pentru a vedea cum un utilizator care își optimizează scorul progresează la soluția noastră finală Framehole.

 # Verify you have the new Lighthouse 6.0 installed npm install -g lighthouse # This one should have a score somewhere around 60 :( lighthouse https://webvitalsfail.b-cdn.net/ --view # Instantly to 100 lighthouse https://webvitalsfail.b-cdn.net/anything-100.html --view

Cat Dance v1 - Link

Acesta este un exemplu de site web simplu pentru a afișa o pagină promoțională cu aspect tipic pentru aplicația noastră mobilă, „Cat Dance”. Conține un gif animat super tare pentru a demonstra pisicile dansatoare pe care le obțineți atunci când instalați aplicația noastră fierbinte de presă pe telefon. Acum să verificăm scorul Lighthouse 6.0 pentru acest site:

Woah, un scor de performanță de 60 este dureros pentru cei cu performanțe superioare ca noi. Cum ar putea acest site simplu, să fie atât de lent conform Google? Să ne concentrăm pe „Cea mai mare vopsea de conținut”, deoarece aceasta este una dintre noile valori introduse în această versiune.

Acest lucru este foarte util, deoarece recomandă utilizarea unui videoclip pentru conținut animat și ne arată că elementul Cea mai mare vopsea de conținut este gif-ul animat al pisicilor noastre care dansează. Cool, hai să trecem la:

Cat Dance v2 - Link

În această versiune înlocuim gif-ul animat cu un mp4 redat folosind elementul video HTML5 nativ. Acest lucru ar trebui să fie mult mai bun, deoarece mp4-urile au fost literalmente create pentru conținut animat și vor fi mult mai mici decât gif-ul animat comparabil.

Ei bine, acest lucru se mișcă cu siguranță în direcția corectă. Ne-am îmbunătățit cu 14 puncte doar prin trecerea la un mp4 pentru animația minunatelor noastre pisici dansatoare. Trecerea de la un LCP de 104,9 la 9,9 este cu siguranță o îmbunătățire substanțială. Dar nu suntem mulțumiți de un 74. Este ca o notă „C” și suntem un grup de absolvenți A+.

Se pare că LCP-ul nostru este acum generat de videoclip, care are sens în locul gif-ului animat anterior. Dar poate că facem o treabă proastă cu codificarea, imaginea afișului sau ceva, așa că hai să ne jucăm cu asta mai departe.

Cat Dance v3 - Link

Pentru această versiune, vom folosi doar YouTube pentru videoclipul animat cu pisici. În acest fel, dacă este ceva legat de codificarea video, acest lucru va ajuta la eliminarea acestui lucru. În general, poate că codificarea noastră naivă video ne reține, așa că haideți să vedem ce scor obținem astfel.

Stai puțin, băieții ăștia sunt genii, îmi duc scorul PageSpeed ​​până la 99. Trebuie să ne fi încurcat cu adevărat codificarea video pentru a fi cauzat scorul de 76, nu?

E ceva în neregulă aici? În versiunile anterioare, pisicile dansatoare erau întotdeauna cel mai mare element de pe ecran. Și privind capturile de ecran de la acest test arată că videoclipul este încă de aceeași dimensiune în această versiune. Deci, de ce susține că textul <h1> nostru este cel mai mare element? Răspunsul se află în descrierea de pe Google a celei mai mari valori de vopsea de conținut. Această valoare include cel mai mare element, inclusiv videoclipuri, imagini, SVG-uri, DAR NU IFRAME

Stai ce? Acest lucru nu poate fi corect. Dacă iframe-ul este cel mai mare element și se încarcă lent ca melasa, nu contează... nu se numără! Deci, cadrele iframe sunt ca niște găuri negre de performanță magică în care ne putem încorpora elementele lente sau mari și nu vor afecta scorul nostru de performanță. În nici un caz! Să încercăm asta.

Cat Dance v4 - Link

Pentru a ne testa teoria, ne vom întoarce la site-ul nostru exact versiunea 1 cu gif-ul animat mare și tot. Vom face doar o singură schimbare. Să încărcăm gif-ul animat într-un iframe și să vedem ce se întâmplă cu Scorul nostru PageSpeed.

Sfinte naibii... poate fi asta cu adevărat soluția? Luăm orice probleme care provoacă scăderea scorului de viteză a site-ului web, le aruncăm într-un iframe, apoi BOOM, fără probleme. Adică știm că acest lucru nu schimbă cu adevărat cât de repede se încarcă lucrurile, pentru că este același fișier, aceeași dimensiune, doar încărcat într-un iframe. La fel ca ceea ce s-a întâmplat atunci când ați folosit încorporarea YouTube, de fapt nu a schimbat atât de mult viteza. Iframe-urile sunt doar portaluri magice pentru a depăși scorul PageSpeed, se pare.

Dar faptul de a muta toate elementele noastre lente în cadre iframe este un fel de durere în fund...

Cat Dance v5 - Framehole'd Link

Avem nevoie de o modalitate mai simplă de a crește imediat viteza oricărui site web. A trebui să înlocuiți în mod selectiv elementele cu versiuni iframed este doar super complicată și poate să nu merite pe termen lung. Știm să muncim mai inteligent, nu mai greu.

Ce se întâmplă dacă punem întregul site într-un iframe? În acest fel, soluția noastră ar fi separată de baza de cod reală a site-ului. Am putea chiar să facem acest tip de lucru la margine sau în NGINX, separând total acest lucru de impactul oricărui cod existent.

V5-ul nostru este doar pagina de la v1, încadrată într-un pachet gol. Același gif animat mare, fără optimizări. Și acum am trecut de la 60 la 100. Este Sfântul Graal și nu trebuie să se lucreze la site-ul propriu-zis.

Asta e prost

Dacă te gândești că acesta este cel mai mare ulei de șarpe pe care l-ai văzut vreodată și niciun dezvoltator în minte nu i-ar păsa de această schimbare a scorului, deoarece viteza de bază nu s-a schimbat deloc, atunci cred că ai dreptate pe partea uleiului de șarpe, dar foarte greșit dacă oamenilor le pasă.

Rețineți, PageSpeed ​​este standardul de aur în ceea ce privește performanța web. Google chiar folosește acest scor pentru a-și alimenta algoritmul. Dacă nu ați auzit vreodată de la un client că vrea să vadă modul în care produsul dvs. îi afectează scorul PageSpeed, atunci nu ați vorbit cu destui clienți. Le pasă pentru că Google îi pasă , iar scorul ar trebui să însemne ceva. Uitați-vă de câte cuvinte mi-au trebuit să explic acest lucru și să-mi imaginez că îi spun unui client că se înșeală în legătură cu produsul dvs. care încetinește site-ul față de scorul PageSpeed ​​simplificat și ușor de înțeles, care proclamă cât de greșit sunteți.

Oricare ar fi motivul pentru aceasta, la sfârșitul zilei, alegerea de a exclude iframe-urile din calculele pentru cât durează până când conținutul cel mai semnificativ apare pe un site web este pur și simplu greșit!

Utilizarea timpului de afișare al celui mai mare element ca indicator al vitezei pe un site web are tot sensul din lume. Încă afectează percepția vitezei, chiar dacă este încărcată într-un iframe. Și trecerea mai departe cu un scor care exclude conținutul încorporat este dăunătoare obiectivului de a face web-ul mai rapid. Conținutul încorporat nu primește o trecere gratuită, mai ales atunci când acesta este cauza timpilor de încărcare lenți.

Dacă scorul se derulează cu aceste valori web, atunci suntem în căutarea unui web care este stimulat să se mute înapoi la un site mozaic cu publicitate uriașă și încorporare terță parte, ignorând complet costul de viteză al acelor articole. Nu vă îndoiți că vor exista oameni care implementează exact iframing-ul întregului site așa cum este menționat în acest articol, deoarece managementul dorea cel mai mare scor PageSpeed ​​posibil.

Comportamentul este modelat de modul în care păstrăm scorul