网页性能优化

分析网站
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性能提示的最佳实践和原则：

1. 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页面

2. Use a Content Delivery Network

3. Avoid empty src or href

4. Add an Expires or a Cache-Control Header

5. Gzip Components

6. Put StyleSheets at the Top

7. Put Scripts at the Bottom

8. Avoid CSS Expressions

9. Make JavaScript and CSS External

10. Reduce DNS Lookups

11. Minify JavaScript and CSS

12. Avoid Redirects

13. Remove Duplicate Scripts

14. Configure ETags

15. Make AJAX Cacheable

16. Use GET for AJAX Requests

17. Reduce the Number of DOM Elements

18. No 404s

19. Reduce Cookie Size

20. Use Cookie-Free Domains for Components

21. Avoid Filters

22. Do Not Scale Images in HTML

23. Make favicon.ico Small and Cacheable

gtmetrix.com 使用技巧

可以导出分析报告记录优化过程中网页的状态

备注

1. 服务端是否由http1转向http2（http请求头的字段小写开头）