First Contentful Paint – il primo dato di User Experience

first contentful paint o FCP Parametri Google web core vitals

All’inizio del 2019, Google ha annunciato che avrebbe valutato il ranking della velocità di un sito Web concentrandosi su due metriche principali delle prestazioni di un sito web: First Contentful Paint (FCP) e First Input Delay (FID).

Nel tempo, lo scenario delle prestazioni si è evoluto. Google ha annunciato tanti altri Core Web Vitals.

Tuttavia, la metrica First Contentful Paint ha continuato a svolgere un ruolo importante come metrica Lighthouse (e esperienza utente). Rappresenta infatti il 10% del punteggio complessivo delle prestazioni di un sito web.

Il tuo sito web può anche caricare in meno di 2 secondi in un test di velocità, ma se non è così per la maggior parte del tuo pubblico, Google ti penalizzerà comunque.

In questo articolo imparerai cos’è First Contentful Paint e perché è importante. Successivamente, passeremo a vari modi in cui puoi migliorare il tuo voto First Contentful Paint su WordPress e ridurne il tempo di caricamento.

crollo impressions su search console
Ecco cosa succede quando i core web vitals sono sballati – Crollo Impressioni sulle Serp

Ti sembra interessante? Immergiamoci!

Cos’è il First Contentful Paint?

First Contentful Paint (FCP) è considerato quando il browser esegue il rendering del primo bit di contenuto dal DOM, fornendo il primo feedback all’utente che la pagina sta effettivamente caricando.

First Contentful Paint è diverso da First Paint, che è un punto nella timeline di caricamento della pagina in cui viene rilevato qualsiasi tipo di rendering sul browser. Infatti, FCP richiede il rendering di alcuni contenuti. Questo contenuto potrebbe essere testo, immagini (incluse immagini di sfondo, loghi) o altri elementi .

First Contentful Paint differisce anche dal Largest Contentful Pain (LCP), uno dei Core Web Vital che misura il tempo necessario affinché l’elemento più grande diventi visibile nel viewport.

Per semplificare, puoi pensare a FCP come al tempo impiegato dall’utente per visualizzare il primo qualsiasi contenuto sul proprio browser. Pertanto, un FCP veloce rassicura l’utente sul fatto che sta qualcosa sta effettivamente succedendo, e lo tiene incollato al sito.

Qual è il giusto punteggio o tempo per il First Contentful Paint?


1,8 secondi o meno, Google consiglia un punteggio First Contentful Paint di 1,8 secondi o meno per offrire ai tuoi visitatori una buona esperienza di navigazione.

Se l’FCP del tuo sito impiega più di 3 secondi, è considerato lento. Secondo una ricerca, oltre il 53% degli utenti mobili abbandona un sito se impiega più di 3 secondi per caricarsi. Prendi sul serio questa metrica.

Come testare il First Contentful Paint?

First Contentful Paint può essere misurato attraverso test di laboratorio ed esperienza di utilizzo reale (dati sul campo). Ecco alcuni strumenti che puoi utilizzare per misurare l’FCP:

Google misura il 75° percentile dei caricamenti di pagina sul tuo sito, segmentato su dispositivi mobili e desktop. Ciò fa si che questa sia una rappresentazione adeguata e accurata dell’esperienza generale dell’utente sul tuo sito web.

Come migliorare il First Contentful Paint (FCP) in WordPress


Abbiamo detto più o meno tutto su cos’è l’FCP e perché è importante. Ora ecco 10 modi per migliorare First Contentful Paint sul tuo sito WordPress e correggere un punteggio negativo. L’obiettivo è ridurre il tempo di First Contentful Paint a meno di 1,8 secondi:

  1. Riduci il tempo di risposta del server (TTFB)
  2. Elimina le risorse che bloccano il rendering
  3. Genera CSS del percorso critico e incorporalo
  4. Evita gli elementi basati su script above-the-fold
  5. Evita il caricamento pigro di immagini above-the-fold
  6. Immagini essenziali in linea
  7. Ottimizza le dimensioni del DOM del tuo sito
  8. Assicurati che il testo rimanga visibile durante il caricamento del font web
  9. Usa i suggerimenti per le risorse
  10. Evita reindirizzamenti di più pagine
  11. Vediamo in dettaglio ciascuna di queste azioni.

