Migliora la velocità del sito: rimuovi JS e CSS che bloccano il rendering

WordPress ti consente di creare un sito Web personalizzato con la tua scelta di plug-in e temi. Tuttavia, questo può significare che il tuo sito ha molti script che ne rallentano i tempi di caricamento e le prestazioni. Non tutti questi script devono essere caricati immediatamente e alcuni possono effettivamente impedire ai visitatori di vedere i tuoi contenuti il ​​più rapidamente possibile.

Questi file estranei sono chiamati JavaScript e CSS che bloccano il rendering. In questo articolo, spiegheremo quali sono queste risorse di blocco del rendering e poi ti mostreremo come eliminare le risorse di blocco del rendering dal tuo sito WordPress. Iniziamo!

Che cos'è JavaScript e CSS che bloccano il rendering?

Quando un sito Web viene caricato nel browser, invia chiamate a tutti gli script in coda. Di solito, quella coda deve essere vuota prima che il sito web sia visibile nel browser. La coda di script che può impedire il caricamento completo del tuo sito Web sono i file JavaScript e CSS che bloccano il rendering.

Quando la coda degli script è molto lunga, può essere necessario un po' di tempo prima che i visitatori possano accedere al tuo sito. Spesso, molti di questi script non sono necessari per visualizzare subito il sito Web e potrebbero facilmente attendere l'esecuzione fino a quando il sito stesso non è completamente caricato.

In altre parole, questi tipi di script rallentano le tue pagine web senza effettivamente contribuire alle esigenze immediate dei tuoi spettatori. Qualsiasi script che non coinvolga ciò che il visualizzatore vedrà immediatamente (spesso indicato come elementi "above the fold") dovrebbe essere rimandato fino al caricamento del resto della pagina.

Perché JavaScript e CSS che bloccano il rendering sono dannosi per le pagine Web?

Gli script JavaScript e CSS che bloccano il rendering rallentano le tue pagine web, il che è negativo per molte ragioni. La velocità del sito gioca un ruolo in molti aspetti vitali del tuo sito Web WordPress, tra cui l'usabilità generale e l'ottimizzazione per i motori di ricerca (SEO). Quando il tuo sito si carica lentamente, è più probabile che tu perda visitatori e meno probabilità di essere posizionato in alto nei risultati dei motori di ricerca.

Naturalmente, la velocità e le prestazioni del sito sono influenzate da qualcosa di più delle sole risorse che bloccano il rendering. Detto questo, questo è un fattore che può fare una differenza significativa nei tempi di caricamento. Ricorda che ogni risorsa su una pagina web occupa byte, molti dei quali possono comportare tempi di download più lunghi. Meno script e più leggeri ha il tuo sito, meglio è. Dopotutto, non vuoi lasciare che un sito lento abbia un impatto negativo sulla tua attività.

In generale, è meglio assicurarsi che il codice del tuo sito web sia il più pulito e minimo possibile per migliorare la velocità complessiva. Tuttavia, ci sarà sempre del codice rimanente. Per impostazione predefinita, i browser proveranno a caricare tutto in una volta, inclusi gli script di blocco del rendering.

Spetta a te assicurarti che il tuo sito carichi prima gli script necessari affinché appaia corretto e sia utilizzabile quando un visualizzatore arriva per la prima volta su una pagina. Solo allora dovrebbe essere caricato il resto degli script.

Come eliminare JavaScript e CSS che bloccano il rendering

Prima di poter eliminare gli script che bloccano il rendering, dovrai identificare quali script stanno causando problemi. Per fare ciò, ti consigliamo di utilizzare PageSpeed ​​Insights di Google. Inserisci semplicemente il tuo URL e Google ti dirà esattamente quali script stanno rallentando le prestazioni della tua pagina:

Crea un elenco di tutti gli script visualizzati nei risultati in Elimina JavaScript e CSS che bloccano il rendering . Indipendentemente dal fatto che tu provi a risolverli manualmente o utilizzi un plug-in, questi sono gli script a cui vorrai prestare particolare attenzione quando applichi le seguenti correzioni.

Per ridurre il numero di script che bloccano la visualizzazione sul tuo sito, dovrai seguire alcune best practice:

• "Minimizza" JavaScript e CSS. Ciò significa rimuovere tutti gli spazi bianchi extra e i commenti non necessari nel codice.
• Concatena JavaScript e CSS. Per fare ciò, ti consigliamo di prendere diversi file .js e .css e combinarli. Idealmente, avrai solo pochi di questi file.
• Rinvia il caricamento di JavaScript. Può essere utile forzare l'attesa del caricamento dei file JavaScript fino a quando tutto il resto della pagina non è pronto. Un modo affidabile per rinviare JavaScript consiste nell'utilizzare il caricamento asincrono.

Questi suggerimenti possono essere difficili da realizzare manualmente in WordPress, perché molti plug-in frontali vengono forniti con i propri file JavaScript e CSS. Un plug-in può facilmente collegare fino a cinque o sei script al front-end del tuo sito. Questi file possono sommarsi abbastanza velocemente!

Per fortuna, WordPress utilizza un filtro combinato per registrare tutti gli script front-end. Ciò significa che hai la possibilità di identificare e gestire qualsiasi file JavaScript o CSS in arrivo, anche se non sai esattamente cosa cercare. Ovviamente, questo è molto più facile da realizzare con un plugin piuttosto che partire da zero.

