网站地域分站怎么做,百度商业平台,长沙申请域名网站备案,网络加速器之前提到首屏优化#xff0c;想到的就是Vue项目首页打开很慢需要优化。一般都是肉眼看看#xff0c;对当前的加载速度并没有一个准确的衡量标准#xff0c;也没有很清晰的解决思路。
前两天我想给自己的网站申请谷歌广告#xff0c;听说审核对网站的性能要求很高。于是网上…之前提到首屏优化想到的就是Vue项目首页打开很慢需要优化。一般都是肉眼看看对当前的加载速度并没有一个准确的衡量标准也没有很清晰的解决思路。
前两天我想给自己的网站申请谷歌广告听说审核对网站的性能要求很高。于是网上搜索后发现了一个网站优化利器--Lighthouse
一Lighthouse是什么
Lighthouse 是一个由 Google 开发的开源自动化工具用于改进网页质量。它提供全面的网页性能、可访问性、最佳实践和 SEO 分析帮助开发者构建更好的网站体验。
Lighthouse这个工具前端开发者又熟悉又陌生说她熟悉因为她就在Chrome的F12面板中跟Network在一块。说她陌生是因为可能大多程序员没注意到她也不知道她是干什么用的。
Lighthouse使用起来很简单F12里找到她输入需要检测的网站即可。我第一次使用时的得分如下 二Lighthouse的相关指标
1、主要指标
如上截图中主要4个指标相关概念如下
性能 (Performance)页面加载速度和用户体验包含FCP, LCP, TTI, TBT, CLS可访问性 (Accessibility)残障用户友好度屏幕阅读器支持色彩对比度ARIA 属性最佳实践 (Best Practices)现代Web开发标准HTTPS, 安全的API使用图片优化SEO (Search Engine Optimization)搜索引擎优化元标签结构化数据移动友好性
2、性能(Performance)下的指标
FCP (First Contentful Paint) 首个内容绘制时间 测量页面首个元素呈现的时间让用户知道网站开始载入了。 LCP (Largest Contentful Paint) 最大内容绘制时间 测量页面主要内容加载完成的时间让用户知道网站载入完毕可以交互了。
CLS (Cumulative Layout Shift) 累积布局偏移 测量页面内容意外移动的程度比如一个按钮在点击时因其他元素加载突然下移了。
3、指标作用
通过这些指标得分我们可以量化的知道自己网站的性能效果。有一个参考值便于针对性的优化。
三优化建议
Lighthouse的每个指标都有对应的优化建议如下图。如图右上角可以切换各个指标 四成功实践
我根据Lighthouse的建议针对性的做了相关的措施。最终成绩如下我网站效果为CodingLife忙活了4天结果还算满意~ 先说下我服务器的配置2核2G 3M带宽。为了节省费用配置堪称寒酸
1、分割打包 按需加载
首先要在路由配置中使用按需加载与分包设置
// router.js文件中
routes: [{path: /,name: BlogDetail,component: () import(/* webpackChunkName: blogDetail, webpackPrefetch: false */ /components/MainPage/BlogDetail);}
]
其次一定要配合webpack配置否则很可能无法按需加载。即首页渲染时加载其他页面的js包
// vue.config.js文件
module.exports {chainWebpack: config {// 禁用所有 prefetchconfig.plugins.delete(prefetch);}
};
2、压缩资源包体积
将JS资源文件打包为.gz格式可以高效减少资源包体积。shezhi前端webpack打包时就做GZip压缩
// vue.config.js文件
module.exports {configureWebpack:config{// GZip压缩const CompressionPlugin require(compression-webpack-plugin);config.plugins.push(new CompressionPlugin({algorithm:gzip,test:/\.(js|css|woff|woff2|svg)$/, // 要压缩的文件threshold:10240, // 压缩超过10k的数据deleteOriginalAssets:false, // 不删除压缩前的文件如果浏览器不支持Gzip则会加载源文件minRatio:0.8 // 压缩比大于0.8的文件将不会被压缩}));}
};Nginx服务器配合设置
server {gunzip on; # 如果客户端不支持 gzip自动解压返回原始文件gzip off; # 关闭动态压缩因为已经有预压缩文件
}
3、减小图片体积
图片使用webp格式可以大幅减小图片体积。使用webp主要工作在ngnix上具体操作如下
安装cwebp处理图片
# 下载最新版源码当前最新版本1.3.0
wget https://storage.googleapis.com/downloads.webmproject.org/releases/webp/libwebp-1.3.0.tar.gz# 解压并进入目录
tar -xvzf libwebp-1.3.0.tar.gz
cd libwebp-1.3.0# 配置编译选项确保启用PNG和JPEG支持
./configure --enable-libpng --enable-libjpeg# 编译并安装
make
sudo make install# 刷新库缓存
sudo ldconfig# 验证安装
cwebp -version
配置nginx有限返回webp格式图片
http {# 简化的WebP检测map $http_accept $webp_suffix {default ;~*webp .webp; # 添加.webp后缀}# HTTPS 服务器 - 主配置server {listen 443 ssl http2;server_name codinglife.online www.codinglife.online;location /uploads/ {alias /opt/CodingLife/uploads/;autoindex off;# 核心缓存策略根据文件类型区分location ~* \.(jpe?g|png|gif|webp|svg|avif)$ { try_files $uri$webp_suffix $uri 404;add_header Vary Accept; # 关键标记内容协商}}}
}
4、减少图片请求数量
我的博客首页是个列表列表的每条都包含一个缩略图刚开始设置每页8条数据。8个图片对于3M的带宽来说压力太大。
于是我将分页请求中每页条数精细化根据设备分辨率动态设置。比如移动端每页3条笔记本电脑每页4条外接显示器8条。 calculatePageSize() {if (this.windowWidth 1366) {this.perPageNum 3 // 移动端和小屏设备} else if (this.windowWidth 1366 this.windowWidth 1600) {this.perPageNum 4 // 14寸笔记本} else if (this.windowWidth 1600 this.windowWidth 1920) {this.perPageNum 5 // 15.6寸笔记本} else {this.perPageNum 8 // 大屏幕}}
5、减少无用Dom
因为Lighthouse还模拟移动设备测试首屏性能并且模拟条件极为苛刻。具体如下 Desktop默认使用 150ms TCP延迟的有线网络 (类似稳定WiFi/光纤)。 Mobile默认使用 300ms TCP延迟 1.6Mbps下载/0.75Mbps上传的慢速4G网络。
我的网站使用媒体查询自适应移动端和pc端。因为移动端屏幕大小有限我选择隐藏了很多不必要的模块。但原有的css设置隐藏是奢侈的依旧消耗性能我本次将无用的dom需要彻底删掉。
section v-ifisDeskTop/sectiondata: function () {return {isDeskTop: window.innerWidth 768 // 是否是桌面端}
},
6、剔除无用请求
以前适配移动端时大大咧咧只想着实现效果就行。很多无用模块都是css配置display:nonejs接口正常请求现在看来是真的浪费。本次我又精细化的过了一遍移动端时删除不必要的接口请求。
// 移动端时删除不必要的接口请求
if(this.isDeskTop){ //渲染留言个数this.GetLeaveMessageNum();this.GetCommentNum();
}
7、提高传输效率
chrome最多同时发6个请求如果需要同时发起7个请求第7个就要等待前6个结束。可SPA同时发起7个请求可太常见了。
于是我将HTTP/1升级到HTTP/2做到单 TCP 连接上并行传输多个请求/响应。原理如下告别了network里同时并行一堆请求的历史 原理 network效果
nginx的配置超级简单只需要一行
server {listen 443 ssl http2;
}
五最终效果
哥们的网站CodingLife最终效果不管移动端还是PC端都是秒开。摸索了4天最终看到Lighthouse打分99时我跟个傻子一样哈哈大小那是真的开心
打开F12的network可以看到如下差别不提速是不可能的啦
请求的JS文件条数明显少了按需加载只加载首屏jsJS资源文件最大的也就700kGzip压缩图片大都100k以内webp格式图片请求的图片条数明显减少动态设置列表条数发起的接口请求明显减少删除移动端无用请求请求缩略图只有一条启用http/2
