Why does page speed matter in tech product?

Why does page speed matter in tech product?

Why does page speed matter in tech product? Google ranking loves a page that loads quickly. In order to make a page load fast the product manager needs to know some basics. Every webpage goes through four stages. Let’s look at them one by one.

Request > Response > Build > Render

Request is where it all begins. A link is clicked, a page is refreshed, or an address is entered into the navigation bar. As a result of this a document is requested from the server. This can be any type of file, but for the web it’s usually a HyperText Markup Language file (html). The process used for this is the HyperTextTransferProtocol (HTTP).

Request > Response > Build > Render

Stage two is the response. The user’s request hits the servers and they return a webpage. The response is complete when the browser has all the things returned to it that it requested. If this were a simple .html page, then that would be really quick, but we like images, videos and formatting a whole load of other things also need to be returned: text formatting, images, CSS, JavaScript, etc. These items are called resources. The more there are the longer it takes. The less well refined they are the longer it takes too, and so on. This is process is known as parsing and is often referred to at the critical path.

Request > Response > Build > Render

Stage three is build. Once the request for resources has been made the page can be assembled. To do this it needs information from:

DOM: (Header, metadata, title, body, images, paragraphs)

CSSDOM: (font sizes, image sizes, page widths)

A Render Tree will be built which combines the DOM and CSSDOM and creates a map how of how the items will be laid out and painted on to the screen.

Request > Response > Build > Render

Stage four is Render. This is about layout and paint.

Layout :The browser now needs to work out what size screen you have and how to lay everything out so that it is in the right place.

A side bar may be specified at  25%, but 25% of what?

Paint: With the calculations all done, the browser can now put something on the screen. This is called the paint.

Each node of the render tree is placed on the page.

Why does all this matter?

Again it’s about search engine ranking largely. If you don’t come at the top of the search you’re toast. No one will find you. It’s also about the balance between ranking and identity though. A super-fast webpage may rank high, but it would likely have no branding, advertising, images, video and so on – ultimately it’d be really plain and uninspiring.

What can I do about it?

Well, Google which is still the main search engine of choice, mainly measures First Contentful Paint (FCP) and Time to Interactive (TTI).

FCP happens in the build phase. It measures the time form navigation to the time when the browser renders the first bit of content from DOM. It provides feedback that the page is actually loading.

TTI is how long it takes for a page to become interactive, when it has loaded all of its resources. It provides feedback the page has actually loaded something.

How can I improve FCP and TTI?

How to improve FCP

1) Change the way web fonts load, for example: tell the browser to load first the system fonts when the DOM is rendered and the swap to the custom web fonts you want to use.

2) Optimize images and load them with the expected resolution and in the order your users really need them (also known as lazy loading)– resize the images and use the right resolution.

How to improve TTI

Defer or remove unnecessary JavaScript work that occurs during page load.For example, have the adverts render after the main content or have flashy interactive features load until after the headers.

Top tips for best practice

The overall experience of a page is likely to affected by the number of images, videos, ads and so on that it contains. These will make the render phase quite long and the user will probably get bored waiting for the page to load and go elsewhere – another competitor maybe.

Even if you aren’t specifically looking to measure FCP and TTI, it doesn’t mean you shouldn’t try to improve your adstack, video quality, number of embeds and so on – as the users will still have a lesser experience if they are not optimised.

Remember there is always a balance between the reality of the numbers and the perception of the users. There’s no right answer – opinions vary and measurable targets can change.

Why does a product manager need to know about page speed?

Great question! Because if you don’t, you’re asleep on the job! Great customer experiences sit with the Product Manager and if you build a great product that won’t load no one can use it. Plus, your credibility will be shot to pieces if you’re the only person in the room who doesn’t understand it. You don’t have to be an engineer to work in product, but you do have to be interested in tech that powers it.

Ready to get started?

Our team of business agility experts are here to help

Contact us

Discover new insights

I’m a product owner not a feature... By Paul Grew

Read More

Financial Times UK's Leading Management Consultants

Sign up for our newsletter

Keep up to date with all the latest business agility news