Come precaricare le richieste di chiavi in ​​WordPress

L'utilizzo di caratteri Web, CSS e JavaScript può rendere il tuo sito Web più unico e interattivo. Ma attendere il caricamento di questi tipi di file può essere frustrante per i visitatori del tuo sito.

È qui che può tornare utile il precaricamento delle richieste di chiavi in ​​WordPress. Dicendo ai browser di scaricare questi tipi di file in precedenza nella catena di richiesta, saranno a portata di mano quando il browser sarà pronto per il rendering del contenuto. A sua volta, questo può accelerare il tempo di caricamento della pagina percepito e fornire una migliore esperienza web complessiva.

Nella guida di oggi, discuteremo cosa significa precaricare le richieste chiave, insieme ai potenziali vantaggi in termini di prestazioni per il tuo sito web. Quindi, spiegheremo come farlo sul tuo sito WordPress con Google Fonts, Font Awesome, CSS e JavaScript.

Cosa significa "precarica richieste di chiavi" in WordPress?

Quando qualcuno visita il tuo sito web, il suo browser invierà più richieste HTTP al server del tuo sito, chiedendogli i file che compongono il tuo contenuto. Il server impiegherà un certo periodo di tempo per iniziare a rispondere a queste richieste e inviare informazioni al browser, che viene definito Time to First Byte (TTFB).

Successivamente, il browser inizierà a scaricare il contenuto (PHP, JavaScript e CSS) dai file del tuo sito e a visualizzarlo per visualizzare le pagine visualizzabili (HTML) sul front-end. Una volta che questo processo è stato completato, il visitatore può vedere la tua pagina web completamente caricata.

Un browser utilizzerà una "catena di richieste" per richiedere e visualizzare il contenuto in una sequenza. Ciò significa che ci sono più passaggi di richieste più piccole all'interno di quelle più grandi, con il risultato finale che un visitatore può visualizzare il contenuto del tuo sito.

In sostanza, "precaricare" significa dire al browser di un utente di scaricare prima i file essenziali invece di attendere fino alla fine del processo di caricamento. Si tratta in genere di caratteri (in particolare caratteri Web), CSS, JavaScript e talvolta immagini.

Le richieste chiave sono univoche perché il tuo browser in genere non richiede questi file fino a una fase successiva del processo di caricamento. Quindi, ci sarà un ritardo quando il browser arriva a quel punto e scopre che deve richiedere i file. Dicendo al browser di caricare prima questi file, li avrà a portata di mano quando dovrà eseguirne il rendering.

Quali sono i vantaggi del precaricamento delle richieste di chiavi?

Il vantaggio principale del precaricamento delle richieste chiave è il miglioramento delle prestazioni percepite del tuo sito. Ciò significa che il browser di un utente può visualizzare i tuoi contenuti più rapidamente e i visitatori avranno la sensazione che il tuo sito sia più veloce. Ma il tuo sito in realtà sta solo precaricando il contenuto essenziale per farlo apparire in quel modo.

Inoltre, il precaricamento delle richieste è essenziale per i tuoi punteggi Core Web Vitals. Queste metriche di Google misurano le prestazioni di caricamento, l'interattività e la stabilità visiva del tuo sito, fornendoti un punteggio che indica la facilità d'uso complessiva del tuo sito web.

Questi sono i tre Core Web Vitals:

• Largest Contentful Paint (LCP): quanto tempo ci vuole per caricare l'elemento più grande della tua pagina.
• First Input Delay (FID): quanto tempo impiega il browser a rispondere all'interazione dell'utente con i tuoi contenuti.
• Cumulative Layout Shift (CLS) : Quanto si muovono gli elementi durante il caricamento della pagina.

In particolare, il precaricamento delle richieste di chiavi può avere un impatto significativo sul tuo punteggio LCP. Precaricando immagini, caratteri e altri file di grandi dimensioni, sarai in grado di ridurre il tempo necessario per il loro rendering.

Inoltre, il precaricamento può influire sul punteggio di First Contentful Paint (FCP). Questa metrica misura il tempo necessario per visualizzare il primo elemento HTML sulla tua pagina. Se puoi precaricare quell'elemento, il browser sarà in grado di mostrare più rapidamente le parti iniziali del tuo contenuto.

Inoltre, i motori di ricerca, come Google, favoriscono il caricamento rapido e i contenuti interattivi. Pertanto, oltre a fornire una migliore esperienza utente, il miglioramento di queste metriche sulle prestazioni può aumentare l'ottimizzazione per i motori di ricerca (SEO) del tuo sito web.

