We discussed the importance of load times for search engine optimization, most recently at "SEO: Google to make mobile speed a ranking factor," from fellow 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 research article "Why marketers should be concerned about mobile page speed" concluded that complex pages with many page elements and images have lower conversion rates and slow pages have lower page rates. higher rebound.
So there are good reasons to improve the page speed of your online store, especially for the mobile. However, I've found that speed improvement may require a lot of expensive developer work – usually following standard best practices over several months.
In this article, I'm going to share some simple tips to eliminate the loading seconds of the page, in just a few hours.
Page waterfall requests
Here's a fun exercise. Let's review the loading time of the page from one of the slowest e-commerce sites, Gap.com. The Gap desktop home page takes 15 to 20 seconds to load even on a fast connection at 130 Mbps. The mobile home page is twice as slow as the desktop version.
When he encounters a site, a web browser receives the equivalent of a puzzle. It first receives the HTML source with the "assembly instructions" of the page. Then each image, font, style sheet, and tracking pixel requires additional requests. Each one can potentially add to the loading time of the page, so they are not loaded in parallel.
Cascading visualization in Chrome development tools is a good way to identify resources that block the loading time of the page. Images and scripts are common causes.
Generally, page speed recommendations focus on reducing the size of images, which in the image above affects the size of the light blue band. But simultaneous image requests have a greater impact on page loading performance.
However, in the case of the mobile site Gap, third-party scripts cause the biggest slowdown. These scripts add more than 12 seconds to the loading of the page!
Simulation of speed
Let's use Google Chrome to simulate a faster site, while helping our friends at The Gap prioritize speed-up efforts.
Step 1. Label third-party resources in Chrome. On the Network tab of Chrome Developer Tools, tap the combination of keywords: Command + Shift + P and search for "Show Third Party Badges."
Chrome will add color badges next to each resource from a third-party site. Move the mouse to learn the seller.
Step 2. Slowly block all third party badges, starting with the slowest badges.
When you block each resource, click Refresh to see how much time the page loads.
I've blocked all third-party scripts from Gap.com. This eliminated a whopping 25 seconds of page load time at 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 more than a second to load. Let's stop it too.
Blocking a small image of mobile loading dramatically improves loading times by up to 10 times.
Gap.com could get additional speed improvements when it moved the site to full HTTPS and used the HTTP / 2 protocol.
I'm not suggesting that Gap deletes all third-party scripts and, also, some images. This exercise only highlights the main scripts and images responsible for the slowness of the site. It gives priority to development work.
Lazy Loading Scripts
Now that we have the list of scripts and images that slow down the site, we can try to load them in a way that minimizes the impact.
Web browsers stop analyzing the content of the page when they encounter scripts to execute. This prevents the page from loading faster .
Both options can reduce the loading time of the page. The choice depends on the requirements and the location of the script. This simple chart will help. See also a useful article on BitsofCode.
|Where is the Script Element?||HTML HEAD||async, defer|
|END OF THE BODY HTML|
|Is the script autonomous?||YES||async|
|Does the script depend on a fully parsed DOM?||YES||Referring|
Chrome development tools make it easy to identify the call of slow scripts and dependencies that they have. We can use it to find where and how scripts are called.
First, temporarily disable blocked requests to review slow scripts. Click the check mark at the bottom of the panel to disable request blocking.
Second, follow the script and the line of code. To do this, hold SHIFT on your keyboard and hover over the item you want to track the caller. The caller will be highlighted in green. If you hover over a caller, his name will be highlighted in red. Click the name of the script page under the Initiator column to get the exact source code line.
Third, update the source line to add async or differ as appropriate.
The script is called from a "document.write" directive, which is discouraged by web performance experts because it results in unnecessary extra slowdowns.
Thus, Gap.com should remove some third-party vendors to rewrite their scripts.
Then, after changing the loading behavior of most slow scripts, we can focus on slow frames.
Lazy Loading Images
Similar to scripts, we can delay loading images until they are in the user's view. There is no standard tag that you can use to label images, but there are powerful open source scripts that you can use for this purpose.
A typical, lazily laden image looks like this: