Core Web Vitals parte I: Elementos que influyen en el LCP

Guía completa sobre cómo mejorar el Largest Contentful Paint: Lecciones SEO gratis para periodismo digital acerca de las nuevas métricas de Google

Webp.net-resizeimage (3)
photo_camera Core Web Vitals parte I: Elementos que influyen en el LCP

Las Core Web Vitals están a la orden del día para cualquier medio digital o página web que quiera seguir posicionando de manera orgánica en Google, una vez conocidos la mayor parte de los cambios que ha propuesto el gigante de Silicon Valley en el ecosistema web.

Tal y como explicamos en el Blog Opennemas en el artículo "Core Web Vitals en periódicos digitales: ¿Cómo afectan al SEO de un medio?", este factor, con fecha 'límite' Mayo de 2021 según Google, influirá en gran medida (ya lo está haciendo en la actualidad) en el posicionamiento de las Webs y sus noticias en las SERPs de su buscador.

 

Mediante este Curso Core Web Vitals para periódicos digitales y webs corporativas, te explicaremos detalladamente los aspectos a tener en cuenta para mejorar las métricas de CWV en tu web y poder posicionar en las SERPs de Google bajo sus parámetros.

Razones por las que cursar un Máster de Periodismo y Comunicación Digital

 

Vamos a comenzar el Curso Core Web Vitals hablando sobre uno de los tres indicadores de relevancia impuestos por Google, el Largest Contentful Paint.

 

Qué factores influyen en la métrica LCP

1.- Velocidad del servidor

A la hora de tener una velocidad de servidor adecuada para una buena carga de la métrica LCP, es fundamental contar con un hosting rápido.

En Opennemas contamos con un hosting que garantiza unos tiempos de carga óptimos para periodismo digital, por ello este es un factor muy a tener en cuenta a la hora de analizar el Largest Contentful Paint.

2.- Bloqueos de renderizado por CSS y Javascript

Cuando se cargan elementos Javascript en una página o al aplicar un estilo a algo que se está viendo en la pantalla, se necesita un tiempo de carga de recursos que puede acabar siendo perjudicial a la vista del LCP.

3.- Carga de recursos

Este tipo de carga viene más supeditado a la carga de imágenes. Por ejemplo, si una imagen ocupa 50MB y se coloca al principio de la página, hasta que no se descarguen esos 50MB de la imagen, no se podrá visualizar nada más del contenido de la página, bloqueando de esta manera el renderizado.

Descubre la guía más completa sobre cómo mejorar el engagement de AMP en tu medio digital

 

¿Cómo podemos solucionar estos problemas de LCP?

4.- Opimizar server, usar CDN, cachear recursos, precargar ajenos

Optimizando el server se podrá mejorar mucho la velocidad de carga de una página.

Usando un CDN (un sitio donde se puedan alojar recursos como archivos CSS o Javascript) puede optimizarse este proceso.

Mediante el cacheo de recursos se pueden preparar las imágenes en una memoria, para que el server lo sirva lo más rápido posible a los usuarios.

 

5.- Optimizar Carga Crítica

La carga crítica quiere decir que los elementos que se vean en la página sin hacer scroll, es lo que hay que optimizar en cuanto a la velocidad de carga, es decir, los estilos tienen que estar lo mejor optimizados posibles mediante CDNs o cacheos que prioricen la carga de esos elementos.

6.- Minificar JS y CSS, inline CSS crítico, defer JS

Minificar quiere decir eliminar todo el código que no sea relevante para que el fichero en cuestión ocupe lo mínimo posible, tardando así menos en la carga de página.

Curso sobre cómo configurar Google Analytics 4 en tu CMS para periódicos digitales​

 

Optimización de imágenes para mejorar el LCP

Una de las principales metas que se pretende conseguir para mejorar el LCP de una página es la optimización de imágenes.

Para Google, el peso de las imágenes cobra especial importancia en la rapidez de carga, por eso es fundamental contar con herramientas internas o externas que compriman las imágenes sin que el ojo humano pueda notar la diferencia, es decir, optimizar su peso.

