闪电页面速度的12个步骤

在 华尔街绿洲，我们注意到每当我们专注于提高网页速度时，Google都会向我们发送更多有机流量。在2018年，我们公司的网站覆盖了有机搜索的80％以上的流量。这是2450万次访问。毋庸置疑，我们非常关注如何继续改善用户体验并让Google满意。

我们认为这篇文章是一个很好的方式来突出我们采取的具体步骤，以保持我们的页面速度闪电快速和有机流量健康。虽然本文有些技术性（页面速度是一个重要且复杂的主题），但我们希望它为网站所有者和开发人员提供了如何尝试和提高页面速度的框架。

快速技术背景：我们的网站建立在Drupal CMS 之上，我们运行在具有LAMP堆栈的服务器上（加上Varnish和memcache）。但是，如果您不使用MySQL，则本文中的步骤和原则仍与其他数据库或反向代理相关。

准备？让我们深入研究。

加速后端的5个步骤

在我们进入可以帮助您加快后端的特定步骤之前，查看“后​​端”的含义可能会有所帮助。您可以考虑存储数据的所有内容的后端，包括数据库本身和服务器 – 基本上任何有助于使您无法在视觉上与之交互的网站功能的东西。有关后端与前端之间差异的更多信息，请阅读本文

第1步：确保已配置反向代理

这是重要的第一步。对于华尔街绿洲（WSO），我们使用名为Varnish的反向代理。它是迄今为止最关键，最快速的缓存层，可为大多数匿名流量（访问者注销）提供服务。Varnish将整个页面缓存在内存中，因此将其返回给访问者的速度非常快。

https://en.wikipedia.org/wiki/Reverse_proxy

第2步：扩展该缓存的TTL

如果你有一个庞大的内容数据库（特别是在10000以上的URL范围内）不会经常变化，为了在Varnish缓存层上提高命中率，你可以延长生存时间（TTL基本上意味着如何在将对象从缓存中刷新之前很久）。

对于新加坡办事处，我们一直走到两周（因为我们讨论了超过300,000次）。在任何给定时间，这些论坛URL中只有几千个是活动的，因此大量缓存其他页面是有意义的。这样做的缺点是，当您进行任何网站范围，模板或设计更改时，您必须等待两周才能到达所有网址。

第3步：预热缓存

为了保持我们的缓存“温暖”，我们有一个特定的流程可以访问我们站点地图中的所有网址。这会增加用户或谷歌机器人访问相同页面时页面进入缓存的可能性（即我们的点击率）它还使Varnish充满了更多的物体，随时可以快速访问。

从下面的图表中可以看出，“缓存命中率”（绿色）与总命中率（蓝色+绿色）的比率超过93％。

第4步：调整数据库并关注最慢的查询

在WSO上，我们使用 MySQL 数据库。确保启用慢速查询报告并至少每季度检查一次。使用EXPLAIN检查最慢的查询。在需要的地方添加索引并重写可以优化的查询。

在WSO上，我们使用MySQL数据库。要调优MySQL，您可以使用以下脚本：https：//github.com/major/MySQLTuner-perl和https://github.com/mattiabasone/tuning-primer

第5步：HTTP标头

使用HTTP2服务器push在请求之前将资源发送到页面。首先，确保测试应该推送哪些。JavaScript对我们来说是个不错的选择。你可以在这里阅读更多相关信息。

以下是我们的投资银行面试问题 URL中的服务器推送示例：

; 相对=预载荷; 如=脚本，; 相对=预载荷; 如=脚本，; 相对=预载荷; 如=脚本，

确保您使用的格式正确。如果是脚本：; 相对=预载荷; 如=脚本，

如果是CSS文件：; 相对=预载荷; 如=的风格，

加快前端的7个步骤

以下步骤有助于加快您的前端应用程序。前端是用户直接与之交互的网站或应用程序的一部分。例如，这包括字体，下拉菜单，按钮，过渡，滑块，表单等。

第1步：修改JavaScript的位置

修改JavaScript的位置可能是最困难的变化之一，因为您需要不断进行测试以确保它不会破坏您网站的功能。

我注意到每次删除JavaScript时，都会看到页面速度有所提升。我建议尽可能多地删除Javascript。您可以缩小所需的JavaScript。您还可以组合JavaScript文件，但使用多个包。

始终尝试将JavaScript移动到页面底部或内联。您也可以在可能的情况下推迟或使用async属性，以保证您不会呈现阻止。你可以阅读更多有关移动的JavaScript 这里。

第2步：优化您的图像

尽可能使用WebP获取图像（Cloudflare，CDN，自动为您执行此操作 – 我将在下面详细介绍Cloudflare）。这是一种使用有损压缩 和无损压缩的图像格式 。

