Technologie Gadgets, SEO Tipps, Geld Verdienen mit WEB!

Come eliminare le risorse che bloccano il rendering in W…

Come eliminare le risorse che bloccano il rendering in W...

WordPress rende milioni di siti web il sistema di gestione dei contenuti leader a livello mondiale. Tuttavia, una sfida che molti proprietari di siti devono affrontare è il problema delle “risorse per il blocco del rendering”.

Questi elementi fastidiosi possono rallentare notevolmente i tempi di caricamento del tuo sito, facendo rimbalzare gli spettatori prima di vedere i tuoi contenuti.

Se la tua azienda si occupa di lead generation di qualsiasi tipo, la velocità è essenziale. Supportato oggi da ricerche significative, la velocità ha un impatto diretto sulle conversioni, sulla reputazione e su altri fattori di marketing.

Se rimuovi in ​​modo efficace le risorse che bloccano la visualizzazione, migliorerai le prestazioni del tuo sito web e offrirai ai tuoi visitatori un’esperienza utente migliore, ottenendo infine un posizionamento più elevato nei motori di ricerca per il tuo sito web.

In questo post imparerai a conoscere:

Iniziamo!

Cosa sono le risorse di blocco del rendering?

Le risorse di blocco del rendering sono come ostacoli per il tuo sito web. Sono pezzi di codice, spesso sotto forma di file CSS e JavaScript, che rallentano le pagine del tuo sito WordPress.

Non sto dicendo che CSS e JavaScript non siano importanti. Entrambi sono gli elementi chiave di qualsiasi sito Web WordPress. I CSS aiutano a creare un layout accattivante del sito web, mentre JavaScript aiuta ad aggiungere un fattore coinvolgente e interattivo al sito web.

Tuttavia, gli stessi elementi che migliorano l’attrattiva visiva e l’interattività del tuo sito web possono talvolta ostacolarne le prestazioni durante la scansione da parte dei motori di ricerca. I motori di ricerca hanno un processo in due fasi: prima leggono il file e poi lo eseguono. Questa fase di lettura potrebbe richiedere del tempo, causando un rallentamento della velocità di caricamento del tuo sito.

In questo caso, se ritieni che CSS e JavaScript possano essere caricati dopo il caricamento della pagina, puoi aggiungere un ritardo. E, se non è necessario, rimuovilo semplicemente.

Consulta il nostro blog separato se desideri semplici suggerimenti per velocizzare il tuo sito Web WordPress.

Importanza di eliminare le risorse che bloccano il rendering

Come ho spiegato sopra, le risorse che bloccano la visualizzazione influiscono direttamente sulle prestazioni del sito web. Pertanto, eliminare queste risorse che bloccano la visualizzazione è fondamentale per migliorare le prestazioni e l’esperienza utente del tuo sito Web WordPress.

Fattori chiave per dimostrare l’importanza di eliminare le risorse che bloccano la visualizzazione:

  1. Caricamento più veloce della pagina web: Se aggiungi un ritardo alle risorse che bloccano la visualizzazione, il caricamento della pagina iniziale accelera, garantendo un’esperienza utente migliore.
  2. Maggiore coinvolgimento degli utenti: È più probabile che le pagine a caricamento rapido mantengano il coinvolgimento degli utenti. Quando le pagine si caricano rapidamente, è meno probabile che gli utenti rimbalzino.
  3. Tassi di rimbalzo più bassi: I siti Web con tempi di caricamento inferiori tendono ad avere frequenze di rimbalzo inferiori perché gli utenti non devono attendere il caricamento delle risorse che bloccano la visualizzazione.
  4. Esperienza mobile migliorata: L’eliminazione delle risorse che bloccano la visualizzazione garantisce che il tuo sito si carichi rapidamente e funzioni bene sui dispositivi mobili.
  5. Vantaggi SEO: Sappiamo tutti che i motori di ricerca, come Google, utilizzano la velocità della pagina come fattore di ranking. Le pagine che si caricano più velocemente si posizionano più in alto nei risultati di ricerca, portando a Core Web Vitals e SEO migliori.
  6. Tassi di conversione migliorati: Eliminando le risorse che bloccano la visualizzazione, puoi creare un percorso utente efficiente, con un impatto positivo sui tassi di conversione.
  7. Portata globale: Poche regioni hanno una connettività Internet lenta. In tali regioni, le risorse che bloccano il rendering diventano ancora più critiche. Pertanto, se li elimini, migliorerà la velocità delle pagine e diventeranno più accessibili agli utenti con connessioni Internet più lente.

