Mejorar Resultados de Core Web Vitals

Core Web Vitals es un análisis de tu sitio que ya puedes ver desde tu cuenta de Google Search Console si cuentas con una buena cantidad de tráfico que permita medir el rendimiento de las páginas de tu sitio.

Si aún no tienes una buena cantidad de tráfico para poder ver el reporte de Core Web Vitals, puedes ver hacer un test de seguridad en la página oficial de Core Web Vitals

Las Métricas de Core Web Vitals

Estas son las métricas de Core Web Vitals

• Largest Contentful Paint (LCP): El intervalo de tiempo entre el inicio de la carga de una página y el momento en que se procesa por completo la imagen o el bloque de texto más grande en la ventana gráfica de un usuario. Es posible que vea que la puntuación cambia a medida que se carga la página y cuando el contenido está visible, pero el nodo más grande aún está en la lista de trabajos pendientes y aún no se muestra. Esto se hace más notorio en las velocidades de conexión aceleradas.

• First Input Delay (FID): La cantidad de tiempo que tarda una página en estar lista para la interactividad del usuario, lo que significa que a medida que las páginas se ensamblan, ¿cuánto tiempo tarda la página en responder a los clics, los desplazamientos o la entrada del teclado procesando sus correspondientes controladores de eventos? La interacción del usuario puede retrasarse significativamente debido a las principales tareas de secuencia de comandos de bloqueo de subprocesos.

• Cumulative Layout Shift (CLS): La distancia medida y la fracción de la ventana gráfica que se desplaza debido a la manipulación del DOM o la falta de atributos de dimensión para los principales elementos multimedia. Cuando no podemos definir las dimensiones de nuestras imágenes de héroe, por ejemplo, el texto de nuestras páginas primero parece que solo se desplaza, lo que provoca un “cambio” de diseño de contenido disruptivo para los usuarios.

Si usas herramientas como Google Page Insights y GTMetrix puedes entender cuales son los problemas de tu sitio.

El reporte de Page Experience de Google Search Console te puede ayudar a resolver los problemas en cada uno de las métricas.

Core Web Vitals: Datos de Laboratorio

Para entender Core Web Vitals, debes entender la diferencia entre los datos de laboratorio y los datos de campo.

La diferencia entre los datos de laboratorio y los datos de campo (field data) es que estos pueden ser manipulados.

Por ejemplo, yo puedo retrasar por 2 segundos la ejecución de varios scripts usando Flying Scripts, esto permite que mi sitio tenga buenos resultados en el reporte de Core Web Vitals en Google Page Insights y otros test de velocidad.

Ese truco puede engañar los tests de velocidad, pero no los datos de campo (field data) que puedes visualizar en Google Search Console.

Core Web Vitals: Datos de Campo

Los datos de campo se obtiene por medio de la experiencia que los visitantes tienen en tu sitio.

Los datos de campo impiden que Core Web Vitals puede ser burlado, por lo que no te extrañes si tienes un buen resultado en Google Page Insights y a la vez resultados horribles en los reportes de Google Search Console.

Al parecer no basta con solucionar o maquillar parte de los problemas en los tests de velocidad.

Lo otro que debes saber es que cualquier mejora que hagas requiere de un análisis de 28 días.

En 28 dias, se pueden validar las mejoras o puede ver como tus resultados siguen iguales o empeoran

¿Core Web Vitals y el posicionamiento Web?

Gary Illyes de Google dijo en Reddit que cree que es poco probable que los elementos básicos de la red “se conviertan alguna vez en el factor principal del tráfico orgánico”.

Dijo que no deben ignorarlos, pero Google y otros motores de búsqueda se clasifican principalmente en función de “los resultados más relevantes y de la más alta calidad para las consultas de los usuarios”, no necesariamente lo que se encuentra en core web vitals.

Mejorar los Resultados de Core Web Vitals

Todos los sitios tienen diferentes propósitos por lo que algunos sitios están más cerca de lograr el puntaje perfecto perfecto que otros.

Estos son algunos consejos para mejorar los resultados de tu sitios en los reportes proporcionados por Core Web Vitals.

