Come eliminare le risorse che bloccano il rendering | Appassionati di WP

Se senti lamentele sulla velocità di caricamento del tuo sito web o desideri caricare le tue pagine web più velocemente e migliorare la tua esperienza utente, potresti prendere in considerazione come eliminare le risorse che bloccano la visualizzazione.

Indipendentemente dal motivo, la velocità con cui un sito Web appare davanti al viso del visitatore può influire sull'esperienza dell'utente e far perdere alla tua azienda le connessioni dei clienti. L'esperienza dell'utente sul sito Web dipende principalmente dal percorso di rendering critico e dalla gestione degli script caricati dal sito Web durante il processo di rendering.

Che cos'è il rendering?

Tutti i siti web seguono un percorso in cui l'utente può vedere e interagire con il suo contenuto. Il percorso di caricamento del sito Web è chiamato percorso di rendering critico. Questo percorso descrive i passaggi di ciascun sito per raccogliere e creare dati per il visitatore e il suo browser.

Cosa fanno i browser prima del rendering

L'inserimento dell'URL di un sito Web attiva il seguente processo:

1. La navigazione è completa quando un utente richiede un URL specifico.
   1. Si verifica una ricerca DNS, in cui un server fornisce un indirizzo IP
   2. Il browser e il server del sito Web eseguono un TCP Handshake per stabilire una connessione
   3. Le richieste di connessione sicura ottengono una negoziazione TLS o un secondo scambio di handshake
2. Il browser riceve una risposta e ottiene il codice del sito web
   1. Il primo pacchetto di dati viene ricevuto in un TCP Slow Start per regolare il traffico di rete
   2. L'utente invia riconoscimenti (ACK) al server per stabilire i limiti di connessione e le velocità di invio.
3. Il browser analizza le informazioni e trasforma i dati in un CSS Object Model (CSSOM) e in un Document Object Model (DOM).
   1. Viene costruito l'albero DOM (struttura del sito e della pagina)
   2. Uno scanner di precaricamento raccoglie risorse esterne, come script e immagini.
   3. Il CSSOM viene costruito (albero di stile)
   4. JavaScript viene compilato durante la compilazione del CSSOM
   5. L'Accessibility Object Model (AOM) è progettato per i dispositivi di assistenza per interpretare i contenuti.
4. Il rendering avviene utilizzando gli alberi CSSOM e DOM precedentemente creati.

Cosa succede quando esegui il rendering di una pagina?

I siti Web vengono visualizzati tramite la progettazione del codice per completare il layout, lo stile, la pittura e talvolta la composizione su un sito Web. Il CSS Object Model (CSSOM) e il Document Object Model (DOM)

Stile

Il DOM e il CSSOM si combinano in un albero di rendering e la costruzione inizia. L'albero di rendering organizza i nodi visibili, il contenuto e gli stili calcolati per il sito e ogni nodo univoco.

Disposizione

Il layout è il passaggio in cui l'architettura incontra la costruzione e viene creata una struttura per la pagina per visualizzare la larghezza, l'altezza e la posizione di tutti i nodi nell'albero di rendering. Ogni oggetto ottiene dimensioni e posizione determinate.

I siti web sono disposti in una struttura a scatola. Queste caselle possono adattarsi a un numero illimitato di diverse dimensioni del viewport. Quando la struttura della scatola cambia per il dimensionamento, si parla di reflow .

Paint: First Paint e First Contentful Paint (FCP)

Il momento in cui il browser di un sito Web esegue il rendering di una pagina viene chiamato "First Paint". First Paint potrebbe essere un colore di sfondo a tinta unita solo a seconda del codice della pagina.

First Contentful Paint (FCP) si riferisce al momento misurabile in cui un visitatore del sito Web può visualizzare i contenuti della tua pagina (testo, immagini, video, ecc.). L'FCP misura dall'inizio del caricamento della pagina fino al punto in cui qualsiasi contenuto viene visualizzato.

First Paint e FCP non sono la stessa cosa di una pagina a caricamento rapido o di prestazioni rapide, ma l'esperienza dell'utente diventa notevolmente più positiva quando i visitatori del sito percepiscono una pagina a caricamento rapido. La messa a punto di First Paint, tempo di caricamento e prestazioni del sito migliora la percezione da parte dell'utente del tempo di caricamento.