Leggi anche: Il confronto dei migliori WP Plugin Cache

1. Riduci il tempo di risposta del server (TTFB)

FCP non dipende solo da TTFB, ma è il primo passo per arrivarci.

FCP = TTFB + Tempo di caricamento del contenuto + Tempo di rendering

Poiché FCP dipende fortemente da TTFB, è il fattore più importante che devi ottimizzare per migliorare First Contentful Paint.

Esistono molti modi per ridurre TTFB in WordPress. Come dettagliato nell’articolo, i tre modi più semplici per ridurre TTFB sono:

Scegli un provider di hosting veloce

Se vuoi sapere quali sono i fattori che devi considerare per scegliere un’ottima soluzione di web hosting leggi il nostro articolo. Come scegliere un Hosting.

Idealmente, scegli un host con server che si trovano vicino ai tuoi utenti. Ma se hai bisogno di una consulenza in merito contattaci subito.

Attenzione: se quando carichi il tuo sito web vedi un Errore 500 o un errore 502, questo significa che il tuo server ha un problema. Per risolvere questo problema leggi Errore 500 o Errore 502

Usa una CDN di qualità

Una CDN di qualità può aiutarri a velocizzare la distribuzione delle risorse statiche del tuo sito come immagini, video e script. Ciò ridurrà significativamente la latenza di rete tra il tuo server e i tuoi utenti. Per ulteriori informazioni su come scegliere il miglior CDN per il tuo sito Web, consulta la guida CDN di SitoWP.

Abilita la memorizzazione nella cache per il tuo sito web
La memorizzazione nella cache ti aiuta a ridurre TTFB diminuendo il tempo di elaborazione del server. La maggior parte dei principali provider di hosting WordPress managed ha abilitato la memorizzazione nella cache a livello di server, quindi controlla assieme a loro per verificare ciò che offrono. A proposito se ancora non hai le idee chiare su cosa sia un Hosting leggi la nostra pagina “Cos’è un Hosting“.

Se vuoi fare un passo in più, WP Rocket o LightSpeed si integrano con WordPress su tanti tipi di host per velocizzare il tuo sito.

2. Elimina le risorse che bloccano il rendering


Una pagina Web viene visualizzata dal browser dopo aver messo insieme molti elementi come HTML, fogli di stile CSS, script JavaScript e importazioni HTML.

Un documento HTML stesso include vari tag, ma questi vengono tutti analizzati velocemente dalla maggior parte dei browser. Ma non è lo stesso con i CSS e JS.

In genere, il browser proverà a scaricare prima tutti gli elementi della pagina Web, ad analizzarli tutti e quindi eseguire il rendering della pagina Web. Il più delle volte, la dimensione dei documenti HTML è molto inferiore rispetto a quella dei fogli di stile CSS e degli script JS. Anche il numero di risorse CSS e JS è solitamente sul punto più alto della pagina.

Pertanto, quando l’utente interroga una pagina Web, il browser avrebbe già il contenuto HTML, ma attenderà comunque il caricamento di tutte le altre risorse prima di eseguire il rendering della pagina. Di conseguenza, sono chiamate risorse di blocco del rendering.

Questo comportamento peggiora notevolmente il FCP. Quindi, per migliorare FCP, è necessario eliminare queste risorse di blocco del rendering. Puoi farlo attraverso i seguenti modi:

Risorse critiche in linea

Innanzitutto, identifica gli script e gli stili critici necessari per rendere l’FCP della tua pagina web. Ecco una semplice guida di Google su come identificare le risorse critiche.

Dopo aver identificato gli script critici, devi rimuoverli dalle risorse di blocco del rendering e quindi incorporarli nella tua pagina HTML con i tag <style> e <script>.

In questo modo, ti assicurerai che la pagina web disponga di tutto ciò di cui ha bisogno per gestire le sue funzionalità principali quando viene caricata.

Rinviare le risorse non critiche


Per le risorse non critiche, devi contrassegnare gli URL con attributi async o defer.

Consigliamo di aggiungere l’attributo defer agli URL degli script non critici. Questo indica al browser di eseguire il file di script solo dopo che il documento HTML è stato completamente analizzato.

