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.
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.
Above the Fold: Newspaper the day of the 1989 Loma Prieta Quake
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.
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:
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.
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:
Here’s a screenshot of the Page Load Video for the home page of cnn.com, showing what the user sees at First Paint.
GTmetrix Page Load Video showing First Paint
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”.
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!
Lighthouse Performance Report
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.
Kathy Alice Brown is a SEO expert specializing in Technical SEO and Content. In her spare time she loves to get outside.