We’ve addressed the importance of load times for search engine optimization, most recently at “SEO: Google to Make Mobile Speed a Ranking Factor,” from fellow contributor Jill Kocher. Certainly page speed is critical, especially for mobile search visitors. But beyond SEO, page speed is important for conversion rates and overall engagement.
A Think with Google research article, “Why marketers should care about mobile page speed,” concluded that complex pages — pages with many page elements and images — have lower conversion rates and, also, that slow pages have higher bounce rates.
Thus there are good reasons to improve your online store’s page speed, especially for mobile. However, I’ve found that improving speed can require a lot of expensive developer work — usually following standard best practices over many months.
In this article, I will share simple tricks to eliminate seconds of page load time, in just a few hours.
Page Requests Waterfall
Here is a fun exercise. Let’s review the page load time from one of the slowest ecommerce sites, Gap.com. The Gap desktop home page takes 15-20 seconds to load, even on a fast 130 Mbps connection. The mobile home page is twice as slow as the desktop version.
When it encounters a site, a web browser receives the equivalent of a jigsaw puzzle. It first receives the HTML source with the page’s “assembly instructions.” Then, every image, font, style sheet, and tracking pixel requires additional requests. Each one potentially adds to the page load time, if they don’t load in parallel.
The waterfall visualization in Chrome developer tools is a good way to identify which resources are holding back the page load time. Images and scripts are the frequent causes.
Generally, page speed recommendations focus on reducing the size of the images, which in the image above affects the size of the light blue band. But simultaneous image requests have a greater impact on page load performance.
However, in the case of the Gap mobile site, it is the third-party scripts that are causing the biggest slowdown. Those scripts add more than 12 seconds to the page load!
Let’s use Google Chrome to simulate a faster site, while also helping our friends at The Gap prioritize page speed development efforts.
Step 1. Label third-party resources in Chrome. In the Chrome Developer Tools Network tab, press the keyword combination: Command + Shift + P, and search for “Show third party badges.”
Chrome will add colored badges next to each resource from a third-party site. Mouse over to learn the vendor.
Step 2. Gradually block all third-party badges, starting with the slowest ones.
As you block each resource, hit refresh to see how much the page load time improves.
I blocked all of Gap.com’s third-party scripts. That eliminated a whopping 25 seconds of page load time, to 4.35 seconds.
Let’s see if we can push Gap.com to the 3-second mark. First, let’s block two scripts that take 3.5 seconds to load.
There is also a small image that takes over a second to load. Let’s block it, too.
Blocking that small image from loading on mobile improved load times by 1 second.
Gap.com could achieve additional speed improvements if it moved the site to full HTTPS and used the HTTP/2 protocol.
I am not suggesting that Gap remove all third-party scripts and, also, certain images. This exercise merely highlights the main scripts and images responsible for the site’s slowness. It prioritizes development work.
Lazy Loading Scripts
Now that we have the list of scripts and images that are slowing down the site, we can try to load them in a way that would minimize the impact.
Web browsers stop parsing page content when they encounter scripts to execute. This prevents the page from loading faster.
Both options can reduce the page load time. The choice depends on the requirements and placement of the script. This simple table will help. See, also, a helpful article on BitsofCode.
|Where is the script element located?
|END OF HTML BODY
|Is the script self-contained?
|Does the script rely on a fully parsed DOM?
|Is the script a (small) dependency?
Chrome Developer Tools makes it easy to identify where slow scripts are getting called, and what dependencies they have. We can use this to find where and how the scripts are called.
First, temporarily disable blocked requests to see the slow scripts again. Click on the tick at the bottom of the panel to turn request blocking off.
Second, track the script and line of code. To do this, hold SHIFT on your keyboard and mouse over the element whose caller you want to track. The caller will be highlighted in green. If you mouse over a caller, its callee would be highlighted in red. Click on the script-page name under the Initiator column to get the exact source line of code.
Third, update source line to add async or defer as applicable.
The script is getting called from a “document.write” directive, which is discouraged by web performance experts as it results in additional unnecessary slowdowns.
Thus, Gap.com should require their vendors to rewrite or modify the scripts to fix the issues.
Next, after we change the loading behavior of most slow scripts, we can focus on the slow images.
Remembering Hamlet Batista
February 8, 2021
Lazy Loading Images
Similar to the scripts, we can delay loading images until they are in the user view. There are no standard tags you can use to label images, but there are powerful open source scripts you can use for this purpose.
A typical lazy loaded image looks like this:
<img alt=”…” data-src=”image1.jpg” width=”220″ height=”280″>