Ecco come rinviare un file di script:

<script defer src="/path/to/file/script.js">
</script>

Per i fogli di stile non critici, consigliamo di aggiungere un attributo async al loro URL. Questo indica al browser di caricare gli stili in modo asincrono mentre il resto degli elementi della pagina continuano a caricare senza interruzioni.


Poiché i fogli di stile vengono caricati con il tag , non esiste un modo diretto per applicare loro l’attributo asincrono. Ma c’è una soluzione alternativa ed ecco come puoi implementarla:

<!-- Setting “media” type as ‘print’ forces the browser to load the stylesheet asynchronously. 
On full page load, the media type is changed to ‘all’ so that the stylesheet gets applied. -->
 <link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">
 <!-- Fallback for when JavaScript is disabled, but in this case CSS can’t be loaded asynchronously. -->
 <noscript><link rel="stylesheet" href="style.css"></noscript>

Rimuovi tutto ciò che non è stato utilizzato

Durante l’identificazione delle risorse critiche, potresti trovare codice che non viene utilizzato nella pagina web. La rimozione di qualsiasi codice inutilizzato, come la rimozione di JavaScript inutilizzato, ti aiuterà a ottimizzare ulteriormente la tua pagina web.

Puoi anche ottimizzare la delivery CSS con WP Rocket per rimuovere i fogli di stile che bloccano il rendering. Il punto successivo riguarda questa caratteristica.

Leggi la Guida Search Console per Principianti

3. Genera CSS del percorso critico e incorporalo

Se hai impostato il CSS per il caricamento in modo asincrono, il browser mostrerà agli utenti il ​​contenuto senza contare stile prima che vengano caricati gli stili richiesti. Questo comportamento è noto come Flash of Unstyled Content (FOUC) ed è un’esperienza spiacevole per gli utenti.

Per prevenire il FOUC, devi generare il percorso critico CSS e integrarlo direttamente all’interno del tuo file HTML.

Caricamento della pagina con CSS che bloccano il rendering (in alto) e CSS critici integrati (in basso) (Fonte: Google)
Ma cos’è esattamente il CSS del percorso critico?

Critical Path CSS è il CSS minimo necessario per mostrare all’utente la prima parte di una pagina web (above-the-fold).

Analizzare manualmente il percorso di rendering critico del browser e quindi generare CSS percorso critico è un processo noioso. Va oltre lo scopo di questo articolo.

Tuttavia, puoi utilizzare strumenti online gratuiti come Pegasaas per generare CSS percorso critico. Funziona perfettamente per la maggior parte dei casi d’uso. Per ulteriori informazioni, consulta Analisi delle prestazioni del percorso di rendering critico di Google.

Dopo aver generato il CSS del percorso critico, è necessario integrarlo all’interno del documento HTML. Il browser può ora visualizzare immediatamente la prima parte della pagina Web senza attendere che i fogli di stile CSS vengano caricati in modo asincrono. Questo migliora notevolmente il FCP.

In alternativa, puoi utilizzare WP Rocket per automatizzare questo processo e rimuovere il CSS inutilizzato.

Rimuovi CSS inutilizzati o carica CSS in modo asincrono – Fonte: WP Rocket
WP Rocket elimina facilmente i CSS che bloccano il rendering
L’abilitazione dell’impostazione Ottimizza consegna CSS in WP Rocket genererà CSS percorso critico per tutti i tipi di pagina di WordPress e li inline. E se ti capita di apportare personalizzazioni o cambiare il tema, aggiornerà automaticamente anche il CSS del percorso critico.

Per maggiori dettagli, puoi leggere come WP Rocket gestisce i CSS critici.

4. Evita gli elementi basati su script above-the-fold


Non importa quanto bene ottimizzi JavaScript, sono comunque più lenti rispetto all’elaborazione del semplice HTML. Tutto ciò che richiede JS può avere un impatto negativo su FCP.

Sebbene sia possibile incorporare script critici, questi devono comunque essere caricati e analizzati. Quando si tratta di migliorare FCP, ogni millisecondo conta. È un tempo di caricamento prezioso che può danneggia il tuo punteggio FCP.

