这次，谷歌清楚地提出要求，网站务必要达成流畅且稳定的状态，网页性能已然变成对用户体验以及业务结果有着直接影响的关键技术指标 。
优化关键资源加载顺序
多数网站加载迟缓的根源，是在于关键资源未尽先处理。百分之七十的网站问题，和图片加载策略不妥当相关。传统方法像懒加载或是CSS背景图，有时候竟会使浏览器探寻资源的时间延后。
与之相比更具成效的办法是把关键图片径直嵌入HTML代码之中，并且运用fetchpriority="high"这个属性予以明确的标识，当前，Angular框架以及部分WordPress插件已然开始对这般属性加以支持，开发者可以主动去启动这类内置的优化功能。
重视CDN对核心内容的加速
当前，仅仅只有大概三分之一的网站，运用CDN去施行HTML文档的分发操作，然而这却忽视了对于核心内容的传输方面的优化举措，把HTML凭借CDN予以分发，能够明显地降低首字节到达所需要的时间，。
选取地理位置毗邻主要用户群体的CDN节点，这相当关键，与此同时，搭配适宜的缓存策略，能够保证用户初次开启网页的速度获得实质性的提高。
彻底解决布局偏移问题
网站中，约25%存在明显视觉布局跳动现象，此情形对用户阅读以及交互造成干扰，其核心缘由常常是媒体元素缺少尺寸定义，致使内容加载之后挤压周边布局 。
对所有的图片以及视频元素，明确地去设置宽度还有高度属性，哪怕是动态的内容，同样应该预留min-height空间。借助浏览器的BF缓存特性，也能够防止返回的时候页面重排，不过要留意避免过期的脚本或者HTTP头设置把缓存给破坏掉句号。
采用高性能动画实现方式
制作动画若使用top、left等属性，会触发整个页面布局的重新计算，这极易引发卡顿，还会导致连带偏移。现代浏览器对于处理不干扰布局流的动画更为擅长，。
把用于动画的属性换成transform: translate() , 这样的改变一般是由GPU单独去处理的 ， 开发者能够在Chrome的性能面板里进行检测 ， 并且把那些效率不高的旧式动画代码给替换掉 。
提升交互响应速度
用户点击之后，页面出现无响应态势，一般来讲，这是由JavaScript执行长任务致使主线程被阻塞所造成的。把复杂的计算任务划分成多个小块，并且在这些小块当中插入短暂性延迟，如此一来，便能够释放浏览器去开展其他关键渲染工作 。
借助Chrome开发者工具里的Coverage功能去剖析并且去除未被使用的JavaScript代码、与此同时，削减掉那些不必要的DOM操作，并且运用CSS的contain属性来隔离频繁进行更新的区域。
控制渲染更新频率
就算动画呈现出流畅的状态，偏高的渲染更新频率也会耗费诸多资源。比如说，于requestAnimationFrame回调里开展繁重程度较高的计算，依旧会有致使帧率下降的可能性存在。
将每一帧的工作量进行合理规划，防止于单次更新里处理过多的逻辑，对于那并非即时反馈的操作，能够酌情把它更新的优先级适度予以降低，从而保证用户所触发的核心交互能够获得即时响应 。
在针对网站性能加以优化之际，你有没有发觉，有某个改动，看起来是比较微小的，然而却给带来了提升，提升之大是出人意料的？欢迎于评论区把你的经历予以分享。
