/ / Css critico, contenuto above the fold e visualizzazioni di rendering: gruntjs, gulp, pagespeed

Css critico, contenuto above the fold e visualizzazioni di rendering: gruntjs, gulp, pagespeed

Attualmente sto lavorando al mio sorsocostruire / implementare la pipeline. Tutto il contenuto disponibile sul Web in merito alla css-inlining critica è bello e carino ma non si adatta bene agli scenari del mondo reale in cui le pagine (viste) sono assemblate in modo dinamico. Io ho:

  • header.html
  • view.html (home.html, about.html, single.html, category.html)
  • footer.html

Qualsiasi pagina Web è un'intestazione concatenata + vista + piè di pagina. Il contenuto non è prevedibile: non puoi sapere quanti articoli ci saranno in una vista di categoria renderizzata.

Dovrei costruire viste false assemblate con ilquantità massima di contenuto che può essere visualizzata nella parte sopra la piega per ogni vista ed estrarre quindi il css? Esiste un metodo già noto per raggiungere l'obiettivo?

Non si tratta di wordpress quindi per favore non menzionare plugin o cose del genere.

risposte:

0 per risposta № 1

Usa questo: https://www.npmjs.com/package/grunt-critical-css

sul blog yeoman ci sono anche molti consigli grunt / gulp se si desidera aumentare le prestazioni della pagina in generale: http://yeoman.io/blog/performance-optimization.html