In sostanza, i miglioramenti delle prestazioni possono aiutare a far salire le pagine del tuo sito nelle classifiche e portare i tuoi contenuti davanti a più utenti. Inoltre, il precaricamento delle richieste di chiavi è relativamente semplice. Più avanti in questo post, ti mostreremo esattamente come farlo!

Ci sono degli svantaggi nel precaricare le richieste di chiavi?

Le richieste di precaricamento potrebbero sembrare un'ottima idea dal punto di vista delle prestazioni. Detto questo, provare a precaricare troppi elementi può funzionare contro di te.

Un browser può elaborare solo così tante richieste contemporaneamente. Quindi, se gli dici di precaricare più elementi, potrebbe creare un "collo di bottiglia" che funziona contro il tempo di caricamento della pagina del tuo sito.

Pertanto, vale la pena scegliere attentamente quali elementi devono essere precaricati per ottenere il massimo impatto. Nella maggior parte dei casi, si tratta di caratteri Web, CSS e JavaScript, poiché questi tendono ad essere i file più pesanti.

Come verificare se il tuo sito sta precaricando le richieste chiave

Un paio di strumenti diversi possono identificare se il tuo sito sta precaricando le richieste e suggerire elementi che potrebbero trarre vantaggio da questa tecnica di ottimizzazione. Ad esempio, PageSpeed ​​Insights è una delle opzioni più popolari per identificare i problemi di prestazioni sul tuo sito web.

Per utilizzare questo strumento gratuito, inserisci semplicemente l'URL del tuo sito e fai clic su Analizza . Questo genererà un rapporto dettagliato sulle prestazioni.

Scorri verso il basso per vedere le opportunità di performance, la diagnostica e gli audit superati. Dovresti essere in grado di trovare il suggerimento per le richieste della chiave di precaricamento in una di queste sezioni.

Se preferisci non navigare avanti e indietro tra il tuo sito e PageSpeed ​​Insights, considera l'installazione dell'estensione Google Lighthouse per Chrome. Ti consente di generare report dall'interno del browser e visualizzare le metriche delle prestazioni di una pagina.

Allo stesso modo, GTMetrix può generare rapporti dettagliati sulle prestazioni per qualsiasi sito. Ti consente di analizzare le pagine da più posizioni e di monitorarne le prestazioni nel tempo.

Nella scheda Struttura di GTMetrix, sarai in grado di vedere se il precaricamento delle richieste chiave potrebbe aiutare le prestazioni del tuo sito.

Come precaricare le richieste di chiavi in ​​WordPress

Prima di apportare modifiche significative al tuo sito WordPress, come l'aggiunta di codice personalizzato, vale sempre la pena fare un backup completo. Questa precauzione di sicurezza significa che avrai a portata di mano una versione funzionale del tuo sito Web in caso di errori.

È qui che Jetpack VaultPress Backup torna utile. Questo plug-in intuitivo crea automaticamente backup completi di tutti i tuoi dati, inclusi i file, le tabelle del database e le informazioni sui prodotti WooCommerce. Questi backup vengono salvati in tempo reale e archiviati in modo sicuro nel cloud. Puoi ripristinarli in pochi clic, anche se sei in viaggio o non puoi accedere al tuo sito.

1. Caratteri

A volte, i caratteri possono essere sepolti all'interno di altri file sul tuo sito Web, inclusi file CSS e JavaScript. Sfortunatamente, questo può rallentare il processo di rendering della pagina.

Per precaricare le richieste con i caratteri in WordPress, copia e incolla questo codice nella sezione <head> della tua pagina:

 <head> <!-- ... --> <link rel="preload" href="/assets/Font-Name.woff2" as="font" type="font/woff2" crossorigin> </head>

Ricorda di sostituire "Font-Name" con il nome del tuo font. Inoltre, includere "crossorigin" è essenziale se il tuo font proviene da una fonte di terze parti perché dice al browser che deve caricare il file da un server esterno.

2. Caratteri Google

Google Fonts include una libreria open source di quasi 1500 famiglie di caratteri. Se stai cercando caratteri Web personalizzati da utilizzare sul tuo sito, probabilmente ne troverai uno lì.

L'utilizzo di Google Fonts può contribuire a conferire un design unico al tuo sito, ma il browser deve anche scaricare i file dei caratteri durante il rendering del contenuto. A seconda del carattere, questo può aumentare il tempo di caricamento della pagina.

Quando precarichi Google Fonts, è anche una buona idea "preconnetterli" prima. Questo passaggio comunica in anticipo al browser che dovrà connettersi a un sito di terze parti (ad es. Google Fonts) per recuperare una risorsa.

