Consejos para mejorar los principales elementos vitales de su sitio web de WordPress

Google tiene una forma de crear una ola de pánico entre los diseñadores web y los propietarios de sitios web. Cuando hacen un cambio en su algoritmo de búsqueda, las personas comienzan a luchar para ponerse al día. Es fácil entender por qué. Nadie quiere que su clasificación SEO sufra.

Entonces, cuando se anunciaron las métricas de Core Web Vitals, la respuesta fue bastante predecible. Como estos cambios se basan en el rendimiento del sitio, nuestra atención se ha centrado en garantizar que los tiempos de carga sean ultrarrápidos.

Pero no siempre es sencillo. Los sitios web que ejecutan un sistema de administración de contenido (CMS) como WordPress pueden ser especialmente desafiantes. Hay muchos factores en juego. Por lo tanto, mejorar el desempeño requiere un enfoque múltiple.

¿Donde empezar? Consulte nuestra guía para aumentar la puntuación de Core Web Vitals de su sitio web de WordPress.

Implementar almacenamiento en caché

Una de las formas más sencillas de aumentar la velocidad de un sitio web de WordPress es implementar el almacenamiento en caché. En muchos casos, un sitio que antes era lento se volverá significativamente más rápido con este solo paso. Esto es cierto incluso en alojamientos relativamente baratos.

De forma predeterminada, las páginas y publicaciones de WordPress deben recuperar el contenido y la configuración de la base de datos del sitio. Esto lleva tiempo. La memoria caché, por otro lado, ofrecerá contenido como archivos HTML estáticos, eliminando la necesidad de una llamada a la base de datos. Con el intermediario (es decir, la base de datos) fuera del camino, seguirán tiempos de carga más rápidos.

Algunos paquetes de alojamiento, en particular el alojamiento administrado de WordPress, incluirán caché basada en servidor. Esta suele ser la mejor opción, ya que requiere muy poco de los diseñadores web y funciona bastante bien. Es posible que deba limpiarse de vez en cuando. De lo contrario, es una experiencia de no intervención. Y se puede combinar de manera efectiva con un complemento para mejorar aún más la velocidad.

Incluso si su host no proporciona almacenamiento en caché en el nivel del servidor, aún puede optimizar el rendimiento a través de un complemento. Los complementos de almacenamiento en caché varían en alcance, complejidad y precio. Pero sí brindan resultados tangibles cuando se trata de mejorar los tiempos de carga. Eso, a su vez, también es un impulso positivo para Core Web Vitals.

Aplazar la carga de secuencias de comandos y estilos de bloqueo de procesamiento

Al probar el rendimiento de su sitio web en Google PageSpeed ​​Insights, el tema de los recursos que bloquean el renderizado parece surgir mucho. Estos son los scripts y estilos que no se consideran "críticos", lo que significa que no son necesarios para representar el contenido de la página "en la mitad superior de la página".

Estos recursos pueden obstaculizar tiempos de carga más rápidos. Específicamente, afectan la puntuación de "Largest Contentful Paint (LCP)" en Core Web Vitals. Este es el tiempo que tarda en cargarse el área de contenido principal de una página. Reducir LCP es, bueno, vital.

Una forma de mejorar la situación es retrasar (o diferir) la carga de varios elementos de contenido (imágenes, videos, texto a nivel de bloque). Esto garantiza que solo se carguen primero los scripts y estilos necesarios, mientras que todo lo demás se carga después.

Junto con la minificación, muchos complementos de optimización/caché de WordPress también incluyen este tipo de funcionalidad. Sin embargo, puede requerir un poco de experimentación, ya que aplazar el recurso equivocado puede ser problemático.

Asegúrese de probar los cambios que haya realizado y compruebe si hay errores en la consola del navegador. Una vez que encuentre la configuración correcta, la cantidad de recursos que bloquean el renderizado en su página debería reducirse significativamente.

Optimizar Imágenes

El uso generalizado de grandes imágenes de héroes y controles deslizantes complejos solo se suma al desafío de la optimización del rendimiento. Estos activos pueden verse bien, pero pueden sumar fácilmente megabytes de datos. Eso no le dará una calificación aprobatoria para Core Web Vitals, particularmente en dispositivos móviles.

Afortunadamente, hay un par de maneras de aligerar la carga. En primer lugar, deshágase de las imágenes que considere innecesarias. La eliminación de incluso una imagen grande puede marcar la diferencia.

