Dall'introduzione di Lighthouse sono emersi nuovi parametri relativi alla velocità della pagina. Uno dei più importanti di questi parametri è First Contentful Paint (FCP). Nella versione 10 di Lighthouse, in vigore da giugno 2024, l'impatto di FCP sul punteggio complessivo è del 10%.
Per adottare e comprendere la FCP come metrica, è essenziale innanzitutto esaminare la psicologia che sta dietro ad essa. Il concetto è simile a quello specchi installati negli ascensori:
Riassumendo brevemente: nella prima metà del 1900, l’uso degli ascensori negli edifici alti aumentò notevolmente, ma i sistemi di ascensori erano primitivi rispetto ad oggi. Pertanto, è emersa l’idea di installare specchi negli ascensori per ridurre il tempo trascorso nell’ascensore.
Ritornando al nostro argomento: Il punto che percettivamente ti fa aspettare durante il tempo di caricamento quando provi ad accedere ad una pagina è FCP. La definizione di First Contentful Paint è il tempo necessario affinché il primo testo, immagine, tela non bianca, ecc., venga visualizzato all'utente. L'unità di FCP è i secondi.
In Lighthouse, la scala di colori per FCP è determinata come segue:
- 0-2 secondi: Verde => Veloce
- 2-4 secondi: Arancione => Necessita di miglioramenti
- 4+ secondi: Rosso => Lento
Secondo i dati di HTTP Archive, il numero di siti che possono essere considerati veloce è del 25%e il 50% dei siti esistenti sono classificati come lenti.
Cosa si può fare per migliorare il FCP?
Riduci il tempo di risposta del server
In genere, ciò può essere interpretato come miglioramenti necessari sul lato server del server e del software. Per elencare i problemi che influiscono negativamente sui tempi di risposta del server:
- Il problema potrebbe essere la condivisione, la configurazione (ovvero le impostazioni del server) e le risorse del server. La capacità del tuo server dovrebbe essere aumentata in base al tuo traffico. In alcuni casi, query di database scritte in modo inadeguato e componenti software altamente complessi possono influire seriamente sui tempi di risposta del server.
- Il mancato utilizzo di una CDN (Content Delivery Network) può causare ritardi nell'accesso ai contenuti, influenzando FCP. Man mano che la dimensione del contenuto aumenta, se ad esempio si tenta di richiamare una GIF o un video animato di grandi dimensioni senza una CDN e il server principale si trova in un continente diverso, potrebbe essere necessario prendere in considerazione soluzioni CDN per risolvere FCP.
- La mancata fornitura di contenuto statico con una politica di cache adeguata e coerente può sovraccaricare tuo server inutilmente man mano che il numero di visitatori aumenta. Ad esempio, se non mantieni il tuo logo nella cache a lungo termine mentre lo carichi su ogni pagina, danneggi inutilmente il tempo di risposta del tuo server.
- Reindirizzamenti di pagina non necessari mentre l'accesso alla pagina può influenzare inutilmente il tuo FCP.
Ad esempio, in passato esistevano configurazioni come questa: quando un utente voleva accedere a un sito, c'era un reindirizzamento da HTTP a HTTPS, quindi se era mobile, un reindirizzamento da HTTPS a mobile (ad esempio, https:// www a https://m) e se la pagina veniva rimossa e reindirizzata altrove con un 301, sembrava che l'utente venisse passato da una scrivania all'altra in un ufficio delle imposte. Questo è un esempio estremo per una migliore comprensione, ma se reindirizzi una pagina a un altro URL con un reindirizzamento 301 e poi reindirizzi quella pagina a un'altra con un reindirizzamento 301, potresti eseguire la stessa configurazione illogica.
- Se hai non utilizzare la preconnessione o il prelettura DNS prefissi quando ti connetti ai tuoi servizi di terze parti e ti connetti a molti servizi di terze parti, non stai facendo nulla di vantaggioso per FCP.
Riduci le risorse che bloccano il rendering
Devo ammettere che questo singolo punto scritto come voce può richiedere mesi per essere risolto.
Per raggiungere questo obiettivo, esiste un metodo di soluzione in cui all JS, CSS e risorse simili che bloccano il rendering della pagina vengono caricati dopo il momento della creazione della pagina, ma la parte inizialmente visibile del sito viene caricata per prima durante il caricamento del sito. Tuttavia, per fare ciò, è necessario esaminare tutte le risorse JS, CSS e simili e separare i processi che richiedono più tempo. Inoltre, utilizzare il minor numero possibile di servizi di terze parti aiuta a ottimizzare FCP.
