HTML5中如何优化页面加载速度与用户体验？

优化HTML5页面加载速度和用户体验可以从以下几个方面入手：

1. 减少HTTP请求：合并文件，如CSS和JavaScript，使用图片地图。
2. 压缩资源：压缩HTML、CSS、JavaScript和图片。
3. 优化CSS：将CSS放于头部，避免使用@import。
4. 预加载关键资源：使用<link rel="preload">提前加载关键资源。
5. 异步加载非关键JavaScript：使用async或defer属性。
6. 使用浏览器缓存：设置合适的缓存头。
7. 服务端渲染（SSR）或预渲染：提前生成HTML。
8. 使用Web字体时进行优化：使用font-display: swap减少字体加载时间。
9. 优化动画：使用requestAnimationFrame或CSS动画。
10. 移除不必要的代码和注释。

示例代码：

<!-- 合并CSS和JS文件 -->
<link href="combined.css" rel="stylesheet">
<script src="combined.js"></script>
 
<!-- 预加载关键资源 -->
<link rel="preload" href="main.js" as="script">
 
<!-- 异步加载非关键JS -->
<script src="non-critical.js" defer></script>
 
<!-- 字体优化 -->
<link href="fonts.css" rel="stylesheet">
<style>
  @font-face {
    font-family: 'MyFont';
    src: url('myfont.woff2') format('woff2');
    font-display: swap;
  }
</style>

确保在服务器端设置合适的缓存策略，例如使用Cache-Control和Expires头。