面试题：Vue懒加载优化首屏性能时，如何处理图片懒加载与SEO的平衡

1. 提供替代文本（alt 属性）

在 <img> 标签中始终设置有意义的 alt 属性。搜索引擎主要通过 alt 属性来理解图片的内容。例如：

<img :src="lazyImageSrc" alt="描述性文本，如风景优美的山峰图片" lazy>

2. 预渲染关键图片

对于一些对 SEO 至关重要的图片，如首页的品牌标志、重要产品图片等，不使用懒加载，而是直接渲染。这样搜索引擎抓取页面时能立即获取这些关键图片信息。例如，在 Vue 组件中：

<template>
  <div>
    <img src="@/assets/logo.png" alt="公司品牌标志">
    <img v-lazy="productImage" alt="主要产品图片">
  </div>
</template>

3. 利用 SSR（服务器端渲染）或 SSG（静态站点生成）

SSR：在服务器端渲染页面时，将图片的 HTML 结构和 src 等属性提前渲染好，搜索引擎爬虫访问页面时，能获取到完整的图片信息，就像普通渲染的页面一样。在 Vue 项目中使用 Nuxt.js 等框架来实现 SSR 。
SSG：通过在构建时生成静态 HTML 文件，把图片相关信息写入 HTML 中。如使用 VuePress 等工具进行静态站点生成，这样生成的页面对于搜索引擎友好，同时也能利用懒加载提升首屏性能。

4. 给搜索引擎提供特殊标识

使用 meta 标签或者 JSON - LD 格式的结构化数据，向搜索引擎明确指出哪些图片是重要的，以及它们的相关信息。例如，在页面的 head 部分添加 meta 标签：

<meta name="image" content="https://example.com/important-image.jpg" />

或者使用 JSON - LD 格式：

{
  "@context": "https://schema.org",
  "@type": "ImageObject",
  "name": "重要图片",
  "url": "https://example.com/important-image.jpg",
  "caption": "这是一张对 SEO 很重要的图片"
}

5. 优化懒加载时机

延迟懒加载的触发，使得页面在加载初期，至少保证有一部分图片已经加载完成并可被搜索引擎抓取。可以通过调整 Vue 中懒加载指令的阈值，比如将原本距离视口一定距离才触发懒加载的距离加大，让重要图片在页面初始化时就加载。例如：

<img v-lazy="imageSrc" :lazy - load - offset="300" alt="图片描述">

6. 确保图片可访问性

保证懒加载图片的链接在任何情况下都是可访问的，不会因为懒加载的逻辑而导致图片链接失效。例如，在处理图片路径时，确保相对路径和绝对路径的正确性，并且在懒加载过程中不会出现网络请求错误等情况，以免影响搜索引擎抓取图片。

星途面试题库