Come rimuovere JS e CSS che bloccano il rendering per la velocità del sito

Sebbene l'estetica di un sito Web sia importante, il suo contenuto e la velocità di caricamento fanno sì che le persone tornino. WordPress fornisce agli utenti una sofisticata cassetta degli attrezzi di plugin e temi per creare rapidamente i propri siti Web personalizzati.

Tuttavia, questi temi e plugin richiedono JavaScript (JS) e Cascading Style Sheets (CSS) per funzionare. WordPress li crea automaticamente sotto forma di file di script. Sono spesso poco ottimizzati. In quanto tali, possono rallentare notevolmente il tuo sito web.

Questo può essere frustrante per i lettori. Pertanto, in questa guida, esploreremo come trovare e rimuovere questi script di blocco del rendering e ti mostreremo come aumentare le velocità di caricamento del tuo sito Web WordPress.

Cosa sono gli script JS e CSS che bloccano il rendering e perché sono dannosi?

La maggior parte delle pagine Web su Internet è composta da tre componenti chiave: JavaScript, CSS e linguaggi di markup ipertestuale. HTML funge da base, mentre JavaScript e CSS sono incorporati in esso. Tuttavia, al giorno d'oggi, è più convenzionale incorporare chiamate a script esterni nel documento HTML.

Questi script vengono mantenuti in una coda che il tuo browser web utilizza per eseguire il rendering della pagina web. Il modo più semplice per vedere quali script utilizza una pagina Web senza guardare il codice sorgente è scaricarlo dal browser Web (Ctrl + S). Il browser Web scaricherà il documento HTML insieme a una cartella con tutti (o la maggior parte) degli script, delle immagini e degli altri file utilizzati dalla pagina Web.

Gli script più complessi che la tua pagina web deve richiamare dalla coda, maggiore sarà il tempo necessario per il rendering. Spesso, i browser Web scaricano le risorse delle pagine Web come script e immagini in una cache locale per caricare le pagine Web più velocemente. Sebbene gli utenti lato client possano accelerare i tempi di rendering delle pagine Web disabilitando JavaScript, aumentando le dimensioni della cache e utilizzando AdBlocker, questa non è una soluzione ideale. L'onere dovrebbe essere sullo sviluppatore web.

Se ricevi reclami o hai notato che il tuo sito web ha problemi a renderne il contenuto, non è troppo tardi per risolverlo.

Come ottimizzare il tuo sito web trovando e correggendo gli script di blocco del rendering

Prima di decidere quali script terminare o ottimizzare, devi valutare la velocità del tuo sito web o della tua pagina web. Puoi utilizzare una piattaforma online come GTmetrix o PageSpeed ​​Insights di Google. Tutto ciò che ti verrà richiesto di fare è inserire l'URL del sito Web o della pagina Web che desideri testare e lo strumento lo valuterà e fornirà altri approfondimenti.

Suggeriranno anche audit che puoi utilizzare per rendere più veloce il tuo sito web. Ad esempio, ti proporranno di utilizzare meno elementi nella tua pagina web o di ridurre CSS e JavaScript inutilizzati. GTmetrix ti mostrerà quali script devono essere ottimizzati.

In alternativa, puoi utilizzare la scheda Copertura di Chrome DevTools per mostrarti i dati di utilizzo dei tuoi script. Dopo aver identificato quali script non sono ottimali, puoi fare alcune cose per risolverli. Tuttavia, questi passaggi richiederanno un po' di abilità di codifica per implementarli con successo. Avrai almeno bisogno di una conoscenza di base della programmazione JavaScript funzionale.

Anche partecipare a un corso tutorial di codifica (o bootcamp) è una buona idea per aiutare a sviluppare ulteriormente le tue abilità. In media, un bootcamp di codifica può richiedere fino a quindici settimane per essere completato e, sebbene possa sembrare molto tempo, ne vale la pena se si considera come l'alfabetizzazione di base del codice sia un'abilità importante da avere nel mondo moderno. Tuttavia, ecco cinque modi per correggere gli script di blocco del rendering e aumentare la velocità della tua pagina web.

1. Ottimizza l'ordine di caricamento

La sezione head (</head></head> ) della pagina web viene utilizzata per il precaricamento degli elementi. Le fondamenta della tua pagina web dovrebbero andare qui, quindi uno schermo bianco non saluta l'utente quando carica la tua pagina web. Sebbene i CSS incorporati vadano bene, dovresti evitare di inserire JavaScript qui.

Una volta ottimizzata la sezione della testa, è necessario ottimizzare il corpo. La maggior parte dei browser Web visualizza le pagine Web dall'alto verso il basso. È necessario ordinare le chiamate agli script in base alla loro importanza e complessità. Dovresti effettuare chiamate a script che non sono cruciali per il rendering della pagina Web per ultimo insieme a script complessi che richiedono tempo.

2. Minimizza il codice

La minimizzazione del codice implica la riscrittura e l'eliminazione di caratteri non necessari come spazi bianchi, commenti, virgole, interruzioni di riga, ecc. Ciò rende il codice più conciso e compatto, il che alla fine riduce le dimensioni dello script e aumenta i tempi di caricamento della pagina Web.

Plugin e strumenti come W3TC hanno moduli che minimizzano JavaScript e CSS nei tuoi temi. In alternativa, puoi minimizzare manualmente il codice dello script con uno strumento online gratuito come JavaScript Minifier.