始终使用正确尺寸的图像。例如，如果您的网站上有一个2“x 2”方形的图像，请不要使用大的10“x 10”图像。如果您的图像大于所需的图像，则通过网络传输更多数据，浏览器必须为您调整图像大小

使用延迟加载来避免/延迟下载页面下方而不是屏幕可见部分的图像。

第3步：优化您的CSS

你想确保你的CSS是内联的。像这样的在线 工具 可以帮助您找到要内联的关键CSS，并解决渲染阻塞问题。额外奖励：您将保留具有单独文件的缓存优势。

确保缩小CSS文件（我们使用AdVagg，因为我们使用的是Drupal CMS，但根据您的网站，有很多选项）。

尝试使用较少的CSS。例如，如果您有某些仅在您的主页上使用的CSS类，请不要将它们包含在其他页面上。

始终组合CSS文件但使用多个包。您可以在此处详细了解此步骤。

将媒体查询移动到特定文件，以便浏览器在呈现页面之前不必加载它们。例如：

如果您想了解有关如何优化CSS的更多信息，请查看Patrick Sexton的有趣帖子。

第4步：减轻您的网络字体（它们可能很重）

如果您不小心，这是您的开发人员可能与您的设计师争论的地方。每个人都想看一个设计精美的网站，但如果你不小心如何实现这个设计，它可能会导致意想不到的速度问题。以下是有关如何使字体节食的一些提示：

使用内联svg图标字体（如字体真棒）。这样，您将减少关键链路径，并在首次加载页面时避免出现空内容。

使用fontello生成字体文件。这样，您只能包含实际使用的字形，这会导致较小的文件和更快的页面速度。

如果要使用Web字体，请检查是否需要字体文件中定义的所有字形。例如，如果您不需要日语或阿拉伯语字符，请查看是否存在仅包含所需字符的版本。

使用Unicode范围选择所需的字形。

尽可能使用woff2，因为它已经被压缩了。

本文是Web字体优化的绝佳资源。

以下是我们使用优化字体时测量的差异：

将我们的字体文件从131kb减少到41kb并删除一个外部资源（useproof）后，我们测试页面上的满载时间从5.1秒一直下降到2.8秒。这是44％的改进，肯定会让谷歌微笑（见下文）。

这是44％的改进。

第5步：移动外部资源

如果可能，将外部资源移动到您的服务器，以便您可以控制过期标头（这将指示浏览器将资源缓存更长时间）。例如，我们将Facebook Pixel移动到我们的服务器并将其缓存了14天。这意味着您将负责不时检查更新，但它可以提高您的网页速度得分。

例如，在我们的Private Equity Interview Questions页面上，可以看到如何从我们的服务器加载fbevents.js文件，并且缓存控制http标头设置为14天（1209600秒）

cache-control：public，max-age = 1209600

第6步：使用内容分发网络（CDN）

什么是CDN？点击此处了解更多信息。

我建议使用Cloudflare，因为它使得许多任务比在您自己的服务器上尝试执行它们更容易，更快。以下是我们对Cloudflare配置的具体做法：

速度

自动缩小，检查所有

在波兰语下

启用Brotoli

启用Mirage

选择有损

检查WebP

网络

启用HTTP / 2 – 您可以在此处阅读有关此主题的更多信息

目前没有浏览器通过未加密的连接支持HTTP / 2。出于实际目的，这意味着您的网站必须通过HTTPS提供才能利用HTTP / 2。Cloudflare有一种免费且简单的方式来启用HTTPS。在这里查看。

加密

在SSL下

选择灵活

根据TLS 1.3

选择启用+ 0RTT – 此处有关此主题的更多信息。

第7步：使用服务人员

服务工作者为网站所有者和开发人员提供了一些有趣的选项（如推送通知），但就性能而言，我们对这些工作人员如何帮助我们构建更智能的缓存系统感到非常兴奋。

要了解如何在您的网站上启动和运行服务工作者，请访问此页面。

随着服务工作者缓存资源（图像，CSS，javascript，字体等），返回的访问者通常会比没有工作者时更快地提供服务。

测试，工具和外卖

对于您尝试提高速度的每项更改，您可以使用以下工具来监控更改的影响，并确保您处于正确的路径：

https://www.webpagetest.org

https://developers.google.com/speed/pagespeed/insights

Google Page Speed Insights于2018年11月更新（详情请点击此处）。它为您提供了大量有关如何提高基于Light House的移动和桌面页面性能的建议。

我们知道有很多要消化的内容和上面链接的大量资源，但是如果你的时间紧迫，你可以从后端和前端部分的第1步开始。仅这两个步骤就可以自己产生重大影响。

本文来自投稿，不代表穷思笔记立场，如若转载，请注明出处：http://www.chons.cn/11623.html