Speed Insights măsoară vizite reale, deci are nevoie de un lucru în pagină: un beacon minuscul care raportează ce a observat browserul. De aici încolo diferă doar cum ajunge el acolo.
Site-uri create cu Studio
Nimic de făcut. La fiecare publicare, platforma injectează beacon-ul în fiecare fișier
HTML, chiar înainte de </body>, în momentul încărcării fișierelor — nu în șablon. Așa
telemetria rămâne o proprietate a platformei: nu se poate pierde ștergând ceva din
proiect.
Proiecte importate din GitHub
Scriptul se copiază din Dashboard → Proiect → Settings → Analytics și Speed Insights
și se lipește în paginile site-ului, chiar înainte de </body>. Butonul de acolo îți dă
exact scriptul potrivit deployment-ului tău, cu endpoint-ul deja completat.
Din cod, cu pachetul npm
Dacă preferi un import în locul unui script lipit în HTML, aceeași colectare vine și ca pachet: @hazeloft/insights. În React se reduce la o componentă pusă o dată în layout, fără nicio configurare.
Ce face beacon-ul
E un script inline, nu un fișier extern: câțiva kiloocteți, mult mai puțin după compresie. Nu încarcă nimic din altă parte și nu blochează randarea.
Ce observă:
- TTFB, din intrarea de navigare a browserului;
- FCP și LCP, prin
PerformanceObserver; - INP, urmărind interacțiunile și paint-ul care le urmează;
- CLS, adunând deplasările de layout care nu au fost provocate de o interacțiune;
- vizualizările de pagină, inclusiv navigările client-side.
Trimiterea se face la ascunderea filei (visibilitychange și pagehide), grupat, cu
navigator.sendBeacon. Dacă trimiterea eșuează, lotul rămâne în memorie și pleacă la
următoarea ocazie.
Când apar primele date
După primele vizite reale — nu există un mod de test care să fabrice măsurători. Colectarea nu eșantionează: toate vizitele raportează, nu un procent din ele.
Dacă pagina rămâne goală, cel mai des e una din trei:
- site-ul n-a primit încă vizite în intervalul selectat;
- scriptul nu e în pagină (la proiectele importate, verifică-l înainte de
</body>); - ai livrat abia acum și te uiți la o fereastră scurtă.
Unde găsești pagina
Dashboard → Proiecte → proiectul tău → Speed Insights. Fiecare proiect are propriile măsurători; nu există o vedere agregată peste toate proiectele.