我们曾探讨过加载时间对搜索引擎优化的重要性，最近一次是在“SEO：Google将移动速度作为排名因素”，由同事Jill Kocher撰写。当然，页面速度至关重要，尤其是对于移动搜索用户而言。但除了SEO之外，页面速度对转化率和整体参与度也很重要。
Think with Google的一篇文章《为什么营销人员应关注移动端页面速度》得出结论：复杂的页面——即包含大量页面元素和图像的页面——转化率较低；同时，加载缓慢的页面跳出率也更高。
因此，提升在线商店的页面速度（尤其是移动端）有充分的理由。然而，我发现提升速度往往需要大量的昂贵开发工作——通常需遵循标准的最佳实践，耗时数月。
在本文中，我将分享一些简单技巧，只需几小时即可消除数秒的页面加载时间。
页面请求瀑布图
这里有一个有趣的练习。让我们回顾一下最慢的电子商务网站之一Gap.com的页面加载时间。Gap桌面版首页即使在130 Mbps的高速连接下也需要15-20秒才能加载，而移动版首页的速度比桌面版慢两倍。
Gap桌面版首页即使在130 Mbps的高速连接下，也需要15-20秒才能加载完成。
—
Gap.com的移动首页比桌面版慢两倍。
当浏览器访问一个网站时，它收到的相当于一个拼图。首先接收带有页面“组装说明”的HTML源代码。然后，每个图像、字体、样式表和跟踪像素都需要额外的请求。如果它们不能并行加载，每一个都可能增加页面加载时间。
图片请求顺序加载导致Gap移动页面加载非常缓慢。
Chrome开发者工具中的瀑布图是识别哪些资源拖慢页面加载速度的好方法。图片和脚本是常见的原因。
通常，页面速度优化建议侧重于减小图片尺寸，这在上面的图中会影响浅蓝色条带的大小。但同时发起的图片请求对页面加载性能的影响更大。
然而，对于Gap移动网站来说，导致最大延迟的是第三方脚本。这些脚本使页面加载时间增加了超过12秒！
对于Gap.com，第三方脚本是导致最大延迟的主要原因。
模拟网速
让我们使用Google Chrome来模拟更快的网站，同时帮助我们的朋友Gap优先进行页面速度开发工作。
第1步。 在Chrome中标记第三方资源。在Chrome开发者工具的Network（网络）标签页中，按下快捷键组合：Command + Shift + P，并搜索“Show third party badges”（显示第三方徽章）。
在Chrome开发者工具的Network（网络）标签页中，按下快捷键组合：Command + Shift + P，并搜索“Show third party badges”（显示第三方徽章）。
——
Chrome会在来自第三方网站的每个资源旁边添加彩色徽章。将鼠标悬停以了解供应商信息。
Chrome会在来自第三方网站的每个资源旁边添加彩色徽章。将鼠标悬停以了解供应商信息。
—
步骤2。 逐步屏蔽所有第三方徽章，从加载最慢的开始。
右键单击第三方资源，选择“阻止请求URL”以将其移除。
在屏蔽每个资源时，按刷新键查看页面加载时间改善了多少。
我屏蔽了Gap.com的所有第三方脚本。这消除了惊人的25秒页面加载时间，降至4.35秒。
通过屏蔽第三方脚本，Gap.com可以节省大约25秒痛苦的页面加载时间，降至4.35秒。
—
让我们看看是否能把Gap.com的加载时间推进到3秒以内。首先，让我们屏蔽两个需要3.5秒才能加载的脚本。
在Gap.com上，有两个脚本将页面加载时间推高至3.5秒。
—
还有一个小图片加载耗时超过一秒。我们也把它屏蔽掉吧。
Gap.com上的一个小图片加载耗时超过一秒。
—
在移动端阻止该小图片加载使加载时间缩短了1秒。
在移动端阻止小图片加载使加载时间提高了近10倍。
如果Gap.com将网站全面迁移至HTTPS并使用HTTP/2协议，它可以实现进一步的提速。
我并不是建议Gap移除所有第三方脚本和某些图片。这项练习仅旨在突出导致网站缓慢的主要脚本和图片，从而为开发工作确定优先级。
延迟加载脚本
既然我们已经列出了拖慢网站速度的脚本和图片列表，我们就可以尝试以最小化影响的方式加载它们。
当浏览器遇到需要执行的脚本时，它会停止解析页面内容。这会阻碍页面更快地加载。
一个示例脚本。
—
为了加快页面速度，(a) 使脚本获取与文档解析并行执行，并在 (b) 页面完全加载后延迟脚本的执行。使用JavaScript标签属性async和defer来控制缓慢脚本的时机和执行。
如果我们使用async标记一段JavaScript，浏览器会在解析文档的同时并行获取该资源。脚本一旦可用便会立即执行，从而减缓页面加载速度。
使用async标签。
—
如果我们为一段JavaScript代码添加defer标签，浏览器会在解析文档的同时并行获取该资源，并等待文档完全加载后再执行它。
使用defer标签的示例JavaScript。
—
这两种选项都可以减少页面加载时间。选择取决于脚本的需求和放置位置。这个简单的表格会有所帮助。此外，请参阅BitsofCode上的一篇有用文章。
| 标准 | 情况 | 最佳选项 |
|---|---|---|
| 脚本元素位于何处？ | HTML HEAD | async, defer |
| HTML BODY 结束 | ||
| 脚本是否自包含？ | 是 | async |
| 否 | ||
| 脚本是否依赖完全解析的DOM？ | 是 | defer |
| 否 | ||
| 脚本是否为（小型）依赖项？ | 是 | 内联JavaScript |
| 否 |
Chrome开发者工具可以轻松地识别出慢速脚本被调用的位置及其依赖关系。我们可以利用这一点来查找脚本被调用之处及调用方式。
首先，暂时禁用请求阻止功能，以便再次查看慢速脚本。点击面板底部的勾选图标以关闭请求阻止。
点击面板底部的勾选图标以关闭请求阻止。
其次，追踪脚本和代码行。为此，按住键盘上的SHIFT键并将鼠标悬停在要追踪其调用者的元素上。调用者将以绿色高亮显示。如果将鼠标悬停在调用者上，其被调用者将以红色高亮显示。点击“Initiator”列下的脚本页面名称，即可获取确切的源代码行。
按住键盘上的SHIFT键并将鼠标悬停在要追踪其调用者的元素上。调用者将以绿色高亮显示。如果将鼠标悬停在调用者上，其被调用者将以红色高亮显示。点击“Initiator”列下的脚本页面名称，即可获取确切的源代码行。
第三，更新源代码行以添加async或defer（视情况而定）。
该脚本是通过“document.write”指令调用的，而Web性能专家不推荐使用这种做法，因为它会导致额外的不必要延迟。
因此，Gap.com应要求其供应商重写或修改脚本以修复这些问题。
接下来，在更改大多数慢速脚本的加载行为后，我们可以专注于慢速图片。
图片懒加载
与脚本类似，我们可以将图片的加载延迟到其进入用户视野时。虽然不存在可用于标记图片的标准标签，但您可以使用功能强大的开源脚本来实现这一目的。
典型的懒加载图片如下所示：
<img alt=”…” data-src=”image1.jpg” width=”220″ height=”280″>
我们使用非标准的data-src来替代标准的图片属性src，浏览器会忽略前者。页面上的JavaScript代码可以检测用户何时需要某张图片，并动态加载它。
传统上，搜索引擎爬虫会忽略懒加载的图片，导致这些图片无法被索引。但现在这已不再是问题，因为Googlebot和Bing现在能够执行JavaScript。你仍需检查脚本用于显示图片的技术。如果它依赖于页面滚动事件，则对SEO不友好，因为搜索引擎爬虫在执行JavaScript时不会生成滚动事件。