HTML5如何优化页面加载速度？

优化HTML5页面加载速度可以从以下几个方面入手：

1. 减少HTTP请求：合并文件，如CSS和JavaScript，使用图片地图。
2. 压缩资源：压缩HTML、CSS、JavaScript代码。
3. 优化CSS：将CSS放在头部，使用CSS Sprites。
4. 懒加载：将不是立即需要的内容延迟加载。
5. 预加载：提前加载可能需要的下一页面内容。
6. 使用内容分发网络（CDN）。
7. 添加缓存控制：设置合适的Cache-Control和Expires头。
8. 优化图片：优化图片大小，使用webp格式（如果兼容性允许）。

示例代码：

<!-- 合并CSS和JS文件 -->
<link href="combined.css" rel="stylesheet">
<script src="combined.js"></script>
 
<!-- 图片地图 -->
<img src="image-map.jpg" usemap="#map">
<map name="map">
  <area shape="rect" coords="10,10,100,100" href="location.html">
</map>
 
<!-- 懒加载 -->
<img data-src="lazy.jpg" src="placeholder.gif" alt="Lazy Loading Image">
<script>
  // 懒加载脚本
  function lazyLoad() {
    const lazyImages = [...document.querySelectorAll('img[data-src]')];
    const lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          const lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.classList.remove('lazy-image');
          observer.unobserve(lazyImage);
        }
      });
    });
  
    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  }
  
  document.addEventListener('DOMContentLoaded', lazyLoad);
</script>

在实际应用中，还需要根据具体页面和用户的网络条件进行详细分析和优化。