How A Web Page Is Loaded — How That Affects How Fast Your Shop Feels

Why do some shops feel fast and others feel slow? Curiously, the pages may look exactly the same but due to the way web pages load one feels fast and the other slow. It’s important to understand how a web page is loaded if you’re looking to speed it up.

You probably already know from browsing around that a web page does not just load all at once: one second the screen is blank, the next everything is there! You may have also noticed that the text on a web page sometimes loads momentarily before the images do. That’s because a web page is not a ‘single thing’ it’s made up of pieces.

Broadly speaking, every web page contains a) HTML code providing the structure of the page and its text b) CSS that determines how the page is styled (colors, fonts, sizes etc.) c) JavaScript to make the page interactive with things like popups, ad tracking and more, d) Images. These pieces must all be downloaded and then brought together to form the web page.

The goal of a web browser is to display the page to a user as quickly as possible. Instead of waiting for absolutely all of the pieces to be downloaded it looks for the minimum pieces it needs to display the page.

For example, let’s say you have an analytics tracking script on your page. This is not required for the browser to be able to display the page. The browser will 1. download what it needs 2. display the page 3. download the analytics tracking script.

A web page feels fast when it displays fast, not when absolutely everything on the page has loaded.

When a web page is built it’s the responsibility of the developer to tell the browser what must be downloaded for the page to be displayed and what can be loaded after display. You may have heard of the terms ‘non-render-blocking’ and ‘render-blocking’. If a developer codes something as ‘non-render-blocking’ it means it does not block the web page being displayed, ‘render-blocking’ and it must be downloaded before the web page is displayed. We’ll go into this and other terms in another article.

To measure the time from requesting a web page until it being displayed and able to be used by the visitor we use the measurement called ‘First Meaningful Paint’.

But why not measure the time it takes to download absolutely everything on the page? Isn’t that extra thorough? No, it’s a fool’s task due to how modern websites work.

Web pages have become heavier and heavier (having larger file sizes) with graphics that have to look good on our high resolution screens, interactivity and tracking. A solution to keep them feeling fast is as we’ve discussed allowing things to load after the page is displayed.

That means that these scripts, images, styles and content that load after the page has displayed can take longer to load and run without any negative feeling of slowness to the visitor. Some are specifically designed to be loaded on demand, slowly and to make long requests to servers. This just doesn’t affect how fast your shop feels.

As an example, think about a video. When you push play on Netflix, what matters the most? It’s the time it takes to start playing and that it keeps playing smoothly. It would be pointless to measure the total time it takes to download the entire video if our goal was a fast video player.

The same is true with your shop. If your goal is a web page that feels fast, focus on First Meaningful Paint. That’s where you will tangibly improve how fast your shop feels to your visitors.

Originally published at https://www.pluginuseful.com on May 23, 2019.