Optimizar las Imágenes

La optimización de imágenes implica muchas cosas entre las cuales puedo mencionar:

• La carga diferida de imágenes es algo que WordPress ya realiza de forma nativa por lo que no se requiere de un plugin para realizarlo.

• Trata de no agregar imágenes en la sección que se conoce como Above the Fold, especialmente si monetizas con anuncios de Adsense.

• Optimiza las imágenes antes de subirlas a la Librería de WordPress, algo que puedes hacer usando sitios como Imagify

• Agrega imágenes con el tamaño adecuado.

Si las imágenes se agregan below the fold raramente causan un problema, en algunos casos, puede ser que requieras usar un servicio externo como el de un CDN para mejor el tiempo de carga.

Mejorar el Tiempo de Carga del Servidor

Esto no lo vas a lograr usando un pésimo proveedor de hospedaje, mi recomendación es que uses Hospedaje web en la nube.

Yo uso Digital Ocean por medio de Cloudways por que es económico, 10 sitios por $11 dólares

Y en términos de velocidad, Digital Ocean es excelente.

La prueba gratuita de Cloudways dura 3 días y no requiere ingresar los datos de tarjeta de crédito.

Mejorar la Carga de Recursos de Terceros

Esto es algo muy complejo ya que optimizar los recursos de terceros es prácticamente imposible.

Algunas de las cosas que he hecho en mis sitios web es:

• Usar los tipos de letra del sistema y descartar el uso de Google Fonts, si tienes problema para quitar los Google fonts de tu tema, puedes hacerlo por medio de Flying Fonts de WP Speed Matters

• Retrasa la ejecución del JavaScript externo usando Flying Scripts o PerfMatters

• Colocar los anuncios de Adsense de forma manual y que las unidades sean fijas y responsivas, solo usa Auto Ads para los Vignette Ads

Ad Inserter para Mejorar Problemas de CLS

Si eres de las personas que usa los anuncios de Adsense, puedes atrasar la ejecución del JS externo usando Flying Scripts o Perfmatters.

Algo que debes considerar es desactivar la opción que permite que Adsense modifique el tamaño de los anuncios existentes ya que esto causa graves o ligeros problemas de Layout Shifts aunque estés usando unidades fijas de Adsense.

Si todas las unidades de Adsense son fijas, asegurate de reservar el espacio de esos anuncios usando la configuración de Ad Inserter.

Los datos que vas a ingresar en esos espacio son los datos de la unidad que hayas creado.

Las unidades de 300 x 250 son de las más recomendadas y que se ven bien en escritorio y que se adaptan bien en el teléfono.

Caching vs Full Page Caching

Uno de los mejores plugin de caché es WP Rocket ya que está en constante desarrollo y es muy fácil de usar.

Hay otros plugins de caché gratuitos y premium que también puedes considerar,

El problema es que los usuarios de WordPress activan todas las funcionalidades del plugin y no tienen la más mínima idea de lo que esas mejoras de velocidad hacen.

Mi receta para manejar el caché de mi sitio por medio de CloudFlare APO o CloudFlare Full Page Caching

El full page caching de CloudFlare prácticamente elimina la necesidad de tener un plugin de caché

Usar full page caching es algo que solo recomiendo a sitios que prácticamente tiene contenido informativo.

Menos es Más en WordPress

Este es el orden que yo recomiendo para reducir el número de solicitudes y recursos externos que afectan la velocidad de WordPress.

• Una de las mejores recomendaciones es reducir el número de plugins que tienes el sitio a los plugins que son estrictamente necesarios y a los que no carguen JS y CSS en el front-end de tu sitio.

• Si ya hiciste eso, ahora debes de considerar cambiar plugins que causan problemas de velocidad por plugins más livianos. Por ejemplo, Elementor por plugins de bloques de Gutenberg, especialmente si tu sitio no es nada del otro mundo en términos de diseño

• Si ya tienes lo estrictamente necesario y las opciones que tienes son las más livianas, ahora debes usar PerfMatters para remover (unload) JS y CSS que no necesites.

