手机网站制作工具专业营销团队公司
文章目录
- 一、了解一下核心 Web 指标
- 二、图片优化
- 1. 为什么图片优化很重要？
- 2. 怎么进行优化
- 1. 使用现代图片格式(AVIF/WebP)
- 2. 不同设备加载不同尺寸
- 3. 懒加载图片
- 4. 注意事项
一、了解一下核心 Web 指标
https://developers.google.com/search/docs/appearance/core-web-vitals?hl=zh-cn
核心 Web 指标是一组指标，用于衡量网页的加载性能、互动性和视觉稳定性的实际体验。我们强烈建议网站所有者实现良好的核心 Web 指标，以便借助 Google 搜索取得理想成效，并确保用户在总体上获得良好的体验。这一方面连同其他网页体验方面，都与我们的核心排名系统所要奖励的内容相契合。
- Largest Contentful Paint (LCP)：衡量加载性能。为了提供良好的用户体验，请尽力在网页开始加载的 2.5 秒内完成 LCP。
- Interaction To Next Paint (INP)：衡量响应速度。为了提供良好的用户体验，请尽力将 INP 控制在 200 毫秒以内。
- Cumulative Layout Shift (CLS)：衡量视觉稳定性。为了提供良好的用户体验，请尽力使 CLS 得分低于 0.1。
二、图片优化
在现代 Web 开发中，图片往往是影响页面性能的最大因素。据统计，图片通常占据网页总体积的 60%-70%，直接影响用户的加载体验和搜索引擎排名。在 Vue 3 项目中，合理的图片优化策略不仅能显著提升页面加载速度，还能改善 Core Web Vitals 指标，特别是 LCP（Largest Contentful Paint）。
1. 为什么图片优化很重要？
数据显示，图片通常占据网页总大小的 50-70%，是性能优化的重点目标。未优化的图片会导致：
-
加载时间过长：影响 LCP 指标，用户等待时间增加
-
带宽消耗巨大：特别是对移动用户不友好
-
SEO 排名下降：Google 优先推荐快速加载的网站
-
用户体验差：加载慢的网站跳出率高达 90%
通过合理的图片优化，你可以：
-
减少页面加载时间 1-3 秒
-
降低带宽使用量 50-80%
-
提升 LCP 评分从"需要改进"到"良好"
-
显著改善移动端用户体验
2. 怎么进行优化
1. 使用现代图片格式(AVIF/WebP)
传统的 JPEG 和 PNG 格式已经相当陈旧，现代格式如 WebP 和 AVIF 在保持同等画质的情况下，文件大小可以减少 50-80%。
- webp: Google 开发，浏览器支持率 95%+（2025 年）
- avif：更新的格式，压缩率更高，支持率约 85%+
具体实现方案
<picture><!-- 当浏览器支持 AVIF 格式时，优先加载这张 --><source srcset="./images/103.avif" type="image/avif" /><!-- 如果不支持 AVIF，但支持 WebP，就加载这张 --><source srcset="./images/103.webp" type="image/webp" /><!-- 最后回退到 JPG（所有浏览器都会支持） --><img src="./images/103.jpg" alt="..." loading="lazy" width="600" />
</picture>
2. 不同设备加载不同尺寸
为所有设备提供相同的高分辨率图片是资源浪费：
-
手机屏幕只需要 400px 宽的图片，却加载了 1200px 的版本
-
浪费用户流量，延长加载时间
-
特别是在移动网络环境下影响更明显
具体实现
<picture><!-- 大屏 (min-width: 1024px) 时，加载 1200px 宽度的 AVIF --><sourcesrcset="./images/147-600.avif"type="image/avif"media="(min-width: 1024px)"/><!-- 小屏 (max-width: 1023px) 时，加载 600px 宽度的 AVIF --><sourcesrcset="./images/147-300.avif"type="image/avif"media="(max-width: 1023px)"/><!-- 大屏 (min-width: 1024px) 时，加载 1200px 宽度的 webp --><sourcesrcset="./images/147-600.webp"type="image/webp"media="(min-width: 1024px)"/><!-- 小屏 (max-width: 1023px) 时，加载 600px 宽度的 webp --><sourcesrcset="./images/147-300.webp"type="image/webp"media="(max-width: 1023px)"/><img src="./images/147.jpg" alt="" loading="lazy" />
</picture>
3. 懒加载图片
懒加载延迟加载屏幕外的图片，直到用户滚动到可见区域才开始加载：
-
减少初始页面加载时间
-
节省带宽，特别是用户可能不会看到所有图片
-
改善 LCP，因为减少了首屏的网络请求竞争
具体实现
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>延长页面示例</title><style>.spacer {height: 5500px;background: linear-gradient(#eee, #fff);}img {display: block;margin: 20px auto;width: 80%;max-width: 600px;}</style></head><body><h1>上面是 空白，往下滚…</h1><div class="spacer"></div><!-- 下面这几张图才在懒加载范围里 --><img id="img1" src="./images/103.jpg" loading="lazy" alt="…" /><img id="img2" src="./images/103.jpg" loading="lazy" alt="…" /><img id="img3" src="./images/147.jpg" loading="lazy" alt="…" /><script>document.querySelectorAll('img').forEach((img) => {img.addEventListener('load', () => {console.log(`图片 ${img.id} 开始加载于`,performance.now().toFixed(0),'ms')})})</script></body>
</html>4. 注意事项
- 格式优先
- 按照在 DOM 中的先后顺序被浏览器依次检测。
-
浏览器遇到第一个它能解码的 type 就停止，后面的就不会再下载。
- 视口适配
- 结合 media 属性或不同分辨率的 srcset，按屏幕大小或 DPR（设备像素比）加载不同图片
<img>作为回退和可访问性保障
-
必须包含 ，它既是回退方案，也是向无 JS 或不支持 的环境提供内容。
-
alt 属性要写描述性文字，方便屏幕阅读器和 SEO。
-
loading=“lazy” 可选，用于图片懒加载，提升首屏性能。
- 尺寸属性
-
建议为 设置 width/height，避免布局抖动（CLS）。
-
如果用 CSS 控制尺寸，也可加上 aspect-ratio 保证占位。