Compositing

Le pagine Web utilizzano livelli in cui gli oggetti si sovrappongono per organizzare la struttura. Il compositing è dove la pagina calcola l'ordine delle cose per renderle correttamente.

I riposizionamenti attivano una ricomposizione poiché il posizionamento dell'oggetto spesso cambia in un riflusso.

Cosa sono le risorse che bloccano il rendering

Script, fogli di stile e importazioni HTML che rallentano, ritardano o impediscono al browser di visualizzare i contenuti su un sito Web sono risorse che bloccano il rendering. Quando le persone fanno riferimento a risorse che bloccano il rendering, di solito si riferiscono a:

• CSS
• JavaScript nella sezione <head>
• Caratteri caricati da un server o da una rete di distribuzione dei contenuti
• Importazioni HTML (pagine legacy)

C'è un sacco di CSS e JavaScript che non bloccano il rendering ed è fondamentale caricarli vicino all'inizio. Dai la priorità ai fogli di stile per garantire che qualsiasi visitatore del sito veda il contenuto previsto anziché il contenuto senza stile o niente.

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

Durante il processo di rendering, il tuo browser carica le informazioni sul sito web eseguendo prima le informazioni in <head>, inclusi tutti gli script. Gli script devono essere tutti eseguiti in ordine ed elaborati completamente prima che la pagina sia visibile nel tuo browser.

Gli script vengono inseriti in una coda, quindi l'ordine degli script in <head> è essenziale durante lo sviluppo. A seconda del codice, potrebbe rallentare o impedire il caricamento completo del tuo sito Web e questi sono ciò che chiamiamo CSS e JavaScript che bloccano la visualizzazione.

Gli script sul tuo sito Web WordPress possono provenire da temi, lavori personalizzati o plug-in aggiunti per varie funzionalità.

Le immagini sono risorse per i blocchi di rendering?

Se ti stai chiedendo se le immagini sono risorse che bloccano il rendering, non lo sono. La dimensione di un'immagine può comunque causare problemi di caricamento sulla tua pagina, ma non dovrebbe bloccare il rendering.

Perché eliminare le risorse che bloccano il rendering?

Gli script di blocco del rendering possono rallentare i tempi di caricamento della pagina e rovinare l'esperienza del sito Web per i tuoi visitatori. La percezione di un sito Web lento può portare a una perdita di visitatori se l'esperienza del tuo sito Web è scarsa. Una bassa fidelizzazione dei visitatori può influire sui risultati del motore di ricerca e ridurre l'elenco dei risultati.

Un posizionamento più basso per l'ottimizzazione per i motori di ricerca (SEO) significa una riduzione dei visitatori e la perdita di potenziali affari. Perdere le classifiche riduce il numero di visitatori e un sito scadente riduce la fidelizzazione dei visitatori; le risorse che bloccano il rendering possono essere un grosso problema.

Se il tuo sito web ha l'obiettivo di un punteggio Google PageSpeed ​​elevato, comprendere le tue risorse di blocco del rendering è la chiave per raggiungere tale obiettivo.

Come eliminare le risorse che bloccano il rendering

Prendere sul serio le classifiche SEO e l'esperienza utente del tuo sito significa che il tuo sito deve avere risorse di blocco del rendering gestite o rimosse. Se non stai costruendo il tuo sito da zero, inizia a testare il tuo sito web per le risorse che bloccano la visualizzazione.

Una volta identificate le risorse che bloccano il rendering, sceglierai il tuo metodo per affrontare il problema e migliorare la funzionalità del tuo sito.

Verifica se il tuo sito Web ha risorse per il blocco del rendering

Non fa mai male eseguire una valutazione sul tuo sito Web per scoprire eventuali risorse che bloccano il rendering (prova Google PageSpeed ​​Insights). Se hai ottimizzato al meglio le tue capacità, stai seguendo le migliori pratiche e stai ancora riscontrando problemi o non sai da dove iniziare, i valutatori di pagina possono essere guide utili.

Metodi per eliminare JavaScript e CSS che bloccano il rendering

WordPress ti consente di gestire tutte le risorse che ostacolano il rendering del tuo sito in diversi modi. WordPress ti consentirà di organizzare i tuoi script e collegamenti di blocco del rendering con codice, tag, organizzazione e ottimizzazione dei file e plug-in.

