Dacă site-ul dvs. durează mai mult de 3 secunde pentru a se încărca, ați putea pierde deja aproape jumătate din vizitatori.

Da, acesta este un fapt, dovedit de mai multe studii de cercetare. Timpii lungi de încărcare pot avea un devastator impact asupra ratelor de conversie ale aplicației dvs. Pe de altă parte, optimizarea timpului de încărcare a paginii duce la îmbunătățiri vizibile în experiența clienților, ratele de conversie, SEO și, în cele din urmă, produsele dvs. succes.

Deci, să spunem că ați construit recent un site web sau o aplicație frontend folosind un cadru JS modern (Angular, React, VueJS etc.). Cum ne putem asigura că performanța nu va împiedica succesul?

Să începem cu începutul. Trebuie să adunăm cumva niște date. Când vine vorba de măsurarea performanței unei aplicații frontend, instrumentele în care am cea mai mare încredere sunt:

Ambele instrumente vă pot ajuta să țineți evidența tuturor KPI-urilor de performanță majore (Indexul de viteză al paginilor, Timpul până la interactivitate, Prima pictură conținută etc.).

Far este inclus în instrumentele de dezvoltare Chrome și, analizându-vă site-ul web / aplicația web, vă poate oferi câteva sugestii cu adevărat utile despre cum să le stimulați.

ad-banner
Cum sa sporiti performanta aplicatiei dvs front end
Farul Chrome vă poate oferi câteva sugestii cu adevărat utile

Cu Curba de viteză puteți avea toate aceste KPI-uri, plus posibilitatea de a le monitoriza în timp.

Așadar, acum că suntem capabili să ne măsurăm succesul, să continuăm cu optimizarea părților site-ului nostru care joacă cel mai mare rol.

Imagini

Imaginile sunt o parte esențială a fiecărui site web. În medie, imaginile reprezintă mai mult de 60% din datele încărcate pe paginile web. Fiind o componentă atât de critică a aproape tuturor site-urilor web, optimizarea imaginii este, în opinia mea, cel mai important și probabil cel mai scăzut fruct agățat.

1. Redimensionați imaginile și faceți-le receptive.

Cel mai important lucru de verificat este că nu utilizați o rezoluție mai mare decât cea de care aveți cu adevărat nevoie. Deci, trebuie să redimensionați imaginile pentru a se potrivi exact cerințelor aspectului dvs.

1611539707 888 Cum sa sporiti performanta aplicatiei dvs front end
Aspectele responsive au nevoie de imagini receptive

Mai mult, trebuie să vă asigurați că imaginile dvs. sunt la fel receptiv așa cum este aspectul dvs. Există un instrument excelent pe care l-am folosit în ultima vreme, care vă poate ajuta să generați toate versiunile diferite ale imaginilor de care ați putea avea nevoie și, de asemenea, să generați codul HTML5 care le poate utiliza. Se numeste Generator de puncte de întrerupere a imaginii responsive. De obicei prefer să generez 8-10 imagini diferite.

Desigur, puteți utiliza codul HTML5 generat în orice aplicație sau site web frontend. În plus, dacă sunteți înghițit, ați putea automatiza acest proces cu gulp-responsive conecteaza.

2. Asigurați-vă că sunt leneși încărcați.

Încărcarea leneșă înseamnă practic că amânăm încărcarea imaginilor care nu sunt necesare imediat. De obicei, orice imagine care nu este vizibilă pentru utilizatori în fereastra lor curentă, poate fi încărcată într-un moment ulterior, când imaginea intră sau este pe cale să intre în fereastra de vizualizare.

Indiferent de cadrul pe care îl utilizați, puteți găsi un plugin care poate încărca leneș imaginile pentru dvs. (de ex v-leneș-imagine în VueJS), totuși ai putea să-ți construiești și tu propria implementare. Doar asigurați-vă că utilizați modul modern de a detecta când un element intră sau iese din fereastra browserului, API IntersesectionObserver.