3. Utilizzare il caricamento differito e asincrono di JavaScript

I browser Web leggono il codice dall'alto verso il basso. Quando incontrano un tag di script, smettono di caricare la pagina Web e leggono il file di script. Questo rallenta il rendering.

È possibile utilizzare l'attributo async per caricare lo script in parallelo con la pagina Web ed eseguirlo non appena è disponibile. In alternativa, puoi utilizzare l'attributo defer per rinviare l'analisi degli script. Ciò significa che caricherà anche lo script parallelamente alla pagina Web, ma lo eseguirà solo quando il browser analizza la pagina Web.

Si consiglia di non utilizzare gli attributi async o differire sugli script utilizzati per il rendering e la visualizzazione di elementi visivi. Le parole chiave JavaScript equivalenti a questi attributi sono le parole chiave async e await . Puoi usarli per caricare i tuoi Javascript in modo più asincrono senza modificare i tag HTML sulla tua pagina web.

4. Sostituisci JavaScript Visual Elements con CSS3

In passato, i CSS non erano versatili come oggi. Ad esempio, CSS 1.0 e 2.0 erano privi di strumenti dell'interfaccia utente come controlli di base e slider.

Poi è arrivato CSS 3. Ha presentato nuovi colori, ombre dei riquadri, opacità, ecc. JavaScript è ottimo per aggiungere controlli complessi dell'interfaccia utente. Tuttavia, Javascript è più pesante di risorse rispetto a CSS.

Pertanto, l'utilizzo di quantità eccessive di JavaScript rallenta notevolmente il tuo sito web. Se noti che la tua pagina web utilizza JavaScript per recuperare il gioco in cui le versioni precedenti di CSS non sono andate a buon fine, dovresti modificarlo e sostituire tutti i JavaScript non necessari con CSS, dove puoi. Ciò consentirà alle pagine Web di caricarsi più velocemente.

5. Elimina tutti gli script non necessari

Lo scopo di JS e CSS è quello di espandere la funzionalità alle pagine Web e aggiungere la logica dove l'HTML non può. Tuttavia, HTML 5.3 è arrivato con nuovi tag che renderebbero non necessarie alcune operazioni CSS e JS. L'uso dell'HTML invece degli script rende naturalmente più veloce il caricamento delle tue pagine web.

Quindi il modo migliore per ottimizzare la velocità del tuo sito web è eliminare tutti gli script sottoutilizzati. Dovrai analizzare quali script non sono completamente necessari e rimuoverli. Ancora una volta, puoi utilizzare la scheda Copertura di Chrome DevTools o GTmetrix per trovare gli script più sottoutilizzati sulla tua pagina web e quindi rimuoverli.

Dopo aver rimosso tutte le funzioni oi tag non necessari, puoi combinare script le cui funzioni sono simili. Se sai già come aggirare il codice sorgente della tua pagina web, allora questo non dovrebbe essere un compito difficile per te. Tuttavia, gli utenti che non hanno la stessa esperienza o conoscenza del web design non dovrebbero preoccuparsi. WordPress ti consente di identificare più facilmente gli script sul tuo sito Web e di modificarli utilizzando vari plug-in di ottimizzazione. Tratteremo quelli dopo.

6. Utilizzo dei plugin per ottimizzare il tuo sito Web WordPress

Ancora una volta, non è necessaria una conoscenza pratica della programmazione per ottimizzare il tuo sito Web WP. Anche se un po' di esperienza aiuterebbe. Tuttavia, esiste una gamma di plugin orientati all'ottimizzazione degli script. Alcuni di loro utilizzano l'intelligenza artificiale per ridurre al minimo il codice, modificare l'ordine di caricamento e sostituire gli script sottoutilizzati con codice e script più efficienti.

Alcuni dei migliori plugin per l'ottimizzazione degli script includono:

• WP Rocket : questo è uno dei plugin più popolari per l'ottimizzazione web. Può rilevare automaticamente quali script sono problematici e risolverli per te. Puoi usarlo per la memorizzazione rapida nella cache, la deferenza, la compressione e la minimizzazione.
• Autoptimize : può differire ed eliminare script non essenziali, integrare CSS in linea e minimizzare script, HTML e immagini. Autoptimize è altamente personalizzabile tramite un'API aperta e opzioni avanzate.
• W3 Total Cache : questo plugin richiede un po' di lavoro da usare. Dovrai tenere traccia e identificare gli script manualmente prima di rimuoverli o modificarli. Nella maggior parte dei casi, questo plugin è già disponibile con il tuo pacchetto WordPress.
• Async Javascript : un plug-in open source presentato da WordPress. Ti consente di rilevare JavaScript che blocca il rendering e quindi rinviarlo o caricarlo in modo asincrono.

Allora perché non abbiamo semplicemente consigliato i plugin in primo luogo? Sfortunatamente, alcuni di questi plugin ti costeranno. Ad esempio, Autoptimize costa $ 49 all'anno. Sebbene sia una tariffa ragionevole, potrebbe non essere l'ideale per le persone che stanno già pagando una grossa fetta di denaro per l'hosting e altre applicazioni e plug-in.

Tuttavia, indipendentemente dal fatto che tu stia utilizzando plug-in o trovando script manualmente, è necessario comprendere concetti come minimizzazione, caricamento asincrono e ordine di caricamento. Ti semplificherà la risoluzione di eventuali problemi di caricamento in caso di errore di uno dei tuoi script.