If I were to tell you that your homepage loads in 10 seconds, would you worry? After all there is study after study concluding that site visitors get impatient and leave if a site doesn’t load in 3 seconds.
So is a total page load time of 10 seconds a showstopper? It depends.
The challenge we have when it comes to page speed and websites today, is that web pages are getting more complex, more image rich, all which takes a toll on page load time.
A straight forward simple HTML page of text from the 90s will load much more quickly, but your user might just leave anyway out of boredom. So what do we do? We really can’t turn back the clock.
The answer is that you optimize your page speed for above the fold.
What is “above the fold?”
The term “above the fold” dates from the newspaper era and describes the top half of the front page of a newspaper. Above the fold is where the most important news of the day is as well being a newspaper’s best chance to catch a passerby’s attention that will hopefully result in the sale of a copy.
In webdesign, “above the fold” refers to the portion of the page that is visible without scrolling. It’s important to understand that what shows above the fold varies from device to device, so make sure you take a look at your site on a smartphone as well as a desktop to see what Above the Fold means for the various scree sizes.
First meaningful paint
Your entire page does not necessarily need to load in the first 3 seconds, but something visible and readable needs to appear above the fold within those first precious seconds. Google has coined this as “First Meaningful Paint”.
Even better, the page needs to be operational even as more elements of the page are loaded out of sight below the fold. There are two terms to describe this:
- First Interactive: Most, but maybe not all, UI elements are interactive.
- Consistently Interactive: The page is FULLY interactive.
And by interactive, we mean our page responds to most user input. Meaning, it scrolls if we scroll, a menu appears if we click on a menu item, and something reasonable happens if we click a button.
Your page could be happily continuing to load stuff below the fold and your visitor won’t care, as long as there is something to look at and (even better) interact with.
This is how you workaround a slow total page load time. You focus on getting the more important elements to the user faster.
How to measure First Meaningful Paint
When I first encountered this concept, one immediate challenge was figuring out to measure a metric like “first meaningful paint”. If you are familiar with Google Pagespeed insights, you know you can get suggestions like “Eliminate render-blocking JavaScript and CSS in above-the-fold” content. But it really doesn’t tell you how quickly your page starts to appear to a user.
One option is to set up an account with GTmetrix and use their Video feature. Once you have run the test, the video will show you a video showing how your page appears and give you time markers for several useful page speed metrics such as:
- Time to first byte: Another important metric, this measures the latency of your web server. If the server is slow to respond you may need to set up caching or look at the time spent generating your dynamic pages. Google recommends that TTTB be 200 milliseconds or less. This metric deserves a whole other post.
- First paint: Often when the outline of page elements start to show.
- DOM loaded: This means that the browser has worked its way through and parsed all the files.
- First contentful paint: This is the more interesting metric to take a look at because at this point real content is showing up on the page. It is similar to First Meaningful Paint.
Here’s a screenshot of the Page Load Video for the home page of cnn.com, showing what the user sees at First Paint.
Google’s Lighthouse
You can also install Google’s Lighthouse Chrome extension, which Google developed to help developers optimize their websites. Lighthouse has really helped shift the focus away from page load time.
Here’s a video from the 2017 Google I/O conference where the creators of Lighthouse talk more about their project and all the things it can do:
Lighthouse provides several audits (including one for SEO!), the one we are interested in for Page Speed is “Performance”.
Once you have the extension installed, look for the lighthouse icon in your Chrome browser, click on it and select “Options” to get the dialog shown below.
After selecting Performance and any other report you may want, click on “OK” and then “Generate Report”.
Example Lighthouse Performance Report
Here is an example Lighthouse report, you can see that this page needs some work when it comes to page speed as the first meaningful paint doesn’t occur until 5 seconds!
As you can see, there is a lot to digest. Each of the headers under Opportunities and Diagnostics will expand out to show you more information when clicked.
I’ve highlighted in yellow the metrics (Time to First Byte, First Meaningful Paint) we’ve been discussing in this post so you know what to look for.
Opportunities to explore is deferring JavaScript (which possibly could be done just by moving the script to lower down in the source to live among the “Below the Fold” elements), minification and optimizing images.
Happy optimizing!
At this time of writing, Google just announced that Lighthouse 3.0 is coming soon, the above screenshots are from version 2.9.3.
