03/29/2024

5 cele mai eficiente moduri de a reduce timpul de încărcare a site-ului

Cât de repede se încarcă inițial site-ul sau aplicația dvs. este prima impresie pe care o au utilizatorii dvs. În acest ghid, vom enumera tehnici dovedite pentru a reduce secunde valoroase de la încărcarea inițială a paginii.

Timpul inițial de încărcare

Timpul care durează de la momentul în care utilizatorul sau clientul dvs. introduce numele domeniului site-ului dvs. până când văd conținutul este cele mai importante câteva secunde pe care le aveți pentru a face o primă impresie bună.

Amazon a descoperit că fiecare 100 de milisecunde de latență le-a costat 1% din vânzări.

Și totuși, mulți dezvoltatori web tratează acest lucru ca pe o idee ulterioară. Din ce în ce mai multe biblioteci sunt adăugate pentru tot mai multe funcții și, treptat, în timp, încep să vadă mai puține conversii. Mai rău încă, aceste pierderi de conversie sunt greu de detectat, deoarece abandonează o pagină cu încărcare lentă înainte de a avea timp să trimită valori.

Unele dintre acestea sunt tehnici care pot fi implementate pe front-end, iar altele pe back-end. Oricum, aplicațiile web trebuie să fie încărcate rapid.

Adăugați măsurătorile potrivite

Primul lucru pe care trebuie să-l faceți este să adăugați măsurători. Există multe etape ale procesului de încărcare și nu veți ști unde este blocajul fără a măsura segmentele potrivite.

Următoarele sunt cele mai importante etape ale procesului de încărcare:

Măsurători | Diagrama creată pe Terrastruct

Acest lucru înseamnă că ar trebui să urmăriți valorile pentru fiecare segment al acestei diagrame.

Să vedem cum ați putea face asta.

Solicitarea browserului la răspuns a fost transmisă:

Măsurați acest lucru pe serverul dvs. Doriți să primiți momentul în care API-ul dvs. primește solicitarea, când deservește un răspuns. În funcție de dacă se fac apeluri externe către, de exemplu, baze de date, acest lucru poate fi fie foarte scurt, fie un blocaj semnificativ.

Răspunsul primit la răspunsul primit:

Acest lucru este mai dificil de măsurat, dar o modalitate de a face acest lucru este să adăugați un marcaj de timp atunci când răspunsul dvs. părăsește serverul și să măsurați acest lucru cu ora curentă de partea utilizatorului în primul moment posibil (o etichetă de script în capul codului HTML pagină).

Răspuns primit la prima vopsea mulțumită:

Prima vopsea plină de conținut se referă la momentul în care primul element este redat pe DOM. Acesta poate fi ceva la fel de simplu ca un text, un fundal sau un rotor de încărcare. Acest lucru poate fi măsurat rulând Lighthouse în instrumentele de dezvoltare Chrome.

  Ce este Bard și cum te poate ajuta?

Prima vopsea plină la cea mai mare vopsea satisfăcătoare:

Cea mai mare vopsea de conținut se referă la momentul în care cel mai mare element este redat în fereastra de vizualizare a browserului utilizatorului. Acest lucru semnalează de obicei sfârșitul porțiunii de „redare” a încărcării paginii, iar utilizatorul vede un ecran populat. Acest lucru este măsurat și prin rularea Lighthouse.

Cea mai mare vopsea plină de conținut la timp la interactiv:

În cele din urmă, timpul de interacțiune se referă la momentul în care utilizatorul poate efectua acțiuni precum un defilare, un clic și să tastați. Poate fi deosebit de frustrant dacă această durată este lungă, deoarece vor vedea un ecran randat în fața lor, dar nu pot face nimic atunci când se așteaptă că vor putea! Aceasta este o altă măsurătoare pe care Lighthouse ne ajută să o măsurăm.

Reduce codul

Acum că aveți măsurători, puteți începe să faceți optimizări. Optimizările au compromisuri, iar măsurătorile vă vor spune care dintre ele merită.

