虽然在网页的体积中占比最大的是图片资源,但是调用和实现图片的HTML和CSS同样对页面加载时间有很大的影响。
1 .添加link预加载标签来实现预先加载
2 .html结构尽量的少,最好不超过6层
3 .如果有多个开发者或者设计师编辑过这个网站,那么清理冗余或者过期的html时必须毫不留情。
4 .避免过度的嵌套:尽可能的使用H5元素来创建语义化的结构,结合H5和css3,可以获得更加稳定,轻量化的HTML结构
5 .语义化
6 .可访问性:搜索引擎机器人,视障人士设计的读屏器
7 .内容扫描,优化:实时扫描网页元素,大图片以及各类文件大小,数量趋势,分批,分频道精细优化。--还是很有其他的想法的。放到一个服务器上
8 .使用<link rel='preload'>我们可以手动强制设置资源的优先级,来确保所希望的资源优先加载,按时渲染。
9 .优化网络字体:体积还不是最重要的问题,关键是当网络字体在加载中或者加载失败的时候,就会导致页面空白,造成页面无法访问。字体选择测评,字体格式选择,建立字体加载策略。
10 .移除不必要的依赖:利用webpack-bundle-anglyzer可以很方便的识别重复代码,最大性能瓶颈以及过时和不必要的包依赖。
11 .写代码的时候尽量减少http的请求次数
12 .减少dns的查询次数,缓存dns
13 .不要跳转链接,301和302响应都是不会被缓存的,而且产生一次额外的请求
14 .不要出现404错误,http请求都是