Bonus: utilizați un CDN pentru livrarea imaginilor

Dacă ați optimizat deja dimensiunea și numărul de imagini pe care le încarcă site-ul dvs. și mai ales dacă va fi disponibil la nivel global, puteți utiliza și un rețea de livrare a conținutului (CDN) pentru a le servi.

În câteva cuvinte, un CDN vă cache imaginile în rețeaua sa de servere distribuită la nivel global. Deci, dacă un utilizator din Australia solicită o imagine de pe site-ul dvs., în loc să preia acea imagine de pe serverul dvs. din Europa, CDN o va livra de la altul, mai aproape de acel utilizator din Australia. Aceasta reduce timpul de călătorie dus-întors necesar pentru a încărca imaginea.

CSS, JS și HTML

Toate cadrele moderne vă optimizează codul în timpul timpului de construcție a producției (împărțirea codului, scuturarea arborelui, micșorarea etc.). Ce poți face în plus?

1. Optimizați documentul HTML principal

HTML este coloana vertebrală a aproape oricărei aplicații web. Când vine vorba de referințarea resurselor din documentul HTML, există câteva bune practici pe care ar trebui să le urmați. Se recomandă:

  • Plasați referințe CSS în partea de sus a antetului documentului HTML pentru a asigura redarea progresivă.
  • Plasați atributele JavaScript în partea de jos a corpului HTML și preferă încărcarea scriptului asincronizat. Acest lucru va preveni orice <script> etichete de la blocarea procesului de redare HTML.

2. Asigurați-vă că încărcați doar ceea ce aveți nevoie

1611539707 760 Cum sa sporiti performanta aplicatiei dvs front end
Componente și module de încărcare leneșă

Angular, React și VueJS vă oferă toate funcții de încărcare leneșă. Trebuie doar să vă împărțiți codul în mod corespunzător, în funcție de propriile dvs. nevoi și să încărcați numai modulele de care aveți nevoie, de îndată ce aveți nevoie de ele. De exemplu, dacă aveți o aplicație de comerț electronic, trebuie să vă asigurați că modulul Coș sau modulul Plăți nu sunt încărcate atunci când utilizatorul se află pe pagina principală.

Compresie și stocare în cache

În general, pentru toate elementele care sunt esențiale pentru frontend (imagini și cod), ar trebui să aplicați compresia și să le cache în mod corespunzător.

Comprimarea fișierelor va face activele aplicației dvs. puțin mai ușoare și va reduce timpul de călătorie dus-întors necesar pentru a le servi. Una dintre cele mai frecvente metodele de compresie a fișierelor utilizate sunt Gzip, o metodă excelentă pentru micșorarea fragmentelor de cod, documente, imagini și fișiere audio.

Brotli este un alt algoritm de compresie a fișierelor și are o popularitate în creștere. Acest algoritm open source este actualizat în mod regulat de către inginerii de software de la Google și alte organizații. S-a dovedit a comprima fișiere la un raport mult mai bun decât alte metode existente.

Puteți activa metoda de compresie preferată pe nginx, apache sau pe orice server utilizați, modificându-le fișierele de configurare (activând brotli pe nginx sau activând brotli pe apache).

Când vine vorba de cache, se numește cea mai frecvent utilizată tehnică de cache (recomandată și de Lighthouse) Utilizați cache-ul browserului. Din nou, îl puteți activa modificând fișierele de configurare ale serverului (activând Leverage Browser Caching).

rezumat

Când vine vorba de site-uri web și aplicații frontend, performanța este un subiect imens și ar trebui să o luăm în serios.

Sper că acest articol v-a ajutat să înțelegeți și să vă permită să abordați unele dintre cele mai importante lucruri de care trebuie să avem grijă atunci când dorim să îmbunătățim performanța unei aplicații.

Pentru o listă de verificare detaliată, asigurați-vă că verificați Front-End-Performance-Checklist.

Noroc! ?