Implementazione di precarico, prefetch, preconnect in WordPress

Approfitta delle moderne funzionalità del browser come il precaricamento, il prefetch, la preconnessione per rendere più veloce il sito Web WordPress.


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

Garantire un caricamento più rapido del sito in modo coerente in tutto il mondo è una sfida. Esistono diverse operazioni che è possibile eseguire per caricare rapidamente le risorse del sito, tra cui l’abilitazione di quanto segue suggerimenti per il browser. Sono anche conosciuti come tecniche di pre-navigazione.

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

precarico

È possibile utilizzare il tag di precaricamento 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 si prevede che gli utenti visitino più pagine successivamente. Come il negozio di e-commerce 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 configurare la funzione Preload.

Migliori suggerimenti sulle risorse – un plug-in gratuito per configurare i file CSS e JS.

WP Rocket – un plug-in premium per potenziare le prestazioni del sito Web con molte tecniche essenziali, tra cui il precaricamento della cache e la sitemap.

Come fai a sapere se il precarico è abilitato?

Il modo più rapido per scoprirlo è visualizzare l’origine della pagina. Dovresti vedere qualcosa di simile al di sotto.

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

preconnect

Carichi risorse da altri domini? Forse CDN?

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

Preconnettere il browser dei suggerimenti 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 è di ridurre la latenza per fornire un caricamento rapido delle risorse da un altro dominio.

Ancora una volta, è possibile utilizzare il plug-in dei suggerimenti sulle risorse migliori sopra menzionato o quello premium come perfmatters.

Una volta configurate le risorse richieste, dovresti vederle nell’origine della pagina come di seguito.

Nota: se stai caricando le risorse da un dominio che richiede CORS, devi specificare che come origine incrociata e output dovrebbero apparire come.

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

prefetch

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 prefetch.

Prefetch DNS – spiegato di seguito

Prefetch link – configurato utilizzando. Utilizzato per precaricare le risorse HTML o statiche. Puoi precaricare le risorse usando come attributo.

come attributo supporta varie risorse come audio, video, script, traccia, stile, font, oggetto, documento, ecc. Il prefetching dei collegamenti può essere configurato con l’aiuto di Plug-in Suggerimenti risorse pre-party.

Prefetch DNS

Caricamento di risorse da molti domini e desideri risolverli 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 generale.

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

Non è bello?

Puoi implementarlo usando il plugin perfmatters o aggiungere quanto segue nel file Functions.php del tuo tema se ti senti a tuo agio nel modificare i file del tema.

// * Prefetching DNS
funzione dns_prefetch () {
eco ‘

}
add_action (‘wp_head’, ‘dns_prefetch’, 0);

Puoi leggere di più su Documenti web di Mozilla.

Prerender

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

Prerender può aiutare a caricare quelle risorse in background e quando l’utente fa clic su di esse, le ottengono molto rapidamente. È possibile ottenere ciò con il plug-in Suggerimenti per le risorse pre-party.

Il prerendering è adatto a una pagina o risorsa leggera, ma fai attenzione all’intero sito o a grandi risorse in quanto può 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 soddisfare il requisito.

Plug-in Suggerimenti risorse pre-party – un plug-in gratuito offre prefetch DNS, prefetch link, prerender, preconnect e precaricamento.

Migliori suggerimenti sulle risorse – un’alternativa a quella sopra.

Il plug-in gratuito è valido purché sia ​​mantenuto e supportato. Sfortunatamente, questo non succede per molti plugin, ed è per questo che a volte è meglio scegliere la versione a pagamento. I plug-in per versioni commerciali sono supportati professionalmente e aggiornati con lo standard WordPress & correzioni di sicurezza. Se sei disposto a spendere qualche dollaro per ottimizzare le prestazioni del tuo sito, puoi dare un’occhiata a quelli seguenti.

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

Perfmatters – un peso leggero e facile da seguire costa $ 24,95 per un sito. Mentre scrivo, offre le seguenti funzionalità.

Questa è molta ottimizzazione.

Conclusione

Il core di WordPress è leggero, ma diventa ingombrante dipende dal tema e dai plugin che usi. Inoltre, è essenziale ottimizzare le prestazioni del tuo sito per migliorare il posizionamento e la conversione della 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 distribuire contenuti più velocemente ai tuoi utenti, a livello globale. Ce ne sono molti, ma consiglierei di provare SUCURI che offre entrambi CDN e sicurezza.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map