优化网站速度的 8 个技巧

您是否考虑过您的网站的性能、内容加载速度有多快以及页面的响应时间是多少？

无论何时为现实世​​界的用户构建任何产品，所有这些事情都应该是您的首要任务。

即使网站延迟一到两秒，也会严重影响用户体验和网站流量。
想想亚马逊或优步这样的大公司，网站延迟一秒就可能让他们失去成千上万的客户，我知道这个数字相当可观。现在，试着将同样的道理应用到你的网站或应用上。

只需注意一些事情并遵循一些最佳实践，您就可以使您的网站运行得更快，并且您将看到产品性能的巨大改善。

那么，现在让我们看看您可以关注哪些小细节来提高网站的性能。

1. 优化媒体文件的大小和格式

我们都在页面上放置图像和媒体文件以使其更具吸引力，但是您放置在网站上的图像和 gif 文件必须由浏览器下载才能显示给用户，因此如果您在网站上放置大尺寸图像，它肯定会使您的网站变慢。

因此，建议使用一些外部图片工具来调整图片大小，并在不降低文件质量的情况下缩小图片尺寸。为了优化页面加载时间，最好坚持使用一些标准的图片文件格式，例如 jpg、png。

此外，不要尝试使用图像来显示一些文本内容；最好使用文本，因为图像会增加不必要的加载时间，甚至对 SEO 没有帮助。

这些工具可以帮助您实现这一目标：

• https://compressor.io/
• https://github.com/google/brotli
• https://tinypng.com/
• https://www.gimp.org/

2. 避免使用内联 JS 和 CSS 文件

将网站的 JS 和 CSS 代码写在外部文件中是一个很好的做法。外部文件不仅更易于维护，而且还会被浏览器缓存，从而节省后续加载的时间。

如果您在单独的 CSS 和 JS 文件中定义所有内容，浏览器将更容易将样式和功能应用到您的页面。

3. 编写更简洁的 HTML

大多数时候，我们会在页面上添加不必要的 HTML，并在其中填充各种类型的标题、粗体和斜体标签，而其实我们可以使用 CSS 快速实现相同的效果。因此，与其在 HTML 文件中添加大量代码，不如尽量保持简洁，并使用 CSS 替代方案，这将使您的页面更简洁，加载更流畅。但这需要一些旧版浏览器可能不支持某些 CSS 属性，因此在编写 CSS 时务必考虑所有浏览器。

4.异步加载或在页面末尾加载JavaScript文件

将脚本标签放在 body 标签结束之前始终是一个好习惯，这样你的 JavaScript 文件就会在网页内容加载完成后加载。或者，如果你想将它们放在 body 标签上方，请确保在脚本标签内添加 defer 属性，以确保文件在所有内容加载完成后加载。这允许浏览器在开始执行 JS 之前渲染所有内容。

另外，您可以使用异步 JavaScript，使其与内容并行加载，而不会干扰网站的流畅性。Ajax 可以帮助您实现这一点，这样当用户操作时，我们无需重新加载整个页面，而是可以更新页面的部分内容。您还可以在脚本标签上添加 async 属性，以异步方式加载文件。

5.利用浏览器缓存功能

网站上的许多文件通常不会随时间而变化。Web
缓存是指将文件缓存在 Web 浏览器以供日后使用，这样当用户再次访问您的网站时，浏览器无需从头加载所有内容。浏览器可以缓存的内容包括 CSS 文件、JavaScript 文件和图像。

因此，请确保您创建的网站能够最大限度地利用缓存功能、本地存储、cookie 和服务器缓存。

这大大减少了服务器响应时间，用户可以一次又一次地访问您的网站，并且每次用户体验都会变得更好。

如果您想了解有关如何利用浏览器缓存的更多信息，请查看这些文章。

• https://betterexplained.com/articles
• https://www.codebyamir.com/blog
• https://varvy.com/pagespeed

6. 最小化并合并文件

您放置在页面上的所有文件都必须由浏览器下载才能渲染，因此，通过减少文件数量，您可以自动加快渲染速度。请考虑页面上的 HTML、CSS 和 JavaScript 文件的数量。它们都会增加网站每次用户访问页面时发出的请求数量。

您可以通过“最小化”和合并文件来减少此数量。最小化文件会减小每个文件的大小，而合并文件则会减少文件数量。

压缩文件包括删除不必要的格式、空格和代码。有很多在线工具可以帮助您实现此目的。每一段不必要的代码都会增加页面的大小，因此使用压缩文件来加载页面至关重要。这可以确保您的页面尽可能简洁。

如果您的网站使用多个 CSS 和 JavaScript 文件，您可以将它们合并为一个并获得相同的结果。

如果您想优化文件，请查看这些出色的工具：

• 我强烈建议使用Gulp来最小化和优化您的文件，所以请检查一下。
• YUI压缩机
• UglifyJS
• cssnano

7. 为你的产品选择合适的托管选项和服务

当您为自己或演示目的开展项目时，选择免费托管服务比购买域名和托管服务更划算。但是，一旦您开始开发面向实际应用并吸引了大量流量的应用，最好转向优质的付费托管服务，而不是选择最便宜的方案。阅读不同平台的评论，选择最适合您需求的平台。

一些流行的托管服务包括：

• Bluehost
• HostGator云
• DreamHost
• GoDaddy 主机
• SiteGround

8. 使用 Lighthouse 等在线工具

网站完成后，您可以使用任何在线可用的页面速度分析工具。如果您使用的是 Chrome，那么Chrome 开发工具中有一个 Lighthouse 工具，它可以分析您的网页性能，并提供一些提升页面性能的技巧，不妨试试。

就是这样。以上是一些最佳实践，如果你开始使用你的网页，它们的效果会好得多。

每日在每个新标签页发布最棒的编程新闻。我们将为您筛选数百个优质来源，助您掌控未来。