- 减少HTML嵌套
- 减少DOM节点数
- 减少无语义代码
- 删除http或者https,如果URL的协议头恶化当前页面的协议头一致的,或者此URL在多个协议头是可用的,则可用考虑删除协议头
- 删除多余的空格、换行符、缩进和不必要的注释
- 省略冗余标签和属性
- 使用相对路径的URL
文件放在合适的位置
css样式文件链接尽量放在页面头部
原因:
css的加载不会阻塞DOM Tree的解析,但会阻塞DOM Tree渲染,也会阻塞后面JS的执行。
将css放在任何body元素之前,可以确保在文档部分中解析了所有css的样式包括内联样式和外联的。从而减少了浏览器必须重排文档的次数。如果将css放在底部,就要等待最后一个css下载完成。此时会有长时间白屏,影响用户体验。js引用放在页面底部。
原因:防止js的加载、解析和执行,阻塞到页面后续元素的正常渲染。
增强用户体验
- 设置favicon.ico图标
原因:网站如果不设置favicon.ico图标的话,控制台会报错。另外页面加载过程中也没有图标loading过程,不利于记忆网站品牌,建议统一添加。 - 增加首屏必要的css和js
原因:
页面如果需要等待所依赖的js和css加载完成才显示,则在渲染过程中页面会一直显示空白,影响用户体验,建议增加首屏必要的css和js,比如页面框架背景图片或者loading图标,内联在HTML页面中。这样做,首屏能快速显示出来,相对减少用户对页面加载的等待过程。