Critical rendring path

Transcript

1. WEB FUNDAMENTALS OPTIMIZING PERFORMANCE
2. MARWEN KHEDER @kh3dr0n MarwenKheder kheder.marwen@gmail.com
3. FACTS • Web pages are getting bigger and bigger • N° users who surf the web with mobile phones and tablets is increasing.
4. Google ranks pages higher if they render in less than a second.
5. But how can you accomplish this ambitious goal without cutting off features or dramatically disfiguring your site?
6. CRITICAL RENDERING PATH
7. WHAT THE HELL IS THAT ?
8. the sequence of steps the browser goes through to turn “the code and resources required to render the initial view of a web page” into actual pixels on the screen.
11. DOM : DOCUMENT OBJECT MODEL
12. CSSOM : CSS OBJECT MODEL
13. RENDER TREE
15. WHAT ABOUT IMAGES ?
16. DOMContentLoaded event loaded event
17. WHAT ABOUT SOME JS ?
21. OKEY
 THEN WHAT ?
22. IT’S OPTIMISATION TIME
23. MINIMIZE THE BYTES THAT GO DOWN THE NETWORK
24. MINIFY COMPRESS CACHE
25. CDN : CONTENT DELIVERY NETWORK
26. THIRD PARTY CDN
27. MINIMIZE RENDER BLOCKING CSS
30. Critical Path CSS Generator http://goo.gl/7yXrBw Critical http://goo.gl/ZjEk1v CriticalCSS http://goo.gl/gHV1dK
31. MINIMIZE PARSER BLOCKING JAVASCRIPT
32. • Use events to prevent Parser Blocking
33. • Use async attribue to prevent Parser Blocking
35. BUILD TOOLS FOR WEB
37. GRUNT / GULP • Live Reload • Using Sass , Less , CoffeeScript , Jade-Lang , Haml • Run tests • Generate Distribution version
38. DISTRIBUTION • Concatenated and minified JS CSS • Optimised images • Clean HTML
39. GOOD LINKS Google developers : Critical Rendering Path http://goo.gl/QaZUcl Udacity : Website Performance Optimization http://goo.gl/nxl9PU
40. CONCLUSION • The notion of page speed has shifted from simple page loading to page rendering • The Critical Rendering Path comprises all steps to turn critical resources into a visible browser output: DOM and CSSOM, JavaScript, render tree, layout and paint phase • HTML is render blocking, but the DOM can be built incrementally • CSS is render and script blocking, treat it carefully and optimize it with inline styles or media queries • JS is parser blocking, use it sparingly during the initial page load, defer execution or try to load it asynchronously • Don’t forget that size still matters and minify, compress, cache • Using Build Tools can help improve your workflow and can helps you to generate a distribution version
41. SOURCES • Google’s Web Fundamentals documentation • Udacity’s Website Performance Optimization course • The free online book High Performance Browser Networking by Ilia Grigorik • Mozilla Developer Network • Sitepoint article Optimizing the Critical Rendering Path by Stephan Max • Automating workflow by Addy Osmani • Chromium blog : New JavaScript techniques for rapid page loads
42. QUESTIONS ?
43. THANK YOU FOR YOUR ATTENTION