Correggi Google PageSpeed ​​Elimina JavaScript e CSS che bloccano il rendering nei contenuti above the fold

Il test di Google PageSpeed ​​[1] Elimina JavaScript e CSS che bloccano il rendering nei contenuti above-the-fold ti propone di distribuire i file JS e CSS del tuo sito dopo che l'HTML è stato caricato completamente e, pertanto, non sospendere il caricamento HTML per scaricarli.


Risolvi il blocco del rendering Javascript e CSS

Il test di Google PageSpeed ​​[1] Elimina JavaScript e CSS che bloccano il rendering nei contenuti above-the-fold ti propone di distribuire i file JS e CSS del tuo sito dopo che l'HTML è stato caricato completamente e, pertanto, non sospendere il caricamento HTML per scaricarli.

[1] - PageSpeed ​​Insights - developers.google.com
Definizione di script di blocco del rendering: script che vengono caricati prima che l'intero HTML DOM sia stato analizzato. Ad esempio, script inclusi nell'intestazione o all'interno del contenuto, senza alcuna istruzione specifica per i browser di ritardare il caricamento dello script fino a dopo la pittura HTML.

Elimina JavaScript e CSS che bloccano la visualizzazione nei contenuti above-the-fold: mostra come risolverlo

  1. Avere un sistema esterno che ottimizzi il tuo sito web per te
  2. Utilizza una CDN che eseguirà tutte le ottimizzazioni possibili per tuo conto, comprese le tre seguenti ottimizzazioni necessarie per correggere le risorse di blocco del rendering:
  3. Posticipa il caricamento dei file Javascript
  4. Carica CSS dopo il caricamento dell'HTML
  5. Usa un plugin per WordPress

Sono necessarie molte ottimizzazioni per correggere le risorse che bloccano il rendering e potrebbe essere noioso implementarle da solo - inoltre, dovrai costantemente cercare nuovi test inclusi in Chrome LightHouse e Google PageSpeed ​​tra gli altri test di velocità della pagina.

Non esiste una soluzione esistente per eliminare le risorse che bloccano il rendering nel codice htaccess poiché il problema è correlato al DOM, ovvero il contenuto del sito Web e l'ordine in cui vengono caricate le risorse incluse, come Javascript e CSS, ma non solo. Questi non possono essere attivati ​​in Htaccess, ma solo nel contenuto HTML DOM.

Se risolvi questi problemi per il desktop, eliminerai allo stesso tempo le risorse che bloccano il rendering per i dispositivi mobili poiché entrambi sono esattamente uguali!

Did you know that you can even have all these steps executed automatically for you by using an external Acceleratore di velocità del sito technology, which through artificial intelligence will preload your site, optimize it, and deliver it to your visitors? It is possible with tools such as Ezoic platform offering, with a free trial and no credit card required. Otherwise, implement below optimizations in your website!

Rinvia caricamento file Javascript

Per rinviare il caricamento dei file JS [2], è possibile aggiungere l'istruzione asincrona o posticipazione ai collegamenti degli script. Async non garantisce che vengano caricati nella stessa sequenza, quindi, se si dispone di più script che devono essere eseguiti uno dopo l'altro, è preferibile posticipare per garantire la sequenza:

[2] - Rimuovi JavaScript che blocca il rendering | PageSpeed ​​Insights | Buoni sviluppatori - developers.google.com

Carica CSS dopo il caricamento HTML

Affinché il CSS venga caricato dopo la trasmissione dell'intero codice HTML, Google propone [3] questa parte di codice da aggiungere alla fine del codice HTML, ad esempio dopo il tag di chiusura del piè di pagina e prima del tag di chiusura del corpo:

[3] - Ottimizza consegna CSS | PageSpeed ​​Insights | Buoni sviluppatori - developers.google.com

Per ottimizzare il tuo sito web, è anche una buona idea rimuovere il codice CSS inutilizzato, un'operazione che può essere noiosa se non si dispone della conoscenza nel web design. Se non hai creato tema del tuo sito web te stesso, potrebbe essere più wiser utilizzare un sistema esterno per rimuovere il codice CSS non utilizzato sulle tue pagine per tuo conto, come ad esempio Ezoic Leap, la nuova versione (e totalmente gratuita) del loro sito fantastico Acceleratore di velocità.