Molti temi includono elementi fantasiosi above-the-fold che utilizzano molti script. Lo stesso vale per l’utilizzo di Page Builder che aggiungono molti stili e script non necessari. Quindi, scegli saggiamente il tema del tuo sito. L’uso di un tema veloce e ben codificato come GeneratePress o Astra può aiutare a ridurre considerevolmente il tempo di First Contentful Paint.

Come regola generale, cerca di evitare di utilizzare questi elementi above the fold nel tuo sito web:

  • Animazioni pesanti di qualsiasi tipo
  • Plugin di scorrimento
  • Social media o plugin di condivisione
  • Plugin di menu mega
  • Incorpora come Google Ads

5. Evita il caricamento pigro di immagini above-the-fold

Il lazyload delle immagini è uno dei modi più semplici per velocizzare il tuo sito web, soprattutto se hai un sito ricco di immagini.

Tecnicamente, il lazyload è uno script che posticipa il caricamento d’immagini e frame che non sono ancora visibili nel viewport del browser. Quando l’utente scorre verso il basso, le immagini verranno caricate man mano che vengono visualizzate.

Poiché il caricamento lento richiede l’uso di JavaScript prima che il browser possa eseguire il rendering di qualsiasi immagine, può ritardare il tuo FCP.

Pertanto, è necessario escludere le immagini presenti above the fold dal lazyload.

La maggior parte dei popolari plugin di lazyload includono già questa funzione. Idealmente, cerca un plug-in di caricamento lento che ti permetta di escludere le immagini non solo dai nomi dei file, ma anche da altri tag come classe, id, attributo o immagini da un dominio specifico.

WP Rocket supporta la disabilitazione del lazyload su immagini specifiche. Puoi disabilitarlo per un’immagine, una classe d’immagini, da un’origine immagine e persino avatar.

Nota: il lazyload delle immagini è stato aggiunto al core di WordPress e diventerà una funzionalità nativa da WordPress 5.5 in poi. Supporta anche i filtri per personalizzare il comportamento di lazyload.

Leggi anche: Come trasferire un dominio

6. Immagini essenziali in linea

HTML e CSS forniscono un modo per incorporare le immagini utilizzando i formati Base64 o SVG. Questi sono chiamati URI di dati.

Inserendo tutte le immagini above-the-fold, il browser non deve effettuare richieste HTTP aggiuntive per scaricarle. Questo può aiutare a migliorare il migliorament di FCP.

Rimuovi le risorse above-the-fold che bloccano il rendering per migliorare FCP
Rimuovi le risorse above-the-fold che bloccano il rendering per migliorare FCP


Alcune delle immagini above-the-fold più comuni che puoi inserire in linea sono:

  • Logo
  • Icone (ricerca, social media, ecc.)
  • Immagine banner
  • Sfondo

Cosa sono le immagini Base64 e SVG?

Base64 è un algoritmo di codifica che converte qualsiasi tipo di dato, comprese le immagini, in testo. Puoi incorporare immagini codificate Base64 direttamente in file HTML o CSS. È un ottimo modo per accelerare i tempi di caricamento per le immagini più piccole.

Base64 Image Encoder è un eccellente strumento gratuito per convertire qualsiasi formato d’immagine in Base64. Supporta i formati immagine JPEG, PNG, WebP, SVG e BMP.

Aggiunta di immagini codificate Base64 in HTML:

<img src="data:image/jpeg;base64,/uj/…[content]..." width="100" height="50" alt="immagine base64">


Puoi anche usare le immagini codificate Base64 in CSS:

<img src="data:image/jpeg;base64,/uj/…[content]..." width="100" height="50" alt="immagine base64">


Scalable Vector Graphics (SVG) è un formato immagine per la grafica vettoriale. Le immagini SVG hanno dimensioni di file più piccole, si adattano a qualsiasi dimensione senza perdere la qualità e hanno un bell’aspetto su tutti i dispositivi. Se la tua immagine ha forme, curve e contorni semplici (ad es. loghi e icone), quasi sicuramente può essere salvata come SVG.

Nota: l’utilizzo di un’immagine SVG come sorgente all’interno di un tag è diverso dall’inserimento diretto di un’immagine SVG tramite il tag .

Ecco come puoi mettere inline SVG in HTML:

