整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

使用pagespeed检测网站性能,思考前端网站优化

总体来看85分,性能还是蛮不错的,但还是给出了一些优化建议

一条条从前端的角度分析一下

缩短初始服务器响应时间

这个主要与域名解析与布局,服务器性能,首站资源请求数量相关。前端开发需要注意的是,尽可能将不需要的资源去掉,减少引用库的数量和大小,即按需引入,或者自己封装通用的js方法和组件等。

使用视频格式提供动画内容

大型 GIF 无法提供动画内容。通过将大型 GIF 转换为视频,您可以节省大量用户带宽。考虑将 MPEG4/WebM 视频用于动画,将 PNG/WebP 用于静态图像网站优化,尽量不使用 GIF网站优化,以节省网络字节。但这也可能会增加人力成本,比如视频的设计,网站是否需要更合理的布局等。

减少未使用的

可能某些js被引入却并未使用,我们需要将其取消,前端开发应避免引入未使用的方法,组件,文件等,可以通过进行规范。

移除阻塞未渲染的资源

小网站,关键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允许我们给 标签添加属性: “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的相关内容,请前往

确保文本在加载字体期间保持可见状态

避免在加载自定义字体时显示不可见文本的最简单方法是临时显示系统字体。通过包含font-: 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。

注册事件监听

尽量避免使用事件处理某些逻辑。”事件不会可靠地触发,而且监听该事件可能会妨碍系统实施“往返缓存”之类的浏览器优化策略。请改用“”或“”事件。

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