分析网站
elementvape.com
vapordna.com
优化网站
www.eightvape.com
工具选取
similarweb.com
http://yslow.org/
https://developers.google.com/speed/pagespeed/insights/ （或者在谷歌浏览器的开发者工具里，选择audits标签）
https://gtmetrix.com/
https://analyze.speedboostr.com/queue/fl75guw3ug，有专门分析shopify网站的工具
删除css文件中无用代码，推荐github上的purgecss
对示例代码稍微修改。将网站所有页面都保存在src目录下，只留html文件，将待清理ccs文件也放到src目录下
import fs from 'fs'
import PurgeCSSObj from 'purgecss'
const PurgeCSS = PurgeCSSObj.PurgeCSS
// const purgeCSSResult = await
new PurgeCSS().purge({
content: ['./src/**/*.html'],
css: ['./src/**/*.css']
}).then((resArray) => {
console.log(resArray);
for (var i = 0; i < resArray.length; i++) {
const res = resArray[i];
fs.writeFile('out/'+ i + '.css' , res.css, 'utf8', writeRes => { console.log('写入完成') });
}
})
总结
引自http://yslow.org/
web性能提示的最佳实践和原则：
-
Minimize HTTP Requests
通过以下方式减少网络请求合并文件
css sprite
Inline images
cdn(如果有图片转webp格式功能，顺便转webp，减少图片大小)
为静态资源设置永久缓存 Expires header
为动态资源设置适当的cache-control header
gzip压缩文本资源，图片、pdf不要压缩，因为已经是压缩的了
样式表放在html的head标签里，这样网页会渐进式渲染
js放在body最后
js css外链
减少dns查询次数：域名控制在2到4个（太少会可能会阻塞并发请求，太多dns查询太频繁）
压缩css js文件
避免重定向
ETags缓存
ajax缓存
自定义友好404页面
gtmetrix.com 使用技巧
可以导出分析报告记录优化过程中网页的状态
备注
- 服务端是否由http1转向http2（http请求头的字段小写开头）