Esta optimización se puede realizar de muchas maneras, de hecho, el propio Opennemas cuenta con una optimización automática de imágenes una vez se suben a la plataforma.

Aún así, si queremos conseguir una mejora en el peso de las imágenes considerable, recomendamos utilizar herramientas externas, tal y como hemos explicado en nuestro artículo "Herramientas gratuitas para optimizar imágenes en tu medio digital".

En la siguiente imagen podemos observar el LCP de una noticia en concreto, es decir, el tiempo que le lleva una página para cargar todos sus elementos, así como el tiempo que le lleva hacerlo.

Page Speed Insights LCP imagen

Código multimedia adaptado a Responsive

Un aspecto que Google considera muy positivo a la hora de optimizar imágenes para mejorar el LCP de una página es el hecho de que tanto en el código de la web, como en el propio HTML de una página, se muestren las diferentes dimensiones de una imagen según el dispositivo.

Ejemplo de HTML de imagen Responsive

<picture>
  <source media="(min-width: 800px)" srcset="img/pc.png">
  <source media="(min-width: 480px)" srcset="img/tablet.png">
  <img src="img/movil.jpg" alt="Ejemplo">
</picture>

Contenido Evergreen en prensa digital: 5 claves para optimizar tu medio

 

¿Por qué el LCP puede afectar al SEO de un medio digital?

El tiempo de respuesta del servidor es lento

Cuando hablamos de cómo acortar el tiempo de carga de un sitio web, el primer paso que sugerimos es contar con un servidor rápido.

Bloquear el proceso en CSS y JavaScript

Para comprender cómo el CSS y JavaScript impiden la representación de páginas web, primero debemos comprender cómo el navegador representa el sitio web.

Cuando el usuario visita el sitio web, el navegador comienza a leer el código de arriba a abajo. Si encuentra un archivo CSS o JavaScript durante este proceso, debe dejar de leer mientras espera descargar y procesar el archivo.

Carga lenta de recursos

Esta es una de las razones más comunes, posiblemente porque sus imágenes, videos u otros elementos son pesados.

Solo necesitas comprimir las imágenes y subirlas en un formato de menor peso. Esto ayudará a que su sitio web se cargue más rápido.

Además, también puede utilizar un sistema de almacenamiento en caché que ayuda a cargar este contenido.

 

Core Web Vitals Test: Las mejores herramientas para medir CWV

Core-Web-Vitals-Tools

En el Curso Opennemas sobre CWV te traemos todas las herramientas populares de Google para desarrolladores web ahora son compatibles con la medición de Core Web Vitals.

Estas herramientas ayudan a diagnosticar y solucionar problemas de experiencia de usuario con mayor facilidad. 

Esto incluye LighthousePageSpeed ​​InsightsChrome DevToolsSearch Consolela herramienta de medición de web.dev, la extensión Web Vitals Chrome y una nueva API de informes de Chrome UX.

Ahora que la Búsqueda de Google incluye Core Web Vitals como base para evaluar la experiencia de la página, es importante que estas métricas estén disponibles y sean lo más procesables posible.

Cómo tener éxito en Google con una nota de prensa optimizada para SEO

 

Si quieres estar al día de todo lo que sucede en el blog de Opennemas, únete a nuestro canal de Whatsapp y recibe en tu móvil contenido en exclusiva y mucho más. Es gratis!CMS Opennemas periodismo

Si todavía no sabes todo lo que te ofrece el mejor CMS del mercado para periódicos digitales ¡Contacta con nosotros y sabremos darte una solución individualizada tanto si eres un nuevo emprendedor en el ámbito de los medios o buscas dar un giro a tu diario!

Y recuerda, puedes crearlo de forma totalmente gratuita haciendo click aquí.

¡CREA YA TU PERIÓDICO CON OPENNEMAS, ES GRATUITO!

banner opennemas

Comentarios