Performanța și viteza web: cele mai bune tehnici
Publicat: 2021-08-30Viteza de încărcare și performanța web sunt pe buzele tuturor în comunitățile SEO și webperf și, mai larg, în e-marketing și comerț electronic.
După cum ne reamintește Andy Davies, consultant și referință în performanța web:
„Contextul influențează experiența,
experiența influențează comportamentul,
comportamentul influențează veniturile afacerii.”
Deci, indiferent dacă încercați să vă creșteți veniturile, SEO sau ambele, trebuie să știți că paginile rapide sunt esențiale pentru calitatea experienței dvs. de utilizator. Viteza ajută, de asemenea, să trimită semnalele potrivite către Google, care a luat în considerare viteza de la actualizarea Page Experience.
După cum știți de asemenea, un site trebuie să răspundă așteptărilor utilizatorilor înainte de a le îndeplini pe cele ale motoarelor de căutare. Astfel, viteza de afișare și interactivitate fac parte din premisele pentru o experiență de utilizator de calitate, în primul rând pentru a promova implicarea și conversiile! De remarcat, de exemplu, că, conform unui studiu Google, 77% dintre internauții sunt mai înclinați să comande pe un site sau o aplicație care le permite să își finalizeze rapid achiziția.
Dar care tehnici au cel mai vizibil impact asupra vizitatorilor tăi, pentru a le oferi o experiență de navigare lină și un real sentiment de viteză?
Iată o listă de verificare organizată pe pârghii de optimizare, pentru o mai bună viteză de afișare și interactivitate.
Optimizați viteza de afișare a unui site
Cu cât o pagină este mai ușoară, cu atât mai puțin timp are nevoie pentru a fi afișată.
Pe lângă optimizarea resurselor, puteți seta rata de afișare și dimensiunile diferitelor elemente care alcătuiesc o pagină pentru a spori senzația de viteză și de utilizare. Iată câteva tehnici esențiale:
- Comprimarea imaginilor în cele mai eficiente formate
Noua generație de formate WebP (recomandat de Google) și AVIF (care oferă rezultate și mai bune) vă permit să reduceți greutatea imaginilor cu până la 50% față de JPEG, păstrând în același timp calitatea vizuală optimă. Știind că greutatea imaginilor reprezintă aproximativ 50% din greutatea paginilor, este o pârghie esențială pentru a-ți face paginile rapide. - Adaptați afișarea conținutului media și a imaginilor la diferite ecrane
Redimensionați și definiți dimensiunea conținutului media și a imaginilor în funcție de dacă utilizatorul vă vizitează site-ul de pe un mobil sau de pe computer. - Reduceți greutatea resurselor paginii
Optimizați-vă codul: minimizarea (eliminarea caracterelor inutile) a fișierelor HTML, JS și CSS și compresia resurselor (formatele Gzip și Brotli) și, în unele cazuri, concatenarea, sunt toate bune practici pentru a reduce greutatea paginilor și, prin urmare, pentru a accelera afișarea în browser. - Încărcare leneșă
Aceasta tehnica consta in incarcarea doar a ceea ce este vizibil pe ecran, in loc sa incarce intreaga pagina. Cu alte cuvinte, browserul oferă doar efortul strict necesar în raport cu ceea ce trebuie să vadă vizitatorul pe ecranul său. - Optimizați fonturile
Puteți optimiza formatul fonturilor dvs. (de ex. WOFF2, care economisește 30 până la 50% din dimensiunea fișierului) și, de asemenea, puteți alege să afișați text chiar dacă fontul nu este încă încărcat de browser, pentru a accelera redarea. - Eliminați resursele care blochează și încărcați-le asincron
Evitați blocarea redării paginilor dvs.: preferați încărcarea resurselor în mod asincron, în special pentru CSS (CSS critic), JS (async și defer) și fonturi (display:swap).
Desigur, dacă nu ai de ales pentru că unele resurse sunt esențiale la începutul încărcării paginii, aceste resurse trebuie să fie cât mai uşoare. - Adoptă strategia de stocare în cache potrivită
Pentru ca paginile să se afișeze cât mai rapid posibil pentru utilizatorii dvs., stocați în cache elementele statice.
Pentru a face acest lucru, trebuie să identificați în prealabil conținutul dinamic și conținutul static și să definiți regulile pentru stocarea în cache a conținutului static: pentru cât timp și pe ce cache (browser, origine sau CDN).
[Studiu de caz] Gestionarea accesării cu crawlere a botului Google
Citiți studiul de cazÎmbunătățiți interactivitatea: pagini cu răspuns instantaneu
Pe lângă viteza cu care elementele sunt afișate în browser, capacitatea de a interacționa este esențială pentru a oferi o satisfacție totală utilizatorilor tăi.
În caz contrar, îi expuneți la frustrare care se traduce în comportamente precum clicuri de furie, mouse-ul care se mișcă frenetic pe pagină sau derulare aleatorie pentru a verifica dacă pagina funcționează.
În cel mai rău caz, vizitatorii tăi revin la pagina anterioară sau părăsesc site-ul pentru a face o nouă căutare pe Google sau merg la concurenții tăi.
Amintiți-vă că în cazul unei experiențe negative, 43% dintre utilizatorii de Internet vor merge pe site-ul unui concurent pentru următoarea lor achiziție. Prin urmare, trebuie să vă oferiți mijloacele pentru a atrage dar și pentru a vă păstra vizitatorii.
Cel mai adesea, scripturile terță parte și Javascript pot fi responsabile pentru o interactivitate proastă. Într-adevăr, atâta timp cât browserul este ocupat cu preluarea, analizarea și executarea JavaScript, nu poate răspunde la interacțiunile utilizatorului.
Din nou, există tehnici pentru a vă optimiza codul și a terților și pentru a le permite vizitatorilor să se bucure de o experiență optimă:
- Reduceți impactul terților prin întârzierea încărcării acestora
Puteți începe să încărcați și să executați scripturi după ce elementele de conținut prioritare sunt afișate pe pagina dvs. Dar atenție: rețineți că amânarea încărcării JavaScript nu îl face gratuit în ceea ce privește performanța!
Poate fi vorba de amânarea încărcării unor funcționalități (chat, widget-uri, urmărire...) după afișarea elementelor principale pentru a liniști utilizatorul, dar nu anulează timpul necesar browserului pentru procesarea codului, ci doar o schimbă în timp. - Reduceți timpul de execuție JavaScript
Împărțiți sarcinile care necesită timp browser-ului dvs. (Sarcini lungi) și, de asemenea, asigurați-vă că favorizați procesarea scurtă ca răspuns la interacțiunile utilizatorului (de exemplu, evitați să ascultați în mod activ anumite evenimente, cum ar fi derularea; și profitați de momentele în care browserul a timp liber pentru a rula anumite procesări JavaScript). - Reduceți activitatea firului principal
Browserul va putea răspunde mai rapid la interacțiuni prin reducerea numărului de solicitări și a dimensiunii schimburilor.
Economisiți și timp: automatizați tehnicile de optimizare a site-ului dvs
Tocmai am acoperit două aspecte foarte importante ale experienței utilizatorului: viteza de afișare și interactivitate. Vestea bună este că toate optimizările pe care tocmai le-am menționat în această listă de verificare pot fi automatizate!
De asemenea, este posibil să fi conectat la două dintre Core Web VItals de la Google care vă permit să evaluați aceste aspecte, respectiv: cea mai mare vopsea de conținut și, respectiv, prima întârziere de intrare.
Desigur, ar trebui să vă gândiți și la îmbunătățirea stabilității vizuale a paginilor dvs. pentru o experiență optimă a utilizatorului, lucrând la scorul cumulativ de schimbare a aspectului.
Trebuie să știți că aceste 3 valori (LCP, CLS și Total Blocking Time, sau TBT, un echivalent al FID) reprezintă 70% din scorul atribuit de PageSpeed Insights.
Deci, logic, orice faci pentru a-ți accelera paginile și a optimiza aceste valori va avea un impact pozitiv asupra utilizatorilor tăi, precum și asupra scorurilor tale de performanță.
Pe scurt, puteți aplica UX aceeași abordare ca și în SEO: conținutul și experiența de calitate garantează satisfacția utilizatorilor și contribuie la o mai bună indexare de către Google.
De asemenea, ca și în SEO, optimizările webperf trebuie menținute în timp.
Acest lucru necesită timp și expertiză, deoarece tehnicile și valorile evoluează rapid. Mai mult, chiar și în echipele mari, resursele tehnice nu au întotdeauna timpul sau cunoștințele necesare pentru a menține eficient viteza unui site; iar desfășurarea de resurse și energie pentru o operațiune de comando care cade ca un sufle este foarte frustrant și chiar descurajator.
Așadar, decât să pierzi timpul cu întreținerea, să te temi de efectele secundare la fiecare evoluție a site-ului și să înmulțim pluginurile cu riscul de a-l supraîncărca, este mai bine să automatizezi aplicarea tuturor tehnicilor de optimizare frontend cu un singur instrument!
Trebuie să știți că, în majoritatea cazurilor, pentru site-urile de comerț electronic cu trafic mare, rentabilitatea investiției unei soluții de optimizare webperf este ușor de măsurat.
Într-adevăr, Google a estimat că -0,1 secunde de timp de încărcare poate duce la +8% conversii, pe care o soluție de optimizare a front-end le poate realiza foarte ușor.
La Fasterize, am constatat că adesea, chiar și o creștere a ratelor de conversie mai mici de 1 punct este suficientă pentru a asigura rentabilitatea investiției soluției noastre SaaS; ca să nu mai vorbim de timpul economisit de echipele tehnice.
Afacerile fiind tendințele războiului, puteți face singur calculul și este ușor de făcut! Vă permite să înțelegeți interesul automatizării optimizării performanței și să convingeți și să vă implicați echipele interne.
Economisiți timp pe toate fronturile!