<body>
  <!-- Inserisci codice SVG qui, e l'immagine apparirà! -->
    <svg xmlns="http://www.w3.org/2000/svg">
        <circle cx='50' cy='25' r='20'/>
    </svg>
</body>


È una buona idea comprimere o minimizzare (se SVG) le tue immagini prima di incorporarle. Se le tue immagini sono in formato raster (JPEG o PNG), usa Base64. Se possono essere convertiti in formato vettoriale, usa SVG.

Ovunque sia possibile utilizzare un URL come origine per l’immagine, è possibile incollare lì l’immagine codificata Base64.

Se alcune immagini o icone sono codificate all’interno del tuo tema o plug-in, devi trovarle manualmente e sostituire i loro URL di origine con immagini inline. Un plug-in come Cerca e sostituisci può aiutarti a farlo facilmente.

Ci sono diversi svantaggi nell’incorporare le immagini:

  • Aumenta la dimensione delle immagini (in genere del 30%).
  • Aumenta la dimensione della pagina e quindi il TTFB.
  • Le immagini inline non possono essere inviate tramite CDN.


In base alla nostra esperienza, se riesci a mantenere la dimensione della pagina al di sotto di 100 KB, l’inserimento delle immagini non è un problema. Qualsiasi cosa oltre a ciò può influenzare il tuo TTFB e quindi danneggiare il tuo FCP più di quanto non migliori.

Inoltre, se stai utilizzando qualcosa come Cloudflare per servire il tuo sito web, puoi configurarlo per memorizzare nella cache le risorse HTML. L’abilitazione di questa funzione è consigliata se e solo se il contenuto del tuo sito è per lo più statico.

7. Ottimizza le dimensioni del DOM del tuo sito

Il Document Object Model (DOM) è una rappresentazione di tutti gli oggetti che compongono una pagina web. Graficamente, è rappresentato come un albero con nodi e oggetti ramificati.

La rappresentazione strutturata del DOM semplifica la modifica dei suoi elementi con un linguaggio di scripting come JavaScript.

L’albero DOM HTML con i suoi oggetti
L’albero DOM HTML con i suoi oggetti


Tutti gli elementi HTML in un albero DOM sono chiamati nodi. I nodi possono diramarsi in più elementi, ognuno dei quali può diramarsi ulteriormente e così via. Quanto in profondità si ramificano è chiamata profondità del nodo. La profondità del nodo dell’intero albero DOM è chiamata profondità dell’albero. Tutti gli elementi di ramificazione immediata di un nodo sono chiamati elementi figlio.

Avere un grande albero DOM può avere un impatto negativo sul tuo FCP per molte ragioni:

  • Un albero DOM non ottimizzato include molti nodi che non sono visibili all’utente durante le fasi iniziali del caricamento della pagina.
  • Una grande dimensione del DOM significa che è necessario più tempo di elaborazione per calcolare e definire lo stile di tutti i nodi, entrambi possono rallentare il rendering.
  • Un grande albero DOM può anche sopraffare le prestazioni della memoria dei dispositivi dell’utente.

Evita grandi dimensioni del DOM per ottimizzare FCP
Evita grandi dimensioni del DOM per ottimizzare FCP
Google segnala le pagine web con alberi DOM che hanno:

  • Più di 1.500 nodi in totale
  • Profondità maggiore di 32 nodi
  • Un nodo padre con oltre 60 nodi figlio

Come ridurre le dimensioni del DOM?

In generale, devi creare nodi DOM solo quando necessario e distruggere i nodi che non sono necessari. Tuttavia, questo suggerimento non si applica alla maggior parte dei siti WordPress poiché la creazione del DOM è solitamente gestita da temi, plug-in, page builder e dal core di WordPress stesso.

Ecco alcuni suggerimenti per aiutarti a ridurre le dimensioni del DOM:

  • Dividi le pagine grandi in quelle più piccole.
  • Metti in lazyload quanti più elementi HTML possibile e non solo immagini.
  • Impagina commenti, post, prodotti, ecc.
  • Limita il numero di post mostrati nella tua home page e nelle pagine di archivio.
  • Non nascondere i contenuti indesiderati usando i CSS. Invece, rimuovili del tutto.
  • Evita di usare generatori di pagine che inseriscono tag <div> inutili.
  • Scegli temi ben ottimizzati.
  • Non utilizzare plug-in che aggiungano troppi tag <div> (ad es. plug-in Megamenu).

