Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
/Jonas Ohlsson @pocketjoso
Automating
Faster Page
Rendering
— Step by step from start to finish
Today's talk
Start Render Time
What is the browser waiting for?
JS & CSS
Blocking assets
HTTP Requests are evil
(In current protocol)
Reduce Render Start
Time: How to
<html>
<head>
...
<linkrel="stylesheet"href="css/styles.css">
<scriptsrc="js/scripts.js">...
Reduce Render Start
Time: How to
<html>
<head>
...
<!--InlineCSStoavoidHTTPrequest.Onlycriticalcssforpagethough!-->
<style...
What is critical (css)?
“Styles needed to render immediately visible
DOM content.”
Me, right now
Step 1. Generate
Creating the critical CSS
Manually?
No way!
Scripting
//foreachselectorinfullCSS:
varelements=document.querySelectorAll(".myClass");
//foreachelementonpagematched
for...
Slightly more complicated..
@-Rules (@font-face, @media, @keyframe...)
pseudo-selectors (:before, :hover ..)
others.. (inp...
Perfection
Necessary for automation
Demo
http://jonassebastianohlsson.com/criticalpathcssgenerator
Step 2. Build
Automating the critical css generation
Penthouse
CLI, Node, Grunt, Gulp (Thanks !)@kopseng
https://github.com/pocketjoso/penthouse
Grunt generate setup
penthouse:{
task1:{
css: 'css/jso.min.css',
url: 'http://localhost/jso/index.php',
outfile: 'index.ph...
Grunt generate setup
penthouse:{
task1:{
css: 'css/jso.min.css',
url: 'http://localhost/jso/index.php',
outfile: 'index.ph...
Step 3. Serve
Making use of the critical CSS
PHP serve setup
<head>
<?php
//getfileonserverforthispage
$pagefile=$_SERVER['DOCUMENT_ROOT'].$_SERVER['PHP_SELF'];
//answ...
PHP footer
<!--towardsendofpage..->
<!--CSS-ifusingCriticalPathCSSonpage-->
<?phpif($USE_CRITICAL_CSS){?>
<linkrel="styles...
THE END
Links
Critical Path Css generator tools
Penthouse [https://github.com/pocketjoso/penthouse]
Online Critical path css gener...
Links
Performance testing
WebPageTest [http://webpagetest.org]
PageSpeed Insights [http://developers.google.com/speed/page...
Links
Going further
loadCSS (faster than using links, for full footer CSS)
[https://github.com/filamentgroup/loadCSS]
bask...
Automating Faster Page Rendering - step by step from start to finish
Automating Faster Page Rendering - step by step from start to finish
Automating Faster Page Rendering - step by step from start to finish
Automating Faster Page Rendering - step by step from start to finish
Automating Faster Page Rendering - step by step from start to finish
Upcoming SlideShare
Loading in …5
×

Automating Faster Page Rendering - step by step from start to finish

1,711 views

Published on

You might have heard of critical path CSS and its impact on performance, but how can we take care of this problem today? Doing it manually is time consuming, error prone, and a nightmare to maintain. These slides will show you how to automate the process, using a tool that I built for this purpose.

Published in: Internet
  • Be the first to comment

Automating Faster Page Rendering - step by step from start to finish

  1. 1. /Jonas Ohlsson @pocketjoso Automating Faster Page Rendering — Step by step from start to finish
  2. 2. Today's talk
  3. 3. Start Render Time What is the browser waiting for?
  4. 4. JS & CSS Blocking assets
  5. 5. HTTP Requests are evil (In current protocol)
  6. 6. Reduce Render Start Time: How to <html> <head> ... <linkrel="stylesheet"href="css/styles.css"> <scriptsrc="js/scripts.js"></script> </head> <body> <!--BlockingHTTPrequestsAFTERDOMcontent--> </body> </html>
  7. 7. Reduce Render Start Time: How to <html> <head> ... <!--InlineCSStoavoidHTTPrequest.Onlycriticalcssforpagethough!--> <style> body{ color:#202020; } </style> </head> <body> <!--Pagecontenthere--> <linkrel="stylesheet"href="css/styles.css"> <scriptsrc="js/scripts.js"></script> </body> </html>
  8. 8. What is critical (css)?
  9. 9. “Styles needed to render immediately visible DOM content.” Me, right now
  10. 10. Step 1. Generate Creating the critical CSS
  11. 11. Manually? No way!
  12. 12. Scripting //foreachselectorinfullCSS: varelements=document.querySelectorAll(".myClass"); //foreachelementonpagematched for(vari=0;i<elements.length;i++){ //if"abovethefold" if(elements[i].getBoundingClientRect().top>window.innerHeight){ //keepCSSrulesthatusethisselector keepThis= true; } }
  13. 13. Slightly more complicated.. @-Rules (@font-face, @media, @keyframe...) pseudo-selectors (:before, :hover ..) others.. (input:-moz-focus-inner, ::-webkit-input- placeholder)
  14. 14. Perfection Necessary for automation
  15. 15. Demo http://jonassebastianohlsson.com/criticalpathcssgenerator
  16. 16. Step 2. Build Automating the critical css generation
  17. 17. Penthouse CLI, Node, Grunt, Gulp (Thanks !)@kopseng https://github.com/pocketjoso/penthouse
  18. 18. Grunt generate setup penthouse:{ task1:{ css: 'css/jso.min.css', url: 'http://localhost/jso/index.php', outfile: 'index.php.css', width: 1300, height: 900 } }
  19. 19. Grunt generate setup penthouse:{ task1:{ css: 'css/jso.min.css', url: 'http://localhost/jso/index.php', outfile: 'index.php.css', width: 1300, height: 900 }, task2:{ css: 'css/jso.min.css', url: 'http://localhost/jso/work/index.php', outfile: 'work/index.php.css', width: 1300, height: 900 } /*..etc!*/ }
  20. 20. Step 3. Serve Making use of the critical CSS
  21. 21. PHP serve setup <head> <?php //getfileonserverforthispage $pagefile=$_SERVER['DOCUMENT_ROOT'].$_SERVER['PHP_SELF']; //answerlike'C:/xampp/htdocs/jso/index.php' //checkifthereisacorrespondingcriticalcssfile $critcssfile=$pagefile.".css"; if(file_exists($critcssfile)){ $USE_CRITICAL_CSS=true; ?> <!--inlinecriticalpathCSS--> <style><?phpinclude($critcssfile);?></style> <?php}else{?> <!--fallback-nocriticalcssfoundforpage--> <linkrel="stylesheet"href="/jso/css/jso.min.css"media="all"> <?php}?> </head>
  22. 22. PHP footer <!--towardsendofpage..-> <!--CSS-ifusingCriticalPathCSSonpage--> <?phpif($USE_CRITICAL_CSS){?> <linkrel="stylesheet"href="/jso/css/jso.min.css"media="all"> <?php}?> </body> </html>
  23. 23. THE END
  24. 24. Links Critical Path Css generator tools Penthouse [https://github.com/pocketjoso/penthouse] Online Critical path css generator [http://jonassebastsianohlsson.com/criticalpathcssgenerator] Critical (extract & inline critical css automation) [https://github.com/addyosmani/critical]
  25. 25. Links Performance testing WebPageTest [http://webpagetest.org] PageSpeed Insights [http://developers.google.com/speed/pagespeed/insights/] Pingdom Website Speed Test [http://tools.pingdom.com/fpt/]
  26. 26. Links Going further loadCSS (faster than using links, for full footer CSS) [https://github.com/filamentgroup/loadCSS] basket.js (store CSS/JS in localStorage rather than browser cache) [http://addyosmani.github.io/basket.js/] How to make RWD sites load fast as heck [http://filamentgroup.com/lab/performance-rwd.html]

×