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?

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) ...!

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).

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 .

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>

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.

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

Prendi in considerazione l'utilizzo di un pacchetto per generare automaticamente stili incorporati dai tuoi file css. Un buono è Grunt Critical o Critical css per Laravel .

Ciao per jQuery Puoi usare solo così

Usa solo asincrono e type = "text / javascript"