8. Assicurati che il testo rimanga visibile durante il caricamento del font web


I caratteri sono generalmente file di grandi dimensioni e richiedono molto tempo per essere caricati. Potresti aver riscontrato un errore come questo in Lighthouse:


Lighthouse segnala gli URL dei caratteri che portano a un lampo di testo invisibile (Fonte: Google)

Lighthouse segnala gli URL dei caratteri che portano a un flash di testo invisibile
Lighthouse segnala gli URL dei caratteri che portano a un flash di testo invisibile

C’è un motivo per cui Google segnala questo comportamento. Alcuni browser non eseguiranno il rendering del testo finché tutti i caratteri non sono stati caricati. Ciò causa ciò che è noto come Flash of Invisible Text (FOIT).

Puoi risolvere questo problema costringendo il browser a mostrare temporaneamente un carattere di sistema durante il caricamento dei caratteri personalizzati. Basta aggiungere font-display: scambia il tuo stile @font-face per evitare FOIT in quasi tutti i browser moderni.

Ecco un esempio di come puoi applicarlo:

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.sample.com/pacifico.woff2) format('woff2');
  font-display: swap;
}

Se stai importando i font direttamente da una CDN (ad es. Google Fonts), puoi ottenere lo stesso risultato aggiungendo il parametro &display=swap alla fine dell’URL.

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">

9. Usa i suggerimenti per le risorse


Quando un utente visita un sito Web, il browser richiede il documento HTML dal server, lo analizza, invia richieste separate per qualsiasi altra risorsa referenziata e, dopo averle caricate e analizzate tutte, esegue il rendering della pagina Web.

Come sviluppatore, sai quali risorse sono le più importanti per il tuo sito. Con questa conoscenza, puoi impostare quelle risorse critiche per il caricamento anticipato (preload) o e accelerare il caricamento della pagina. I suggerimenti per le risorse del browser sono il modo in cui ottenere il preload.

Alcuni suggerimenti per le risorse si applicano alle risorse nella pagina corrente, mentre altri si applicano a possibili pagine future. Tutti i suggerimenti per le risorse utilizzano l’attributo rel del tag <link> per l’attivazione.

Prelettura DNS
Se stai caricando una risorsa da un sito Web esterno, l’aggiunta del parametro dns-prefetch indicherà al browser di risolvere il DNS dell’URL il più rapidamente possibile.

Ecco come aggiungere il precaricamento DNS alle risorse:

<link rel="dns-prefetch" href="//external-website.com">


WP Rocket semplifica l’aggiunta di tutti i domini esterni al precaricato.
Se stai utilizzando molto codice di terze parti, l’aggiunta del parametro dns-prefetch col plugin WP Rocket è molto utile per accelerare il caricamento della pagina. Puoi utilizzare il Prefetch online tool gratuitamente, per scoprire quali domini esterni puoi aggiungere all’elenco di prelettura. (Inoltre, leggi come ridurre l’impatto degli script di terze parti su WordPress)

Preconnessione

La preconnessione funziona in modo molto simile al prefetch DNS, tranne per il fatto che non si limita alla risoluzione del DNS. Andrà anche oltre e stabilirà l’aggancio tra TCP e la negoziazione TLS (se presente).

Può essere utilizzato in questo modo:

<link rel="preconnect" href="https://example.com">

Tieni presente che la preconnessione può richiedere tempo di elaborazione prezioso, soprattutto per le connessioni sicure.

Precarica


Se sei certo che una risorsa verrà utilizzata in futuro, puoi suggerire al browser di precaricarla immediatamente e di memorizzarla nel browser. A differenza del prelettura DNS, qui stai dicendo al browser di iniziare a caricare immediatamente la risorsa.

Ecco come puoi indirizzare il browser per precaricare una risorsa:

<link rel="prefetch" href="scripts.js">

Il precaricamento può essere ignorato dal browser se il file richiesto è troppo grande o la velocità della rete è lenta. Ad esempio, Firefox precarica le risorse solo quando il browser è inattivo.

