「b站qq群」如何从站点的加载时间快速减少几秒钟

我们已经解决了加载时间对于搜索引擎优化的重要性，最近一次是由合作者Jill Kocher撰写的“ SEO：Google将移动速度列为排名因素”。 当然，页面速度至关重要，尤其是对于移动搜索访问者而言。 但是，除了搜索引擎优化之外，页面速度对于转化率和整体参与度至关重要。

与Google一起思考的研究文章“为什么营销人员应该关心移动页面的速度”，得出的结论是，复杂的页面（包含许多页面元素和图像的页面）转换率较低，而且慢速页面的跳出率较高。

因此，有充分的理由来提高在线商店的页面速度，尤其是对于移动设备。 但是，我发现提高速度可能需要大量昂贵的开发人员工作-通常遵循几个月的标准最佳实践。

在本文中，我将分享一些简单的技巧，以在短短几个小时内消除几秒钟的页面加载时间。

页面请求瀑布

这是一个有趣的练习。 让我们回顾一下最慢的电子商务网站之一Gap.com的页面加载时间。 即使在130 Mbps的快速连接下，Gap桌面主页的加载也需要15到20秒。 移动主页的速度是桌面版本的两倍。

即使在130 Mbps的快速连接下，Gap桌面主页的加载也需要15到20秒。

—

Gap.com的移动主页的速度是桌面版本的两倍。

当它遇到一个站点时，Web浏览器会收到一个拼图游戏。 它首先接收带有页面的“汇编说明”的HTML源。 然后，每个图像，字体，样式表和跟踪像素都需要其他请求。 如果每个页面都不并行加载，则可能会增加页面加载时间。

顺序加载图像请求导致Gap移动页面加载非常缓慢。

Chrome开发人员工具中的瀑布可视化是确定哪些资源阻碍了页面加载时间的好方法。 图像和脚本是常见的原因。

通常，页面速度建议着重于减小图像的大小，这在上面的图像中会影响浅蓝色带的大小。 但是，同时进行图像请求会对页面加载性能产生更大的影响。

但是，对于Gap移动网站而言，导致最大速度下降的是第三方脚本。 这些脚本会增加12秒钟以上的页面加载时间！

对于Gap.com来说，第三方脚本是造成最大速度下降的原因。

模拟速度

让我们使用Google Chrome浏览器来模拟一个更快的网站，同时也帮助The Gap的朋友确定页面速度开发工作的优先级。

步骤1.在Chrome中标记第三方资源。 在“ Chrome开发者工具”的“网络”标签中，按以下关键字组合：Command + Shift + P，然后搜索“显示第三方徽章”。

在“ Chrome开发者工具”的“网络”标签中，按以下关键字组合：Command + Shift + P，然后搜索“显示第三方徽章”。

—

Chrome会在第三方网站的每个资源旁边添加彩色徽章。 将鼠标悬停以了解供应商。

Chrome会在第三方网站的每个资源旁边添加彩色徽章。 将鼠标悬停以了解供应商。

—

步骤2.从最慢的b站qq群徽章开始，逐步阻止所有第三方徽章。

右键单击第三方资源，然后选择“阻止请求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删除所有第三方脚本以及某些图像。 此练习仅突出显示导致网站运行缓慢的主要脚本和图像。 它优先考虑开发工作。

延迟加载脚本

现在我们有了正在减慢站点速度的脚本和图像列表，我们可以尝试以最小化影响的方式加载它们。

Web浏览器在遇到要执行的脚本时停止解析页面内容。 这样可以防止页面加载更快。

一个示例脚本。

—

为了加快页面速度，（a）与解析并行执行脚本提取，（b）在页面完全加载后延迟脚本执行。 使用JavaScript标记属性async和defer来控制慢速脚本的计时和执行。

如果我们使用async标记一段JavaScript，则浏览器在解析文档时会并行获取资源。 脚本一旦可用就会立即执行，从而降低页面速度。

使用异步标记的示例JavaScript。

—

如果我们用defer标记一段JavaScript，则浏览器将在解析文档时并行获取资源，并等待文档完全加载以执行该资源。

使用defer标签的示例JavaScript。

—

这两个选项都可以减少页面加载时间。 选择取决于脚本的要求和位置。 这个简单的表格会有所帮助。 另请参阅有关BitsofCode的有用文章。

Chrome开发人员工具可轻松识别缓慢的脚本在何处被调用以及它们具有哪些依赖性。 我们可以使用它来查找脚本的位置和调用方式。

首先，暂时禁用被阻止的请求以再次查看慢速脚本​​。 单击面板底部的对勾以关闭请求阻止。

单击面板底部的对勾以关闭请求阻止。

其次，跟踪脚本和代码行。 为此，请按住键盘上的SHIFT键，然后将鼠标悬停在要跟踪其呼叫者的元素上。 呼叫者将以绿色突出显示。 如果将鼠标悬停在呼叫者上，则其被呼叫者将以红色突出显示。 单击“启动器”列下的脚本页面名称，以获取确切的源代码行。

在键盘和鼠标上按住SHIFT键，然后在要跟踪其呼叫者的元素上。 呼叫者将以绿色突出显示。 如果将鼠标悬停在呼叫者上，则其被呼叫者将以红色突出显示。 单击“启动器”列下的脚本页面名称，您将获得确切的源代码行。

第三，更新源代码行以添加异步或延迟（如果适用）。

该脚本是从“ document.write”指令调用的，Web性能专家不建议使用该指令，因为它会导致其他不必要的速度降低。

因此，Gap.com应该要求其供应商重写或修改脚本以解决问题。

接下来，在更改大多数慢脚本的加载行为之后，我们可以专注于慢图像。

延迟加载图像

与脚本类似，我们可以延迟加载图像，直到它们进入用户视图为止。 没有可以用于标记图像的标准标签，但是可以使用功能强大的开源脚本来实现此目的。

典型的延迟加载图像如下所示：

<img alt =“…” data-src =“ image1.jpg” width =“ 220” height =“ 280”>

除了标准的图像属性src之外，我们还有非标准的data-src ，浏览器将忽略它。 页面上的一段JavaScript可以检测到用户何时需要图像，并将其动态加载。

传统上，懒惰加载的图像会被搜索引擎机器人所忽略，从而阻止了对图像进行索引。 但是，这不再是问题，因为Googlebot和Bing现在正在执行JavaScript。 您仍然需要检查脚本用于显示图像的技术。 如果它依赖于页面滚动事件，它将不会对SEO友好，因为搜索引擎机器人在执行JavaScript时不会生成滚动事件。