7 个技巧让你的网站性能飞速提升

感谢阅读

用户是否在抱怨您的网站速度太慢？本文分享了7 个提升网站性能的技巧。让我们开始吧！

动图

1. 仅获取相关资源

您是否知道您只能获取与当前设备相关的CSS文件？

该link标签具有一个media属性，可用于指定样式表所针对的媒体查询。

<link
  rel="stylesheet"
  href="mobile.css"
  media="screen and (max-width: 600px)"
/>

mobile.css仅当设备宽度小于时才会获取文件600px。

您可以在w3schools找到此内容的现场演示。

2. 精简代码

压缩是指在不影响浏览器处理资源的情况下删除不必要或冗余数据的过程。压缩可以包括删除代码注释、空格和未使用的代码，以及缩短变量和函数名称。

无论你使用什么构建工具（Webpack、Vite、Snowpack等），它都会有一个压缩选项。例如，在webpack中，你可以使用TerserPlugin来压缩你的代码。

3. 预取资源

您可以使用标签预加载图像、CSS、JS，甚至整个页面link。

<link rel="preload" as="image" href="image.png" />

您甚至可以使用快速链接或猜测来最佳地预取资源。

Quicklink是一个使用Intersection Observer API在视口中预取链接并使其加载速度更快的库，而Guess是一个使用机器学习来预测用户接下来最有可能访问哪个页面的库。

4. 使用响应式图像或艺术指导

这可能是您能获得的最大性能提升。

您可以使用该srcset属性为不同的屏幕尺寸指定多个图像源。这允许浏览器为当前设备选择最合适的图像。

<img
  srcset="image-480w.jpg 480w, image-800w.jpg 800w"
  sizes="(max-width: 600px) 480px, 800px"
  src="image-800w.jpg"
  alt="some random image"
/>

艺术指导是一种允许你为不同设备提供不同图像的技术。当你想为移动设备和桌面设备提供不同的图像时，这很有用。

<picture>
  <source
    media="(min-width: 900px)"
    srcset="desktop.jpg"
  />
  <source
    media="(min-width: 480px)"
    srcset="tablet.jpg"
  />
  <img src="mobile.jpg" alt="some random image" />
</picture>

5. 相关资源的延迟加载

延迟加载是一种允许您推迟加载非关键资源直到需要它们为止的技术。

它只需要您将loading="lazy"属性添加到相关元素就可以了。

<img
  src="placeholder.png"
  alt="some random image"
  loading="lazy"
/>

理想情况下，您应该延迟加载图像、视频、iframe和其他在初始页面加载时不可见的资源。

6. 对代码进行摇树

Tree Shaking是JavaScript中常用的一个术语，用于描述如何删除死代码。它依赖于import和export语句来检测代码模块是否被导出和导入，以便在JavaScript文件之间使用。

就像缩小一样，摇树和修剪未使用的代码也是构建工具的功能。

这是关于tree-shaking的webpack文档

7. 使用 Page Speed Insights 检测潜在问题

Google 的 Page Speed Insights是一款出色的工具，可以检测您网站的潜在问题。

它不仅会给您一个分数，还会为您提供需要修复的问题的详细报告。

就这些啦，朋友们！🎉

图片来源

1. Web.dev

感谢阅读

需要一位顶级软件开发自由职业者来解决你的开发难题吗？在Upwork上联系我

想看看我正在做什么吗？查看我的个人网站和GitHub

想联系我吗？请在LinkedIn上联系我

关注我的博客，每两周在Medium上获取最新资讯

常问问题

这些是我经常收到的一些问题。希望这个常见问题解答部分能解决您的问题。

1. 我是初学者，该如何学习前端 Web 开发？
   可以参考以下文章：

   1. 前端流行语
   2. 前端开发路线图
   3. 前端项目构想
   4. 从初学者过渡到中级前端开发人员

2. 你能指导我吗？
   
   抱歉，我工作已经很忙了，没时间指导任何人。