2020 年提高网站速度的 10 种简单方法

页面速度曾经是网页设计的基本支柱之一。 最近，不幸的是，由于更高带宽的互联网（“为什么要这么麻烦？”）和现代前端框架的采用，它退居二线。 然而，网站速度对于用户体验和货币化仍然至关重要，它对您网站的影响可能比您意识到的要大得多。

在广告盈利和用户体验方面优化网站速度的效果不容小觑。 要了解您的网站在速度方面的表现如何，您可以使用 Chrome 审核工具或使用 GTmetrix 或 Google 的开发工具等工具。

在本文中，我们将介绍一些技术性的内容，带您完成十个基本操作，这些操作将在 2020 年加快您的网站速度，从而带来更好的用户体验和更好的货币化。

让你的服务器为你工作

正确设置服务器可以大大提高速度性能。 您需要确保拥有两个简单的设置：

1. 启用压缩——确保为所有文本文件（HTML、JS、CSS、ETC……）启用了 GZIP 压缩。
2. HTTP2 – 如果您的服务器可以支持 HTTP2，请确保启用它。这是无需更改站点上的任何内容即可提高性能的好方法。
   查看 Vodien 对 HTTP2 的精彩演示。

使用延迟加载

延迟加载是仅在内容即将进入视图时才加载内容的过程。 这将减少用户可能永远无法访问的大量额外内容的下载，并释放浏览器以显着提高性能。 好消息是，有很多现成的包可以帮助您快速延迟加载内容。 更好的是，从 Chrome 76（2019 年 7 月）开始，延迟加载与 HTML 原生集成。 只需在标签中添加loading=”lazy ”，就大功告成了。

让你的文件更小

缩小——这是从代码中删除空格和注释的过程。 它们对于使代码对人类可读至关重要，但计算机不需要它们。 缩小可以将文件大小减少 70% 以上。 您应该缩小所有 HTML、CSS 和 JS 文件。 只要确保保留原件，以备不时之需。 今天，每个主要的 IDE 都有插件可以为您缩小文件。 如果您使用的是像 React 这样的包，缩小会带有内置的 tree shaking。

拆分文件——确保你的文件只有他们需要的。拆分文件有助于使文件更小，并使您的项目更易于管理。

优化图像

正确调整图像大小——响应式网页设计已成为一种规范，导致图像根据屏幕以不同大小显示。 我们可以利用它来发挥我们的优势，并为我们的图像保留一些​​不同的尺寸。 如果图像无法显示所有这些像素，则无需下载大文件。 图片标签和srcset属性使它非常容易做到。

本指南将引导您完成一些响应式调整图像大小的最佳实践和简单实施。

下一代格式——现在大多数浏览器都支持的新图像格式可以大大减小文件大小（不仅仅是照片）。例如，Google 的开放 WebP 格式可以减少 64% 到 92% 的文件大小。 在下面的案例中，我们使用 2 种不同大小的 WebP 文件，并为不支持 webP 的浏览器添加备用 jpg 图像。

图像精灵——图像精灵是由许多小图像组成的图像。为所有按钮\徽标使用图像子画面将减少加载页面所需的服务器调用次数。 如果您使用的是 HTTP/1.1，这将缩短加载时间。

实施客户端缓存策略

通过要求浏览器保留已下载的文件，可以显着缩短页面加载时间。 这与内部和外部文件都相关。

内部文件——这些是您网站上可重复使用的文件，如样式表和徽标。对于不会更改的文件，例如徽标、通用 CSS 和具有唯一标识符的图片，习惯上将到期日期设置为 1 年。 如果您希望更频繁地更改文件，则可以设置适当的到期日期。

外部包——例如，如果您的站点使用引导包，您可以选择使用 CDN，而不是将包下载到您的网站上。如果您这样做，即使用户是第一次访问您的网站，他也可能不需要下载该软件包，因为它是一个流行的软件包并且可能已经从其他站点下载过。

利用服务器端缓存

这个想法与前端缓存相同，可以让你的服务器免于处理它已经创建或经常使用的东西。 如果您有一个内容网站，您不希望每次用户进入该网站时都访问您的数据库，因为性能低下且数据库成本高。 由于所有用户都将看到相同的文章，您可以将其缓存一次并继续提供缓存版本，直到对其进行更改。

许多不同的软件包可以帮助您解决这个问题，具体取决于您的服务器的设计方式。 当然，您可以设计自己的缓存以满足您的特定需求。

使用 CDN

内容交付网络联系您的服务器，缓存响应，然后在本地将其提供给您的用户。 乍一看，它们似乎非常昂贵。 但是，正确设置 CDN 应该可以降低服务成本，同时大大提高性能。

避免重定向

避免重定向！ 重定向是减慢一切的可靠方法。 有时它们是必要的，例如当重定向用户以使用您网站的安全版本（HTTP VS HTTPS）或当您移动网站上的内容但希望旧的 SEO 链接继续指向内容时。

如果您发现自己使用重定向，请确保避免链式重定向。 链式重定向是导致另一个重定向的重定向。 如果您必须重定向，请确保只重定向一次！

确定并移除渲染阻塞活动

渲染是指加载，在查看您的网页时，快速加载的最高优先级是首屏部分。 由于 HTML 是从上到下阅读的，因此将对首页视图不重要的内容推送到重要内容之外非常重要。

例如，如果您有一个用于分析的 JS 标记，您可以将它放在页脚中。 这样，您可以确保用户的浏览器首先处理用户可以看到的内容，而将其他内容推迟到以后处理。

明智地选择您的合作伙伴

在网络上，就像在生活中一样，最重要的是选择合适的合作伙伴。 您可以简化您的网站并拥有一个旨在快速运行的漂亮网站。 但是，如果广告合作伙伴导致网站加载缓慢，您就会创建一种侵入性的用户体验。 一年前，我们开始与电子竞技行业的一家出版商合作，我们在通过该网站获利方面遇到了困难。 在仔细检查网站后，我们发现一个广告单元速度太慢，导致网站上的所有其他广告合作伙伴都超时。 该网站删除该广告合作伙伴后，该网站的整体每页每千次展示收入翻了两番！

保持学习

在本文中，我们只介绍了一些快速提示。 因此，一定要更深入地提高性能。 此外，我们的生态系统也在不断发展。 如果你走到这一步，你可能知道总有新东西要学。

我建议您看看下面的两个链接。 我认为他们是一个很好的起点。

https://www.udacity.com/course/browser-rendering-optimization–ud860

https://medium.com/swlh/what-the-amp-augmenting-my-own-site-with-accelerated-mobile-pages-amp-52927bab7cb8