使用pagespeed检测网站性能，思考前端网站优化-Toy模板网

这篇具有很好参考价值的文章主要介绍了使用pagespeed检测网站性能，思考前端网站优化。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

概述

最近在使用google search console 的过程中，无意中发现了一个检验网站性能的工具 pagespeed

使用pagespeed检测网站性能，思考前端网站优化
这个工具可以分别检测网站在移动端和桌面端的性能，最关键的是它不光能检测出性能的不足，还会将严重影响性能的东西列出来，并提供解决方案。

测试

以我博客首页为例进行测试
https://blog.csdn.net/glorydx
使用pagespeed检测网站性能，思考前端网站优化
总体来看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”事件。
使用pagespeed检测网站性能，思考前端网站优化

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.');
  }
});