Supera il test di velocità del sito di Google!

Questo mi ha permesso di superare il test di Google PageSpeed ​​[1] Elimina JavaScript e CSS che bloccano il rendering nei contenuti above-the-fold (insieme a Leverage caching del browser [4]) su un sito web, salendo da un punteggio di 51 su dispositivi mobili ( Fig. 1) a 72 (Fig. 2), e su da 59 (Fig. 3) a 79 sul desktop (Fig. 4).

[4] - Risolto il problema con Google PageSpeed ​​sfruttando il caching del browser in htaccess - Yoann Bierling, consulente SAP / Web internazionale - www.ybierling.com

Come eliminare le risorse di blocco del rendering in WordPress

Per eliminare le risorse di blocco del rendering in WordPress, è necessario installare un plugin come JetPack.

Quindi, vai alle opzioni, per le quali devi essere un amministratore, e vai su Opzioni JetPack> Scrittura> Prestazioni e velocità> seleziona Abilita acceleratore sito, velocizza i tempi di caricamento delle immagini, velocizza i tempi di caricamento dei file statici e abilita il caricamento lento per immagini.

Impara le basi SEO: iscriviti oggi!

Aumenta la visibilità e il traffico del tuo sito Web padroneggiando i fondamenti della SEO con il nostro corso di base facile da seguire.

Inizia a imparare SEO

Aumenta la visibilità e il traffico del tuo sito Web padroneggiando i fondamenti della SEO con il nostro corso di base facile da seguire.

Ciò eliminerà le risorse di blocco del rendering in WordPress e caricherà più velocemente le pagine consentendo a JetPack di ottimizzare le immagini e servire le immagini e i file statici (come CSS e JavaScript) dalla loro rete globale di server.

Come eliminare JavaScript e CSS che bloccano la visualizzazione su WordPress

Inoltre, non dimenticare di posticipare il caricamento delle immagini off-schermo utilizzando una funzione di carico pigre. Mentre era difficile e richiedeva una biblioteca esterna per posticipare il caricamento delle immagini fuori schermo, ora è possibile nativamente in HTML5!

Caricamento pigro delle immagini: Le immagini del sito Web sono richieste solo al server quando l'utente scorre sulla pagina Web e potrebbe visualizzarli

Per implementare il caricamento pigro delle immagini sui tuoi siti Web, è sufficiente aggiungere i valori pigri al caricamento degli attributi delle immagini del tuo sito Web e i recenti browser capiranno che queste immagini dovrebbero essere richieste e caricate solo se vengono visualizzate, il che significa che se l'utente scorre verso il basso i segnaposto dell'immagine.

<img src=”SRC” alt=”ALT” loading=”lazy”></img>
Lazy Loading - Web Performance - Mozilla Developer Network

Inoltre, il caricamento pigro funziona anche con iframe ed è un'importante implementazione per eliminare le risorse di blocco del rendering dalle tue pagine Web.

Una volta che le risorse di blocco dei rendering avranno le istruzioni per caricare dopo il contenuto principale, il che significa che il DOM HTML, si guadagnerà già molti punti sul test di Google Lighthouse, il test di Velocità di pagine Test o i tradizionali di Google Core Web.

Avere un sistema esterno per ottimizzare il tuo sito Web per te

Sai che potresti effettivamente risolvere tutti i problemi di Google PageSpeed ​​per tuo conto, senza troppi sforzi dal tuo sito, ad eccezione della registrazione per una prova gratuita e della modifica del DNS?

Utilizzando la tecnologia Site Speed ​​Accelerator della piattaforma Ezoic, tutti i soliti problemi di  Google Page Speed   ​​saranno risolti dal loro sistema, che sarà l'intermediario tra il tuo sito Web e i visitatori. Ottimizzeranno la pagina Web per te prima di mostrarla al tuo visitatore.

Nell'aprile del 2021, l'acceleratore di velocità del sito a pagamento ezoico diventerà libero Ezoic Leap e aiuta i siti web dei siti web di Core Web Vitals Green Punteggi senza alcun costo!