Gli sviluppatori professionisti possono anche creare plugin o temi personalizzati che integrano questi processi nel codice.

Rimuovi Javascript che blocca il rendering con il codice

Tre metodi per affrontare le risorse che bloccano il rendering tramite il codice sono:

1. Sposta i tag per <script> e <link> nella parte inferiore del codice HTML
2. Aggiungi attributi asincroni o differisci al tag per gli script non critici.
3. Rimuovi il codice JavaScript inutilizzato.

WordPress carica un file jQuery Migrate per fornire compatibilità con le vecchie versioni di jQuery utilizzate da plugin e temi. Puoi utilizzare un pezzo di codice o un plug-in per impedire a WordPress di caricare questo file jQuery Migrate se nulla sul tuo sito ne ha bisogno per funzionare.

Elimina i fogli di stile che bloccano il rendering

La natura dei fogli di stile li rende risorse che bloccano il rendering per natura. Puoi affrontare questo problema sul tuo sito nei seguenti modi:

1. Suddividi i CSS per tipo di media (cellulare, tablet, desktop, ecc.)
2. Ottimizza il percorso di rendering critico
3. Combina file CSS

Utilizzando WordPress e un visual builder, potresti non controllare direttamente come viene creata una pagina, ma ci sono modi per aggirare qualsiasi problema.

Blocco del rendering degli indirizzi utilizzando un plug-in o un'estensione di WordPress

I plugin e le estensioni di WordPress vengono utilizzati per organizzare gli script su una pagina. I plugin passeranno attraverso i tag <script> e <link> della tua pagina e applicheranno gli attributi di differimento o asincrono in base a linee guida specifiche.

Abbiamo esaminato e testato una gamma di plugin per WordPress e continuiamo a condividere cose utili come i nostri plugin preferiti per l'ottimizzazione della velocità sul blog.

Chiedi a un professionista di WordPress di eliminare le risorse di blocco del rendering per te

Alcuni plugin richiedono personalizzazione e, sebbene appaiano semplici, possono finire per non funzionare se impostati in modo errato. Non c'è vergogna nel chiedere aiuto a un professionista di WordPress e WP Buffs ha diversi specialisti che possono ottimizzare il tuo sito.

Migliori pratiche per ottimizzare il rendering

1. Raggruppa le tue risorse di blocco del rendering per ridurne l'impatto sul caricamento della pagina.
2. Riduci le dimensioni della risorsa, in modo da ridurre il numero di byte da caricare.
3. Rinvia il download delle risorse che non bloccano il rendering.
4. Non aggiungere CSS con la regola @import poiché si tratta di un carico esterno.
5. Usa un plug-in WordPress progettato per memorizzare nella cache i tuoi script e ottimizzare JavaScript e CSS.
6. Carica i caratteri personalizzati in locale.
7. Identifica CSS e JavaScript critici e non critici.
8. Contrassegna il codice di blocco del rendering non critico con attributi asincroni o differiti.
9. Il codice non utilizzato deve essere rimosso.

Elimina il mal di testa e lascia che un professionista di WordPress ti aiuti

I WP Buffs sono esperti nell'ottimizzazione dei siti WordPress e nel miglioramento delle prestazioni delle pagine. Capiamo perché le prestazioni sono importanti per la tua attività e su quali aree concentrarsi per avere l'impatto più significativo.

Migliorare le prestazioni del tuo sito web e l'esperienza dei visitatori può essere qualcosa di più di semplici risorse che bloccano il rendering. WP Buffs può dare un'occhiata al tuo sito e indirizzo:

• Dimensioni dell'immagine
• Qualità dell'immagine e formato di consegna
• Lunghezza della pagina e percentuale di contenuto dinamico
• Temi mal costruiti
• Script non necessari che causano ritardi
• Plugin costruiti male
• Script esterni non utilizzati
• Software obsoleto
• Piano di web hosting limitato incapace di supportare sufficientemente le esigenze del sito

WordPress può essere una piattaforma ragionevolmente facile su cui costruire un sito Web, ma massimizzare l'esperienza dell'utente può richiedere un professionista qualificato o spesso un ottimo fornitore di servizi.

Domande frequenti