最近在使用google search console 的过程中，无意中发现了一个检验网站性能的工具 pagespeed
这个工具可以分别检测网站在移动端和桌面端的性能，最关键的是它不光能检测出性能的不足，还会将严重影响性能的东西列出来，并提供解决方案。
以我博客首页为例进行测试
https://blog.csdn.net/glorydx
总体来看85分，性能还是蛮不错的，但pagespeed还是给出了一些优化建议
一条条从前端的角度分析一下
缩短初始服务器响应时间
这个主要与域名解析与布局，服务器性能，首站资源请求数量相关。前端开发需要注意的是，尽可能将不需要的资源去掉，减少引用库的数量和大小，即按需引入，或者自己封装通用的js方法和组件等。
使用视频格式提供动画内容
大型 GIF 无法提供动画内容。通过将大型 GIF 转换为视频，您可以节省大量用户带宽。考虑将 MPEG4/WebM 视频用于动画，将 PNG/WebP 用于静态图像，尽量不使用 GIF，以节省网络字节。但这也可能会增加人力成本，比如视频的设计，网站是否需要更合理的布局等。
减少未使用的JavaScript
可能某些js被引入却并未使用，我们需要将其取消，前端开发应避免引入未使用的方法，组件，文件等，可以通过eslint进行规范。
移除阻塞未渲染的资源
小网站，关键css和js进行内联，会大大加快渲染速度
内联js
<html>
<head>
<script type="text/javascript">
/* page.js的内容 */
</script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
内联css
<html>
<head>
<style tpe="text/css">
.blue {
color: blue;
}
</style>
</head>
<body>
<div class="blue">
Hello, world!
</div>
</body>
</html>
HTML5允许我们给 script 标签添加属性： “async” 来告诉浏览器不必停下来等待该脚本执行，什么时候下载完什么时候执行该脚本就可以了。这样的话浏览器会边下载page.js边渲染后面的内容。
<html>
<head>
<script type="text/javascript" src="page.js" async></script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
对于那些首屏渲染不需要用到的CSS，我们可以依旧使用文件形式并在页面内容渲染完成后再加载。
<!doctype html>
<html>
<head>
</head>
<body>
<div>
Hello, world!
</div>
<link href="other.css" rel="stylesheet" />
</body>
</html>
采用新一代格式提供图片
如果网站图片较多，较大，WebP 和 AVIF 等图片格式的压缩效果通常优于 PNG 或 JPEG，因而下载速度更快，消耗的数据流量更少。
使用标签，是 H5 中的一个新标签，类似它也可以指定多个格式的资源，由浏览器选择自己支持的格式进行加载。
<picture class="picture">
<source type="image/webp" srcset="image.webp">
<img class="image" src="image.jpg">
</picture>
更多关于前端使用webp的相关内容，请前往 https://juejin.cn/post/7002031688570126366
确保文本在加载字体期间保持可见状态
避免在加载自定义字体时显示不可见文本的最简单方法是临时显示系统字体。通过包含font-display: swap在您的@font-face风格中，您可以在大多数现代浏览器中避免 FOIT
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
font-display: swap;
}
图片没有给定宽高
我们都知道，图片在浏览器中，如果没有给定宽高，那图片自己的分辨率就是其在浏览器中的宽高。但这会增大页面布局所需的计算和速度。请为图片元素设置明确的宽度值和高度值，以减少布局偏移并改善 CLS。
注册unload事件监听
尽量避免使用unload事件处理某些逻辑。unload”事件不会可靠地触发，而且监听该事件可能会妨碍系统实施“往返缓存”之类的浏览器优化策略。请改用“pagehide”或“visibilitychange”事件。
window.addEventListener('pagehide', (event) => {
if (event.persisted) {
console.log('This page *might* be entering the bfcache.');
} else {
console.log('This page will unload normally and be discarded.');
}
});
如想了解更多详情，请前往https://web.dev/bfcache/?utm_source=lighthouse&utm_medium=lr#never-use-the-unload-event
采用高效缓存静态资源
静态资源是不常更改的，不需要时常请求服务器获取，我们可以采用浏览器缓存的方式。如localStorage,sessionStorage,cookie,HTTP 缓存等方式。
避免dom过大
在日常开发中需要注意，尽量减少使用不必要dom，这是由开发者的经验和业务量共同导致的。另外需要注意dom嵌套的深度，尽量减少其深度，和使用less或scss等样式预编译器一样，太深的层级会影响解析和编译的速度。
这是检测网站性能的线上网址，非常方便。https://pagespeed.web.dev/
转载：https://blog.csdn.net/glorydx/article/details/125800047