Ottimizzazione CSS e Speed Insights

stavo correndo Google Page Speed Insights sul mio sito - www.gpsheatmap.com, e ha suggerito di cambiare il carico dei miei fogli di stile (https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example) da -Ottimizzazione CSS e Speed Insights

<link href="/static/css/landing-page.css" rel="stylesheet">

A -

<script> 
    var cb = function() { 
    var l = document.createElement('link'); 
    l.rel = 'stylesheet'; 
    l.href = '/static/css/landing-page.css'; 
    var h = document.getElementsByTagName('head')[0]; 
    h.parentNode.insertBefore(l, h); 
    }; 
    var raf = requestAnimationFrame || mozRequestAnimationFrame || 
     webkitRequestAnimationFrame || msRequestAnimationFrame; 
    if (raf) raf(cb); 
    else window.addEventListener('load', cb); 
</script>

Ho provato questo per i miei fogli di stile e ha visibilmente cambiato il caricamento in modo da vedere la vista pre-css, quindi un secondo dopo vedresti il foglio di stile applicato. Questo era in firefox

Devo ignorare questo approccio, o può essere risolto?

fonte

2016-03-15 farrellmr

un'occhiata a [questo] (http://stackoverflow.com/a/35691921/3828573) – Shayan

file CSS e js vengono memorizzati nella cache dopo il 1 ° carico in modo non penso esecuzione di uno script per caricare fa qualsiasi differenza se tutto è più veloce se hai archiviato il file css nella memoria locale - https://www.smashingmagazine.com/2014/09/improving-smashing-magazine-performance-case-study/ – Tasos

Penso che questo sia un merda davvero raccomandata da google. Carica il CSS quando DOM è pronto da una funzione javascript è davvero fastidioso. E crea il problema che descrive farrellmr: vedrai applicare gli stili in seguito. Perché google consiglia questo tipo di craps? Non è la prima cosa che google consiglia quando fa schifo (usa i prefissi '-webkit-' per tutte le funzionalità di cui hai bisogno, per esempio) –

si dovrebbe considerare il percorso critico e anche mettere tutto lo stile necessari nella sezione head in modo da evitare il FOUC (appena lo stile per i contenuti sopra la piega). Questo può essere fatto sia estraendo lo stile a mano o — per i siti più grandi — con un compito automatica come critical-path-css-demo per gulp

In ogni caso se si sceglie di caricare tutti i fogli di stile con javascript in considerazione per includerli ancora all'interno di un blocco <noscript>, così possono essere caricati anche quando JS non è disponibile.

<noscript> 
    <link rel="stylesheet" ...> 
</noscript>

Come ulteriore ottimizzazione for near-future browser (in questo momento funziona solo su Chrome Canary) sarà possibile early preload stylesheets utilizzando

<link rel="preload" href="..." as="style">

e di creare un caricatore asincrono in modo più semplice

<link rel="preload" href="..." as="style" onload="this.rel='stylesheet'">

Un altro approccio interessante e recente è "Caricamento CSS multistadio": è necessario caricare una piccola porzione di CSS appena prima del markup che deve essere stilizzato e quindi evitare la necessità di CSS critici, ad es.

<link rel="stylesheet" href="/site-header.css"> 
<header>…</header> 

<link rel="stylesheet" href="/article.css"> 
<main>…</main> 

<link rel="stylesheet" href="/comment.css"> 
<section class="comments">…</section>

Il piano è per ciascun blocco di rendering di contenuti successiva mentre i carichi foglio di stile, ma consentono il rendering del contenuto prima. I fogli di stile vengono caricati in parallelo, ma si applicano in serie. Questo si comporta in modo simile a <script src="…"></script>.

fonte

2016-03-15 09:11:57 fcalderan

Ottimizzazione CSS e Speed ​​Insights

risposta

Problemi correlati

Ottimizzazione CSS e Speed Insights