El sitio que me ayudado con este análisis ha sido la cascada de GTMetrix ya que esta permite ver el número de solicitudes, el tamaño de estas para pensar en que debo trabajar.

Esto lo puedes complementar con los reportes de Google Page Insights.

Pequeñas Optimizaciones con PerfMatters

Yo soy un fan de PerfMatters hasta que llegue el momento de no creer necesitarlo.

PerfMatters permite realizar una serie de pequeñas optimizaciones que reduce el número de solicitudes en el sitio.

Esas optimizaciones se pueden realizar por medio de Code Snippets pero si ya estás usando el plugin, prefiero implementar estos cambios desde el plugin.

Los Países con Mala Conexión Pueden Afectar Core Web vitals

Cada vez que haces una prueba de velocidad en sitios como Google Page Insight y GTMetrix, eso simplemente son datos de laboratorio, son datos que se basan en una simulación.

Los datos de campo son obtenidos cuando los usuarios visitan tu sitio usando Google Chrome.

Y si la mayor parte de sus usuarios ve una experiencia lenta, independientemente del motivo, básicamente eso es lo que se aplicará allí. Así que eso es al menos por lo que sé, ese es el punto de vista general allí. Es como si el 90% de sus usuarios provengan de ubicaciones que son lentas y esencialmente el 90% de sus usuarios tienen esta … experiencia subóptima con su sitio, entonces eso es lo que se tendrá en cuenta “.

Countries with Slow Internet Can Affect Core Web Vitals Scores

En el pasado he escrito sobre las muchas maneras de optimizar un sitio de WordPress por lo que te puedo de decir que hay grandes y pequeñas cosas que puedes hacer para acelerar tu sitio de WordPress.

Esta no es una publicación para expandir sobre esas maneras, si no para hablar un poco sobre el dilema, preguntas y posibles debates a la hora de acelerar tu sitio de WordPress.

Si deseas leer sobre mis 24 maneras para acelerar tu sitio de WordPress, esta es una publicación que debes leer.

El Dilema: Acelerar tu Sitio de WordPress

Estas son respuestas a las preguntas mas comunes en terminos de velocidad.

¿Cual es mi Stack de Plugins y Servicios?

Cuando comencé con el tratar de mejorar la velocidad de mi sitio de WordPress, lo que hacia era leer recomendaciones sobre plugins esperando que estos hicieran algo de magia.

En ocasiones esa forma tonta y mágica de optimizar da resultados y en ocasiones no lo hace.

Esto es lo que ha demostrado funcionar por lo que este es mi equipo titular.

• Un servidor de Digital Ocean administrado por Cloudways
• GeneratePress, un tema super ligero
• GenerateBlocks
• Code Snippets: Ahorra el bloat agregando el código que necesitas.
• Red de Contenido Global de CloudFlare (Full Page Caching)

Mi sitio usa Cloud Hosting administrado por Cloudways, por lo tanto nunca lo cuestiono por el simple hecho que es muy económico y rápido.

GeneratePress es uno de los temas más livianos o quizas el más liviano. Puedes considerar Astra, Kadence y Blocksy.

El mismo equipo detrás de GeneratePress es quien esta detrás de GenerateBlocks y por lo tanto no tienen un impacto negativo en la velocidad de mi sitio.

Code Snippets es un plugin super poderoso si deseas ensuciarte las manos un poco con algo de código por lo que puedes personalizar tu sitio, implementar algo de SEO técnico, mejorar la velocidad de este o su seguridad.

Code Snippets me ha ahorrado instalar algunos plugins y salvarme de algo de Bloat.

Ya he hablado sobre Full Page Caching de CloudFlare y como esto permite que tu sitio sea almacenado en los servidores de su Red de Contenido Global por lo que esto puede reducir las solicitudes a tu servidores grandemente

¿Necesito un Plugin de Caché?

Este es mi primero dilema ya que el Full Page Caching de CloudFlare no solo pone a descansar a mi servidor si no que minimiza la labor del plugin de cache.

