103 Primi suggerimenti: che cos'è e come implementarlo
Pubblicato: 2022-07-16103 Early Hints è il nuovo codice di stato HTTP che aiuta i browser a decidere quale contenuto precaricare prima ancora che la pagina inizi ad arrivare.
Dopo essere stato menzionato per la prima volta da Cloudflare alla fine dello scorso anno, ora Google ha annunciato ufficialmente che Early Hints è disponibile in Chrome versione 103 con supporto per il precaricamento e la preconnessione per l'avvio:
Nelle righe seguenti imparerai cos'è esattamente Early Hints e come puoi implementarlo sul tuo sito Web per migliorare le prestazioni.
Ma prima di questo, esamineremo una rapida rassegna di come funzionano i browser e perché in primo luogo c'era bisogno di Early Hints.
In poche parole: browser, server e server Think-Time
Affinché tu possa caricare questa pagina (o qualsiasi altra pagina) e leggere il contenuto, il tuo browser aveva bisogno di istruzioni su cosa eseguire il rendering e quali risorse (come immagini, caratteri, file JavaScript) devono essere recuperate per completare la sua pittura.
Fondamentalmente, il tuo browser invia una richiesta a un server e le istruzioni su cosa caricare provengono dalla risposta del server.
Sfortunatamente, potrebbe esserci una latenza di un paio di centinaia di millisecondi fino a quando il server non raccoglie tutte le risorse necessarie per compilare l'intera pagina Web e inviarla di nuovo al browser.
Questo periodo è noto come "tempo di riflessione del server".
Durante questo periodo di riflessione del server, il browser rimane lì e attende senza visualizzare alcun contenuto. E credo che potremmo essere d'accordo sul fatto che nessuno vuole fissare uno schermo vuoto.
È qui che entrano in gioco i primi suggerimenti.
Che cosa sono i primi suggerimenti?
Un modo per migliorare le prestazioni della pagina è utilizzare i suggerimenti per le risorse. Come suggerisce il nome, danno al browser "suggerimenti" su quali risorse potrebbero essere necessarie in seguito, ad esempio il precaricamento di file specifici o la connessione a un server diverso.
Se sei interessato all'argomento e vuoi saperne di più, consulta il nostro articolo sui suggerimenti per le risorse e la loro implementazione.
Per quanto fantastico possa sembrare usare i suggerimenti sulle risorse, c'è un problema. Affinché il browser possa agire su di essi, il server deve inviare almeno una parte della pagina.
Inserisci i primi suggerimenti.
Early Hints sfrutta il "server think-time" per inviare in modo asincrono istruzioni al browser per iniziare a caricare risorse secondarie critiche (come fogli di stile, file JavaScript critici, ecc.) o stabilire una connessione con origini che potrebbero essere utilizzate sul pagina mentre il server sta compilando la risposta completa.
Senza primi accenni
In termini più semplici:
Con Early Hints abilitato, il server invia due risposte: la prima (codice di stato HTTP 103 Early Hints) per istruire il browser su cosa può iniziare a caricare immediatamente e la seconda (codice di stato HTTP 200) è la risposta completa con il resto informazione.
Con i primi suggerimenti abilitati
Inviando questi suggerimenti al browser prima che venga compilata la risposta completa, il browser può capire cosa deve fare per caricare la pagina Web più velocemente per l'utente.
Il risultato finale:
Tempi di caricamento delle pagine più rapidi e latenza percepita dall'utente ridotta.
Se stai cercando una spiegazione più formale, Cloudflare ha fatto un ottimo lavoro fornendola:
Implementazione dei primi suggerimenti sul tuo sito web
Devi eseguire diversi passaggi per implementare con successo i suggerimenti iniziali sul tuo sito web.
Passaggio 0: considera l'utilizzo di link rel=preload o link rel=preconnect invece di Early Hints
Questo è il passaggio 0 perché se il tuo server può inviare immediatamente una risposta 200, aggiungere Early Hints è inutile . Invece, se vuoi accelerare ulteriormente la risposta 200, puoi utilizzare il collegamento rel=preload o il collegamento rel=preconnect suggerimenti per le risorse.
Il modo più semplice per determinare la velocità con cui il server invia la risposta 200 è utilizzare lo strumento di test delle prestazioni di KeyCDN. Tutto quello che devi fare è inserire l'URL del tuo sito e ottenere i dati:
Passaggio 1: identifica le tue pagine principali
Nel caso in cui il passaggio 0 non sia valido per te e il tuo server abbia bisogno di tempo per generare la risposta, hai tutti i prerequisiti per procedere con l'integrazione degli Early Hints.
Il primo passo è identificare le tue pagine di destinazione principali, o in altre parole, la pagina in cui i tuoi utenti iniziano il loro viaggio sul tuo sito. Questi punti di ingresso sono più importanti di qualsiasi altra pagina perché l'efficacia di Early Hints diminuisce man mano che i tuoi visitatori navigano attraverso i tuoi siti web .
Questo perché i browser moderni sono abbastanza bravi a indovinare quale pagina l'utente visiterà dopo e probabilmente hanno tutte le risorse secondarie di cui hanno bisogno nella seconda o terza navigazione successiva.
Passaggio 2: identificare le origini critiche e le sottorisorse che contribuiscono maggiormente alle metriche chiave delle prestazioni
Dopo aver identificato le tue pagine di destinazione principali, dovresti passare all'identificazione di quali origini e sottorisorse sono buoni candidati per i suggerimenti di preconnessione o di precaricamento. Queste sarebbero origini e risorse che contribuiscono in modo massiccio alle metriche chiave come Largest Contentful Paint e First Contentful Paint.
Più specificamente, vorresti cercare sottorisorse che bloccano il rendering come JavaScript sincrono, fogli di stile o persino caratteri web.
Puoi identificarli eseguendo il tuo sito Web tramite uno strumento di test come WebPageTest e controllando il grafico a cascata. Tutte le risorse di blocco del rendering avrebbero una "X" davanti a loro:
Il modo più semplice per identificare le sottorisorse adatte per Early Hints è se le tue risorse principali stanno già utilizzando link rel=preconnect o link rel=preload . Questi sono i candidati perfetti.
Ed è così che puoi aggiungere manualmente i primi suggerimenti al tuo sito web.
Ma cosa succede se non hai le competenze tecniche per farlo da solo?
Bene, c'è un modo più semplice.
Abilitazione dei primi suggerimenti utilizzando il tuo account Cloudflare
Se sei un utente di Cloudflare, puoi abilitare i suggerimenti in anticipo tramite la dashboard, procedendo come segue:
- Accedi alla dashboard di Cloudflare e seleziona il tuo dominio.
- Dalla dashboard, fai clic su Velocità > Ottimizzazione.
- In Pubblicazione ottimizzata, abilita i suggerimenti in anticipo.
Come forse saprai, il CDN integrato di NitroPack è fornito anche da Cloudflare. Questa transizione ci ha aperto le porte per iniziare a lavorare su una nuova funzionalità di memorizzazione nella cache perimetrale HTML, che, una volta rilasciata, ci consentirà di fornire a tutti i nostri clienti la possibilità di abilitare Early Hints senza avere un account Cloudflare.
Siamo nel profondo del processo di sviluppo e stiamo lavorando sodo per rilasciare l'edge caching HTML il prima possibile. Quindi assicurati di iscriverti alla nostra newsletter e segui il nostro blog per essere il primo a sapere quando lo annunceremo.