关注【索引目录】服务号，更多精彩内容等你来探索！
当谈到构建成功的网站或网络应用程序时，性能就是最重要的。
加载缓慢的网站会让用户感到沮丧，增加跳出率，并损害SEO排名。另一方面，快速、轻量且经过优化的前端可以提高可用性、可访问性和转化率。
在这篇文章中，我们将介绍前端性能优化的基本最佳实践。
1. 避免使用 iframe
iframe 应该是你的最后手段。它们会给你的网站增加不必要的复杂性，降低页面渲染速度，并对可访问性和可用性产生负面影响。
最重要的是，搜索引擎无法正确索引 iframe 内容，这会损害 SEO。
- 何时使用？
仅在没有其他选择时（例如，嵌入第三方应用程序）。 - 最佳实践：
尽可能用 API 或模块化组件替换 iframe。
2. 压缩 CSS
未缩小的 CSS 中充满了空格、注释和换行符，导致文件大小膨胀。
通过最小化你的 CSS：
-
内容加载速度更快。 -
发送给客户端的数据较少。 -
带宽使用量和托管成本降低。
缩小工具：
- CSSNano
- CleanCSS
-
集成到 Webpack、Vite 或 Gulp 等构建工具中。
3. 使用非阻塞 CSS
CSS 文件可能会阻碍渲染。为了避免延迟，请执行以下操作：
-
使用标签 rel="preload"可以更快地加载关键样式。as="style"<link> -
例子：
<link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">4. 内联关键 CSS
关键 CSS（也称为首屏 CSS）包含呈现页面可见部分所需的样式。
-
将其放置 <style></style>在里面<head>。 -
帮助更快地呈现内容，而无需等待外部 CSS 文件。
工具：
- Addy Osmani 的批评
-
在线关键 CSS 提取器。
5. 避免使用内联 CSS<body>
内部的内联 CSS 会<body>增加 HTML 的大小并损害可维护性。
-
始终使用外部样式表。 -
将 CSS 保留在 中 <head>。 -
内容和样式的分离使您的代码库更干净、更快。
6. 降低样式表的复杂性
CSS 臃肿 = 渲染速度慢。常见问题包括：
-
多余的规则。 -
重复的选择器。 -
未使用的类。
解决方案：
-
使用Sass或Less等预处理器进行组织。 - 使用PurgeCSS
或Stylelint等工具审核 CSS 。
7.优化图像
图片通常是网站上最重要的资源。优化图片可以节省加载时间和带宽。
最佳实践：
-
使用现代格式：WebP或AVIF。 -
使用SVG作为图标和矢量图形。 -
压缩图像（目标质量≤85%）。 -
尽可能用 CSS 效果或系统字体替换图像。
工具：
- 微小JPG
- Compressor.io
- Cloudinary
- SVGOMG
8. 压缩 JavaScript
就像 CSS 一样，JavaScript 也应该被最小化以删除不必要的空格、注释和格式。
-
减小文件大小。 -
减少加载时间。 -
提高性能，尤其是在移动设备上。
工具：
-
UglifyJS -
特瑟 -
与 Webpack/Rollup 构建管道集成。
9. 使用非阻塞 JavaScript
JavaScript 可能会阻止 HTML 解析，从而延迟页面渲染。
为了防止这种情况发生，请执行以下操作：
-
使用 async或defer属性。
<script async src="analytics.js"></script>
<script defer src="main.js"></script>- 异步：
独立加载，不会阻塞解析。 - 延迟：
解析后加载，确保脚本按顺序运行。
10. 保持页面大小低于 1500 KB
现代网站越来越重，但随着页面重量的增加，性能就会受到影响。
-
理想目标：≤500 KB -
可接受的中值：≤ 1500 KB -
优化图像、CSS 和 JS 以保持在范围内。
11. 缩短页面加载时间
用户不会容忍网站速度缓慢。研究表明：
- 1秒延迟 = 转化次数减少7%
- 53% 的移动用户在网站加载超过 3 秒后就放弃访问
测试加载速度的工具：
- Google PageSpeed Insights
- 网页测试
12. 保持 TTFB < 1.3 秒
首次字节时间 (TTFB) 衡量服务器响应的速度。
-
优化后端处理。 -
使用缓存（CDN、服务器端）。 -
减少数据库查询。
13.启用压缩
压缩资产可显著提高传输速度。
-
对 JavaScript、CSS 和 HTML使用Gzip或Brotli 。 -
减小文件大小并加快传送速度。
最后的想法
前端性能不仅仅关乎速度，还关乎更好的用户体验、可访问性和 SEO 排名。请遵循以下做法：
-
您的网站将加载得更快。 -
您将节省带宽和成本。 -
用户将停留更长时间并参与更多。
下一步？立即开始使用 PageSpeed Insights 或 Lighthouse 审核您的网站，并逐一应用这些最佳实践。
LiveReview 可帮助您在几分钟内获得有关 PR/MR 的良好反馈。
通过快速、自动化的首次审核，节省每个 PR 上的时间。帮助初级和高级工程师提高效率。
关注【索引目录】服务号，更多精彩内容等你来探索！