精简 HTML 代码

  • 减少 HTML 的嵌套
  • 减少 DOM 节点数
  • 较少无语义代码（比如：
    消除浮动）
  • 删除 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 页面中。这样做，首屏能快速显示出来，相对减少用户对页面加载等待过程。