La semana pasada revisamos qué es el Largest Contentful Paint (LCP), una métrica de Google que evalúa la velocidad de carga de cada una de las páginas de tu sitio web, registrando el momento en el que se carga el contenido principal, que como principal, se trata del contenido más grande dentro de la página.
LCP, forma parte también de los Core Web Vitals, así que no hay excusas para que tu sitio web esté a la altura. Es la única forma de que el algoritmo de búsquedas de Google posicione adecuadamente tu sitio web. Es por ello que esta semana revisamos qué parámetros debes considerar para optimizar el LCP en tu sitio web.
¿Qué está causando el LCP?
Según Google, las 3 principales causas más comunes de un LCP alto son:
- Servidores lentos o mal configurados
- Recursos muy pesados, como imágenes no optimizadas
- CSS y/o JavaScript asíncronos
¿Cómo optimizar el LCP?
1. Optimiza el servidor de tu sitio web
Lo primero que debes hacer es evaluar y reducir el tiempo de respuesta de tu servidor, ya que te permitirá tener un sitio web más rápido y así mejorarás en las evaluaciones de las métricas de Google (SEO).
El TTFB, tiempo de respuesta de tu servidor web, es el tiempo que tarda el servidor web en responder a la solicitud de visitas de los usuarios, que incluye el HTML, CSS, JavaScript y/o cualquier otro tipo de archivo que contenga la página que es el usuario esté visitando.
Si estás en un alojamiento web compartido, pasar a un servidor dedicado es una gran mejora, ya que ya no compartes recursos con otros sitios web. Asegúrate siempre de elegir una empresa de alojamiento confiable. En el caso de ITDO, hemos tenido casos de éxito con alguno de nuestros clientes, incrementando un 80% las visitas y también el número de ventas en tan solo un día, tan solo optimizando el servidor.
El almacenamiento en caché y el uso de una sistemas CDN también pueden mejorar en gran medida el rendimiento de tu servidor. Ambos reducirán el tiempo que tarda un usuario en cargar el contenido de una página de tu sitio web.
Artículos recomendados para optimizar y evaluar el servidor de tu sitio web:
- Hosting compartido vs hosting dedicado ¿Qué es lo mejor para mi sitio web?
- Cómo preparar tu sitio web para visitas inesperadas
- Rendimiento web, CDN & SEO
- Seguridad web y posicionamiento SEO con HTTPS y HSTS
2. Comprime y optimiza las imágenes
Las imágenes son probablemente el contenido de más peso de tu sitio web, así que debes comprimir, usar el tamaño adecuado y utilizar el formato de archivos de imágenes correctos para hacer que tu sitio web sea más ligero.
Hay dos formatos de archivo de imagen ampliamente utilizados, JPG y PNG. Debes elegir el formato correcto para cada necesidad. Utiliza JPG para fotografías y PNG imágenes donde necesites fondos transparentes.
Comprimir las imágenes ayudará a reducir el peso, puedes hacerlo aumentando la “pérdida”, esto reduce el tamaño del archivo eliminando datos, que bien aplicados, la compresión JPG es casi indetectable.
Las imágenes de tu sitio web tienen dimensiones: ancho y alto. Revisa las imágenes de tu sitio web para evaluar que estés cargando imágenes con el mismo tamaño que el configurado. Podrías estar mostrando una imagen de 200x200 píxeles y la imagen original es de 1200x1200 píxeles.
Artículos recomendados para comprimir y optimizar las imágenes de tu sitio web:
3. CSS y JavaScript críticos y cargas asíncronas
CSS y JavaScript críticos son aquellos que son necesarios para un correcto diseño y funcionamiento del sitio web, un mal aspecto o mal funcionamiento, puede ser una fuga de muchos de tus usuarios.
Para un correcto funcionamiento, debes asegurarte que el CSS y JavaScript principal de tu sitio web se cargue al mismo tiempo que el HTML, de esta manera no se verán renderizados a medias. El resto de CSS y JavaScript los puedes configurar de forma asíncrona, después de la carga de la página.
Esto elimina CSS y JavaScript como un recurso que bloquea el renderizado y agiliza la capacidad del navegador para descargar y mostrar los archivos necesarios para mostrar el contenido principal de la página lo más rápido posible.
Conclusión
La evaluación de tu servidor y la optimización de las imágenes, CSS y Javascript, mejorará las puntuaciones de LCP, además de mejorar la experiencia del usuario y SEO. Y sin duda, no debes optimizar el LCP solo para posicionar tu sitio web, sino también para realizar un sitio web más sostenible.
Photo by Nicolas Hoizey on Unsplash
Referencias:
· Largest Contentful Paint (LCP)
