il primo riquadro completo di contenuto del tuo sito web e quando il browser visualizza il primo elemento. dom sulla tua pagina questo include immagini , elementi canvas , o testo in inglese semplice fcp è quando l'utente può vedere alcune parti della tua pagina , cambiare spesso questo viene fornito come barra di intestazione, o sfondo image .
questo elemento potrebbe non essere la prima cosa resa , o caricata dal server ma è la prima che l'utente può vedere tutto ciò che il tuo sito web , contiene all'interno di un iframe non è contabilizzato con fcp , né è la pittura del non contenuto come il cambiamento nel colore di sfondo , fcp è una metrica interessante , mentre puoi misurarla quantitativamente , è anche relativamente soggettivo avere una prima vernice veloce , e contenta è importante perché fa sì che l'utente percepisca che il tuo sito si sta caricando rapidamente , indipendentemente dal fatto che in realtà il tuo sito potrebbe avere un primo
molto più lungo ritardo . interattivo rispetto ai concorrenti che è il tempo dopo il quale l'utente può interagire con il sito ma può sembrare agli utenti come essere più veloce , causa del tuo fcp più veloce che detto fcp non riguarda l'inganno dei tuoi utenti . un tempo fcp basso è un buon indicatore della velocità della pagina in generale , e i metodi con cui puoi ottimizzarlo .
possono anche influenzare altre metriche di velocità della pagina . da cosa deriva un buon punteggio fcp la documentazione di google , abbiamo potuto vedere che valutano i tempi di fcp in tre categorie.
buono ha bisogno di miglioramenti e scarso e discutono come ottengono il punteggio percentile , utilizzato dal loro strumento faro buono è compreso tra 0 secondi e 1,8 secondi , ha bisogno di miglioramento è compreso tra 1,8 secondi e tre secondi ,e povero è più di tre secondi impariamo.
come possiamo vedere in quale di queste categorie il tuo sito arriva per primo gli strumenti di alimentazione, sono quelli che puoi usare per tenere traccia di come la pagina appare ai tuoi utenti. come utenti reali su cui questi strumenti non si basano API , e ipotesi.
sul tuo sito vengono eseguite direttamente sul tuo server in tempo reale in modo da ottenere le informazioni più accurate , e aggiornate possibili di Google cumentation mostra questi come i migliori strumenti di carburante , per determinare le informazioni sulla velocità della pagina fcp rapporto sull'esperienza utente , di chrome rapporto sulla velocità della console di ricerca , e web vitals libreria javascript .
ora parliamo di strumenti di laboratorio strumenti di laboratorio tendono , a simulare i risultati su come sarebbe il tuo fcp in situazioni ideali , piuttosto rispetto alle situazioni del mondo reale , in cui si verificano congestione della larghezza di banda di latenza.
e altri blocchi stradali questi strumenti di laboratorio consigliati da Google , forniscono uno sguardo a come potrebbe essere il tuo sito , quando esegui in modo ottimale gli strumenti di sviluppo di Chrome Lighthouse , e approfondimenti sulla velocità della pagina come ottimizzare , il tuo punteggio fcp.
quegli strumenti ti danno un panoramica e punteggio di dove si trovano la velocità , e l'fcp del tuo sito web, ma insieme ad altri ti danno anche informazioni su cosa puoi fare , per ottimizzare il tuo punteggio fcp , e farlo dipingere ancora più velocemente .
ecco alcuni dei passaggi più comuni su come risolvere il tuo fcp times .
visualizza il testo prima e durante il caricamento del carattere.
hai mai visto un sito Web in cui tutto il testo su una pagina m , appare agicamente tutto in una volta quando , tutti gli altri contenuti sono già presenti ,è perché il browser lo nasconde il contenuto di testo del sito non viene caricato finché non è pronto per leggere , il testo è generalmente solo una manciata di
byte di contenuto , ma su molti siti può volerci un tempo esponenzialmente più lungo per caricare perché il file del carattere non è pronto .
per la visualizzazione dicendo ai browser di visualizzare il testo senza indugio , ha il potenziale per rendere il tuo fcp quasi inesistente . semplicemente aggiungi lo scambio di visualizzazione del carattere a qualsiasi carattere css , che hai da solo potrebbe risolvere molti dei tuoi problemi di tempo fcp minimizzare il tuo css html , e la minimizzazione javascript sta eliminando caratteri estranei dai file del
tuo sito mentre la spaziatura rende più facile per gli umani leggere e analizzare i browser e i server non ne hanno bisogno quegli spazi sono ancora caratteri , che occupano byte minimizzando cose come i tuoi file css riduci la dimensione della pagina , che aumenta la velocità della pagina e migliora il tempo per fcp , se sei un uso di wordpress r probabilmente hai già un'opzione di minimizzazione nel tuo
tema . o tramite il tuo plug-in di memorizzazione nella cache, ad esempio divi ha semplici interruttori per la minimizzazione css html , e javascript sotto le opzioni del tema divi generale qui troverai due interruttori per minimizzare e combinare i file e con quelli abilitati il tuo fcp eliminerà , il css inutilizzato se hai codice nei fogli di stile , che non viene utilizzato, quindi perché tenerlo qualsiasi codice vecchio , o inutilizzato dovrebbe essere rimosso in modo che non venga caricato ,ogni volta
che viene richiesto il tuo sito Chrome devtools può mostrarti sotto la scheda di copertura quali parti del tuo css vengono caricate . ma non vengono renderizzate . inoltre gli utenti divi dovrebbero prendere nota che abbiamo completamente revisionato , il modo in cui il nostro tema gestisce i css e questo tipo
di stile ha fatto saltare il nostro massiccio aggiornamento delle prestazioni divi mantiene css ordinato , dinamicamente in piccoli minimizzati file che si basano sui moduli , che hai scelto sulla tua pagina in aggiunta , a ciò identifichiamo quali parti , di quel css vengono caricate above the fold , e visualizzate quello prima e questo riduce il tuo fcp .
quindi non solo abbiamo automaticamente minimizzato il tuo css , lo abbiamo anche tagliato in bocconcini per il tuo browser , e dato la priorità a quelli che aumentano fcp nei tempi di caricamento , complessivi della pagina riducono il tempo al primo byte ttfb , essenzialmente ttfp è quando il primissimo byte di dati viene trasferito al browser , fcp dipende da questa metrica quindi più veloce ,
è il tuo scp è il miglior metodo per ridurre ttfp e velocizzare la tua pagina è abbastanza semplice usare .
un host di qualità come divi hosting fornire contenuti tramite cdn . e abilita la memorizzazione nella cache del browser che puoi eseguire in wordpress . tramite un plug-in come wp rocket assicurandoti che questi . tre elementi siano adeguatamente curati può ridurre drasticamente ttfb , e per estensione il
tuo fcp usa immagini svg , o webp mentre gif jpeg e png sono i file di immagine più comuni che stai utilizzando , se li scambi in file webp o svg , sia il tuo fcp che il ttfb possono ridursi drasticamente con le dimensioni dei file nell'intervallo di byte , a volte mes invece che in kilobyte le tue immagini.
verranno caricate in uno spazio vuoto se sei un utente wordpress la versione 5.8 , ha il supporto per i pezzi web integrato e abbiamo una carrellata su come usare le immagini svg , nel nostro archivio del blog mantieni , la tua dimensione dom piccola molti di noi ,complicare troppo le nostre home page.
nel tentativo di impressionare i visitatori tuttavia questi elementi aggiunti gonfiano il dom e causano un tempo fcp più elevato potresti aiutarlo riducendo il numero di selettori CSS che usi pseudoselettori anche complicare le cose , e aumentare la dimensione del tuo dom .
così per ricapitolare fcp è una metrica di percezione incentrata sull'utente che non è necessariamente indicativa delle prestazioni del sito, come accennato in precedenza, due siti Web , potrebbero avere lo stesso tempo di caricamento, ma quello con un tempo di fcp inferiore potrebbe essere visto come più veloce , che la percezione può influenzare l' esperienza dell'utente , se non le prestazioni complessive.
del sito web , tuttavia, fcp è una metrica fantastica da seguire per portare le prestazioni complessive del sito a un livello superiore qualsiasi azione che intraprendi t o un fcp , inferiore ridurrà anche la velocità complessiva della pagina in modo da poterlo prendere , quasi come un segnale delle prestazioni complessive un tempo fcp basso generalmente non coinciderà con un tempo di caricamento complessivo elevato quindi se è necessario utilizzare una singola metrica per vedere , dove you stand fcp può essere un buon post guida puoi anche accoppiarlo con lcp o il più grande contentful paint .
per avere un quadro più completo di ciò che i tuoi utenti vedono nei primi secondi di arrivo al tuo sito ed eccoci qui che , è il primo content paint per ulteriori informazioni controlla il post completo del blog , collegato nella descrizione First Contentful Paint se ti è piaciuto questo video, quindi assicurati di dargli un mi piace e iscriviti per ulteriori contenuti con detto grazie per la visione e ci vediamo nel prossimo [.