Senza dubbio, identificare le risorse che bloccano la visualizzazione è una parte cruciale per ottimizzare le prestazioni del tuo sito Web WordPress. Queste risorse possono avere un impatto sia sui tempi di caricamento della pagina che sull’esperienza dell’utente.

Di seguito, approfondiremo vari strumenti e tecniche che ti aiutano a individuare in modo efficace le risorse che bloccano il rendering.

Utensili

1. Google PageSpeed ​​Insights:

PageSpeed ​​Insights di Google è uno strumento popolare e facile da usare per valutare le prestazioni delle pagine web.

Fornisce un suggerimento “Rimuovi JavaScript inutilizzato” che identifica le risorse JavaScript che bloccano la visualizzazione.

Come Utilizzare Google PageSpeed ​​Insights?

  1. Accedi a PageSpeed ​​Insights
  2. Nel campo di input, inserisci l’URL della pagina web che desideri testare
  3. Fare clic sul pulsante “Analizza”.
  4. Esaminare i risultati del test

Come interpretare i risultati del test?

  • Controlla i consigli relativi all’ottimizzazione di JavaScript
  • Identificare il codice o le librerie JavaScript inutilizzati nel report
  • Esamina il potenziale risparmio stimato nel tempo di caricamento della pagina
  • Dai la priorità alla rimozione o al rinvio delle risorse JavaScript inutilizzate
  • Eseguire nuovamente il test per confermare l’impatto delle modifiche sulle prestazioni

2. Faro:

Lighthouse è integrato in Chrome DevTools e offre un controllo delle prestazioni più completo.

Include un controllo “Elimina le risorse che bloccano la visualizzazione”, che fornisce dettagli sui file JavaScript e CSS che causano ritardi.

Come utilizzare un faro?

  1. Accedi al Faro
  2. Apri Chrome DevTools utilizzando questi tasti brevi: Ctrl+Maiusc+I o Cmd+Opzione+I
  3. Passare alla scheda “Faro”.
  4. Configurare ed eseguire il controllo
  5. Fare clic su Genera report e Configura opzioni
  6. Esaminare il report ed esaminare il punteggio delle prestazioni
  7. Cerca il controllo “Elimina le risorse che bloccano la visualizzazione”.

Di seguito sono riportati alcuni screenshot prima e dopo dei risultati di PageSpeed ​​Insights.

Mobile – Prima:

Mobile – Dopo:

Desktop – Prima:

Desktop – Dopo:

Come interpretare i risultati del test?

  • Presta attenzione all’impatto stimato sui tempi di caricamento della pagina
  • Consulta l’elenco delle risorse JavaScript e CSS specifiche
  • Prendi nota della gravità assegnata a ciascuna risorsa, che è spesso etichettata come “Moderata” o “Alta”
  • Esamina i suggerimenti che in genere includono la minimizzazione, il caricamento asincrono o il rinvio di script e stili

3. Prova della pagina Web:

WebPageTest è uno strumento avanzato che ti consente di testare le prestazioni delle pagine Web da più posizioni e dispositivi.

Fornisce una metrica “First Byte Time” che può aiutare a identificare le risorse che bloccano il rendering.

Come utilizzare un test di pagina Web?

  1. Vai a Test della pagina Web
  2. Inserisci l’URL del tuo sito web
  3. Seleziona una posizione e un browser
  4. Facoltativamente configurare le impostazioni avanzate
  5. Fare clic su “Avvia test” per avviare il test delle prestazioni

Come interpretare i risultati del test?

  • Esaminare il grafico a cascata
  • Controlla “Dettagli richiesta” per le risorse che bloccano la visualizzazione
  • Valutare il tempo per Primo byte (TTFB)
  • Consulta la sezione “Opportunità” per suggerimenti
  • Considera parametri riepilogativi come FCP e TTI
  • Eseguire test ripetuti.
  • Implementare i consigli di ottimizzazione

4. Test di velocità del sito web Pingdom:

Lo strumento di test della velocità di Pingdom fornisce approfondimenti sulle prestazioni di caricamento della tua pagina web, inclusa l’identificazione delle risorse che bloccano la visualizzazione.

Come utilizzare lo Speed ​​Test di Pingdom?

  1. Visita il sito Speed ​​Test di Pingdom
  2. Inserisci l’URL del tuo sito web
  3. Scegli un luogo di prova
  4. Fai clic su “Prova ora”
  5. Attendi il completamento del test

