HTML页面性能优化需分资源类型策略性压缩：图片优先转WebP并用TinyPNG无损压缩；HTML/CSS/JS通过构建工具链（如html-minifier-terser）自动处理；字体用font-spider子集化，SVG用SVGO精简；传输层必须启用Gzip或Brotli压缩。
HTML页面性能优化中，用无损压缩工具减小静态资源体积，核心是针对不同资源类型选择合适工具，在不改变内容和功能的前提下剔除冗余信息。重点不是“一刀切压缩”，而是分资源、有策略地处理。
图片资源：优先用WebP + TinyPNG类工具
图片通常占H5或网页静态资源体积的60%以上，是压缩收益最大的环节。
- 把PNG/JPG批量转成WebP格式——现代浏览器普遍支持，同画质下体积平均减少30%~50%
- 再用TinyPNG、ImageOptim或Squoosh进行无损压缩：它们会移除EXIF元数据、优化编码参数，不损失视觉质量
- 避免“一张大图适配所有设备”，配合srcset提供2x/1x多尺寸版本，让移动端只下载适配分辨率的图
HTML/CSS/JS：用构建工具链自动压缩
手动删空格注释容易出错且不可持续，推荐集成到开发流程中。
- Webpack项目可加html-minifier-terser插件，配置removeComments、collapseWhitespace、minifyCSS等选项，打包时自动处理
- Vue或React项目启用Vite时，默认已开启HTML/CSS/JS压缩；如需调整，可在build.minify中指定terser或esbuild
- 注意保留条件注释（如IE兼容标记）和内联脚本末尾分号，避免压缩后执行异常
字体与SVG：精简而非简单压缩
字体文件和SVG图标容易被忽略，但体积不小，需针对性处理。
立即学习“前端免费学习笔记（深入）”；
- 使用font-spider或glyphhanger提取页面实际用到的字符子集，把几十MB的完整字体库压到几KB
- SVG图标建议用SVGO工具压缩：移除编辑器元数据、冗余属性、空白节点；图标少时可直接内联，省去HTTP请求
- 避免在HTML里直接嵌入未压缩的Base64图片，这类编码本身膨胀约33%，应先压缩原图再转码
传输层必须配Gzip或Brotli
前端压缩只是第一步，服务器端压缩能进一步缩小传输体积。
- Nginx配置中开启gzip，并设置gzip_types text/html text/css application/javascript，确保HTML/CSS/JS都被压缩
- Brotli压缩率比Gzip高15%~20%，若服务器支持（如Cloudflare、Nginx 1.13.9+），优先启用
- 验证是否生效：用Chrome开发者工具→Network标签页，查看响应头是否有Content-Encoding: gzip或br
