分析网站
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页面
Use a Content Delivery Network
Avoid empty src or href
Add an Expires or a Cache-Control Header
Gzip Components
Put StyleSheets at the Top
Put Scripts at the Bottom
Avoid CSS Expressions
Make JavaScript and CSS External
Reduce DNS Lookups
Minify JavaScript and CSS
Avoid Redirects
Remove Duplicate Scripts
Configure ETags
Make AJAX Cacheable
Use GET for AJAX Requests
Reduce the Number of DOM Elements
No 404s
Reduce Cookie Size
Use Cookie-Free Domains for Components
Avoid Filters
Do Not Scale Images in HTML
Make favicon.ico Small and Cacheable
gtmetrix.com 使用技巧
可以导出分析报告记录优化过程中网页的状态
备注
- 服务端是否由http1转向http2（http请求头的字段小写开头）