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.

of

Web performance fundamental Slide 1 Web performance fundamental Slide 2 Web performance fundamental Slide 3 Web performance fundamental Slide 4 Web performance fundamental Slide 5 Web performance fundamental Slide 6 Web performance fundamental Slide 7 Web performance fundamental Slide 8 Web performance fundamental Slide 9 Web performance fundamental Slide 10 Web performance fundamental Slide 11 Web performance fundamental Slide 12 Web performance fundamental Slide 13 Web performance fundamental Slide 14 Web performance fundamental Slide 15 Web performance fundamental Slide 16 Web performance fundamental Slide 17 Web performance fundamental Slide 18 Web performance fundamental Slide 19 Web performance fundamental Slide 20 Web performance fundamental Slide 21 Web performance fundamental Slide 22 Web performance fundamental Slide 23 Web performance fundamental Slide 24 Web performance fundamental Slide 25 Web performance fundamental Slide 26 Web performance fundamental Slide 27
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

0 Likes

Share

Download to read offline

Web performance fundamental

Download to read offline

Web performance fundamental

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Web performance fundamental

  1. 1. Web performance jvinhit@gmail.com
  2. 2. Why does speed matter?
  3. 3. At the same time…Our applications are getting bigger.
  4. 4. How web page are born ?
  5. 5. DOM
  6. 6. CSSOM
  7. 7. Render-tree Construction, Layout, and Paint
  8. 8. Layout/ Paint
  9. 9. 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.
  10. 10. 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.
  11. 11. 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
  12. 12. 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.
  13. 13. 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.
  14. 14. 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
  15. 15. Rendering Blocking
  16. 16. 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 ...
  17. 17. 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.
  18. 18. HTTP Caching ● Weak Caching Header: Etag và Last-Modified ● Strong Caching Header: Expires và Cache-Control
  19. 19. 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.
  20. 20. Reference https://developers.google.com/web/fundamentals/performance/rendering/optimize- javascript-execution

Web performance fundamental

Views

Total views

9

On Slideshare

0

From embeds

0

Number of embeds

0

Actions

Downloads

1

Shares

0

Comments

0

Likes

0

×