Web performance fundamental

1. Web
performance
jvinhit@gmail.com

2. Why does speed matter?

3. At the same time…Our applications are getting bigger.

4. How web page are born ?

8. DOM

10. CSSOM

12. Render-tree Construction, Layout, and Paint

13. Layout/ Paint

14. The pixel pipeline
If you change a “layout” property, so that’s one that changes an element’s geometry, like its width, height, or its position
with left or top, the browser will have to check all the other elements and “reflow” the page. Any affected areas will need to
be repainted, and the final painted elements will need to be composited back together. ( web performance is avoid reflow )
If you changed a “paint only” property, like a background image, text color, or shadows, in other words one that does not
affect the layout of the page, then the browser skips layout, but it will still do paint (repaint).
If you change a property that requires neither layout nor paint, and the browser jumps to just do compositing.

15. Reduce the Scope and Complexity of Style
Calculations
Computed Style Calculations: Changing the DOM, through adding and removing elements,
changing attributes, classes, or through animation, will all cause the browser to recalculate
element styles and, in many cases, layout (or reflow) the page, or parts of it. This process is
called computed style calculation.
● The first part of computing styles is to create a set of matching selectors, which is
essentially the browser figuring out which classes, pseudo-selectors and IDs apply to any
given element.
● Figuring out how what the end result of an element with multiple rules is.
Reduce Style Calculations
● Reduce the complexity of your selectors; use a class-centric methodology like BEM
● Reduce the number of elements on which style calculation must be calculated.

16. Avoid Large, Complex Layouts and Layout
Thrashing
Similarly to style calculations, the immediate concerns for layout cost are:
● The number of elements that require layout.
● The complexity of those layouts.
Improvement:
● Avoid layout wherever possible
● Use flexbox over older layout models
● Avoid forced synchronous layouts

17. Avoid layout wherever possible
When you change styles the browser checks to see if any of the changes require layout to be
calculated, and for that render tree to be updated. Changes to “geometric properties”, such as
widths, heights, left, or top all require layout.
Layout is almost always scoped to the entire document. If you have a lot of elements, it’s going
to take a long time to figure out the locations and dimensions of them all.
If it’s not possible to avoid layout then the key is to once again use Chrome DevTools to see how
long it’s taking, and determine if layout is the cause of a bottleneck.
Note: Want a definitive list of which CSS properties trigger layout, paint, or composite? Check out CSS
Triggers.

18. Use flexbox over older layout models
The web has a range of layout models, some being more widely supported than others. The
oldest CSS layout model allows us to position elements on screen relatively, absolutely, and by
floating elements.

19. Avoid forced synchronous layouts - layout
thrasing
First the JavaScript runs, then style calculations, then layout. It is, however, possible to force a
browser to perform layout earlier with JavaScript. It is called a forced synchronous layout.
● Batch edit HTML elements
● Avoid layout thrasing, force sync layout

20. Rendering Blocking

23. Improve Rendering blocking CSS
● Don’t add css via @import rule
The @import rule lets you import CSS from other stylesheets, but this causes the browser
to process your CSS file more slowly because it also has to download the imported files.
Until this takes place, the rendering process will be blocked.
● Use the media attribute for conditional CSS
By default, the browser treats all CSS files as render blocking resources.
Even though these files are still download on all devices, they become non-render
blocking resources if the condition evaluates as false.
● Use font-display property
● Preload, non-critical resource ...

24. Improve Rendering blocking CSS
● Don’t add css via @import rule
The @import rule lets you import CSS from other stylesheets, but this causes the browser
to process your CSS file more slowly because it also has to download the imported files.
Until this takes place, the rendering process will be blocked.
● Use the media attribute for conditional CSS
By default, the browser treats all CSS files as render blocking resources.
Even though these files are still download on all devices, they become non-render
blocking resources if the condition evaluates as false.

25. HTTP Caching
● Weak Caching Header: Etag và Last-Modified
● Strong Caching Header: Expires và Cache-Control

26. Optimizing Javascript Execution
- Avoid setTimeout or setInterval for visual updates; always use requestAnimationFrame
instead.
- Move long-running JavaScript off the main thread to Web Workers.
- Use micro-tasks to make DOM changes over several frames.
- Use Chrome DevTools’ Timeline and JavaScript Profiler to assess the impact of
JavaScript.

27. Reference
https://developers.google.com/web/fundamentals/performance/rendering/optimize-
javascript-execution