How to Quickly Drop Seconds from a Site’s Load Time

综合技术 2018-03-13

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.

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

The mobile home page for Gap.com 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.

Image requests loading sequentially are causing the Gap mobile page to load very slowly.

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!

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

Simulating Speed

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

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.

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.

Right-click on third-party resource, and select “Block request URL” to remove.

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.

Gap.com would save around 25 seconds of painful page load time, to 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.

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

There is also a small image that takes over a second to load. Let’s block it, too.

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

Blocking a small image from loading on mobile greatly improves load times, by almost 10 times.

Blocking a small image from loading on mobile improves load times by almost 10 times.

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 .

To speed up a page, (a) execute the script fetching in parallel to parsing, and (b) delay the script execution after the page fully loads. Use the JavaScript tag attributes async
and defer
to control the timing and execution of slow scripts.

If we tag a piece of JavaScript using async
, the browser fetches the resource in parallel as it parses the document. The script is executed as soon as it becomes available, slowing down the page .

If we tag a piece of JavaScript with defer
the browser fetches the resource in parallel as it parses the document, and waits for the document to be fully loaded to execute it .

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.

CriteriaSituationBest Option
Where is the script element located?HTML HEADasync, defer
END OF HTML BODY
Is the script self-contained?YESasync
NO
Does the script rely on a fully parsed DOM?YESdefer
NO
Is the script a (small) dependency?YESInline JavaScript
NO

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.

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.

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, and you will 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 remove some third-party vendors to rewrite their scripts.

Next, after we change the loading behavior of most slow scripts, we can focus on the slow images.

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:

”…”

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 could detect when a user is going to need an image and will load it dynamically.

Lazy loaded images were traditionally ignored by search engine bots, which prevented the images from getting indexed. But, that is no longer a problem, as Googlebot and Bing are now executing JavaScript. You still need to check what technique the script uses to display the images. If it relies on the page-scrolling event, it won’t be SEO friendly because search engine bots don’t generate scroll events when executing JavaScript.

您可能感兴趣的

Example Driven Development “Hey $COLLEAGUE, is there any function that takes this list and returns a list like this?” Some functions are hard to Google. It’s often easier to ...
css3 vs js 实现钟表动画 通过HTML, CSS, SVG 背景图 和 JavaScript实现一个钟表动画,效果如下: See the Pen mac clock by Elaine ( @ElaineXu ) on CodePen . 一、搭建静态表盘 HTML结构 ...
Await Your Loops Cover image by Dakota Ray on Flickr If you read stuff about JavaScript lately, you probably already know that it gets new featu...
Java爬虫入门篇(二)Java 8 Nashorn 动态执行js脚本... 一些网站的 response 信息是加密数据,页面显示的时候通过调用js函数进行解密,我们爬到这些加密数据是毫无用处的,如果我们用 java 去模拟解密脚本难度系数极大,后来发现可以可利用 Java 8 中的 **Nashorn ** 引擎解决。...
Filter by the properties of the nested array ̵... I have some problems filtering a nested array with Knockout out. I want to be able to filter the array by 'tag-names' as well as 'name'. i.e. t...
0
Web Marketing Today

责编内容来自:Web Marketing Today (本文源链)
阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。