Il browser trattiene la pagina
Un browser non disegna una pagina finché non ha tutti i fogli di stile indicati nell’intestazione. Se disegnasse prima e applicasse gli stili dopo, il visitatore vedrebbe il testo grezzo saltare al suo posto, che è peggio. Quindi aspetta, e ognuno di quei fogli di stile è un file che il telefono del visitatore deve scaricare prima che compaia qualsiasi cosa.
Gli script nell’intestazione causano lo stesso ritardo, a meno che siano marcati come differiti. Quando il browser ne incontra uno, smette di leggere la pagina, scarica lo script, lo esegue, e solo dopo prosegue. Un gestore di tag, un widget di chat o uno snippet di statistiche messo nell’intestazione aggiunge una pausa prima che compaia la prima parola.
I font sono la terza causa, e la più facile da non notare. La pagina può essere disegnata senza mostrare testo, perché il testo è composto in un font web che non è ancora arrivato. La maggior parte dei browser nasconde quel testo fino a tre secondi invece di mostrarlo in un font di riserva.
Che cosa le mostra l’audit gratuito
L’audit gratuito esegue la stessa misurazione nel browser che usa Google. Qui contano due numeri. Il First Contentful Paint è il momento in cui compare il primo testo o la prima immagine. Il Largest Contentful Paint è il momento in cui compare l’elemento principale della pagina. Se il primo numero supera circa 1,8 secondi, il visitatore è rimasto davanti a una pagina bianca.
Sotto i numeri c’è l’elenco dei file che il browser ha aspettato, con il tempo che è costato ciascuno. Sulla maggior parte dei siti delle organizzazioni l’elenco è breve: il foglio di stile del tema, due o tre fogli dei plugin, un font da un servizio di font e uno script che sarebbe dovuto stare in fondo alla pagina.
Correzione uno: lasciare che il testo compaia in un font sostitutivo
Un font web può dire al browser che cosa fare mentre si carica. L’impostazione si chiama font-display. Il valore swap significa: mostra subito il testo in un font di riserva, poi passa al font vero quando arriva. I visitatori vedono le parole fin dal primo rendering invece di una colonna vuota.
Mostra il codice Nascondi il codice CSS, 5 righe
@font-face {
font-family: "Source Serif 4";
src: url("/fonts/source-serif-4.woff2") format("woff2");
font-display: swap;
}Se il suo font viene da un servizio di font, la stessa impostazione è di solito un parametro del link fornito dal servizio. Se viene dal suo tema, è una riga nella dichiarazione dei font del tema. Ospitare il file del font sul suo sito evita anche al telefono una connessione separata verso un altro server, spesso la parte più lenta.
Correzione due: gli script in fondo, o differiti
Uno script che non cambia l’aspetto della pagina va in fondo alla pagina, oppure nell’intestazione con l’attributo defer. Defer dice al browser di scaricare lo script in background ed eseguirlo dopo aver disegnato la pagina. Statistiche, chat, gestori di tag, contenuti social incorporati e lettori video rientrano tutti in questa categoria. Quasi nulla sul sito di un’organizzazione deve essere eseguito prima del primo rendering.
Su WordPress, la maggior parte di questi script viene dai plugin, e la maggior parte dei plugin non le dà alcuna impostazione su dove va il loro script. Un plugin di cache o di prestazioni può differirli tutti in una volta. Provi il sito dopo averlo attivato, perché uno script da cui dipende un altro script può causare errori se viene eseguito nell’ordine sbagliato.
Correzione tre: meno fogli di stile sulle pagine che non li usano
Un plugin per il modulo di contatto carica il suo foglio di stile su ogni pagina, non solo sulla pagina dei contatti. Lo stesso fanno i plugin per caroselli, calendari di eventi e gallerie. Un sito con dodici plugin può chiedere dodici fogli di stile prima di disegnare una pagina che non ne usa nessuno. Ogni file è piccolo, ma insieme fanno l’attesa.
La correzione pulita è caricare i file di ogni plugin solo sulle pagine che li usano. Alcuni plugin hanno questa impostazione. Per gli altri, un plugin di prestazioni può farlo pagina per pagina, oppure il tema può caricarli solo dove servono, poche righe di codice per chi mantiene il sito. Prima di tutto questo, spesso vale la pena rimuovere i plugin di cui nessuno si ricorda.
Che cosa non fare
Non insegua il punteggio. Una pagina che si disegna in meno di un secondo su un telefono è a posto, anche se lo strumento di misurazione elenca ancora dei suggerimenti.
E non inserisca tutti gli stili nella pagina stessa per risparmiare richieste. Un foglio di stile incorporato in ogni pagina può arrivare a decine di kilobyte e viene rinviato a ogni visita, mentre un file collegato viene messo in cache dopo la prima. Abbiamo fatto esattamente questo errore su LFW.com e lo abbiamo corretto questa settimana.
Leland Fiegel