Diventa green semplicemente registrandoti per una prova gratuita su piattaforma Ezoic e provandolo tu stesso: faranno in pochi giorni al tuo sito web raggiungere i più alti standard di ottimizzazione della velocità della pagina: renderizza le immagini webp di prossima generazione, ottimizza CSS e JavaScript rimuovendo CSS inutilizzati e JS, caricare le immagini in modo pigro, ridimensionare le immagini, memorizzare nella cache le pagine del sito, ottimizzare i caratteri, pre-connettersi a tutti i siti inclusi e molto altro.

Non è richiesta la carta di credito: tutto ciò che devi fare è registrarti gratuitamente e provarlo. Inoltre, se il tuo sito Web sta guadagnando da annunci display, oltre a rendere il tuo sito Web molto più veloce, possono anche farti guadagnare molte volte più denaro di quanto fai con Google AdSense ottimizzando i tuoi annunci con l'apprendimento automatico e l'intelligenza artificiale avanzata.

Domande Frequenti

Come eliminare JavaScript e CSS che bloccano il rendering in contenuti sopra il tempo?
Per eliminare JavaScript e CSS che bloccano il rendering per contenuti sopra il tempo, è necessario assicurarsi che i file JS e CSS del tuo sito vengano caricati dopo il caricamento di HTML. Ciò significa non mettere in pausa il processo di caricamento HTML per scaricare questi file. È possibile differire i file JavaScript con l'attributo Async o Defer e, per CSS, è possibile utilizzare un codice specifico per caricarlo dopo HTML. Un sistema di ottimizzazione esterno come * ezoico * può anche gestirlo automaticamente.
In che modo gli sviluppatori Web possono affrontare la raccomandazione di Google Pagespeed di eliminare JavaScript e CSS di blocco del rendering?
Gli sviluppatori Web possono ottimizzare il proprio sito minimizzando i file JavaScript e CSS, utilizzando il caricamento asincrono per JavaScript, in linea di livello critico CSS direttamente nell'HTML e diffonando il caricamento di CSS non critici e file Javascript. L'implementazione di queste strategie può migliorare significativamente i tempi di caricamento e i punteggi delle pagine.

Punteggio perfetto del faro cromato: cosa succede?


Yoann Bierling
Circa l'autore - Yoann Bierling
Yoann Bierling è un professionista di consulenza pubblica e digitale, che ha un impatto globale attraverso la competenza e l'innovazione nelle tecnologie. Appassionato di potenziare le persone e le organizzazioni a prosperare nell'era digitale, è spinto a fornire risultati eccezionali e guidare la crescita attraverso la creazione di contenuti educativi.

Impara le basi SEO: iscriviti oggi!

Aumenta la visibilità e il traffico del tuo sito Web padroneggiando i fondamenti della SEO con il nostro corso di base facile da seguire.

Inizia a imparare SEO

Aumenta la visibilità e il traffico del tuo sito Web padroneggiando i fondamenti della SEO con il nostro corso di base facile da seguire.




Commenti (8)

 2018-08-19 -  quranapk
Adoro leggere i tuoi contenuti e continuare a postare: mi ha aiutato a correggere i CSS che bloccano il rendering
 2018-09-23 -  Monica
Quindi è così che lo facciamo, è fantastico sapere come risolvere l'eliminazione delle risorse che bloccano il rendering
 2018-09-25 -  Van
Ottimo, è esattamente quello che stavo cercando, ora sono pronto per eliminare le risorse che bloccano il rendering sui dispositivi mobili
 2018-11-03 -  utumikaji0
Incredibile, ora è il momento per me di provarlo e risolvere il problema eliminando le risorse che bloccano il rendering!
 2019-01-12 -  Leo
Non so come ringraziarti, ma è un vero genio, grazie: ha funzionato su WordPress per rimuovere le risorse che bloccano il rendering
 2019-04-21 -  Ludanulema
Ciao, ho visto il tuo articolo e mi ha aiutato a risolvere il problema eliminando le risorse che bloccano il rendering su PHP, grazie
 2019-06-12 -  animeg2Q
Lo proverò ora, grazie per aver condiviso questa correzione per eliminare il blocco del rendering
 2019-07-02 -  Gasfackele
Ha funzionato bene per me, non c'è bisogno di cercare oltre per eliminare le risorse che bloccano il rendering nel sito Web HTML

lascia un commento