Inoltre, dopo aver aggiunto il codice di precaricamento, vale la pena includere un collegamento al suo foglio di stile. In questo modo, se il browser dell'utente non è in grado di precaricare il carattere in questione, sarà comunque in grado di eseguirne il rendering.

Aggiungi semplicemente il seguente codice alla sezione <head> della tua pagina:

 <link rel=”preconnect” href=”https://fonts.gstatic.com” crossorigin /> <link rel=”preload” as=”style” href=”$fontURL&display=swap” /> <link rel=”stylesheet” href=”$fontURL&display=swap” media=”print” onload=”this.media='all'” /> <noscript> <link rel=”stylesheet” href=”$fontURL&display=swap” /> </noscript>

All'interno del tuo codice, dovrai sostituire "$fontURL" con un link al tuo Google Font. Ad esempio, potrebbe assomigliare a questo:

https://fonts.googleapis.com/css2?family=Tangerine:ital,wght@0,400;0,700;1,400;1,700

Quindi, assicurati di salvare le tue modifiche!

3. Carattere fantastico

Font Awesome è un'ottima risorsa per icone e caratteri personalizzati, con opzioni sia gratuite che premium all'interno della sua libreria. Potresti utilizzare alcune di queste icone per potenziare il design all'interno di menu, intestazioni, piè di pagina e aree di contenuto.

Come Google Fonts, il precaricamento delle icone Font Awesome può essere una buona idea per accelerare il tempo di caricamento della pagina percepito. Basta aggiungere questo codice alla sezione <head> della pagina:

 <link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/> <link rel="preload" as="font" type="font/woff2" crossorigin href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0"/>

Dovrai sostituire il percorso del file con il carattere o l'icona che stai utilizzando sul tuo sito web. Quindi, salva le modifiche!

4. CSS

Cascading Style Sheets (CSS) è un linguaggio di progettazione che collabora con l'HTML per determinare lo stile e la presentazione di una pagina web. Con il CSS personalizzato, puoi modificare rapidamente l'aspetto di diversi elementi.

Ogni pagina HTML in stile sul tuo sito web avrà un foglio di stile corrispondente con tutti i tuoi CSS. Un browser deve caricare questo file durante il rendering di una pagina web, quindi vale la pena dire al browser che dovrebbe precaricare questa risorsa.

Fortunatamente, c'è un modo semplice per precaricare i CSS. Aggiungi semplicemente questo codice alla sezione <head> della tua pagina:

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

Assicurati di sostituire "styles.css" con il nome del foglio di stile. Inoltre, tieni presente che mentre questo codice funzionerà in Google Chrome, non è supportato da tutti i browser.

5. JavaScript

JavaScript è un altro dei linguaggi di scripting comuni utilizzati in WordPress. Ti consente di creare contenuti dinamici come animazioni, caroselli di immagini in movimento e feed di aggiornamento automatico.

Il rendering di JavaScript è in genere più complesso perché i suoi file sono relativamente pesanti e richiedono un processo più lungo per visualizzare il contenuto. Ecco perché dire a un browser di precaricare JavaScript pesante può essere utile per accelerare il tempo di caricamento della pagina.

Come con i CSS, dovrai solo aggiungere questa semplice riga di codice alla sezione <head> della pagina:

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

Come prima, sostituisci "ui.js" con il nome del file JavaScript e salva le modifiche.

Bonus: installa un plug-in gratuito per migliorare Core Web Vitals

Il precaricamento delle richieste è solo una tecnica che puoi utilizzare per migliorare i punteggi Core Web Vitals del tuo sito WordPress.

Se stai cercando una soluzione più completa (e gratuita!), considera l'installazione di Jetpack Boost. Questo strumento è sviluppato da Automattic, la stessa azienda dietro WordPress.com.

Questo plug-in intuitivo esegue la scansione dell'intero sito Web e ti assegna un punteggio su desktop e dispositivi mobili. Inoltre, Jetpack Boost non è utile solo per i tre Core Web Vitals. I suoi metodi di ottimizzazione possono migliorare altre metriche, tra cui Time to Interactive (TTI) e Total Blocking Time (TBT).

Sarai in grado di utilizzare un semplice sistema di commutazione per ottimizzare il caricamento CSS, rinviare JavaScript non essenziale e immagini di caricamento lento. La versione premium del plug-in genererà automaticamente CSS critici ogni volta che apporti modifiche al tuo sito web.

