Cosa sono le risorse per il blocco del rendering e come risolvere i problemi di blocco del rendering

Le risorse che bloccano il rendering sono uno dei motivi più comuni per il caricamento lento dei siti Web. E se il tuo sito web non è abbastanza veloce, non solo stai danneggiando l'esperienza utente dei tuoi visitatori, ma anche il posizionamento del tuo motore di ricerca. La cattiva notizia è che se il tuo sito web è lento, stai perdendo clienti e entrate.

Tuttavia, ci sono anche buone notizie: puoi migliorare la velocità del tuo sito Web eliminando le risorse di blocco del rendering. In questo articolo, spiegheremo in che modo le risorse di blocco del rendering influiscono sui tempi di caricamento e ti mostreremo come risolverli.

Cosa sono le risorse di blocco del rendering?

Le risorse più comuni per il blocco della visualizzazione sono i file JavaScript e CSS che si trovano nella parte iniziale della tua pagina web. Si caricano nell'area above the fold (o nell'area che normalmente vedi su un sito Web prima di scorrere verso il basso per vedere il resto del contenuto) e fanno parte del percorso di rendering critico utilizzato da un browser web.

In parole povere, ciò significa che determinati eventi devono verificarsi affinché il tuo browser visualizzi (resa) correttamente la visualizzazione iniziale di qualsiasi pagina web. Ecco un esempio di come funziona un percorso di rendering di base:

• Il browser scarica una pagina web che consiste in un file HTML che contiene la struttura della pagina web
• Il browser legge quindi l'HTML e rileva 3 file aggiuntivi: un file css, un file javascript e un'immagine
• Il browser scaricherà prima l'immagine
• Il browser si rende quindi conto che non può continuare a visualizzare la pagina senza afferrare CSS e JavaScript
• Il browser scarica il file CSS e lo legge per assicurarsi che non venga chiamato nient'altro
• Il browser scarica il file JavaScript e lo legge per assicurarsi che non venga chiamato nient'altro
• Il browser può finalmente visualizzare la pagina web

Mentre il browser è impegnato a caricare e leggere ciascuno dei file CSS e JavaScript, i tuoi visitatori stanno fissando uno schermo vuoto, in attesa che il tuo sito venga caricato. Se stai utilizzando un CMS come WordPress, il tuo browser può essere occupato per un po' perché dovrà caricare non solo i file di stile e script del tuo tema, ma anche i file di script e di stile forniti con WordPress stesso, nonché quelli forniti con tutti i plugin e i widget che stai utilizzando.

Quando si tratta di ottimizzare la velocità del tuo sito web, la prima attività del tuo elenco dovrebbe essere la riduzione del tempo necessario ai tuoi utenti per essere in grado di visualizzare e interagire con i tuoi contenuti. Il modo più semplice per farlo è ottimizzare il percorso di rendering critico.

Come risolvere i problemi di blocco del rendering

Ora che sai quali sono le cause dei problemi di blocco della visualizzazione e in che modo influiscono sulla velocità del tuo sito, parliamo di come risolverli.

CSS che blocca il rendering

Esistono tre modi per risolvere i problemi CSS che bloccano la visualizzazione:

• Chiama correttamente i tuoi file CSS : il tuo file CSS dovrebbe essere collegato al tuo file HTML in questo modo: <link rel="style.css" href=“style.css"> invece di fare affidamento sull'utilizzo del metodo @import . Il metodo @import di solito si trova vicino alla parte superiore del tuo normale foglio di stile e fa sì che il browser torni indietro e trovi il file importato prima che possa leggere il resto del file CSS e si traduca in un ritardo ancora maggiore quando si tratta di eseguire il rendering della tua pagina web
• Riduci il numero di file CSS nel percorso critico : se possibile, combina tutti i diversi file CSS in uno solo e rimuovi la chiamata a quei file dal tuo HTML

JavaScript che blocca il rendering

Per rimuovere JavaScript che blocca il rendering, devi sapere quanti file JavaScript sono caricati e dove vengono chiamati nel tuo HTML. Un buon modo per scoprirlo è utilizzare lo strumento Google PageSpeed ​​Insights. Quando l'azienda di pulizie australiana This Is Neat Cleaning stava costruendo il proprio sito Web, ha utilizzato PageSpeed ​​Insights di Google come benchmark, testando vari scenari per scoprire esattamente di cosa avevano bisogno sia per dispositivi mobili che desktop.

È stato evidente dai test che l'inserimento della maggior parte degli script nella parte inferiore dei file HTML ha prodotto i risultati migliori. Il motivo principale è che lo spostamento degli script nella parte inferiore della pagina ha rimosso il rendering che impedisce a javascript di bloccare l'esperienza dell'utente. Con i CSS critici ancora in fase di caricamento above the fold, l'utente potrebbe comunque utilizzare fondamentalmente il sito, mentre le interazioni e le funzionalità venivano ancora caricate in background.

Utilizzo di un plug-in

Ovviamente, come per qualsiasi cosa relativa a WordPress, puoi utilizzare un plug-in per risolvere i problemi di blocco del rendering. Con oltre un milione di installazioni attive totali, è stato un gioco da ragazzi che This is Neat Cleaning avrebbe utilizzato W3 Total Cache per la memorizzazione nella cache, la minimizzazione e l'ottimizzazione delle prestazioni.

Ecco come puoi utilizzare W3 Total Cache per risolvere i problemi di blocco del rendering.

Nella dashboard di WordPress, vai su Prestazioni > Impostazioni e scorri verso il basso fino alla sezione Riduci a icona. Seleziona la casella che dice Abilita e quindi seleziona Manuale dal menu a discesa accanto alla modalità di riduzione a icona. Salva le impostazioni . Dovrai quindi aggiungere tutti gli script e gli stili che desideri minimizzare.

Per scoprire dove si trovano gli script e i fogli di stile che bloccano il rendering, vai allo strumento Google Page Speed ​​Insights e analizza il tuo sito web. Quindi, guarda la scheda dei suggerimenti e trova la sezione che dice: Elimina JavaScript e CSS che bloccano la visualizzazione nei contenuti above-the-fold . Fare clic su Mostra come correggere e selezionare e copiare l'URL del file.

Torna alla dashboard di WordPress e vai a W3 Total Cache > Performance > Minify . Scorri verso il basso fino alla sezione JavaScript e in Operazioni nelle aree assicurati che il tipo di incorporamento sia impostato su Non bloccante utilizzando il differimento per la sezione <head> . Quindi, fai clic sul pulsante Aggiungi script e incolla l'URL che hai copiato dallo strumento Google PageSpeed.

Dopo aver aggiunto tutti i file di script, scorri verso il basso fino alla sezione CSS , fai clic su Aggiungi un foglio di stile e aggiungi gli URL dei file del foglio di stile copiati da Google PageSpeed ​​Insights.

Al termine, fai clic sul pulsante Salva impostazioni ed elimina cache .

Pensieri finali

Le risorse che bloccano il rendering possono causare scompiglio quando si tratta di velocità del sito web. Fortunatamente, ci sono alcuni modi per risolvere questi problemi, quindi usa i suggerimenti forniti qui per migliorare la velocità del tuo sito Web e garantire ai tuoi visitatori la migliore esperienza utente possibile.