Prerender

Questo è il suggerimento di risorsa più potente. L’aggiunta del parametro di prerendering a una risorsa obbliga il browser a caricare tutte le sue risorse, analizzarle, creare un albero DOM, applicare stili, eseguire script, eseguire il rendering della pagina Web e tenerla pronta per essere servita. Se visiti l’URL menzionato nell’href in un secondo momento, la pagina verrà caricata immediatamente

Ecco come eseguire il prerendering di una risorsa:

<link rel="prerender" href="https://example.com/next-page">


Il prerendering della pagina di destinazione principale è un ottimo modo per aumentare le conversioni.

Preload

A differenza del prefetch, che agisce più come un suggerimento per il browser, il suggerimento per la risorsa di preload indica al browser di caricare le risorse indipendentemente da ciò che pensa. Il browser non può ignorare la direttiva di precaricamento.

<head>
  ...
  <link rel="preload" href="styles.css" as="style">
  <link rel="preload" href="ui.js" as="script">
  ...
</head>

Prima il browser inizia a richiedere i link di precaricamento dichiarati, più velocemente le tue pagine potranno essere caricate.

I suggerimenti sulle risorse non saranno di grande aiuto quando un utente visita il tuo sito web per la prima volta. Ma ogni pagina successiva che visiteranno sarà notevolmente più veloce. Poiché Google utilizza i dati sull’utilizzo reale per valutare il ranking della velocità di un sito Web, i suggerimenti sulle risorse aiuteranno a migliorare l’FCP del tuo sito.

Se utilizzi WP Rocket, puoi applicare il preload e il prefetch DNS a qualsiasi risorsa sulle tue pagine Web abbastanza facilmente. In alternativa, puoi anche utilizzare un plug-in gratuito come Pre* Party Resource Hints per abilitare manualmente i suggerimenti sulle risorse sul tuo sito WordPress.

10. Evita reindirizzamenti di più pagine


Quando visiti un URL che è stato reindirizzato a un altro URL, il server restituirà una risposta del codice di stato redirect HTTP 301. Sembrerà qualcosa del genere nella console del tuo browser:

HTTP/1.1 301 spostato in modo permanente

HTTP/1.1 301 Moved Permanently
Location: /url/to/new/location


Una risposta di reindirizzamento costringe il browser a effettuare un’altra richiesta HTTP per la nuova posizione. Di solito, questo ritarda il caricamento della pagina web di centinaia di millisecondi.

Se la tua pagina ha più di un reindirizzamento, può rallentare notevolmente il tuo FCP.

Lighthouse segnala le pagine che hanno due o più reindirizzamenti.

Per evitare reindirizzamenti multipli, punta quindi le risorse contrassegnate direttamente alla destinazione finale. Inoltre, se una risorsa fa parte del percorso di rendering critico della tua pagina, elimina del tutto eventuali reindirizzamenti che provengono da quest’ultima.

Riepiloghiamo

Migliorare First Contentful Paint e ridurne il tempo non è più una scelta ma una necessità. Oltre alle tre metriche Core Web Vitals, un FCP più veloce porta a una migliore esperienza utente e migliora il tuo punteggio PageSpeed.

E presto arriveranno cose ancora migliori! Google ha introdotto un’altra metrica delle prestazioni incentrata sulla chiamata utente First Meaningful Paint (FMP). Mentre FCP misura il tempo di rendering per qualsiasi contenuto (ad es. loghi, slogan, immagini di sfondo), FMP verrà attivato solo dopo il caricamento del contenuto desiderato dall’utente (ad es. titoli, immagini di copertina, corpo del testo). FMP non è stato appena standardizzato.

In questo post, hai imparato come migliorare First Contentful Paint in WordPress utilizzando varie tecniche. A volte, può essere opprimente comprendere tutto il gergo tecnico e applicarlo perfettamente.

Fortunatamente, un provider hosting veloce come il Nostro Nitro Cloud e un plug-in di grandi prestazioni come WP Rocket possono aiutarti a ottenere un buon punteggio FCP fin da subito.

Se vuoi ricevere una nostra consulenza immediata per la velocità del tuo sito, Contattaci Subito!