Cea mai rapidă pagină de încărcat este o pagină goală, dar o mulțime de coduri pot fi adăugate la o aplicație înainte ca cineva să observe diferența de viteză de încărcare dintre aceasta și o pagină goală. Ceea ce se întâmplă adesea este că incrementele sunt atât de mici încât nu percepeți diferența de la o construcție la alta până când într-o zi, începe pur și simplu să se simtă lent. Îți dai seama că aplicația ta este umflată și în acest moment reducerea codului va face diferența.

Obțineți două îmbunătățiri ale vitezei atunci când reduceți codul:

  • Aplicația dvs. este transferată în rețea mai rapid.
  • Browserul utilizatorului termină analizarea codului mai repede.

Prima accelerare este mică; deoarece cererile sunt comprimate prin cablu, dacă tăiați 1 MB de cod sursă, s-ar putea economisi doar 10 KB la lățime de bandă. Cu toate acestea, accelerarea de la analizarea mai puțin este semnificativă. Utilizatorii dvs. rulează probabil aplicația dvs. pe un întreg spectru de browsere și computere, dintre care multe nu au puterea de calcul care ar putea analiza codul la fel de repede ca și singur.

Sau ar putea rula pe dispozitive mobile, cu și mai puțină putere de calcul. Diferența poate fi în mărimea secundelor.

Deci, cu cât aveți mai puțin cod, cu atât browserul poate termina mai repede analizarea și începe să ruleze aplicația. Chiar dacă doriți să afișați un ecran de încărcare pe care îl controlează Javascript, acesta a fost precedat de analizarea codului respectiv.

Dar nu doriți să tăiați funcții sau să ștergeți codul. Din fericire, există câteva practici standard pentru a reduce codul fără a fi nevoie să faceți asta.

  • Rulați codul prin intermediul minificatoarelor. Minificatorii efectuează optimizări precum scurtarea numelor lungi în nume scurte (signUpDarkModeButton devine ss), eliminarea caracterelor spațiilor albe și altele pentru a obține codul cât mai compact posibil, fără a pierde nimic.
  • Importați parțiale. Bibliotecile sunt adesea pline de lucruri de care nu aveți nevoie, dar sunt ambalate împreună sub un pachet umbrelă. Poate doriți doar o funcție specifică a unei biblioteci de utilitate, așa că în loc să importați întreaga bibliotecă, puteți importa doar codul de care aveți nevoie.
  • Cod mort tree-shake. Uneori lăsați codul în scopuri de depanare sau nu ați curățat complet o caracteristică depreciată și, deși este în codul sursă, nu rulează niciodată. Există instrumente în lanțul de instrumente JavaScript, cum ar fi Webpack, care pot detecta codul mort sau dependențele neutilizate și le pot elimina automat din versiunea de producție.
  Cum să aplici un filtru la mai multe straturi simultan în Photoshop

Împărțiți codul în bucăți

După ce ați redus cât mai mult cod posibil din aplicația dvs. generală, vă puteți gândi să stoarceți în continuare această idee și să reduceți codul necesar pentru încărcarea inițială.

Să presupunem că 20% din codul dvs. activează o funcție a aplicației dvs. la care utilizatorii pot ajunge numai după câteva clicuri. Ar fi pierdut timp ca browserul să analizeze acel cod înainte de a afișa un ecran de încărcare. Împărțirea codului în bucăți poate reduce semnificativ timpul de interactiv.

În loc să aveți un grafic de dependență interconectat al importurilor pentru toate fișierele Javascript, identificați zonele care pot fi tăiate cu ușurință. De exemplu, poate o componentă încarcă niște biblioteci grele. Puteți izola acea componentă în propriul fișier și apoi importa doar atunci când utilizatorul este gata să interacționeze cu acea componentă.

Există mai multe biblioteci pentru a amâna încărcarea, în funcție de framework-ul pe care îl utilizați. Nu este nevoie să treceți peste bord cu acest lucru și să împărțiți fiecare componentă, deoarece atunci utilizatorul are o încărcare inițială rapidă și trebuie să aștepte fiecare interacțiune ulterioară. Găsiți cele mai mari piese pe care le puteți segmenta și împărțiți-vă codul sursă acolo.

