以下是谷歌浏览器通过缓存减少图像和视频加载时间的方法：
1. 启用浏览器缓存
- 在Chrome设置→隐私和安全→缓存中勾选允许网站缓存数据，自动存储图片、视频等静态资源（如Logo、背景图）。
- 在地址栏输入 `chrome://cache`，手动清除过期缓存文件（如删除后重新加载页面测试效果）。
2. 配置服务器缓存头
- 在服务器返回头中添加 `Cache-Control: public, max-age=86400`，缓存图片和视频24小时（如CDN配置缓存规则）。
- 使用 `ETag` 或 `Last-Modified` 响应头，让浏览器根据文件版本判断是否重新下载（如更新图片时自动刷新缓存）。
3. 利用Service Workers缓存资源
- 在JavaScript中注册Service Workers脚本，预缓存关键图片和视频（如`cache.addAll(['image.jpg', 'video.mp4'])`）。
- 监听`fetch`事件，拦截网络请求并返回缓存资源（如用户再次访问时直接加载本地文件）。
4. 优化媒体文件格式
- 将图片转换为WebP格式（如使用ImageMagick工具），减少文件大小（如1MB转为300KB）。
- 对视频进行H.265编码压缩（如使用FFmpeg命令`ffmpeg -i input.mp4 -vcodec libx265 output.mp4`），降低带宽需求。
5. 设置资源版本参数
- 在URL后添加版本号（如`image.jpg?v=2`），避免缓存过期导致显示错误（如更新后强制刷新）。
- 使用link rel="preload" href="video.mp4"预加载关键视频，提前触发缓存机制（如首页背景视频）。
6. 分离静态与动态内容
- 将图片、视频存放在独立域名（如`img.example.com`），绕过浏览器单域名连接限制（如并发下载更多资源）。
- 在HTML中内嵌小图标（如使用Base64编码），减少HTTP请求次数（如社交媒体分享按钮图标）。
7. 检测缓存命中率
- 在开发者工具→Network面板中查看状态码（如`200`表示缓存命中，`304`表示未修改），统计资源加载时间。
- 使用`window.performance.getEntriesByType('resource')`获取资源加载详情（如分析视频首次缓冲时长）。