Automating Faster Page Rendering - step by step from start to finish
•
4 likes•2,008 views
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.
Recommended
More Related Content
What's hot
What's hot (13)
Similar to Automating Faster Page Rendering - step by step from start to finish
Similar to Automating Faster Page Rendering - step by step from start to finish (20)
Recently uploaded
Recently uploaded (20)
Automating Faster Page Rendering - step by step from start to finish
- 1. /Jonas Ohlsson @pocketjoso Automating Faster Page Rendering — Step by step from start to finish
- 2. Today's talk
- 6. Start Render Time What is the browser waiting for?
- 7. JS & CSS Blocking assets
- 8. HTTP Requests are evil (In current protocol)
- 9. Reduce Render Start Time: How to <html> <head> ... <linkrel="stylesheet"href="css/styles.css"> <scriptsrc="js/scripts.js"></script> </head> <body> <!--BlockingHTTPrequestsAFTERDOMcontent--> </body> </html>
- 10. 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>
- 11. What is critical (css)?
- 12. “Styles needed to render immediately visible DOM content.” Me, right now
- 15. Step 1. Generate Creating the critical CSS
- 18. Slightly more complicated.. @-Rules (@font-face, @media, @keyframe...) pseudo-selectors (:before, :hover ..) others.. (input:-moz-focus-inner, ::-webkit-input- placeholder)
- 21. Step 2. Build Automating the critical css generation
- 22. Penthouse CLI, Node, Grunt, Gulp (Thanks !)@kopseng https://github.com/pocketjoso/penthouse
- 23. Grunt generate setup penthouse:{ task1:{ css: 'css/jso.min.css', url: 'http://localhost/jso/index.php', outfile: 'index.php.css', width: 1300, height: 900 } }
- 24. 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!*/ }
- 25. Step 3. Serve Making use of the critical CSS
- 28. THE END
- 29. 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]
- 30. 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/]
- 31. 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]