"Elimina CSS di blocco del rendering nei contenuti above the fold"


153

Ho utilizzato le informazioni di Google Page Speed ​​per cercare di migliorare le prestazioni del mio sito e finora si è dimostrato estremamente efficace. Cose come il differimento degli script hanno funzionato magnificamente, dato che avevo già una versione interna di jQuery.ready() per differire gli script fino a quando la pagina non era stata caricata completamente, tutto quello che dovevo fare era incorporare quella particolare funzione e spostare gli script completi alla fine della pagina. Ha funzionato alla grande.

Ma ora mi ritrovo a fissare un punto giallo rimasto nell'elenco di controllo: "Elimina i CSS di blocco del rendering nei contenuti above the fold".

Il modo in cui il mio CSS è impostato è di avere un _.cssfile globale contenente stili che si applicano alla struttura della pagina in generale o che sono utilizzati in più di una o due posizioni nel sito. La maggior parte delle pagine ha quindi un file CSS associato (ad esempio, party.phpha party.css) contenente stili specifici per quella particolare pagina. Tutti i file CSS vengono memorizzati nella cache a tempo indeterminato, come ho aggiunto /t=FILEMTIMEai nomi dei file (e successivamente li rimuovo con .htaccess) al fine di garantire che i file vengano aggiornati quando vengono modificati.

Ad ogni modo, Google consiglia di includere gli stili critici necessari per i contenuti above the fold. Il problema è ... beh, dai un'occhiata a questo screenshot: http://prntscr.com/1qt49e

Come puoi vedere ... TUTTO il contenuto è above the fold! Le persone odiano lo scorrimento, specialmente in un gioco che prevede il caricamento di molte pagine. Quindi ho progettato il sito per adattarlo a uno schermo (presupponendo una risoluzione abbastanza buona). Ciò significa che ... TUTTI gli stili si applicano ai contenuti above the fold! Quindi ... c'è qualche soluzione? O sono bloccato con quel segno giallo su un punteggio altrimenti quasi perfetto?


è ironico che quel contenuto above the fold per lo screenshot stia impiegando molto tempo a caricarsi :) In effetti, per me, lo screenshot non è mai stato caricato alla fine
Anupam

@Anupam Probabilmente è stato cancellato. Prntscr non è pensato proprio per la permanenza, e non mi aspettavo questa domanda per essere abbastanza così popolare.
Niet the Dark Absol,

sì, tutto bene, era solo un commento leggero
Anupam

Risposte:


182

In precedenza è stata posta una domanda correlata: che cos'è il "above-the-fold content" in Google Pagespeed?

Innanzitutto devi notare che si tratta solo di " pagine mobili ".
Quindi, quando ho interpretato correttamente la tua domanda e lo screenshot, allora non è per il tuo sito!

Al contrario, fare alcune delle cose consigliate da Google nelle loro linee guida peggiorerà le cose rispetto ai siti Web "normali".
E non tutto ciò che viene da Google è il "santo graal" solo perché proviene da Google. E loro stessi non sono un buon modello di ruolo se dai un'occhiata al loro markup HTML.

Il miglior consiglio che posso darti è:

  • Imposta larghezza e altezza sugli elementi sostituiti nel tuo CSS, in modo che il browser possa disporre gli elementi e non debba attendere il contenuto sostituito!

Inoltre, perché usi file CSS diversi, anziché solo uno?
La richiesta aggiuntiva è peggiore della piccola quantità di volume di dati. E dopo la prima richiesta, il file CSS viene comunque memorizzato nella cache.

Le cose di cui dovresti sempre occuparti sono:

  • ridurre il numero di richieste il più possibile
  • mantenere il peso complessivo della pagina più basso possibile

E non scervellarti su come ottenere il 100% dello strumento PageSpeed ​​Insights di Google ...! ;-)

Aggiunta 1: ecco la pagina in cui Google ci mostra cosa raccomandano per ottimizzare la consegna CSS .

Come detto prima, non penso che questo non sia né realistico né che abbia senso per un sito Web "normale"! Perché soprattutto quando si dispone di un web design reattivo , è più certo che si utilizzano query multimediali e altri stili di layout. Quindi se non caricherai prima il tuo CSS e in modo bloccante otterrai un FOUT ( Flash Of Unstyled Text ). Non credo davvero che questo sia "migliore" di almeno qualche altro millisecondo per rendere la pagina!

