创建一个 Shopify 部分：

• 实现所有产品和横幅图片的延迟加载
• 使用原生的 `loading="lazy"` 属性并支持旧版浏览器
• 确保图像具有宽度/高度属性以进行 CLS 优化

构建一个部分或片段：

• 内联首屏内容的关键 CSS
• 将非关键 CSS 推迟到页面渲染后加载
• 最大限度地减少渲染阻塞资源

生成一个部分：

• 自动为支持的浏览器提供 WebP 图像
• 其他格式则回退到 JPEG/PNG
• 优化图像传输速度和 SEO

创建产品部分：

• 为产品、价格、可用性和评论添加 JSON-LD 结构化数据
• 通过 Google 的 Rich Results 测试
• 随着产品变化动态更新架构

为集合和博客页面构建分页控件：

• 使用语义 HTML 和 ARIA 属性
• 完全键盘导航和屏幕阅读器友好
• 支持编号和“加载更多”分页

生成面包屑部分：

• 使用 schema.org 标记来制作面包屑导航
• 根据页面层次动态更新
• 可访问且适合移动设备

创建一个代码片段：

• 使用“font-display: swap”加载字体，以加快文本渲染速度
• 预加载关键字体文件
• 使用系统字体堆栈作为后备

构建一个加载器：

• 仅在需要时加载最小化的 JavaScript 和 CSS 文件
• 将非必要脚本推迟到页面交互之后
• 减少总请求数以加快加载时间

生成以下部分或片段：

• 为每个页面动态设置元标题、描述和规范标签
• 确保内容独特且关键词丰富
• 与 Shopify 的 SEO 最佳实践兼容

为主题所有者创建一个仪表板部分：

• 显示 LCP、FID 和 CLS 的实时指标
• 当分数低于 Google 建议的阈值时发出警报
• 提出可行的改进建议

建立一个部分：

• 使用 Shopify 的 CDN 和图像转换参数实现最佳交付
• 允许商家在主题编辑器中设置图像质量和尺寸
• 使用 `srcset` 支持响应式图像

生成博客文章网格：

• 使用语义 HTML5 元素来表示文章、标题和图像
• 包括文章和作者的 schema.org 标记
• 针对快速加载和可访问性进行了优化

创建一个部分或片段：

• 为所有产品、系列、博客和页面生成最新的 sitemap.xml
• 遵循 Shopify 的 SEO 指南
• 随着内容变化自动更新

为主题所有者建立一个部分：

• 审核当前页面的可访问性问题（对比度、标签、键盘导航）
• 提供可操作的提示和资源链接

生成关键部分（例如博客文章或产品）的版本：

• 符合 AMP 标准，可实现超快速移动加载
• 仅使用 AMP 认可的 HTML、CSS 和 JS
• 为非 AMP 浏览器提供后备功能

创建一个片段或部分：

• 自动为所有图像生成描述性替代文本
• 使用产品、系列或博客文章数据作为背景
• 确保所有图像符合可访问性和 SEO 标准

构建一个仪表板部分：

• 允许商家设置页面大小、请求和加载时间的性能预算
• 如果超出预算，则会发出警报
• 建议优化

生成以下部分：

• 仅在用户互动后加载嵌入式视频（YouTube、Vimeo）
• 使用占位符图像和播放按钮来加快初始加载速度

创建集合过滤器：

• 为过滤视图使用干净、可抓取的 URL
• 动态更新元标记和架构
• 可访问且适合移动设备

建立一个常见问题解答部分：

• 使用 schema.org FAQPage 标记在 Google 中获取丰富的结果
• 允许商家在主题编辑器中添加/编辑问题和答案
• 易于访问且加载速度快

创建一个代码片段：

• 添加` ` 和 ` ` 关键域的标签（CDN、分析、字体）
• 减少关键资源的 DNS 和连接时间

生成 404 错误页面：

• 推荐热门产品、系列或博客文章
• 使用语义 HTML 和 schema.org 标记
• 加载速度快，并提供清晰的导航返回商店