Randare pe partea serverului

Având în vedere că browserele trebuie să facă atâta analiză și compilare intensivă și să aibă utilizatori pe Chromebookuri și dispozitive mobile, o tehnică comună pentru a reduce timpii de încărcare este ca serverele dvs. să preia o parte din această încărcare. Acest lucru înseamnă că, în loc să dai o pagină goală și apoi să folosești Javascript pentru a completa tot conținutul, așa cum fac majoritatea aplicațiilor cu o singură pagină în zilele noastre, poți rula un motor Javascript pe serverul tău (de obicei Node.js) și completa. cât mai multe date și conținut posibil.

Serverele dvs. vor fi mult mai rapide și previzibile decât browserele utilizatorilor. În mod inevitabil, vor trebui totuși să analizeze un cod Javascript pentru ca aplicația să fie interactivă. Totuși, redarea pe server poate completa o mare parte din conținutul inițial, astfel încât atunci când utilizatorul primește pagina, aceasta afișează deja un ecran de încărcare sau o bară de progres cel puțin.

  13 Cel mai bun CRM juridic pentru firme de avocatură și avocați

Și dacă sunt necesare date pentru vizualizarea inițială, clientul nu trebuie să facă o cerere separată pentru a obține asta; va fi deja hidratat în aplicație pentru ca clientul să îl folosească.

Comprimați active

Elementele fac ca o pagină să prindă viață, iar o pagină nu se simte complet încărcată până când aceste elemente nu termină randarea. Acesta poate fi fundalul dvs., pictogramele interfeței cu utilizatorul, o poză de profil de utilizator, chiar și rotorul de încărcare. Adesea, materialele pot schimba și aspectul, așa că dacă un utilizator începe să încerce să interacționeze cu ceva, pagina poate continua să sară în timp ce materialele sunt încărcate. Uneori, aceste materiale sunt cea mai mare vopsea de conținut.

Dar activele sunt, de asemenea, una dintre cele mai grele părți ale unei aplicații. O imagine poate ajunge la câțiva megaocteți, iar încărcarea multor pictograme poate depăși cu ușurință limita maximă de solicitări simultane de rețea a browserului, provocând o coadă uluitoare de încărcare.

Aproape niciodată nu doriți să descărcați o imagine de pe internet și apoi să o faceți referire în aplicația dvs. Imaginile trebuie redimensionate la cele mai mici dimensiuni posibile la care vor fi afișate. Dacă aveți un profil de utilizator afișat într-un element minuscul de 50 de pixeli pe 50 de pixeli, fără a redimensiona, aplicația dvs. va lua timp pentru a descărca imaginea completă care arată clară ca fundal de pe desktop și apoi o va redimensiona la dimensiunea mică.

În al doilea rând, imaginile pot fi comprimate în funcție de formatul lor. În zilele noastre, webm este formatul preferat, dar domeniul compresiei pe web este îmbunătățit constant și multe formate noi sunt la orizont. Datorită naturii în schimbare a formatelor, este posibil ca unele browsere să nu le accepte pe cele mai noi! Din fericire, tehnologia browserului poate permite browserului utilizatorului să încarce orice format acceptă.

Așadar, comprimați la cel mai recent și mai bun format, dar păstrați și o versiune mai puțin modernă și utilizați elemente de imagine și video care acceptă formatele care se retrag.

Concluzie

Acestea sunt cinci dintre cele mai eficiente tehnici pentru a oferi utilizatorilor o primă încărcare extraordinar de rapidă a aplicației. Acestea vă vor îmbunătăți ratele de conversie, fericirea utilizatorilor și chiar clasamentele de căutare, deoarece SEO recompensează timpii de încărcare rapidi. La Terrastructfolosim aceste tehnici și multe altele, astfel încât utilizatorii să poată crea și vizualiza diagramele pe care le vedeți în acest articol cât mai repede posibil.