Come interpretare i risultati del test?

  • Controlla il tuo voto di prestazione
  • Esaminare il tempo di caricamento
  • Controlla le dimensioni della pagina
  • Analizzare il numero di richieste
  • Studia il grafico a cascata
  • Considera suggerimenti e approfondimenti
  • Cerca le richieste di file
  • Ottimizza le risorse di blocco del rendering
  • Ripetere il test dopo l’ottimizzazione

5. GTmetrix:

GTmetrix offre un’analisi dettagliata delle prestazioni del tuo sito web, comprese Informazioni sulle risorse che bloccano la visualizzazione.

Fornisce consigli per ottimizzare il tempo di caricamento della pagina.

Come utilizzare un GTmetrix?

  1. Visita GTmetrix
  2. Inserisci l’URL del sito web
  3. Inizia la prova
  4. Attendi i risultati
  5. Esaminare il rapporto completo sulle prestazioni

Come interpretare i risultati del test?

  • Controlla i punteggi PageSpeed ​​e YSlow
  • Analizza il grafico a cascata per individuare le risorse che bloccano la visualizzazione
  • Seguire i consigli per l’ottimizzazione
  • Esaminare i tempi delle risorse
  • Prendi nota del tempo di caricamento della pagina e delle dimensioni della pagina

Tecniche:

  • Ispezione manuale: esamina il codice sorgente e identifica i file CSS e JavaScript esterni nella sezione . Utilizza gli Strumenti per sviluppatori del browser per trovare risorse che bloccano il rendering.
  • Strumenti per sviluppatori di Google Chrome: Apri DevTools, vai alla scheda Rete, ricarica la pagina e cerca nel grafico a cascata le risorse “Bloccanti”.
  • Relazioni sugli audit: Per report approfonditi che mettono in evidenza le risorse che bloccano la visualizzazione, utilizza strumenti come Lighthouse, PageSpeed ​​Insights o GTmetrix.
  • Validatori disponibili online: Il W3C Markup Validation Service, ad esempio, è in grado di rilevare errori HTML come i riferimenti alle risorse che bloccano il rendering.
  • Estensioni del browser: Per una più semplice identificazione, utilizza estensioni come “Page Ruler” e “Requestly” per studiare e controllare il comportamento di caricamento delle risorse.
  • Strumenti per il monitoraggio e il reporting delle prestazioni in tempo reale: Strumenti come New Relic e Datadog forniscono monitoraggio e reporting delle prestazioni in tempo reale per individuare e risolvere le risorse che bloccano il rendering.

Come eliminare le risorse che bloccano il rendering in WordPress

Le risorse di blocco del rendering possono rallentare il tempo di caricamento del tuo sito Web WordPress, influenzando l’esperienza utente del tuo sito e il posizionamento SEO.

Pertanto, per garantire che il tuo sito venga caricato in modo rapido ed efficiente, è essenziale eliminare queste risorse che bloccano la visualizzazione.

Di seguito, ho spiegato le migliori pratiche per eliminare le risorse che bloccano il rendering in WordPress:

1. Utilizza un plug-in di memorizzazione nella cache:

I plug-in di memorizzazione nella cache creano e forniscono versioni HTML statiche delle tue pagine WordPress. Aiutano a ridurre la necessità di caricamento dinamico delle risorse ad ogni visita. Ciò riduce la dimensione del file e accelera i tempi di caricamento. Per farlo puoi utilizzare il plugin di caching Breeze.

Suggerimenti:

  • Scegli un plugin di caching affidabile come W3 Total Cache o WP Super Cache e segui attentamente le istruzioni di configurazione.
  • Configura il plug-in di memorizzazione nella cache per sfruttare la memorizzazione nella cache del browser e garantire un utilizzo più efficiente delle risorse per i visitatori di ritorno.
  • Monitora le prestazioni del tuo sito dopo aver implementato la memorizzazione nella cache per assicurarti che funzioni come previsto e regola le impostazioni secondo necessità.

2. Riduci al minimo i file CSS e JavaScript:

Minimizzare e combinare file CSS e JavaScript ti aiuta a ridurre il numero di richieste e la loro dimensione complessiva. Di conseguenza, puoi osservare l’accelerazione dei tempi di caricamento della pagina.

Suggerimenti:

  • Utilizza un plugin dedicato come Autoptimize o WP Razzo per gestire questa attività automaticamente.
  • Rivedi e aggiorna regolarmente i tuoi plugin e temi per garantire la compatibilità con il processo di minimizzazione.
  • Testa attentamente il tuo sito dopo la minimizzazione per individuare eventuali problemi come funzionalità o stile non funzionanti.

3. Carica JavaScript in modo asincrono:

Caricando JavaScript in modo asincrono, consenti alla pagina del tuo sito Web WordPress di continuare il rendering mentre i file JavaScript vengono scaricati ed eseguiti.

