Vlad zelinschi optimizing the critical rendering path
Download as PPTX, PDF0 likes678 views
The document discusses optimizing the critical rendering path (CRP) of a web page. The CRP refers to the steps between receiving HTML, CSS, and JavaScript and rendering pixels on the screen. These steps include parsing HTML to build the DOM tree, parsing CSS to build the CSSOM tree, combining them into a render tree, running layout to compute geometry, and painting to the screen. Optimizing the CRP means minimizing the time spent in these steps. Some tips include getting CSS to the client fast, eliminating blocking JavaScript from the CRP, and focusing on above-the-fold content. Tools like critical CSS extraction can help optimize the CRP.
![“[…] what happens in these intermediate steps
between receiving the HTML, CSS, and
JavaScript bytes and the required processing to
turn them into rendered pixels - that’s the critical
Google Developers
rendering path.”](https://image.slidesharecdn.com/vladzelinschi-optimizingthecriticalrenderingpath-141120132037-conversion-gate01/85/Vlad-zelinschi-optimizing-the-critical-rendering-path-8-320.jpg)
Vlad zelinschi optimizing the critical rendering path
- 2. Optimizing the CRP (Critical Rendering Path)
- 3. Vlad Zelinschi Frontend Engineer at Yonder @vladzelinschi
- 4. “One does not simply optimizes the critical rendering path so easily…”
- 5. Reasons for being here • Easy to construct large apps and just … “go with the flow” • Performance should be in your head right from the start (this does not mean over-optimizing early on!!) • Demanding clients, demanding users, demanding developers, high standards
- 6. SPEED IS A FEATURE
- 7. What is the CRP?
- 8. “[…] what happens in these intermediate steps between receiving the HTML, CSS, and JavaScript bytes and the required processing to turn them into rendered pixels - that’s the critical Google Developers rendering path.”
- 10. Candy break …
- 11. Enter The Network … • DNS Lookup to resolve the hostname to IP address • New TCP connection (if necessary) • TLS/SSL handshake happening (worst case scenario) • HTTP request for index.html
- 12. Some TCP knowledge • TCP is designed to probe the network to figure out the available capacity • TCP does not use the full capacity from the start • TCP Slow Start - for congestion control and avoidance • For the first roundtrip ~ 14KB (10 TCP packets)
- 14. let’s get the index.html
- 17. What browsers do … • Conversion: from raw bytes to individual characters (based on encoding - ex: UTF-8) • Tokenizing: converts strings of characters into distinct tokens specified by the W3C HTML5 standard • Lexing: tokens are converted into “objects” which define their properties and rules • DOM construction: relation between tags, tree-like construction
- 19. same for CSS …
- 24. then the render tree …
- 26. Render, Layout, Paint • Final stages before getting something on screen • The Layout calculates the exact position and size of the elements in the viewport • The render tree construction, position and size calculation are captured with the “Layout” event in the Timeline (Chrome Dev Tools) • Paint - converts the render tree to actual pixels
- 27. Recap • Process HTML markup and build the DOM tree • Process CSS markup and build the CSSOM tree • Combine the DOM and CSSOM into a render tree • Run layout on the render tree to compute geometry of each node • Paint the individual nodes to the screen
- 28. Optimizing the critical rendering path is the process of minimizing the total amount of time spent in steps one through five in the previous slide.
- 29. Perf rules to keep in mind • HTML is parsed incrementally • CSS is render blocking (can’t construct the CSSOM and the render tree without it) • CSS is not incremental (we must wait for the entire file to download)
- 33. JavaScript - friend and foe • The location of the script in the document is significant • DOM construction is paused when a script tag is encountered and until the script has finished executing (JS is parser-blocking) • JavaScript can query and modify the DOM and CSSOM • JavaScript execution is delayed until the CSSOM is ready
- 34. How can we have pixels on screen after just one RTT (round trip time)?
- 39. Optimizing the CRP • Get CSS down to the client as fast as possible • Eliminate blocking JavaScript from the CRP (your friend, async) • Aim for the fastest domContentLoaded time (DOM and CSSOM are ready)
- 40. Optimizing the CRP • Concentrate on the above the fold content - ATF (what the user sees first) • Inline CSS and JS for ATF (remember the 14KB limit?) • Put your critical assets on the same domain • Consider minifying HTML
- 41. Tools for the trade • https://github.com/filamentgroup/grunt-criticalcss • https://github.com/bezoerb/grunt-critical • https://github.com/filamentgroup/loadCSS • https://github.com/filamentgroup/loadJS • https://developers.google.com/speed/pagespeed/
- 42. Real world example https://www.fasetto.com/
- 43. Thank you!
- 44. Q&A anyone?
- 46. Please fill the online evaluation form after event Optimizing the CRP (Critical Rendering Path) Vlad Zelinschi Frontend Engineer at Yonder