19th Ave New York, NY 95822, USA

How to quickly remove seconds from the loading time of a site

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.

The Gap home page takes 15 -20 seconds to load, even on a fast 130 Mbps connection.

<img class="wp-image-149152 size-full" src="https://businessdigit.com/wp-content/uploads/2018/03/1520955876_486_how-to-quickly-remove-seconds-from-the-loading-time-of-a-site.png" alt=" The homepage of Gap.com is twice as slow as the desktop version. "Width =" 2388 "height =" 1406 "/>

The homepage of Gap.com 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.

<img class="wp-image-149153 size-full" src="https://businessdigit.com/wp-content/uploads/2018/03/1520955876_382_how-to-quickly-remove-seconds-from-the-loading-time-of-a-site.png" alt=" Requests for images that load sequentially cause a very slow loading of the Gap mobile page. "Width =" 2396 "height =" 1400 "/>

Requests for images that load sequentially slowly.

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!

<img class="wp-image-149154 size-full" src="https://businessdigit.com/wp-content/uploads/2018/03/1520955876_912_how-to-quickly-remove-seconds-from-the-loading-time-of-a-site.png" alt=" For Gap.com, third-party scripts contribute to the biggest slowdown. "Width =" 2388 "height =" 1406 "/>

For Gap.com, third-party scripts contribute to the greatest slowdown.

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."

<img class="wp-image-149155 size-full" src="https://businessdigit.com/wp-content/uploads/2018/03/1520955876_807_how-to-quickly-remove-seconds-from-the-loading-time-of-a-site.png" alt=" In the Network tab of Chrome Developer Tools, press the combination of keywords: Command + Shift + P and search for "Show Third Party Badges" "width =" 1926 "height =" 1048 "/>

On the Network tab of Chrome Developer Tools, press 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.

<img class="wp-image-149156 size-full" src="https://businessdigit.com/wp-content/uploads/2018/03/1520955876_831_how-to-quickly-remove-seconds-from-the-loading-time-of-a-site.png" alt=" Chrome will add color badges next to each resource from a third-party site. Move the mouse to learn the provider. "Width =" 1888 "height =" 1062 "/>

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.

<img class="wp-image-149157 size-full" src="https://businessdigit.com/wp-content/uploads/2018/03/1520955876_348_how-to-quickly-remove-seconds-from-the-loading-time-of-a-site.png" alt=" Right-click a third-party resource and select "Block the request URL" to delete. "Width =" 2398 "height =" 1104 "/>

Right-click a third-party resource, and select" Block the request URL "to delete.

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.

<img class="wp-image-149158 size-large" src="https://businessdigit.com/wp-content/uploads/2018/03/1520955876_450_how-to-quickly-remove-seconds-from-the-loading-time-of-a-site.png" alt=" Gap.com would save about 25 seconds of page load time, at 4.35 seconds, by blocking third-party scripts. "Width =" 570 "height =" 265 "/>

Gap.com would save about 25 seconds of page load time, at 4.35 seconds, by blocking third-party scripts.

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.

<img class="wp-image-149159 size-full" src="https://businessdigit.com/wp-content/uploads/2018/03/1520955876_723_how-to-quickly-remove-seconds-from-the-loading-time-of-a-site.png" alt=" On Gap.com, two scripts push the loading time of the page to 3.5 seconds. "Width =" 2398 "height =" 920 "/>

On Gap.com, two scripts that push the loading time page to 3.5 seconds.

There is also a small image that takes more than a second to load. Let's stop it too.

<img class="wp-image-149160 size-full" src="https://businessdigit.com/wp-content/uploads/2018/03/1520955877_146_how-to-quickly-remove-seconds-from-the-loading-time-of-a-site.png" alt=" A small image on Gap.com takes more than one second to load. "Width =" 2400 "height =" 1110 "/>

A small image on Gap.com takes more than one second to load.

Blocking a small image of mobile loading dramatically improves loading times by up to 10 times.

<img class="wp-image-149161 size-full" src="https://businessdigit.com/wp-content/uploads/2018/03/1520955877_332_how-to-quickly-remove-seconds-from-the-loading-time-of-a-site.png" alt=" Blocking a small image of mobile charging improves loading times by up to 10 times. "Width =" 2388 "height =" 912 "/>

Blocking a small image of mobile loading improves loading times almost 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 .

To speed up a page, (a) run the recovery script in parallel with the analysis, and (b) delay the execution of the script after full loading of the page. Use JavaScript tag attributes async and differ to control the timing and execution of slow scripts.

If we mark a piece of JavaScript with the help of async the browser searches for the resource in parallel when analyzing the document. The script is executed as soon as it is available, slowing down the page .

If we mark a piece of JavaScript with report the browser searches for the resource in parallel while it parses the document and waits for the document to be fully loaded to execute it ].

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.

Criteres Situation Best Option
Where is the Script Element? HTML HEAD async, defer
END OF THE BODY HTML
Is the script autonomous? YES async
NO
Does the script depend on a fully parsed DOM? YES Referring
NO
Is the script a (small) dependency? YES Inline JavaScript
NO

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.

<img class="wp-image-149166 size-full" src="https://businessdigit.com/wp-content/uploads/2018/03/1520955877_238_how-to-quickly-remove-seconds-from-the-loading-time-of-a-site.png" alt=" Click the check mark at the bottom of the panel to disable request blocking. "Width =" 2392 "height =" 1106 "/>

Click the check mark at the bottom of the panel to activate blocking request.

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.

<img class="wp-image-149167 size-full" src="https://businessdigit.com/wp-content/uploads/2018/03/1520955877_588_how-to-quickly-remove-seconds-from-the-loading-time-of-a-site.png" alt=" Hold SHIFT on your keyboard and mouse on 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 on the name of the script page under the Initiator column, and you will get the exact source code line. "Width =" 2396 "height =" 1106 "/>

Hold SHIFT on your keyboard and mouse on the item whose caller will be highlighted in green. If you hover over a caller, its recipient will be highlighted in red.Click on the name of the script page under the Initiator column, and you will 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:

”…”

Instead of the standard image attribute src we have the non-standard data-src which will be ignored by the browser. A piece of JavaScript on the page might detect when a user will need an image and load it dynamically.

Lazy loaded images were traditionally ignored by search engine robots, which prevented the indexing of images. But, this is no longer a problem because Googlebot and Bing are now running JavaScript. You must always check the technique used by the script to display the images. If it's based on scrolling pages event, it will not be search-engine friendly because search engine crawlers do not generate scrolling events when of JavaScript execution.

Leave a comment