Suggerimenti:

  • Controlla il tuo tema e i plugin per le opzioni di caricamento asincrono. Alcuni potrebbero includerlo come funzionalità integrata.
  • Per un controllo aggiuntivo, aggiungi esplicitamente la proprietà async ai tag script dei file JavaScript che non sono assolutamente necessari.
  • Il caricamento asincrono deve essere utilizzato con cautela poiché potrebbe influire sugli script che dipendono l’uno dall’altro. Prova attentamente.

4. Rimandare l’esecuzione di JavaScript:

L’esecuzione differita di JavaScript aiuta ad aggiungere ritardo nell’esecuzione di script non critici fino al termine del caricamento della pagina.

Suggerimenti:

  • Utilizza la proprietà defer nei tag script per gli script JavaScript che non devono essere eseguiti immediatamente.
  • Dopo aver ritardato gli script, esamina attentamente il funzionamento del tuo sito web per assicurarti che non abbia influito negativamente sulle interazioni dell’utente.
  • Per garantire che le funzionalità principali funzionino come previsto, dai sempre la priorità agli script essenziali.

5. CSS critico in linea:

Critical CSS include gli stili necessari per il rendering della parte visibile della tua pagina web, che può essere incorporata direttamente nell’HTML.

Suggerimenti:

  • Genera CSS critici con uno strumento o plug-in CSS Generator, come Autoptimize, per renderlo un’inclusione chiave.
  • Un approccio automatizzato tramite mod_pagespeed potrebbe essere la tua preferenza quando si considerano soluzioni lato server.
  • Mantenere aggiornato il CSS critico è essenziale per mantenere un aspetto fresco sul tuo sito web. L’aggiornamento del design o del layout del tuo sito richiede un’attenzione costante.

6. Utilizzare una rete per la distribuzione di contenuti (CDN):

Una CDN distribuisce le risorse statiche del tuo sito web su più server in tutto il mondo per ridurre la latenza e accelerare la consegna delle risorse. Il miglior CDN in circolazione è sicuramente Cloudflare. Puoi sfruttare questo CDN con un budget limitato se scegli il CDN DreamHost Cloudflare Enterprise.

Se vuoi utilizzare Cloudflare, consulta la nostra guida alla configurazione sul CDN WordPress di Cloudflare.

Suggerimenti:

  • Segui le istruzioni di configurazione fornite da servizi CDN affidabili come StackPath o Cloudflare per garantire l’affidabilità. La registrazione è necessaria per accedere alle loro funzionalità.
  • Memorizza nella cache i tuoi file CSS e JavaScript con un CDN configurato per una memorizzazione nella cache delle risorse statiche ottimale.
  • Ottimizza la distribuzione delle risorse monitorando regolarmente le impostazioni di sicurezza e prestazioni della tua CDN.

7. Ottimizza le immagini:

L’ottimizzazione delle immagini riduce le dimensioni dei file immagine senza compromettere la qualità, il che può avere un impatto significativo sui tempi di caricamento della pagina.

Suggerimenti:

  • Comprimi e ridimensiona automaticamente le immagini utilizzando i migliori plugin di ottimizzazione delle immagini WordPress come Smush o EWWW Image Optimizer durante il caricamento delle immagini.
  • Rivedi manualmente le immagini sul tuo sito e comprimi quelle che possono essere!
  • Utilizza tecniche di immagine reattive per personalizzare correttamente le immagini in base ai dispositivi degli utenti.

8. Caricamento lento di immagini e video:

Il caricamento lento rinvia il caricamento di immagini e video finché non sono visibili nel riquadro di visualizzazione dell’utente. Consulta la nostra guida sull’implementazione del Lazy Load di WordPress se non l’hai già fatto.

Suggerimenti:

  • Se possibile, attiva il caricamento lento (molti temi e plugin moderni lo supportano).
  • In caso contrario, puoi aggiungere una funzionalità Lazy Load tramite plug-in di caricamento lento come “Lazy Load di WP Rocket”.
  • Assicurati di testare bene il caricamento lento (specialmente per le pagine con così tanti contenuti multimediali caricati) per non ostacolare l’esperienza dell’utente.

9. Riduci le richieste HTTP:

La riduzione del numero di richieste HTTP riduce al minimo il tempo necessario per recuperare le risorse dal server.

Suggerimenti:

  • Valuta l’utilizzo delle risorse esterne nel tuo sito Web ed elimina tutti i widget, plug-in o script esterni non essenziali.
  • Unisci diverse richieste di terze parti (ad esempio, pulsanti di condivisione dei social media) in un’unica richiesta, ove possibile.
  • Riduci il numero di caratteri e script di terze parti che inviano richieste aggiuntive.

10. Usa un tema leggero:

I temi leggeri hanno un codice minimo e meno funzionalità, il che può portare a tempi di caricamento della pagina più rapidi. Se hai bisogno di aiuto per trovare un buon tema, consulta il nostro elenco di oltre 450 migliori temi WordPress.

Suggerimenti:

  • Seleziona un tema correlato a ciò che intendi ottenere dal tuo sito web; non utilizzare un tema solo perché è ricco di funzionalità.
  • Scegli temi realizzati per funzionare e ottimizzati spesso dagli sviluppatori.
  • Inoltre, riduci al minimo l’utilizzo delle risorse rimuovendo gli elementi non utilizzati/non necessari nel tuo tema personalizzato.

11. Cache del browser:

La memorizzazione nella cache del browser indica al browser dell’utente di archiviare risorse statiche localmente per un accesso più rapido alle visite successive.

Suggerimenti:

  • Imposta le intestazioni della cache corrette per le tue risorse nella configurazione del server web o del plug-in di memorizzazione nella cache.
  • Specificare le risorse della cache Time-to-Live (TTL) ti aiuta a invalidarle periodicamente se aggiorni i dati.
  • Controlla la configurazione della cache per assicurarti che i browser web memorizzino correttamente le risorse nella cache.

12. Considera AMP (Accelerated Mobile Pages):

AMP è una tecnologia che crea versioni leggere e a caricamento rapido delle tue pagine web, particolarmente vantaggiose per gli utenti mobili.

Suggerimenti:

  • Collega uno strumento come il plugin ufficiale “AMP for WordPress” per pubblicare AMP per impostazione predefinita su qualsiasi pagina del tuo sito web.
  • Crea i tuoi modelli AMP personalizzati per mantenere intatti il ​​design e la funzionalità del tuo sito web.
  • Tieni d’occhio la dashboard AMP per monitorare rapidamente le prestazioni dei tuoi contenuti e risolvere eventuali problemi.

13. Aggiorna regolarmente plugin e temi:

Mantenere aggiornati il ​​core, i temi e i plugin di WordPress ti garantisce di disporre degli ultimi miglioramenti delle prestazioni e correzioni di bug.

Suggerimenti:

  • Consenti aggiornamenti automatici di plugin e temi, quando possibile, per rimanere aggiornato.
  • Pianificare controlli automatici per gli aggiornamenti; utilizzare un ambiente di test (staging) per verificare le modifiche dell’applicazione prima di applicarle all’ambiente live.
  • Controlla le note di rilascio per i dettagli sulle modifiche che potrebbero influire sulla compatibilità e sulle prestazioni.

14. Monitorare le prestazioni:

Il monitoraggio regolare delle prestazioni utilizzando strumenti come Google PageSpeed ​​Insights, GTmetrix o Pingdom ti aiuta a identificare e risolvere i colli di bottiglia delle prestazioni.

Suggerimenti:

  • Eseguire controlli di performance su base continuativa per misurare i guadagni o le perdite nel tempo.
  • Guarda cosa suggeriscono gli strumenti per le prestazioni e scrivi l’elenco delle cose da risolvere in base alla gravità.
  • Tieni d’occhio le prestazioni del tuo sito web e modifica tutto ciò di cui hai bisogno per mantenerlo al meglio.

L’implementazione di questi suggerimenti può ridurre in modo significativo le risorse che bloccano la visualizzazione sul tuo sito WordPress, portando a tempi di caricamento della pagina più rapidi e a una migliore esperienza utente.

Suggerimento da professionista: Esegui sempre il backup del tuo sito WordPress prima di apportare modifiche importanti.

Inoltre, testa attentamente la funzionalità del tuo sito dopo aver implementato queste ottimizzazioni per assicurarti che tutto funzioni come previsto.

Conclusione

Rimuovere le risorse che bloccano la visualizzazione in WordPress è fondamentale per migliorare le prestazioni del sito Web e ottimizzare l’esperienza dell’utente.

Esiste una serie di strumenti e tecniche preziosi per identificare e affrontare queste risorse. In questo articolo, ho curato un elenco dei migliori strumenti che possono aiutarti a individuare con precisione queste risorse e offrire consigli per migliorare il tuo sito Web WordPress.

Se ritieni che questo compito sia opprimente, potrebbe valere la pena considerare i servizi di un professionista Azienda di manutenzione WordPress per gestire sapientemente questo processo per te.