一、考虑你为浏览者提供的资源：
仔细斟酌你为用户发送的资源，是建设高性能网站的有效方法，下面是一些建议。
1、如果你使用bootstrap之类的样式框架建设UI，扪心自问这是否是必须的。使用样式框架会显著地增加CSS的体积。这些CSS必须被下载，解析，然后应用到页面，在你的页面样式构建视图之前。FLEXBOX和GRID可以完美的创建各种布局，并且代码量可以控制的很好。因为CSS是阻塞页面加载的资源，体积冗余的CSS框架，会延迟有效的渲染。你应该尽量减少冗余的CSS。
2、JS库是很方便，但并不总是必须的。比如jQuery，拾取元素可以使用querySelector和querySelectorAll，事件绑定可以使用addEventListener。classList，setAttribute和getAttribute提供了操作元素类和属性的简洁方式。如果你离不开库，考虑使用精简版的，比如zepto之于jQuery，Preact之于React。
3、不是所有的网站都适合做成SPA单页应用，这会导致使用过多的javascript。Javascript是网络上最昂贵的资源消耗，因为它必须被下载，解析，编译然后执行。比如新闻和博客网站在使用优化过的前端架构后，能够具有良好的多页面体验，特别是当HTTP缓存被合理的使用，并且使用了service worker。
二、考虑你发送资源的方式：
1、迁移到HTTP/2。H2解决了许多H1的性能问题（实际上，h2的发轫点就是提高资源传输性能），比如突破并行请求限制以及头部压缩。
2、使用资源标签加快资源的传递。对特定资源使用rel=preload，可以在浏览器解析文档流发现他们之前，更早的加载关键渲染资源（比如字体，脚本），这样可以提早用户可交互的时间点。rel=preconnect可以降低新请求第三方域名资源的延时。
3、现代网站包含了许多的JS和CSS。受限于H1，之前通常把JS和CSS打包成巨大的块。在H2的时代，因为可以同时复用一个TCP连接，所以使用webpack的代码分割，来仅下载当前页面需要的脚本。分割你的样式为更小的模板，或者组件化的文件，然后按需加载这些资源。
三、考虑你发送资源的数量：
1、尽可能压缩资源的体积，比如对javascript使用uglifyJs，SVG可以压缩为SVGO。
2、配置你的服务器来压缩资源。GZIP是一种传统的方式，但是Brotli compression can go further做的更好。
3、尽可能的优化图片，因为图片占据了页面载荷很大的一部分，优化图片能够为优化页面带来极大的机会。使用webP，jpg2000能够降低图片的体积。
4、响应式的加载图片，使用适应当前屏幕大小的图片，是提升页面性能的巨大机会。比如img标签的srcset属性，以及更进一步的picture标签，能够选择最合适的格式。
5、同等质量下，video比GIF体积更小。如果你的网站使用了大量的GIF，那么替换为video会是提升性能最大的机会。
6、客户端信息能够向服务器表明，当前网络的状况，以及设备信息。DPR，Width，Viewport-Width头能够帮助向客户端传递何时的图片以及展示效果。Save-Data头能够帮助你向客户端发送更轻量的页面。
参考链接：https://developers.google.com/web/fundamentals/performance/why-performance-matters/
