用Lighthouse把网站源代码做到“极致”是什么样的体验

把网站基础优化到“极致”是为未来稳定排名建立稳固的基础。不同人的优化方法不尽相同，在相同条件下，网站加载速度越快（首屏加载2s内），用户体验越好。网站并不是“看着简单”加载速度就快，按F12查看源代码，“屎山”一样的网站比比皆是。

有“条条道路通罗马”，也有“罗马不是一天建成的”。当然，也有不少有高权重网站没有优化代码，只集中精力做内容，也能获得排名，但毕竟少数。

本人的SEO博客在谷歌浏览器工具Lighthouse里面的整体情况，除了“最佳实践Best Practices”分数较低，其余“性能Performance”、“无障碍Accessbility”、“SEO”都是满分。

下面围绕Lighthourse四个参数展开说明：

Lighthourse四个参数说明

名称	含义	重要程度
Performance（性能）	页面加载速度和交互流畅度	最重要
Accessibility（可访问性）	残障人士能否正常使用你的网页	重要
Best Practices（最佳实践）	网页开发规范、安全性	重要
SEO（搜索引擎优化）	搜索引擎能否正确收录你的页面	一般

1.页面加载加载速度主要衡量标准在首屏，而影响首屏加载速度的主要是图片、JS、CSS，网页加载是从上自下的，建议把重要的JS、首页CSS文件和图片（不做懒加载处理）优先加载，能够大幅度提高首屏的加载速度。

最新版 Lighthouse 中，‌LCP(最大内容绘制) 和 CLS (累积布局偏移)占比最高，合计约 50%，

‌

2.可访问性主要是针对色弱人士，排查文字、图片中颜色或者对比度的问题。可以访问这个链接进行调整，另外还有设置文字大小、文字比例：

标题1(h1)用font-size:20px或者x-larger
标题2(h2)用font-size:18px或者larger
标题3(h3)用font-size:16px或者medium
正文(p)用font-size:14px或者small

算是比较基础的问题，如果文字设置的比例不合适，看起来太大胀眼或者太小也是不利于用户的阅读的。

3.规范性指的是页面的代码使用的问题，比如说一些成套的<dl><dt><dd>、<ol><li>、<ul><li>都是成组出现的，利用这个工具都能够快速的排查出当前页面存在的问题，比你逐个去检查代码要快速准确得多。

4. SEO的问题会比较多，篇幅有限就不展开说明了。

几点建议

1.看这些问题的需要全面，比如一些客服JS需要第一时间加载，方便在线客服第一时间跟用户对话。这类第三方的代码加载速度是无法控制的，尽量首屏加载时间控制在2秒以内。比如百度本身的JS是比较影响速度，目前没有更好的办法。

https://hm.baidu.com/hm.js

2.移动端访问可以不加载的部分JS，可按照下方代码，只有大于768像素的才加载canva的JS，也能提升移动端的访问速度。这里吖七还是建议电脑端移动端分开写模板，虽然工作量大了点，但也是为了后续排名更稳定做准备。

<script>
if(window.innerWidth > 768){
document.write('<script color="255,0,0" opacity="0.7" zIndex="-2" count="100" src="https://www.vi586.com/skin/js/canvas-nest.min.js"><\/script>');
}
</script>

3.使用同一个OSS储存多媒体文件，做好预解析跨域。首次访问提升明显，不直接提升当前页面加载，但能加速后续跳转、（OSS）资源请求，也相当于提升加载速度。

<meta http-equiv="x-dns-prefetch-control" content="on" />
<link rel="dns-prefetch" href="https://hm.baidu.com" />
<link rel="dns-prefetch" href="https://oss.aliyuncs.com" />
<video src="https://oss.aliyuncs.com/1.mp4"></video>

扩展阅读