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 un sofisticato toolbox 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. Spesso sono poco ottimizzati. In quanto tali, possono rallentare notevolmente il tuo sito web.
Questo può essere frustrante per i tuoi lettori. Pertanto, in questa guida, esploreremo come trovare e rimuovere questi script di blocco del rendering e ti mostreremo come aumentare la 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 Hypertext Markup Language. HTML funge da base , mentre JavaScript e CSS sono incorporati in esso. Tuttavia, in questi giorni, è più convenzionale incorporare chiamate a script esterni nel documento HTML.
Questi script sono tenuti 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 leggere 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.
Più sono gli script complessi che la tua pagina web deve chiamare dalla coda, più tempo impiegherà per il rendering. Spesso i browser web scaricano risorse di pagine web come script e immagini in una cache locale per caricare più velocemente le pagine web. Sebbene gli utenti lato client possano accelerare i tempi di rendering delle pagine web disabilitando JavaScript , aumentando le dimensioni della cache e utilizzando AdBlockers, questa non è una soluzione ideale. La responsabilità dovrebbe essere dello sviluppatore web.
Se ricevi lamentele o hai notato che il tuo sito web ha problemi a visualizzare il suo contenuto, non è troppo tardi per risolverlo.
Come ottimizzare il tuo sito web trovando e risolvendo 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 Google PageSpeed Insights. 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.
Questi tool ti suggeriranno anche audit che puoi utilizzare per rendere il tuo sito web più veloce. Ti proporranno, ad esempio, 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 Coverage di Chrome DevTools per visualizzare i dati di utilizzo dei tuoi script. Una volta identificati quali script non sono ottimali, puoi fare diverse cose per risolverli. Tuttavia, questi passaggi richiederanno un po’ di conoscenza di codice per implementarli con successo. Avrai almeno bisogno di una conoscenza di base della programmazione JavaScript funzionale.
Partecipare a un corso di coding (o bootcamp) è una buona idea per sviluppare ulteriormente le tue abilità. In media, un bootcamp di programmazione può richiedere fino a quindici settimane per essere completato e, sebbene possa sembrare molto , ne vale la pena se si considera come l’alfabetizzazione del codice di base 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. La base della tua pagina web dovrebbe andare qui, quindi uno schermo bianco non accoglie l’utente quando carica la tua pagina web. Sebbene incorporare il CSS qui vada bene, dovresti evitare di inserire JavaScript.
Una volta ottimizzata la sezione head, è necessario ottimizzare il body della pagina. La maggior parte dei browser web esegue il rendering delle 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 sonofondamentali per il rendering della pagina web per ultimi insieme a script complessi che richiedono tempo.
2. Minimizza il codice
La riduzione del codice comporta 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 tua pagina web.
Plugin e strumenti come WP Rocket hanno moduli che minimizzano JavaScript e CSS nei tuoi temi. In alternativa, puoi minimizzare manualmente il tuo codice script con uno strumento online gratuito come JavaScript Minifier.
3. Utilizza 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 della pagina.
Puoi usare l’ attributo async per caricare lo script in parallelo con la pagina web ed eseguirlo non appena è disponibile. In alternativa, è possibile utilizzare la rinviare l’attributo di 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 defer 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 and await . Puoi usarli per caricare i tuoi JavaScript in modo asincrono senza modificare i tag HTML sulla tua pagina web.
4. Sostituisci gli elementi visivi JavaScript con CSS3
In passato, i CSS non erano così versatili come lo sono oggi.CSS 1.0 e 2.0, ad esempio, erano privi di strumenti dell’interfaccia utente come controlli di base e slider.
Poi è arrivato CSS3. Presentava nuovi colori, box shadow, opacità, ecc. JavaScript è ottimo per aggiungere controlli complessi all’interfaccia utente ma è più pesante rispetto ai CSS.
Pertanto, l’utilizzo di una quantità eccessiva di JavaScript rallenta notevolmente il tuo sito web. Se noti che la tua pagina web utilizza JavaScript per fare il lavoro dove le versioni precedenti di CSS hanno fallito, dovresti modificarla e sostituire tutto il JavaScript non necessario 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 è 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 inutili alcune operazioni CSS e JS. L’utilizzo dell’HTML invece degli script velocizza 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 sono completamente inutili e rimuoverli. Ancora una volta, puoi utilizzare la scheda Coverage di Chrome DevTools o GTmetrix per trovare gli script più sottoutilizzati sulla tua pagina web e quindi rimuoverli.
Dopo aver rimosso tutte le funzioni o i tag non necessari, puoi combinare script le cui funzioni sono simili. Se sai già come mannipolare il codice sorgente della tua pagina web, questo non dovrebbe essere un compito difficile per te. Tuttavia, gli utenti che non sono così esperti o informati nel web design non dovrebbero preoccuparsi. WordPress ti consente di identificare più facilmente gli script sul tuo sito web e di modificarli utilizzando vari plugin di ottimizzazione che vedremo tra poco.
6. Utilizza i plugin per ottimizzare il tuo sito web WordPress
Ancora una volta, non è necessaria una conoscenza pratica della programmazione per ottimizzare il tuo sito web WordPress., 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 minimizzare 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 del web. Può rilevare automaticamente quali script creano problemi e risolverli per te. Puoi usarlo per la memorizzazione rapida nella cache, la compressione e la minimizzazione.
- Autooptimize : può rinviare ed eliminare script non essenziali, integrare CSS inline 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 per essere utilizzato. Dovrai tenere traccia e identificare manualmente gli script prima di rimuoverli o modificarli. Nella maggior parte dei casi, questo plugin è già disponibile con il tuo pacchetto WordPress.
- Async Javascript : un plugin open source presentato da WordPress. Ti consente di rilevare il JavaScript che blocca il rendering e quindi rimandarlo o caricarlo in modo asincrono.
Allora perché non abbiamo semplicemente consigliato i plugin subito? Perchè, alcuni di questi plugin richiedono un investimento. Ad esempio, Autoptimize costa $ 49 all’anno. Sebbene sia una tariffa ragionevole, potrebbe non essere ideale per chi sta già invest4endo una grossa somma di denaro per hosting, altre applicazioni e plugin.
Tuttavia, indipendentemente dal fatto che tu stia utilizzando plugin o trovato gli script manualmente, devi 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.
Buon lavoro.