En buena teoría, nada esta en el caché de CloudFlare hasta que alguien visita tu pagina y en buena teoría, el caché no se empieza a generar hasta el momento que alguien visita tu pagina.

Hasta que el caché en ambos expire en ambos, se generará una solicitud.

Si lo que acabo de decir es cierto, un plugin de caché no es tan necesario a menos que actives el pre-loading, lo que significa que tu plugin de Caché generará el caché de todas las paginas de tu sitio para que cuando CloudFlare las requiera, este pueda obtener la información que necesitas.

Los plugins de caché saben eso por lo tanto ahora se dedican a realizar más cosas que simplemente hacer el caché de las paginas de tu sitio.

WP Rocket es el mejor plugin de caché porque hace mucho más que eso, el plugin continua mejorando conforme pasan los meses y años.

Lo que me gusta del plugin es que por $49 o algunos dolares menos:

• Puedes generar caché
• Puedes hacer pre-loading
• Puedes minimizar y combinar archivos CSS y JS
• Cargar de forma diferida el JS
• Lazy Loading
• Precarga de enlaces
• Complemento de CloudFlare y Varnish

Hay otras funciones más que he resumido en mi reseña sobre WP Rocket si deseas saber más sobre el plugin.

Yo creo que los que usan WP Rocket estan pagando por conveniencia ya que todas esas cosas se encuentran disponibles en plugins gratuitos.

Flying Scripts, WP Fastest Cache, WP CloudFlare Super Page Cache, Lazy Loading por WP Rocket, Flying Pages, Autoptimize.

No quiero decir que tengas que usarlos todos pero si no tienes para comprar WP Rocket o si no quieres pagar por el, hay alternativas gratuitas.

Habiendo dicho eso, WP Rocket tendrá la opción de remover CSS y JS de las paginas que no requieran algunos de esos archvos.

Lo otro que veo posible es la implementación de Full Page Caching desde el plugin sin necesidad de seguir un proceso.

Después que logren esas cosas, no se que más podrán lograr en términos de acelerar tu sitio de WordPress.

¿Debería Usar PerfMatters?

PerfMatters es un plugin que tiene el objetivo de acelerar tu sitio de WordPress por medio de pequeñas optimizaciones.

Este plugin se puede comparar con Asset CleanUp, Gonzales y Clearfy.

La esencia de estos plugins es remover el CSS y el JS sin utilizar de paginas y entradas pero se hacen acompañar de pequeñas optimizaciones.

¿Cual es la Forma Facil de Optimizar?

Lo único claro que tengo además de mi equipo titular de plugins y servicios es que debes probar las optimizaciones que haces.

Debes usar GTMetrix para entender el beneficio de la optimización que estas realizando ya que hay implementaciones que generan Bloat, otras entregan lo que prometen y otras no realizan una gran mejora.

Los plugins de velocidad trabajan por ser el más conveniente y quizas la solución plug & play para quienes creen en la magia o para quienes desean un sitio rápido sin entender como lograrlo.

Habiendo dicho eso, todo se reduce a gustos, si no deseas bloat, lo mejor es usar snippets de código hasta donde tu habilidad te lo permita o hasta el punto donde sea tan complicado.

Si la implementación de los snippets de código llega a su limite puede ser que el plugin más minimalista con el mayor numero de opciones sea la mejor opción o el que no implique un gasto recurrente.

El punto es que nunca fue tan fácil tener un sitio tan rápido de WordPress. El problema es sobre cual debe ser tu equipo titular de velocidad.

Artículos sobre WordPress

Estos son algunos artículos relacionados con el tema de la velocidad en WordPress

• No Borres las Tablas de Contenido en WordPress [SEO]
• ¿Cambiar el Tema de WordPress Afecta el SEO?
• 12 Plugins de Seguridad para WordPress
• Precargar Enlaces en WordPress: ¿Debería Hacerlo?
• Full Page Caching de CloudFlare: ¿Indispensable?
• Optimizar el CSS de la Librería de Bloques de Gutenberg
• Optimizar Vídeos en WordPress Facilmente