Viteza cu care un site sau o aplicație web se încarcă inițial influențează puternic prima impresie pe care o au utilizatorii. În acest material, vom prezenta modalități testate pentru a reduce timpii de așteptare la încărcarea inițială a paginii, care pot părea nesemnificativi, dar pot avea un impact major.
Importanța timpului de încărcare inițial
Intervalul de timp dintre momentul în care un vizitator introduce adresa site-ului și momentul în care vede conținutul este crucial pentru formarea unei prime impresii pozitive.
Studiile Amazon au demonstrat că o întârziere de doar 100 de milisecunde în încărcarea paginii duce la o scădere de 1% a vânzărilor.
Din păcate, mulți dezvoltatori web tratează optimizarea timpului de încărcare ca pe o chestiune secundară. Adăugarea continuă de biblioteci și funcționalități duce în timp la o scădere a ratei de conversie. Aceste pierderi sunt dificil de observat deoarece utilizatorii părăsesc paginile lente înainte ca datele să poată fi colectate.
Unele tehnici de optimizare se aplică la nivel de front-end, în timp ce altele la nivel de back-end. În ambele cazuri, viteza de încărcare este esențială pentru succesul unei aplicații web.
Monitorizarea performanței
Primul pas este monitorizarea performanței. Procesul de încărcare are mai multe etape, iar identificarea blocajelor este imposibilă fără a măsura fiecare segment.
Iată principalele etape ale procesului de încărcare:
Măsurători | Diagramă creată pe Terrastruct
Este important să se urmărească timpii de încărcare pentru fiecare etapă prezentată în diagramă.
Să vedem cum se poate realiza acest lucru.
Timpul de procesare a cererii pe server:
Această măsurătoare se efectuează pe server. Se măsoară timpul de la primirea cererii de către API și până la generarea răspunsului. Apelurile externe către baze de date, de exemplu, pot genera întârzieri semnificative.
Timpul de transfer al răspunsului către client:
Acest timp este mai dificil de măsurat, dar poate fi estimat adăugând un marcaj temporal la momentul în care răspunsul părăsește serverul și comparând cu ora curentă la nivelul clientului, imediat ce este posibil (de exemplu, printr-o etichetă script în secțiunea <head> a codului HTML).
Timpul până la prima apariție a conținutului:
Prima apariție a conținutului (First Contentful Paint) este momentul în care primul element este afișat în DOM. Acest element poate fi un simplu text, o culoare de fundal sau un indicator de încărcare. Această valoare poate fi măsurată folosind instrumentul Lighthouse din Chrome DevTools.
Timpul până la apariția celui mai mare conținut:
Apariția celui mai mare conținut (Largest Contentful Paint) este momentul în care cel mai mare element vizibil este afișat în fereastra browserului. Această etapă semnalează în general finalizarea fazei de „randare” a paginii, iar utilizatorul vede ecranul populat cu informații. Se măsoară tot cu Lighthouse.
Timpul până la interacțiunea utilizatorului:
Timpul până la interacțiune (Time to Interactive) este momentul în care utilizatorul poate efectua acțiuni precum derularea paginii, clicuri sau introducerea textului. O durată mare a acestui timp poate fi foarte frustrantă deoarece utilizatorul vede ecranul, dar nu poate interacționa cu el. Această măsurătoare se face tot cu ajutorul Lighthouse.
Reducerea dimensiunii codului
După ce ați colectat datele de performanță, puteți începe optimizarea. Optimizările implică compromisuri, iar măsurătorile vă vor arăta care dintre ele sunt cele mai importante.
Cea mai rapidă pagină este o pagină goală, dar multe aplicații adaugă cod fără a se observa o diferență majoră de viteză de încărcare. De obicei, aceste creșteri mici se cumulează în timp, iar la un moment dat aplicația devine brusc lentă. Atunci este momentul să se reducă dimensiunea codului.
Reducerea codului aduce două avantaje:
- Aplicația este transmisă mai rapid prin rețea.
- Browserul utilizatorului termină analiza codului mai repede.
Primul avantaj, cel referitor la transmisia pe rețea, este relativ mic; cererile fiind comprimate, reducerea cu 1 MB a codului sursă ar putea salva doar 10 KB de bandă. Dar reducerea timpului necesar pentru analizarea codului este semnificativă. Aplicația este utilizată pe browsere și computere diverse, multe dintre ele având o putere de procesare redusă. Este posibil ca și utilizatorii de telefoane mobile să aibă un timp de analiză mai lung. Diferența se poate măsura în secunde.
Cu cât codul este mai mic, cu atât browserul poate termina analiza mai rapid și poate începe rularea aplicației. Chiar și în cazul unui ecran de încărcare controlat de Javascript, analiza codului respectiv trebuie să se finalizeze mai întâi.
Dar nu se dorește eliminarea funcționalităților sau ștergerea codului. Există metode standard pentru a reduce codul fără a face aceste sacrificii.
- Utilizarea minificatoarelor. Aceste instrumente scurtează numele variabilelor (signUpDarkModeButton devine ss), elimină spațiile și fac codul mai compact, fără a afecta funcționalitatea.
- Importul parțial. Adesea, bibliotecile conțin multe funcții neutilizate. În loc să se importe întreaga bibliotecă, se pot importa doar funcțiile necesare.
- Eliminarea codului mort. Uneori se păstrează cod pentru depanare sau caracteristici depreciate, care nu mai sunt utilizate. Instrumentele din lanțul de compilare JavaScript pot detecta codul mort și îl elimină automat din versiunea de producție.
Împărțirea codului în segmente
După ce ați redus cât mai mult dimensiunea codului, puteți optimiza și mai mult prin reducerea codului necesar pentru încărcarea inițială.
Dacă 20% din codul dumneavoastră activează o funcție accesibilă doar după câteva clicuri, timpul alocat pentru analiza acestui cod la încărcarea inițială este timp pierdut. Împărțirea codului în segmente reduce semnificativ timpul până la interacțiune.
În loc de o rețea complexă de importuri pentru toate fișierele Javascript, identificați secțiunile care pot fi separate ușor. De exemplu, o componentă care încarcă biblioteci mari poate fi izolată în propriul fișier, care va fi importat doar atunci când utilizatorul este gata să interacționeze cu acea componentă.
Există numeroase biblioteci care ajută la încărcarea amânată a resurselor, în funcție de framework-ul utilizat. Nu este recomandată împărțirea fiecărei componente, deoarece se va obține un timp de încărcare inițial rapid, dar utilizatorul va trebui să aștepte la fiecare interacțiune. Identificați segmentele mari care pot fi izolate și împărțiți codul în consecință.
Randarea pe server
Browser-ele consumă mult timp cu analiza și compilarea codului, mai ales pe Chromebook-uri și telefoane mobile. Pentru a reduce timpii de încărcare, o tehnică eficientă este randarea pe server. În loc să se livreze o pagină goală completată ulterior cu Javascript, se poate rula un motor Javascript (de obicei Node.js) pe server pentru a completa conținutul și datele pe cât posibil.
Serverele sunt mai rapide și mai performante decât browser-ele utilizatorilor. Analiza codului Javascript este totuși necesară pentru interacțiunea cu aplicația, dar randarea pe server permite ca ecranul de încărcare sau bara de progres să apară imediat. În plus, datele inițiale sunt deja disponibile, iar clientul nu mai trebuie să facă o cerere separată pentru a le obține.
Compresia resurselor
Resursele media îmbunătățesc aspectul unei pagini. O pagină nu se simte încărcată complet până când aceste resurse nu sunt redate. Acestea pot fi imagini de fundal, pictograme, fotografii de profil sau chiar indicatorul de încărcare. Uneori, aspectul paginii se schimbă odată cu încărcarea resurselor, ceea ce face ca utilizatorul să vadă o pagină care „saltă” în timpul încercării de interacțiune. Uneori, aceste resurse sunt elementul cu cea mai mare dimensiune la încărcare.
Resursele media pot fi foarte mari. O singură imagine poate avea câțiva megaocteți, iar încărcarea multor pictograme poate depăși limita de solicitări simultane, cauzând o coadă lungă de încărcare.
Nu se dorește utilizarea directă a imaginilor de mari dimensiuni descărcate de pe internet. Imaginile trebuie redimensionate la dimensiunea la care vor fi afișate. De exemplu, o fotografie de profil afișată într-un element mic de 50×50 pixeli, nu are nevoie de întreaga rezoluție. Într-un astfel de caz, este necesară redimensionarea ei.
Imaginile pot fi comprimate în funcție de format. Webm este un format recomandat, dar domeniul compresiei web este într-o continuă îmbunătățire, existând tot timpul noi formate. Din cauza naturii schimbătoare a formatelor, unele browsere s-ar putea să nu le accepte pe cele mai noi! Tehnologia modernă permite browserelor să încarce formatele pe care le acceptă.
Comprimă resursele la cel mai recent și performant format, dar păstrează și o versiune mai puțin modernă. Utilizează elementele <img> și <video> care pot gestiona aceste formate în mod corect.
Concluzii
Acestea sunt cinci dintre cele mai eficiente metode pentru a îmbunătăți viteza de încărcare inițială a unei aplicații. Astfel veți îmbunătăți ratele de conversie, satisfacția utilizatorilor și chiar poziționarea în rezultatele căutărilor, deoarece motoarele de căutare recompensează paginile cu încărcare rapidă. La Terrastruct folosim aceste tehnici și multe altele, pentru ca utilizatorii să poată crea și vizualiza diagramele cât mai rapid posibil.