Cum se incarca asa de repede paginiile web?

21

Ati uitat de Sergey care poate in orice clipa sa taie teava.
Atat despicati firul…

22

Exista mai multe numere de luat in considerare:

  1. Raspuns domain lookup (de obicei ti se face din cache/un server foarte apropriat la ISP) si raspuns handshake TCP - HTTP2.0 - decriptare TLS - 0.1/0.2 secunde
  2. Prima randare asincron (Cand ti se incarca html-ul si CSS-ul paginii - se poate din cache)
  3. Prima posibila interactiune cu pagina (Cand ti se incarca JS-ul si JSON-ul cu datele care trebui randate in cazul unui SPA - se poate din cache)
  4. Incarcarea tutoror resurselor asincron (Cand ti se incarca imaginile si video-urile si script-urile care nu sunt asa importante)
  5. Primul raspuns la server (daca se trimite ceva inapoi la incarcare pentru a seta ceva cookie/tracking)

Pentru randare cat mai rapida exista cateva tehnici:

  1. Server-side rendering (trimiti direct un HTML randat) si practic intr-un singur request si 50-100kb ai o pagina vizibla si gata de interactionat.
  2. Preloading cu service workers (vezi dev.to) - incarci de dinainte datele pe paginile care se pot accesa cu probabilitate mare si le iei din cache cand se da un click pe link, actualizezi de pe server doar dupa ce ai randat din cache. Asa vezi SPA-uri care incarca o pagina in sub 0.5 secunde, adica instant la click.
  3. Descarcare asincron - folosesti un CDN pentru resursele statice comune (eg. librarii JS/poze de pe net) si pariezi pe faptul ca cine intra la tine posibil are deja resursele in cache
  4. Code splitting sau tree-shaking - spargi JS-ul in dependinte izolate ca sa le incarci doar cand sunt necesare
  5. Skeleton loading components - incarci prima data componente schelet in loc de imagini/video-uri/componente greu de randat si pana cand primesti datele afisezi scheletul ca utilizatorul sa nu simta ca trebuie sa astepte prima randare.
  6. Lazy loading si virtual scroll - incarci doar datele (imaginile/video-urile/json-urile) necesare la ce e vizibil din scroll (over the fold) si cum utilizatorul face scroll incarci datele ca sa randezi urmatorul scroll window.
  7. Minificare cod - scoti tot ce nu e necesar in cod (spatiu/variabile cu nume lungi, variabile/functii neutilizate, comentarii) - se face automat la build in productie
  8. Minificare imagini - adica comprimare imagini la o rezolutie cat mai mica si la o marime cat mai mica care sa satisfaca calitatea necesara pentru utilizator dar sa se incarce cat mai rapid

Site-urile mari folosesc server-side rendering combinat cu preloading si code splitting. (descarca doar ce e necesar pentru o anumita pagina la prima randare)
Cel mai important numar luat de considerare la optimizare e marimea fisierelui JS care randeaza prima interactiune.

Resurse interesante:
https://web.dev/fast/

O chestie foarte interesanta e ca daca ai un site de stiri/blog atunci e bine sa folosesti Google AMP, ceea ce iti optimizeaza automat site-ul sa se incarce instant pentru citire pe telefoane cu internet slab:

5 Likes