In alternativa, Jetpack Complete può portare il tuo sito WordPress a un livello completamente nuovo. Questo piano contiene più strumenti per le prestazioni, incluso l'accesso all'immagine Content Delivery Network (CDN) di Jetpack, che può risparmiare larghezza di banda e migliorare il tempo di caricamento della pagina. Inoltre, otterrai strumenti avanzati per la sicurezza e la crescita di WordPress.

Domande frequenti sul precaricamento delle richieste di chiavi

A questo punto, dovresti avere una buona conoscenza di come precaricare le richieste chiave in WordPress. Tuttavia, esamineremo alcune domande frequenti solo per essere sicuri!

Il precaricamento delle richieste migliora l'esperienza dell'utente?

Le richieste di precaricamento possono migliorare l'esperienza dell'utente diminuendo i tempi di caricamento percepiti del tuo sito. Dal momento che i visitatori non dovranno attendere molto a lungo per il rendering dei tuoi contenuti, sarà meno probabile che si sentano frustrati e potenzialmente lascino il tuo sito web per un altro.

Le richieste di precaricamento migliorano i Core Web Vitals?

Il precaricamento delle richieste chiave in WordPress può migliorare i punteggi di Core Web Vitals, in particolare quando si tratta di Largest Contentful Paint (LCP). Infatti, quando decidi quali elementi precaricare, sarebbe saggio includere il tuo contenuto "più grande" o "principale", poiché questo è ciò che probabilmente ne trarrebbe maggior beneficio.

Precarica le richieste delle chiavi rispetto al precarico degli asset critici

Vale la pena notare che il precaricamento delle richieste di chiavi equivale al precaricamento delle risorse critiche. Entrambi i termini si riferiscono a dire a un browser di caricare in anticipo determinate risorse per rendere più rapidamente il contenuto di una pagina.

Precaricamento vs. preconnessione vs. precaricamento

Precaricamento, preconnessione e precaricamento potrebbero sembrare concetti simili, ma in realtà significano cose leggermente diverse. Sono tutti tag che indicano a un browser in quale ordine caricare il contenuto, ma svolgono funzioni distinte.

Innanzitutto, il precaricamento comporta il caricamento del contenuto necessario per il rendering della pagina all'interno del browser di un utente. È un tag ad alta priorità che renderà pronta una risorsa in pochi secondi.

Al contrario, il precaricamento riguarda gli elementi successivi che potrebbero dover essere caricati. Il browser cercherà le risorse in anticipo e le memorizzerà nella sua cache. È un tag con priorità molto bassa, quindi non dovresti usarlo per risorse urgenti.

Infine, la preconnessione viene utilizzata quando vuoi dire a un browser di connettersi a un particolare dominio. Se il tuo sito utilizza una risorsa di uno specifico sito di terze parti (come Google Fonts), la preconnessione indica al browser che dovrà connettersi a quel dominio a un certo punto del processo di caricamento.

Cos'altro posso fare per migliorare le prestazioni del mio sito?

Varie attività possono aiutarti a migliorare le prestazioni del tuo sito WordPress, tra cui:

• Utilizzo di un CDN per servire i tuoi contenuti ai visitatori di tutto il mondo
• Rinvio (o eliminazione) di CSS inutilizzati
• Eliminazione delle risorse che bloccano il rendering
• Minimizzare CSS e altre risorse
• Fare meno richieste HTTP

Vale anche la pena scegliere un host WordPress di alta qualità che ti fornisca funzionalità di ottimizzazione delle prestazioni come cache dedicata, una garanzia di uptime e una vasta rete di data center in tutto il mondo.

Migliora le prestazioni del tuo sito WordPress precaricando le richieste chiave

I tempi di caricamento delle pagine possono influire in modo significativo sull'esperienza utente del tuo sito Web e sul posizionamento nei motori di ricerca. Quindi, ti consigliamo di fare tutto ciò che è in tuo potere per accelerare il tempo necessario a un browser per visualizzare il contenuto del tuo sito.

Quando precarichi le richieste chiave all'interno delle tue pagine, il browser di un visitatore avrà risorse (come caratteri, CSS e JavaScript) pronte. Quindi, non ci sarà alcun ritardo durante il caricamento dei tuoi contenuti e renderli accessibili agli utenti.

Il precaricamento delle richieste chiave è solo un passo verso il miglioramento delle prestazioni del tuo sito. Usando Jetpack Boost, puoi facilmente configurare il tuo sito web per il caricamento lento delle immagini, rinviare JavaScript non essenziale e altro ancora. Meglio ancora, il plugin è gratuito. Dai un'occhiata a Jetpack Boost oggi!