El resto de tus imágenes se pueden optimizar. Esto reducirá el tamaño de sus archivos y disminuirá el impacto que tienen en el tiempo de carga.

La forma de optimizar la imagen depende de usted. Puede descargar una copia de sus peores infractores y comprimirlos usando su editor de imágenes favorito, luego volver a cargarlos en su sitio web. O bien, puede automatizar el proceso con un útil complemento de medios de WordPress.

Imágenes receptivas

Para los usuarios de dispositivos móviles, WordPress incluye la capacidad de mostrar imágenes receptivas a través srcset . De hecho, automáticamente hará el trabajo sucio por usted en las imágenes colocadas dentro de su contenido. Esto es increíblemente valioso, ya que evita que los medios masivos del tamaño de una computadora de escritorio ralenticen la experiencia del usuario móvil. Para las imágenes fuera del área de contenido principal, es posible que deba realizar un trabajo personalizado para implementar esta función.

Formatos de imagen modernos

También vale la pena mirar los formatos de archivo que está utilizando. Por ejemplo, el formato WebP de Google a menudo puede reducir el tamaño del archivo manteniendo la calidad de la imagen. Tenga en cuenta que algunos formatos novedosos no son compatibles con los navegadores heredados (ejem, IE), por lo que pueden ser necesarias versiones alternativas. Los complementos también pueden ayudar con eso.

Lazy Load todas las cosas

La funcionalidad de carga diferida solo carga elementos una vez que están en la ventana gráfica del navegador. Al retrasar la carga de imágenes, iframes y otro contenido de terceros (como widgets de redes sociales), puede concentrar los recursos en los elementos que los usuarios verán primero.

WordPress ya implementa la carga diferida nativa basada en navegador para imágenes. Cuando agrega una imagen a una página o publicación, el atributo loading="lazy" se coloca dentro de la etiqueta <img> . Es decir, siempre que la imagen incluya atributos de alto y ancho.

Esto es genial, pero ¿qué pasa con otros elementos, como videos o iframes? Estos elementos también pueden sobrecargar una página cuando se cargan desde el primer momento.

Los iframes ahora se cargan de forma diferida de forma predeterminada, por lo que no se preocupe. Algunos elementos más complejos pueden requerir un código personalizado o un complemento para implementar esta funcionalidad.

Limpiar el desorden

Con el tiempo, incluso un sitio de WordPress bien mantenido puede volverse desordenado. Una base de datos obstruida, complementos sin usar que aún están activos, un tema inflado con funciones que no está usando: sucede. Y también puede arrastrar hacia abajo su Core Web Vitals.

Por eso es importante ordenar de vez en cuando. La base de datos de su sitio puede optimizarse manualmente o configurarse para que lo haga periódicamente. Los complementos no utilizados se pueden desactivar y desechar. Los temas se pueden simplificar o reemplazar con algo mejor.

Estudie qué está ralentizando su sitio web, encuentre a los culpables y trátelos. Es posible que se sorprenda de la gran diferencia que esto puede hacer.

Mejore los principales datos vitales de su sitio web

Core Web Vitals complica el ya complicado proceso de optimizar el rendimiento del sitio web de WordPress. Incluso un sitio web que obtenga una buena puntuación en otras métricas de rendimiento puede quedarse corto en esta área. Esto brilla sobre todo en las pruebas móviles.

La buena noticia es que hay muchas pequeñas cosas que los diseñadores pueden hacer para ponerse al día. La implementación de la memoria caché establece una gran base y proporciona un impulso inmediato. A partir de ahí, se trata de reducir el tamaño de los archivos y cargar estilos y scripts en orden de importancia.

Llevando las cosas aún más lejos, también tiene sentido ajustar el CSS de su sitio con Core Web Vitals en mente. Esto puede ayudar con el temido puntaje de cambio de diseño acumulativo (CLS) y reducir la hinchazón.

En general, las cosas que son buenas para el rendimiento también lo son para Core Web Vitals. Las puntuaciones pueden mejorar con bastante rapidez. Solo sepa que se necesitará algo de prueba y error para resolver algunas de esas deficiencias individuales.

El objetivo general es garantizar que solo se carguen los elementos esenciales cuando un usuario visite su sitio web. Hacerlo hará felices tanto a los visitantes como a Google.