Implementazione di precaricamento, precaricamento, preconnessione in WordPress

Sfrutta le moderne funzionalità del browser come precaricamento, precaricamento e preconnessione per rendere più veloce il sito Web di WordPress.

Come proprietario di un sito, a chi non piace fare tutto il possibile per caricare la pagina web più velocemente?

Garantire un caricamento del sito più veloce e coerente in tutto il mondo è impegnativo. Ci sono diverse cose che puoi fare per caricare rapidamente le risorse del sito, inclusa l'abilitazione dei seguenti suggerimenti per il browser . Sono anche conosciute come tecniche di pre-browsing .

Nota : le tecniche dei suggerimenti del browser non aiutano molto quando accedi al sito Web per la prima volta, ma le richieste successive sono più veloci.

Precarico

Puoi utilizzare il tag di preload per indicare al browser di recuperare in anticipo alcune delle risorse statiche. Possono essere un'immagine, un font, JavaScript, CSS, script, video, ecc. Aiuta a dare la priorità al caricamento delle risorse; quindi, le prestazioni sono migliorate.

Il precaricamento sarebbe una buona idea da implementare se prevedi che i tuoi utenti visitino più pagine in seguito. Come il negozio eCommerce in cui l'utente visita la pagina del prodotto e quindi controlla le informazioni, confronta con altri prodotti, aggiungi al carrello, paga, ecc.

È possibile utilizzare i seguenti plug-in per impostare la funzione di precaricamento.

Suggerimenti per le risorse migliori: un plug-in gratuito per configurare file CSS e JS.

WP Rocket: un plug-in premium per potenziare le prestazioni del sito Web con molte tecniche essenziali, incluso il precaricamento della cache e la mappa del sito.

Come fai a sapere se il precarico è abilitato?

Il modo più rapido per scoprirlo è visualizzare l'origine della pagina. Dovresti vedere qualcosa come di seguito.

 <link rel="preload" as="style" href="IMPORTANT.css"> <link rel="preload" as="script" href="CRITICAL.js">

Non tutti i browser supportano il precaricamento durante la scrittura. Quindi, controlla la matrice di compatibilità prima dell'implementazione.

Preconnessione

Carichi risorse da altri domini? Forse CDN?

In caso contrario, e ogni risorsa viene caricata dal tuo singolo dominio, questo potrebbe non essere utile.

Browser dei suggerimenti di preconnessione per stabilire una connessione ad altri domini in background per risparmiare tempo per la ricerca DNS, il reindirizzamento, l'handshake TCP, la negoziazione TLS, ecc. L'idea è quella di ridurre la latenza per fornire un caricamento rapido delle risorse da un altro dominio.

Ancora una volta, puoi utilizzare il plug-in di suggerimenti per le risorse migliori sopra menzionato o quello premium come perfmatters.

Una volta configurate le risorse richieste, dovresti vederle nel sorgente della pagina come di seguito.

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

Nota: se stai caricando le risorse da un dominio che richiede CORS, devi specificarlo poiché dovrebbe apparire crossorigin e output.

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

Preconnect è compatibile con l'ultima versione di Chrome, Edge, Firefox, Safari.

Precarica

Consenti al browser di recuperare la pagina successiva, che ritieni necessaria quando l'utente naviga. Prefetch scaricherà le risorse necessarie e le memorizzerà nella cache locale e le servirà rapidamente quando necessario. Esistono due tipi di precaricamento.

Prelettura DNS – spiegata di seguito

Prelettura del collegamento : configurata utilizzando <link url ..>. Utilizzato per precaricare le risorse HTML o statiche. Puoi precaricare le risorse usando as attributo.

<link rel="prefetch" href="https://somesite.com/articles/page/2/" as="document">

as attributo supporta varie risorse come audio, video, script, traccia, stile, font, oggetto, documento, ecc. Il precaricamento dei collegamenti può essere configurato con l'aiuto del plug-in Pre Party Resource Hints.

Precarica DNS

Stai caricando risorse da molti domini e vuoi risolverle in background?

Questa configurazione rapida può aiutare a risolvere tutti i potenziali domini in anticipo, quindi quando vengono richieste risorse, si carica più velocemente. Questo aiuta a ridurre la latenza complessiva.

Diciamo che stai caricando risorse da 3 domini e che ogni dominio impiega circa 100 ms per eseguire la ricerca DNS, quindi risparmierai 300 ms di latenza.

Non è bello?

Puoi implementare utilizzando il plug-in perfmatters o aggiungere quanto segue nel file functions.php del tuo tema se sei a tuo agio nella modifica dei file del tema.

 //* DNS Prefetching function dns_prefetch() { echo '<meta http-equiv="x-dns-prefetch-control" content="on"> <link rel="dns-prefetch" href="https://YOUROTHERDOMAIN.com" /> <link rel="dns-prefetch" href="https://ANDANOTHERONE.com" /> <link rel="dns-prefetch" href="https://AND.SOMEMORE.com" /> } add_action('wp_head', 'dns_prefetch', 0);

Puoi leggere di più su Mozilla web docs.

Prerender

Ti aspetti che gli utenti del tuo sito navighino nella pagina potenziale?

Il prerender può aiutare a caricare tali risorse in background e quando l'utente fa clic su di esso, lo ottiene molto rapidamente. Puoi raggiungere questo obiettivo con il plug-in Pre Party Resource Hints.

Il prerendering è adatto per una pagina o una risorsa leggera, ma fai attenzione all'intero sito o alle grandi risorse in quanto potrebbe aumentare l'utilizzo della CPU e la larghezza di banda e rallentare il sito. Quindi, prova con la risorsa più piccola e testala per assicurarti che non abbia effetti collaterali.

Come puoi vedere, ci sono quattro plugin principali coinvolti per implementare i suggerimenti del browser in WordPress. Scegli quello che ti piace e soddisfa il requisito.

Plug-in Pre-Party Resource Hints: un plug-in gratuito offre prelettura DNS, prelettura dei collegamenti, prerendering, preconnessione e precaricamento.

Suggerimenti per le risorse migliori: un'alternativa a quella sopra.

Il plugin gratuito è buono fintanto che è mantenuto e supportato. Sfortunatamente, questo non accade per molti plugin, ed è per questo che a volte è meglio optare per la versione a pagamento. I plug-in della versione commerciale sono supportati in modo professionale e aggiornati con gli standard e le correzioni di sicurezza di WordPress. Se sei disposto a spendere qualche dollaro per ottimizzare le prestazioni del tuo sito, puoi dare un'occhiata ai seguenti.

WP Rocket: ben noto, considerato affidabile da oltre 800.000 siti. Costava $ 49 per un sito web.

Perfmatters: un prodotto leggero e facile da seguire costa $ 24,95 per un sito. Mentre scrivo, offre le seguenti caratteristiche.

È un sacco di ottimizzazione.

Conclusione

Il core di WordPress è leggero, ma diventa ingombrante a seconda del tema e dei plugin che utilizzi. Inoltre, è essenziale ottimizzare le prestazioni del tuo sito per migliorare il posizionamento e la conversione nei risultati di ricerca. Le tecniche di cui sopra sono facili da seguire, ma non dovresti fermarti qui.

Dovresti anche considerare l'utilizzo di una CDN per memorizzare nella cache e fornire contenuti più velocemente ai tuoi utenti, a livello globale. Ce ne sono molti, ma consiglierei di provare SUCURI che offre CDN e sicurezza, entrambi.