Solución rápida con Thunder
Thunder improves common Shopify resource loading patterns automatically, including Core Web Vitals pressure from images, scripts, fonts, and render-blocking assets. Use it for the baseline, then reserve manual preload tags for the few assets that are truly critical on a specific template.
Qué significa PageSpeed con solicitudes de clave de precarga
A preload tells the browser: this resource matters soon, start fetching it early. PageSpeed surfaces preload opportunities when the browser discovers an important request late in the waterfall. On Shopify, the usual candidates are a self-hosted font, a hero image referenced from Liquid or CSS, or a CSS file required to paint the first view.
Esta advertencia se superpone con Core Web Vitals porque el descubrimiento tardío puede retrasar el Largest Contentful Paint. La guía LCP de Google dice que un buen LCP es 2,5 segundos o más rápido para al menos el 75% de las visitas, y una subparte importante de LCP es el retraso en la carga de recursos. La precarga puede reducir ese retraso si el recurso es realmente crítico.
También puede resultar contraproducente. Si precarga cinco fuentes, tres imágenes, CSS de la aplicación, reseñas y un script deslizante, no ha priorizado. Has hecho una cola más ruidosa. Para un contexto más amplio, lea el Guía de sugerencias de recursos de Shopify y el guía de cadenas de solicitudes críticas.
Candidatos de precarga de Shopify buenos y malos
| Activo | ¿Precarga? | Razón |
|---|---|---|
| Imagen principal de la página de inicio | A menudo sí | Imagen LCP probable y necesaria en la primera ventana gráfica. |
| Imagen principal del producto | A veces | Útil cuando es el elemento LCP y se descubre tarde. |
| Fuente principal en la mitad superior de la página | A veces | Útil para fuentes autohospedadas que afectan el texto visible. |
| Imágenes de la colección debajo de la página | No | Por lo general, estos deben estar cargados de forma diferida, no precargados. |
| Revisar script del widget | No | Generalmente no es necesario antes del primer renderizado. |
Manual paso a paso: solucionar solicitudes de claves de precarga en Shopify
1. Confirme que el recurso se utilice en la mitad superior de la página
Abra PageSpeed Insights, identifique el recurso sugerido y pregunte si los compradores lo necesitan en la primera ventana gráfica. Si la respuesta es no, no lo precargues. Considere la posibilidad de realizar una carga diferida o retrasarla. Si el recurso es la imagen principal o la fuente principal, continúa.
2. Precarga la imagen del héroe probable
Para una imagen principal controlada por Liquid, coloque la precarga en el encabezado del documento o en la lógica de la sección solo cuando esa sección aparezca en la mitad superior de la página. También renderice la imagen real con carga inmediata y alta prioridad.
<!-- In theme.liquid or a hero section rendered first -->
<link
rel="preload"
as="image"
href="{{ section.settings.hero_image | image_url: width: 1600 }}"
imagesrcset="
{{ section.settings.hero_image | image_url: width: 750 }} 750w,
{{ section.settings.hero_image | image_url: width: 1100 }} 1100w,
{{ section.settings.hero_image | image_url: width: 1600 }} 1600w"
imagesizes="100vw"
fetchpriority="high"
>Si este es su problema de LCP, el guía de precarga de imágenes heroicas y Guía de descubrimiento de solicitudes de LCP profundiza.
3. Precargue solo las fuentes autohospedadas críticas
Las precargas de fuentes son útiles solo cuando el archivo de fuente se usa inmediatamente y la URL coincide con la fuente solicitada por CSS. uso origen cruzado para archivos de fuentes. Combina esto con visualización de fuente: intercambiar para que el texto no permanezca invisible mientras se carga la fuente.
<link
rel="preload"
href="{{ 'brand-regular.woff2' | asset_url }}"
as="font"
type="font/woff2"
crossorigin
>
@font-face {
font-family: 'Brand';
src: url('{{ 'brand-regular.woff2' | asset_url }}') format('woff2');
font-display: swap;
}Para más detalles, consulte Optimización de fuentes de Shopify, reduciendo la carga de fuentes, y intercambio de visualización de fuente.
4. No precargue recursos de aplicaciones que no sean críticos
App assets often look important because they appear in the waterfall, but reviews, chat, recommendations, popups, personalization, and heatmaps are rarely needed before the first paint. Preloading them can make the score worse by stealing bandwidth and CPU from LCP. Use the guía de JavaScript de terceros para retrasar el trabajo de aplicaciones no críticas.
5. Esté atento a las advertencias de precarga no utilizadas
Los navegadores advierten cuando un recurso precargado no se utiliza poco después de la carga. Eso significa que la carga previa probablemente sea demasiado amplia, que la lógica condicional sea incorrecta, que la URL no coincida o que el activo no sea realmente crítico. Elimine las precargas que no demuestren valor en las pruebas.
Solución manual frente a solución Thunder
| Problema de precarga | Corrección manual | Solución de trueno |
|---|---|---|
| Imagen heroica descubierta tarde | Agregue precarga condicional, carga ansiosa y prioridad de recuperación alta. | Mejora automáticamente los patrones LCP y de prioridad de imagen comunes. |
| Fuente descubierta tarde | Precargue el archivo WOFF2 exacto y use el intercambio de visualización de fuentes. | Ayuda a reducir la presión de carga de fuentes como parte de la línea base del escaparate. |
| Demasiadas precargas | Elimine las precargas amplias y conserve solo los recursos de la primera ventana gráfica. | Evita tratar todos los activos como críticos. |
| La cascada de recursos de la aplicación hace ruido | Retrasar los scripts de aplicaciones no críticas en lugar de precargarlos. | Optimiza la sincronización de los recursos de la aplicación para problemas comunes de rendimiento de Shopify. |
Cómo se conecta la precarga a LCP, CSS y scripts
La precarga no es una estrategia de velocidad independiente. Funciona cuando acorta el camino crítico. Si su imagen LCP comienza tarde porque está oculta en CSS, inyectada por JavaScript o cargada de forma diferida, una precarga puede ayudar. Si LCP es lento porque el archivo de imagen es enorme, también necesita formatos de imagen modernos y fuentes del tamaño adecuado. Si el CSS que bloquea el renderizado retrasa la pintura, lea arreglando CSS que bloquea el renderizado.
Si los scripts son el cuello de botella, precargar un script suele ser un paso en falso. Es posible que deba reducir el tiempo de ejecución, posponer scripts no críticos o eliminar código de aplicación no utilizado. el guía para reducir el tiempo de ejecución de JavaScript es el mejor siguiente paso.
Cómo confirmar que la solución funcionó
Prueba con PageSpeed Insights y el prueba de velocidad gratuita de Shopify. En la cascada, el recurso precargado debería comenzar antes. En métricas, el LCP debería mejorar o al menos mantenerse estable. En las advertencias, no debería ver mensajes "precargados pero no usados". Pruebe también en dispositivos móviles, porque los errores de precarga son más visibles cuando el ancho de banda es limitado.
Para el enfoque completo en toda la tienda, utilice el guía completa de optimización de velocidad de Shopify y compare las opciones de automatización en el Guía las mejores aplicaciones de optimización de velocidad de Shopify .
FAQ
¿Qué significan las solicitudes de claves de precarga en Shopify?
Significa que un activo crítico se descubre más tarde de lo que debería. En Shopify, ese activo suele ser una fuente, una imagen principal, un archivo CSS crítico o una dependencia de secuencia de comandos que afecta el primer renderizado.
¿Debo precargar todos los activos importantes de Shopify?
No. Precargue solo los recursos necesarios para la ventana gráfica inicial. Demasiadas etiquetas precargadas pueden desplazar la imagen LCP, el CSS y las fuentes reales, empeorando el rendimiento.
¿Qué recursos de Shopify son buenos candidatos para la precarga?
Los buenos candidatos incluyen la probable imagen principal de LCP, un archivo de fuente autohospedado en la mitad superior de la página y, ocasionalmente, un archivo CSS crítico. Las imágenes de la mitad inferior de la página, los widgets de aplicaciones, los scripts de revisión y el JavaScript de temas generales suelen ser malos candidatos.
¿Puede Thunder ayudar con las solicitudes de claves de precarga?
Thunder puede mejorar automáticamente la prioridad de los recursos del escaparate y los patrones comunes de carga de Core Web Vitals. Las precargas manuales pueden seguir siendo útiles para imágenes destacadas o configuraciones de fuentes altamente personalizadas.
¿Cómo sé si funcionó una precarga?
Vuelva a probar la misma URL y verifique si el recurso crítico se descubre antes, LCP mejora o se mantiene estable y no aparece ninguna advertencia sobre los recursos precargados que no se utilizan poco después de la carga.
Fijar la prioridad de los recursos de forma práctica
Precargue solicitudes de claves en Shopify solo cuando el activo sea crítico para la primera ventana gráfica. Thunder maneja la línea de base automatizada común y las precargas manuales pueden ajustar los casos de fuentes y héroes personalizados.
Instalar Trueno