每当我们专注于提高页面速度时，谷歌就会给我们发送更多的自然流量. 2018 年，我们公司网站 80% 的流量来自自然搜索。访问量达到 2450万次.不用说,我们如何才能继续改善用户体验并让 گوگل 满意：
我们认为这篇文章可以很好地强调我们为保持页面速度快如闪电、有机流量健康而采取的具体步骤。虽然这篇文章有一定的技术性（页面速度是一个重要而复杂的主题）,但我们希望它能为网站所有者和开发人员提供一个如何尝试提高页面速度的框架.
简要技术背景：我们的网站建
立在Drupal CMS 之上，并且在具有 LAMP 堆栈（以及 وارنش 和memcache）的服务器上运行。但是，如果您不使用MySQL، 本文中的步骤和原则仍然适用于其他数据库或反向代理.
准备好？让我们深入挖掘.
加速后端的 5 个步骤
在我们讨论可以帮助您加快后端速度的具体步骤之前，回顾一下”后端”的含义叽会有所帮助。 您可以将后端视为用于存储数据的所有内容，包数据库身和和和可以-基本上是任何有助于使网站正常运行但您无法进行视觉交互的内容有关后端与后端之间的差异的更多信息，前端，你读了这篇文章
步骤 1:确保已配置反向代理
这是重要的第一步。 对于华尔街绿洲（WSO）،我们使用名为 وارنش的反向代理。它是迄今为止最关键、最快的缓存层،并为大多数匿名流量（已注销的访问者）提供服务. وارنش 将整个页面缓存在内存中，因此可以以极快的速度将其返回给访问者.
https://en.wikipedia.org/wiki/Reverse_proxy
第 2 步：延长该缓存的 TTL
如果您拥有一个大型数据库（具体来说是 10,000+ 个 URL范围），并且这些内容不会频繁更改，那么为了提高 وارنش缓存层的命中率，您可以延长生存时间（TTL 基本上意味着将对象从缓存中清除.
对于 WSO،我们一直花长达两
周的时间（因为我们有超过 300,000次讨论）.在任何给定时间，只有几千个论坛 URL处于活动状态，因此大量缓存其他页面是有意义的。这样做的缺点是，当您对网站范围、模板或设计进行任何更改时，您必须等待两周才能使其覆牍能使其覆盉یو آر ایل۔
步骤 3:预热缓存
为了保持缓存“温暖”，我们有一个URL.当用机器人访问相同页面时，这会增加 whatsapp 主管 页面在缓存中的可能性（即我伬的命中率揉默可能性（即我伬的命中率时。 وارنش 充满更多对象，以便快速访问.
从下图可以在出，”缓存命中率”（绿色）与总命中率（蓝色+绿色）的比例超9%过.
步骤 4:调整数据库并关注最慢的询
在 WSO，我们使用 MySQL 数据库。确保启用慢速查询报告 电话号码查询 API 是我们每天遍历的庞大数 并至少每季度检查一次。使用 EXPLAIN 检查最慢的查询。在需要的地方添加索引并重写可以改进的查询。
在 WSO，我们使用 MySQL 数据库。要调整 MySQL，可以使用以下脚本：https://github.com/major/MySQLTuner-perl和
步骤 5：HTTP 标头
使用 HTTP2 服务器推送在请求资源之前将其发送到页面。只要确保检查应该先推送哪些即可。 JavaScript 对我们来说是一个不错的选择。您可以在此处阅读更多相关信息。
下面是从我们的投资银行面试问题的URL进行服务器推送的示例：
确保您使用的是正确的格式。如果这是一个脚本：<url>; rel=预载；作为脚本，
加速前端的 7 个步骤
以下步骤有助于加快您的前端应用程序的速度。前端是网站或应用程序中与用户直接交互的部分。例如，这包括字体、下拉菜单、按钮、过渡、滑块、表格等。
步骤 1：编辑您的 JavaScript 位置。
确定 JavaScript 的位置可能是最困难的更改之一，因为您需要不断测试以确保它不会破坏网站的功能。
我注意到，每当我删除 JavaScript 时，页面速度就会有所提高。我建议尽量删除 JavaScript。您可以将必要的 JavaScript 减少到您需要的程度。您还可以将 JavaScript 文件捆绑在一起，但使用多个捆绑包。
始终尝试将 JavaScript 移至页面底部或内联。您可以尽可能推迟或使 购买电子邮件列表 用异步属性来保证您不会被阻塞。您可以在此处阅读有关迁移 JavaScript 的更多信息.
第 2 步：改善你的照片
尽可能使用WebP 来存储图像（Cloudflare 是一个 CDN，可以自动为您执行此操作 – 我将在下面详细介绍 Cloudflare）。它是一种同时使用有损压缩 和无损压缩的图像格式 .
始终使用正确尺寸的图像。例如，如果您的网站上出现的图像尺寸为 2″ x 2″ 的正方形，请不要使用 10″ x 10″ 的大图像。如果您的图像大于需要的尺寸，则您需要通过网络传输更多的数据，并且浏览器必须为您调整图像大小。
使用延迟加载以避免延迟下载位于页面底部而不是屏幕可见部分的图像。
步骤 3：优化 CSS
您想确保您的 CSS 是内联的。此类在线工具可以帮助您找到内联的重要 CSS 并解决渲染阻塞问题。奖励：您将保留拥有单独文件所带来的现金利益。
确保最小化你的 CSS 文件（我们使用 AdVagg 因为我们使用的是 Drupal CMS，但根据你的网站，还有很多其他的选项）。
尝试使用较少的 CSS。例如，如果您有一些仅在主页上使用的 CSS 类，请不要将它们包含在其他页面上。
始终合并 CSS 文件但使用多个包。您可以在此处阅读有关此步骤的更多信息。
将媒体查询移动到特定文件，以便浏览器在呈现页面之前无需加载它们。例如：<link href=”frontpage-sm.css” rel=”stylesheet” media=”(min-width: 767px)”>
如果您想了解有关如何改进 CSS 的更多信息，请查看Patrick Sexton 的有趣帖子。
步骤 4：减轻你的网页字体（它们可能很重）
使用内联 svg 作为图标字体（例如 Font Awesome）。这样，您将减少关键链的路径并避免页面首次加载时出现空内容。
使用 Fontello 创建字体文件。这样，您只能包含实际使用的字形，从而产生更小的文件和更快的页面速度。
如果您要使用 Web 字体，请检查是否需要字体文件中定义的所有字形。例如，如果您不需要日语或阿拉伯字符，请查看是否有仅包含您需要的字符的版本。
使用 Unicode 范围选择您需要的字形。
尽可能使用 woff2，因为它已经被压缩了。
这篇文章是有关网络字体优化的极佳资源。
以下是我们使用优化字体时测量到的差异：