Categoría 8: Rendimiento y SEO

Crea una sección de Shopify que:

• Implementa la carga diferida para todas las imágenes de productos y banners.
• Utiliza atributos nativos `loading="lazy"` y respaldo para navegadores más antiguos
• Garantiza que las imágenes tengan atributos de ancho/alto para la optimización de CLS

Crea una sección o fragmento que:

• Incorpore CSS crítico para el contenido que aparece por encima del pliegue
• Pospone la carga de CSS no crítico después de la representación de la página
• Minimiza los recursos que bloquean la representación

Generar una sección que:

• Sirve automáticamente imágenes WebP para navegadores compatibles
• Vuelve a JPEG/PNG para los demás
• Optimiza la entrega de imágenes para mayor velocidad y SEO.

Crea una sección de producto que:

• Agrega datos estructurados JSON-LD para productos, precios, disponibilidad y reseñas.
• Pasa la prueba de resultados enriquecidos de Google
• Actualiza el esquema dinámicamente con los cambios del producto.

Cree un control de paginación para páginas de colecciones y blogs que:

• Utiliza atributos semánticos HTML y ARIA
• Es totalmente navegable mediante teclado y compatible con lectores de pantalla.
• Admite paginación numerada y "Cargar más"

Generar una sección de ruta de navegación que:

• Utiliza el marcado de schema.org para las rutas de navegación
• Se actualiza dinámicamente según la jerarquía de páginas.
• Es accesible y compatible con dispositivos móviles.

Crea un fragmento que:

• Carga fuentes usando `font-display: swap` para una representación de texto más rápida
• Precarga archivos de fuentes críticos
• Utiliza pilas de fuentes del sistema como respaldo

Construya un cargador que:

• Carga archivos JavaScript y CSS minimizados solo cuando es necesario
• Pospone los scripts no esenciales hasta después de la interacción con la página
• Reduce las solicitudes totales para tiempos de carga más rápidos

Generar una sección o fragmento que:

• Establece dinámicamente el meta título, la descripción y las etiquetas canónicas para cada página
• Garantiza contenido único y rico en palabras clave
• Es compatible con las mejores prácticas de SEO de Shopify

Cree una sección de panel para los propietarios de temas que:

• Muestra métricas en tiempo real para LCP, FID y CLS
• Alertas cuando las puntuaciones caen por debajo de los umbrales recomendados por Google
• Sugiere mejoras viables

Construya una sección que:

• Utiliza los parámetros de transformación de imágenes y CDN de Shopify para una entrega óptima
• Permite a los comerciantes configurar la calidad y el tamaño de la imagen en el editor de temas.
• Admite imágenes responsivas con `srcset`

Generar una cuadrícula de publicaciones de blog que:

• Utiliza elementos HTML5 semánticos para artículos, encabezados e imágenes.
• Incluye marcado de schema.org para artículos y autores
• Está optimizado para una carga rápida y accesibilidad.

Crea una sección o fragmento que:

• Genera un sitemap.xml actualizado para todos los productos, colecciones, blogs y páginas
• Sigue las pautas de SEO de Shopify
• Se actualiza automáticamente a medida que cambia el contenido.

Cree una sección para propietarios de temas que:

• Audita la página actual en busca de problemas de accesibilidad (contraste, etiquetas, navegación del teclado)
• Proporciona consejos prácticos y enlaces a recursos.

Generar una versión de una sección clave (por ejemplo, una publicación de blog o un producto) que:

• Es compatible con AMP para una carga móvil ultrarrápida
• Utiliza únicamente HTML, CSS y JS aprobados por AMP
• Proporciona una alternativa para navegadores que no son AMP

Crea un fragmento o sección que:

• Genera automáticamente texto alternativo descriptivo para todas las imágenes.
• Utiliza datos de productos, colecciones o publicaciones de blog para el contexto.
• Garantiza que todas las imágenes cumplan con los estándares de accesibilidad y SEO.

Construya una sección del tablero que:

• Permite a los comerciantes establecer presupuestos de rendimiento para el tamaño de la página, las solicitudes y el tiempo de carga.
• Alertas si se exceden los presupuestos
• Sugiere optimizaciones

Generar una sección que:

• Carga videos incrustados (YouTube, Vimeo) solo después de la interacción del usuario
• Utiliza una imagen de marcador de posición y un botón de reproducción para una carga inicial más rápida

Cree filtros de colección que:

• Utilice URL limpias y rastreables para vistas filtradas
• Actualizar metaetiquetas y esquemas dinámicamente
• Son accesibles y compatibles con dispositivos móviles.

Cree una sección de preguntas frecuentes que:

• Utiliza el marcado de preguntas frecuentes de schema.org para obtener resultados enriquecidos en Google
• Permite a los comerciantes agregar/editar preguntas y respuestas en el editor de temas.
• Es accesible y de carga rápida.

Crea un fragmento que:

• Añade ` ` y ` ` etiquetas para dominios clave (CDN, análisis, fuentes)
• Reduce el DNS y el tiempo de conexión para recursos críticos

Generar una página de error 404 que:

• Sugiere productos, colecciones o publicaciones de blog populares.
• Utiliza HTML semántico y marcado schema.org
• Se carga rápidamente y ofrece una navegación clara de regreso a la tienda.