Imho Google sta iniziando un nuovo "hype" (quando vedo tutte le domande a riguardo qui su StackOverflow) ...!


9
Bella risposta. il problema è che google sembra penalizzarti se hai una pagina più lenta. Quindi ti costringono ad aderire alle loro idee sia grandi o totalmente stupide. :(
Steve Horvath,

10
@Netsurfer non tutto ciò che viene da Google è il "santo graal" LOL. Mi stavo grattando la testa per raggiungere i 100, ma mi sono fermato a 92 dopo aver letto questo commento.
Kirking

44
Dovresti sottolineare di più, il fatto, che Google non aderisce ai propri suggerimenti .
Mr. Smith,

2
Le richieste aggiuntive diventeranno meno un problema con HTTP / 2 e SPDY, da Wikipedia , "Ulteriori miglioramenti delle prestazioni nella prima bozza di HTTP / 2 (che era una copia di SPDY) provengono dal multiplexing di richieste e risposte per evitare il problema di blocco della linea in HTTP 1 (anche quando si utilizza il pipelining HTTP), compressione dell'intestazione e definizione delle priorità delle richieste. "
RationalDev piace GoFundMonica il

3
sto provando a recuperare la mia pagina da 72 dispositivi mobili e 80 desktop ma ho avuto lo stesso problema. Mi rifiuto di posizionare il mio CSS in qualche luogo più in basso e possibilmente degradare l'esperienza dell'utente mostrando FOUT!
conoscenza pubblica

14

Come ho ottenuto un 99/100 su Google Page Speed ​​(per dispositivi mobili)

TLDR: comprime e incorpora l'intero script CSS tra i <style></style>tag.


Sto inseguendo quel punteggio inafferrabile 100/100 da circa una settimana. Come te, l'ultimo elemento rimanente era l'eliminazione di "css che bloccano il rendering per contenuti above the fold".

Sicuramente c'è una soluzione facile ?? No. Ho provato loadCSS del gruppo Filament soluzione . Troppi .js per i miei gusti.

Che dire async attributi per css (come js)? Non esistono.

Ero pronto a rinunciare. Poi mi sono reso conto. Se il collegamento dello script stava bloccando il rendering, cosa accadrebbe se invece avessi incorporato il mio intero CSS nella testa. In questo modo non c'era nulla da bloccare.

Sembrava assolutamente SBAGLIATO inserire 1263 righe di CSS nel mio tag di stile. Ma ho dato un vortice. L'ho compresso (e prefisso) prima usando:

postcss -u autoprefixer --autoprefixer.browsers 'last 2 versions' -u cssnano --cssnano.autoprefixer false *.css -d min/ Vedi il pacchetto postcss di NPM .

Ora era solo una LUNGA linea di css senza spazio. Ho inserito il CSS<style>your;great-wall-of-china-long;css;here</style> tag della mia home page. Quindi ho analizzato di nuovo le informazioni sulla velocità della pagina.

Sono passato dal 90/100 al 99/100 sul cellulare !!!

Questo va contro tutto in me (e probabilmente tu). Ma ha risolto il problema. Lo sto usando sulla mia home page per ora e includendo i CSS compressi a livello di codice tramite un PHP include.

YMMV (il tuo chilometraggio può variare) in attesa della lunghezza del tuo css. Google potrebbe darti troppi contenuti above the fold. Ma non dare per scontato; test!

Appunti

  1. Lo sto facendo sulla mia home page per ora, così le persone ottengono un rendering VELOCE sulla mia pagina più importante.

  2. Il tuo CSS non verrà memorizzato nella cache. Non sono troppo preoccupato però. Nel momento in cui hanno colpito un'altra pagina del mio sito, il .css verrà memorizzato nella cache (vedi Nota 1).


4
Grazie per la tua dedizione e ricerca, tuttavia personalmente non mi sognerò di farlo: D
Niet the Dark Absol

2
Quindi qual è il punto, tranne che per cercare di ottenere un punteggio che non aiuti davvero nulla?
LarryBud,

Bene, hai ottenuto il tuo punteggio più alto, ma ora ogni pagina del tuo sito avrà più peso. Comunque, buona scoperta.
EdwardM,

@EdwardM Grazie! Vedi la mia nota 2 nel post. Una volta che hanno colpito una seconda pagina, il CSS viene memorizzato nella cache e il problema di peso scompare.
elbowlobstercowstand

1
@LarryBud Il punto di punteggio più alto? Più soldi per me. Più alto è il mio sito Web su Google, maggiore è la probabilità che qualcuno faccia clic su di esso e diventi cliente. Poiché Google utilizza la velocità della pagina per determinare il posizionamento , ho deciso di migliorare il mio punteggio.
elbowlobstercowstand

9

Alcuni consigli che possono aiutare:

  • Ieri mi sono imbattuto in questo articolo sull'ottimizzazione CSS: profiling CSS per ... ottimizzazione
    Molte informazioni utili su CSS e quali CSS causano il maggior consumo di prestazioni.

  • Ho visto la seguente presentazione su jQueryUK su "segreti nascosti" in Googe Chrome (Canary) Dev Tools: DevTools Can do that . Dai un'occhiata alle sezioni su Time to First Paint , ridipinge e costosi CSS.

  • Inoltre, se stai usando un caricatore come requestJS potresti dare un'occhiata a uno dei plugin del caricatore CSS, chiamato request -CSS , che utilizza CSSO - un ottimizzatore che fa anche ottimizzazione strutturale, ad es. unione di blocchi con proprietà identiche. L'ho usato alcune volte e può salvare parecchi CSS da caso a caso.

Fuori dalla domanda: io secondo EnEnzino nella creazione di uno sprite per tutte le piccole icone che stai caricando. Le dimensioni dei file sono così ridotte che non garantisce un roundtrip del server per ogni icona. Tieni inoltre presente il numero totale di richieste HTTP simultanee che il browser può eseguire. Quindi anche le richieste di un numero maggiore di piccole icone "bloccano il rendering". Sebbene una pagina vuota sia paragonabile alla tua, ad esempio mi piace il caricamento di duckduckgo .


Sembra che anche a duckduckgo non importi del loro punteggio di pagina, controlla qui
Chetabahana,

6

Dai un'occhiata alla pagina seguente https://varvy.com/pagespeed/render-blocking-css.html . Questo mi ha aiutato a sbarazzarmi di "Render Blocking CSS" . Ho usato il seguente codice per rimuovere " Render Blocking CSS ". Ora in google page speed insight non ricevo problemi relativi al blocco del rendering CSS.

<!-- loadCSS -->
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/cssrelpreload.js"></script>
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/loadCSS.js"></script>
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/onloadCSS.js"></script>
<script>
      /*!
      loadCSS: load a CSS file asynchronously.
      */
      function loadCSS(href){
        var ss = window.document.createElement('link'),
            ref = window.document.getElementsByTagName('head')[0];

        ss.rel = 'stylesheet';
        ss.href = href;

        // temporarily, set media to something non-matching to ensure it'll
        // fetch without blocking render
        ss.media = 'only x';

        ref.parentNode.insertBefore(ss, ref);

        setTimeout( function(){
          // set media back to `all` so that the stylesheet applies once it loads
          ss.media = 'all';
        },0);
      }
      loadCSS('styles.css');
    </script>
    <noscript>
      <!-- Let's not assume anything -->
      <link rel="stylesheet" href="styles.css">
    </noscript>

1
Quando utilizzo la funzione menzionata, riduce il punteggio pageSpeed. La funzione che ho scritto è: jsfiddle.net/kvfzbxxo Puoi aiutarmi?
arsho,

Ho implementato questa stessa funzione sul seguente url e per favore dai un'occhiata alla velocità qui " whitecashback.in " puoi guardare l'URL di origine e trovare la funzione "loadCSS" nel piè di pagina. Questo ti aiuterà a capire come ho implementato il codice. La velocità della pagina dovrebbe aumentare mentre il CSS sta caricando dopo la pagina.
Amuk Saxena,

Ho usato questo codice: jsfiddle.net/sbpa1hun . Ora il CSS non viene caricato nel sito Web.
arsho,

Ho detto che dopo aver aggiunto questo codice: jsfiddle.net/sbpa1hun che viene utilizzato nel tuo sito Web, il mio sito Web ha perso tutti gli stili. Aumenta la velocità della pagina ma il CSS non funziona più! Puoi aiutarmi un po 'come? Sto ottenendo circa 40 nella velocità della pagina. Ma aggiungendo il tuo codice ottengo circa 70. Ma non riesco a far funzionare il CSS.
arsho,

1
Se stai provando a farlo in jsfiddle, allora questo non funzionerà, prova questo codice nel tuo sito web, jsfiddle bloccherà il caricamento dei CSS per i siti Web esterni. Perché stai caricando CSS di fonti esterne usando JavaScript. Quindi, prova a farlo nel tuo sito web. Prova anche a includere i file jquery, che mancano nel tuo script. Dopo aver incluso i file js, potrebbe funzionare. Inoltre, tieni presente che i siti https possono funzionare in jsfiddle. Viene visualizzato questo errore: "Caricamento bloccato del contenuto attivo misto". È necessario risolvere prima questo.
Amuk Saxena,

4

Anch'io ho lottato con questa nuova metrica di velocità della pagina.

Anche se non ho trovato alcun modo pratico per riportare il mio punteggio fino a% 100, ci sono alcune cose che ho trovato utili.

Combinare tutti i CSS in un file ha aiutato molto. Tutti i miei siti sono tornati a% 95 -% 98.

L'unica altra cosa che mi è venuta in mente è stata quella di incorporare tutti i CSS necessari (che sembra essere la maggior parte di esso - almeno per le mie pagine) sulla prima pagina per ottenere il punteggio più alto. Sebbene possa aiutare il tuo punteggio di velocità, questo probabilmente rallenterà il caricamento della tua pagina.


2
La rivista Smashing ha un punteggio del 100% nel test di pagepeed developers.google.com/speed/pagespeed/insights/…
Mo.

1

La soluzione ottimale per questo 2019 è HTTP Server Push / 2 .

Non hai bisogno di alcuna soluzione jolly JavaScript o stili in linea. Tuttavia, è necessario un server che supporti HTTP 2.0 (qualsiasi versione moderna del server lo farà), che a sua volta richiede che il server esegua SSL. Tuttavia, con Let's Encrypt non c'è motivo di non utilizzare SSL comunque.

Il mio sito https://r.je/ ha un punteggio di 100/100 sia per dispositivi mobili che desktop.

Il motivo di questi errori è che il browser ottiene l'HTML, quindi deve attendere il download del CSS prima di poter eseguire il rendering della pagina. Utilizzando HTTP2 è possibile inviare contemporaneamente sia l'HTML che il CSS.

È possibile utilizzare il push HTTP / 2 impostando l'intestazione Link.

Esempio di Apache (.htaccess):

Header add Link "</style.css>; as=style; rel=preload, </font.css>; as=style; rel=preload"

Per NGINX è possibile aggiungere l'intestazione al tag di posizione nella configurazione del server:

location = / {
    add_header Link "</style.css>; as=style; rel=preload, </font.css>; as=style; rel=preload";
}

Con questa intestazione impostata, il browser riceve contemporaneamente HTML e CSS, il che impedisce al CSS di bloccare il rendering.

Ti consigliamo di modificarlo in modo che il CSS venga inviato solo alla prima richiesta, ma l'intestazione Link è la soluzione più completa e meno caotica per "Elimina Javascript e CSS di blocco del rendering"

Per una discussione dettagliata, dai un'occhiata al mio post qui: Elimina Render Blocking CSS usando HTTP / 2 Push


Potrei capire male, ma Server Push non invierebbe il CSS ogni volta che carichi la pagina, piuttosto che una sola volta prima che sia memorizzata nella cache?
Niet the Dark Absol,

Sì, ci sono alcune tecniche come i cookie che possono aiutare a evitarlo. Dai un'occhiata alla sezione sulla selezione selettiva qui: nginx.com/blog/nginx-1-13-9-http2-server-push
Tom B


-1

Ciao per jQuery Puoi usare solo così

Usa solo asincrono e type = "text / javascript"

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.