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.
2.- Optimización de imágenes para mejorar el LCP
3.- ¿Por qué el LCP puede afectar al SEO de un medio digital?
4.- Core Web Vitals Test: Las mejores herramientas para medir CWV
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.
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.
¿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.
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.
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>
¿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
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 Lighthouse, PageSpeed Insights, Chrome DevTools, Search Console, la 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.
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!
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!
