Imagen LCP precargada
Silktide comprueba si la imagen principal de tu página —lo más grande que ven los visitantes cuando se carga— podría aparecer antes si se indicara al navegador que la obtenga con mayor prioridad. Las páginas suelen percibirse como cargadas cuando aparece su contenido más grande, por lo que esta única imagen a menudo determina la rapidez con la que se percibe toda la página.
El momento en que aparece esa imagen se mide como Pintura con contenido más grande (LCP), una de las de Google.
Por qué es importante
Los navegadores descargan los archivos aproximadamente en el orden en que los descubren, y la imagen principal a menudo se descubre tarde: está enterrada detrás de hojas de estilo y scripts, referenciada desde o insertada por un script. El resultado es una página que construye su estructura rápidamente y luego deja un hueco donde debería estar el contenido más importante.
Dado que los visitantes juzgan la velocidad por el momento en que aparece el contenido principal, y Google tiene en cuenta el LCP en el posicionamiento de búsqueda, indicar al navegador que priorice este único archivo es una de las mejoras de velocidad de mayor valor disponibles.
Cómo solucionarlo
- Precarga la imagen para que el navegador la obtenga desde el inicio de la carga:
<!-- En <head>: descarga la imagen principal de inmediato -->
<link rel="preload" as="image" href="hero.jpg" fetchpriority="high">
- Como alternativa, si la imagen es un elemento
<img>simple, añadefetchpriority="high"directamente. - Nunca esta imagen:
loading="lazy"en la imagen principal retrasa precisamente lo que debería mostrarse primero. - Prefiere un elemento
<img>simple en lugar de una imagen de fondo en CSS para la imagen principal, de modo que el navegador pueda descubrirla pronto por sí mismo.
Cómo lo prueba Silktide
- Cargar la página en un navegador real, usando el tipo de dispositivo, la velocidad de conexión y la ubicación de prueba configurados para tus pruebas de velocidad.
- Identificar el elemento de contenido más grande visible mientras la página se carga. Si es una imagen, comprobar cuándo la descubrió y la descargó el navegador.
- Si obtener la imagen antes haría que apareciera antes, informar del caso junto con el ahorro de tiempo estimado.
Solución de problemas
La imagen principal cambia entre páginas o dispositivos
Las sugerencias de precarga son por página, y el elemento "más grande" puede diferir entre los diseños de escritorio y móviles. La lógica de las plantillas puede emitir la precarga adecuada para cada página, y los atributos media e imagesrcset de la sugerencia gestionan las variantes adaptables.
He precargado la imagen pero el aviso sigue apareciendo
La URL de la precarga debe coincidir exactamente con lo que la página acaba mostrando: una variante de tamaño distinta o una URL reescrita por una no cuenta. Comprueba también que la sugerencia esté en la propia cabecera de la página, no añadida después por un script, lo que anula su propósito.