Plugin per ridurre JavaScript e CSS che bloccano il rendering

Ci sono alcuni plugin di WordPress che possono aiutarti a ottimizzare il tuo sito rimuovendo JavaScript e CSS che bloccano il rendering. In questa sezione, esamineremo quattro scelte popolari.

1. WP Razzo

WP Rocket aiuta con l'ottimizzazione del sito attraverso attività come la minificazione di CSS e JavaScript, il caricamento lento delle immagini, il rinvio delle richieste JavaScript remote e altro ancora. È il "coltellino svizzero" dei plugin di ottimizzazione.

Uno dei maggiori vantaggi dell'utilizzo di questo plug-in è il semplice processo di configurazione. Tuttavia, un potenziale svantaggio è l'interfaccia utente. Il plug-in crea un'esperienza diversa nella dashboard di WordPress a cui potresti essere abituato. Alcuni utenti di lunga data potrebbero non apprezzare questa modifica dell'interfaccia. Tuttavia, la funzionalità effettiva del plug-in rimane di prim'ordine.

Ci sono alcuni extra gratuiti che puoi ottenere per WP Rocket nella directory dei plugin di WordPress. Tuttavia, il plug-in di base stesso ha un prezzo di $ 49 all'anno per un sito Web e un anno di supporto, con livelli aggiuntivi che offrono più opzioni.

2. Ottimizzazione automatica

Autoptimize è stato creato appositamente per affrontare i problemi sollevati da strumenti di raccomandazione come PageSpeed ​​Insights. Tutte le impostazioni che ti consentono di configurare il plug-in per il tuo sito Web saranno contenute in un nuovo menu nella dashboard di WordPress.

Autoptimize copre tutte le attività di ottimizzazione di base, come la minimizzazione e la memorizzazione nella cache degli script. Una caratteristica unica è che può anche ottimizzare e convertire le immagini nel formato WebP. Questo strumento ha ottime recensioni complessive, anche se ti consigliamo di tenere presente che può essere piuttosto complesso da configurare.

Mentre il plugin stesso è gratuito, puoi acquistare uno dei due pacchetti dagli sviluppatori per assistere con la sua configurazione. C'è un piano di configurazione personalizzato al prezzo di circa $ 165 (€ 149). Puoi anche ottenere una revisione professionale e pratica del tuo sito Web e la configurazione del plug-in esperto per circa $ 667 (€ 599).

3. Ottimizza JCH

JCH Optimize offre anche alcuni strumenti unici per aiutarti a migliorare il tempo di caricamento della pagina. Ad esempio, può ridurre il numero di richieste HTTP necessarie per caricare le tue pagine e ridurre anche le dimensioni di tali pagine. Ciò si traduce in un minor carico del server e requisiti di larghezza di banda inferiori.

Un'altra caratteristica unica di JCH Optimize è il suo generatore di sprite. Questo combina le immagini di sfondo in "sprite", quindi sono necessarie meno richieste HTTP per caricarle in un browser. Tuttavia, uno degli aspetti negativi di questo plugin può essere la ripida curva di apprendimento. La maggior parte degli utenti dovrà fare affidamento sulla documentazione di supporto per assicurarsi di aver configurato correttamente il plug-in, al fine di evitare errori.

Detto questo, il plugin ha molte recensioni a cinque stelle e oltre 10.000 installazioni attive. In termini di prezzo, è disponibile una versione gratuita del plugin. Se desideri accedere al supporto e a funzionalità avanzate come l'API Optimize Image, tuttavia, dovrai acquistare un abbonamento. Questi partono da $ 29 per sei mesi di supporto e accesso API.

4. Pacchetto potenziatore di velocità

Speed ​​Booster Pack offre ottimizzazione CSS e JavaScript, caricamento lento e una funzione di rimozione del disordine. Gli sviluppatori di Optimocha mantengono il plug-in aggiornato con una base di codice in continua evoluzione, quindi sai che utilizzerai sempre i metodi più recenti. C'è anche una funzione di ottimizzazione WooCommerce integrata che funziona per risolvere i colli di bottiglia.

Uno dei vantaggi dell'utilizzo di Speed ​​Booster Pack è che ha una funzione di integrazione di Content Delivery Network (CDN). Ciò semplifica l'utilizzo del CDN di tua scelta in WordPress, ottimizzando anche con il plug-in. Lo svantaggio di questo plug-in risiede nel processo di prova ed errore che potresti dover seguire per configurarlo correttamente.

Vale anche la pena notare che esiste un'opzione di servizio da abbinare al plug-in gratuito. Proprio come Autoptimize, gli sviluppatori offrono diverse opzioni per fornire un approccio pratico e professionale alla configurazione del plug-in per adattarlo al tuo sito Web unico.

Migliora la velocità del tuo sito con WP Engine

Qualunque sia il tuo approccio per migliorare la velocità del tuo sito, siamo qui per aiutarti. Abbiamo uno strumento di velocità per testare il tuo sito Web e le migliori risorse per sviluppatori per aiutarti a ottenere un'esperienza ottimizzata.
In effetti, la nostra Digital Experience Platform (DXP) è un ottimo posto per iniziare a costruire un sito Web WordPress migliore. Dai un'occhiata ai nostri piani tariffari oggi stesso!