Google Pagespeed Insight: "Ottimizza la consegna CSS di quanto segue". Come?

Question

Ho testato il mio sito web wordpress su Google Page Speed ​​Insight e ha ottenuto un punteggio di 95/100. Ha suggerito che dovrei "Ottimizza CSS consegna" del file css 1:

<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>" /> 

in questo momento è seduto nel piè di pagina con tutti i codici javascript sotto di essa. L'ho spostato di nuovo tra il tag principale e gli stessi risultati. Come ottimizzo la consegna css del file css?

Answer 1

Nel caso di un file CSS di grandi dimensioni, è necessario identificare e integrare il CSS necessario per il rendering dei contenuti above the fold e posticipare il caricamento degli stili rimanenti fino a dopo il contenuto above the fold.

Tratto da: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

La sua non è migliore per mettere in realtà tutto il css insieme. Dovresti chiamare prima lo stile che è necessario per il rendering e poi chiamare il tuo foglio di stile più grande.

E se volete sapere come rinviare i fogli di stile bene questo è il modo:

CSS delivery optimization: How to defer css loading?

Speranza I Got You coperto :)

Answer 2

95/100 è un grande punteggio. Sei al punto in cui più lavoro per colpire 100 ti darà rendimenti decrescenti rispetto allo sforzo necessario per arrivarci.

Ma se sei pronto ad avvicinarti a 100/100 devi rimuovere il CSS precedente dal file e includerlo in un blocco <style> all'interno del tema. Quindi puoi aspettare di caricare il file CSS fino a quando il resto della pagina non è stato caricato e non sarà più il blocco del rendering.

Ecco some info I wrote sulla gestione above the fold CSS con il plug-in di WordPress Autoptimize che include un bookmarklet JavaScript per iniziare a cercare il CSS above the fold.

Nota: Si deve usare la funzione wp_enqueue_style() per includere quello script, invece di includere direttamente nel piè di pagina. Controlla this article sul mio sito Web per vedere come accodare correttamente script e stili.