Google检测网站性能提升

检测网页工具

Google插件:Lighthouse
https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk

性能得分相关选项

webp图片格式

https://web.dev/uses-webp-images/?utm_source=lighthouse&utm_medium=lr

图片压缩

https://web.dev/uses-optimized-images/?utm_source=lighthouse&utm_medium=lr
https://web.dev/uses-responsive-images/?utm_source=lighthouse&utm_medium=lr
将图片压缩到85%;

消除阻止页面渲染的资源

https://web.dev/render-blocking-resources/?utm_source=lighthouse&utm_medium=lr
删除页面未使用的css及js,将必要的css及js内联到页面头部。

用google开发者工具中的Coverage tab可以看到未使用的css及js代码。(不完全准确)

进行内容预加载

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Preloading_content
<link> 元素的 rel 属性的属性值preload能够让你在你的HTML页面中 <head>元素内部书写一些声明式的资源获取请求,可以指明哪些资源是在页面加载完成后即刻需要的。对于这种即刻需要的资源,你可能希望在页面加载的生命周期的早期阶段就开始获取,在浏览器的主渲染机制介入前就进行预加载。这一机制使得资源可以更早的得到加载并可用,且更不易阻塞页面的初步渲染,进而提升性能。本文提供了一个如何有效使用preload机制的基本说明。


总计 0 评论

发表评论

作为 登录 | 登出 »

联系电话

18321263196

交换链接

互相学习

服务咨询

我的微信