HTML优化

精简HTML代码

• 减少HTML的嵌套，减少其层级关系
• 减少DOM节点数，尽可能优化压缩DOM节点数
• 减少无语义代码，比如<div class="clear"></div>消除浮动
• 删除http或https，如果URL协议头和当前页面协议头一致的，或者此URL在多个协议头都是可用的，则可以考虑删除协议头
• 删除多余的空格、换行符、缩进和不必要的注释，可以用压缩工具来处理
• 省略冗余的标签和属性
• 使用相对路径的URL

文件放在合适位置

• CSS样式文件链接尽量放在页面头部：CSS加载不会阻塞DOM tree解析，但是会阻塞DOM tree渲染，也会阻塞后面JS执行。任何body元素之前，可以确保在文档部分中解析了所有CSS样式(内联和外联)，从而减少了浏览器必须重排文档的次数。如果放置页面底部，就要等待最后一个CSS文件下载完成，此时会白屏，影响用户体验。
• JS引用放在HTML底部：防止JS的加载、解析、执行对阻塞页面后续元素的正常渲染。

增强用户体验

• 设置favicon.ico：网站如果不设置favicon.ico，控制台会报错，另外页面加载过程中也没有图标loading过程，同时也不利于记忆网站品牌，建议统一添加。
• 增加首屏必要的CSS和JS：页面如果需要等待所依赖的JS和CSS加载完成才显示，则在渲染过程中页面会一直显示空白，影响用户体验，建议增加首屏必要的CSS和JS，比如页面框架背景图片或者loading图标，内联在HTML页面中。这样做，首屏能快速显示出来，相对减少用户对页面加载等待过程。