📈 Improving performance 101

This is part 1 of a journey into all things web performance.

why does performance matter? When pages load slowly, user attention wanders, and users perceive the task as broken. Sites that load quickly have longer average sessions, lower bounce rates, and higher ad viewability. Amazon famously revealed that they found that every 100ms of Latency Cost them 1% in Sales. Even google found that an extra .5 seconds in search page generation time dropped traffic by 20%. A 2017 Akamai study shows that every 100-millisecond delay in website load time can hurt conversion rates by 7%.

While web performance is often an after thought for product managers and developers alike, Its clear, that the need for speed and scale are escalating.

The best way to get started on improving performance is to identify the low-hanging fruit and quick wins that will have a big impact on the user experience and work on those first. Before I explain how and what to measure lets first get the basics down:

Whats happening from when you request a page to it actually being usable? The browser has a rendering engine that goes through a series of steps.

the rendering engine flow 101

parsing --> render tree --> layout --> paint

Parsing

parsing consists of grammar which has vocabulary and syntax rules. vocabulary could be integers and syntax rules addition

It translates a document into a structure that code can use there's convention and unconventional conventional you can render js and css unconventional requires an unconventional parser

rendering - there's global and incremental layout paint - there is global and incremental painting

Parsing consists of lexical analysis and syntax analysis lexical - lexers or tokenizers - it creates the tokens parsers apply the syntax rules

parser requests tokens, lexer replies with the tokens

parser tries using the token based on syntax rules, If it cant it'll store the token and later sees if it matches.

Render tree

Deals with the visual elements and which order to display them in. It's generated while the DOM tree is constructed. Its elements are called render objects or renderer. a render object is a rectangle.

Layout

Otherwise known as reflow in mozilla browsers, is a recursive process that starts at the root (html) and calculates the position and size in one pass. There are two methods: -Global: When you resize the browser or if you change the font. -Incremental: Using a Dirty bit system. It makes sure you don't have to render the full layout at each interaction.

Paint

Recursively runs through the render tree in this order:

1.background colour, 2. background image, 3. border 4. children 5. outline

more info: http://taligarsiel.com/Projects/howbrowserswork1.htm

In the next part we will look at how to measure whats important, identify the steps we just looked at and see how we can improve load times.