Cómo optimizar mi WordPress

Tener un sitio optimizado, con buena usabilidad y velocidades de carga rápidas, es importantísimo para el SEO. El pasado mes de junio de 2021 Google anunció que agregaría como nuevo factor para el ranking de los resultados de su buscador las «Web Vitals«, las cuales son un conjunto de métricas de propuestas por esta compañía para medir la calidad de la experiencia de usuario en la web. En este artículo explicaremos como optimizar una Web desarrollado con WordPress para que cumpla las métricas definidas en la herramienta PageSpeed Insights como Web Vitals.

 La calidad de la experiencia del usuario es clave para el éxito a largo plazo de cualquier sitio en la web.

Google

¿Que es PageSpeed Insigts y que métricas puedo medir con ella?

PageSpeed ​​Insights (PSI) es una herramienta desarrollada por Google que analiza el contenido de una página web y luego genera sugerencias para que esa página sea más rápida. Estas sugerencias son agrupadas en un conjunto de métricas, de las cuales algunas se clasifican como»Web Vitals».

Las métricas que se pueden medir son las siguientes:

• FCP (First Contentful Paint): Mide cuánto tiempo le toma al navegador pintar el primer texto o imagen.
• SI (Speed Index): El índice de velocidad muestra la rapidez con la que se rellenan visiblemente los contenidos de una página.
• TTI (Time to Interactive): El tiempo para interactuar (TTI) es la cantidad de tiempo que tarda la página en volverse completamente interactiva. Medirlo es importante porque algunos sitios optimizan la visibilidad del contenido a expensas de la interactividad. Esto puede crear una experiencia de usuario frustrante: el sitio parece estar listo, pero cuando el usuario intenta interactuar con él, no sucede nada.
• TBT (Total Blocking Time): Mide la cantidad total de tiempo que una página está bloqueada para que no responda a la entrada del usuario, como los clics del mouse, los toques de la pantalla o las pulsaciones del teclado.  Se calcula mediante la suma de todos los períodos de tiempo entre FCP y TTI, cuando la duración de la tarea excedió los 50ms.
• LCP (Largest Contentful Paint): Mide cuánto tiempo le toma al navegador pintar el texto o imagen más grande. Es considerado una Web Vital. Para proporcionar una buena experiencia de usuario, el LCP debe producirse dentro de los 2,5 segundos desde que la página comienza a cargarse.
• CLS (Cumulative Layout Shift): Se refiere al cambio acumulativo en el diseño, mide la estabilidad visual. Para proporcionar una buena experiencia de usuario, las páginas deben mantener un CLS de menos de 0,1. Es considerado un Web Vital.
• FID (First Input Delay): se refiere a la demora para la primera entrada, FID por sus siglas en inglés, mide la interactividad. Para proporcionar una buena experiencia de usuario, las páginas deben tener un FID de menos de 100 milisegundos. Es considerado un Web Vital.

¿Como mejorar mi puntuación de PageSpeed Insights en Worpress?

Como desarrollador Web me interesa mucho que mis sitios estén bien optimizados. A continuación les comparto las cosas que tuve en cuanta para lograr tener una puntuación PSI de 100 para Tecnoblog.org

1. Utilizar un proveedor de Host que tome en serio la optimización de WordPress

Un host de WordPress, es una compañía que almacena todos los datos de su sitio web. Usted se inscribe a un plan y todas sus imágenes, contenido, videos, etc., serán almacenados en un servidor que se encuentra en el centro de datos del host. Dado que nuestro sitio estará sirviendo nuestro contenido desde el host, es necesario contar con uno que provea nuestro contenido de la forma más optimizada posible.

Existen un gran número de hosts para WordPress. Lo ideal sería utilizar un Host prémium como Kinsta o Gridpane, los cuales están superoptimizados, pero son un poco caros. Si no tenemos un presupuesto tan alto lo ideal es realizar una búsqueda para encontrar el que más se acerque a nuestras necesidades. Un buen host para WordPress debe tener:

1. Una versión estable y actualizada de PHP: Esto es muy importante dado que WordPress está desarrollado con PHP. Mi recomendación es utilizar un hosting que provea una versión de PHP superior a 7.4. De esta forma contaremos con las últimas mejoras que se les ha hecho a este lenguaje y nuestra web estará más optimizada.
2. Un sistema de Gestión de Caché: La caché es una copia estática de nuestro contenido. Cuando llega una petición al servidor, se sirve el contenido que está en la caché en vez de buscarlo en la base de datos. Ella mejora considerablemente los tiempos de respuesta de nuestra Web y como consecuencia nuestra puntuación en PageSpeed ​​Insights (PSI). Cuando empleamos la caché tenemos que garantizar que el contenido estático esté actualizado, o sea, la cache sebe regenerarse si se agrega, modifica o elimina una publicación, por lo cual es crítico que nuestro hosting tenga un buen sistema de gestión de caché.
3. Seguridad garantizada: Si nuestra web es vulnerable a ataques de ciberseguridad o a virus, de seguro que puede suspender sus servicios o brindar contenido no seguro. Lo cual está muy lejos de ser optimizado

Tecnoblog.org utiliza el host SiteGround. Hosting que no es tan caro y provee todas las funcionalidades que necesito para que mi Web esté lo más optimizada posible.

2. Utilizar o desarrollar un tema de WordPress pensado en la optimización

Debido a la enorme cantidad de temas que hay disponible para WordPress es muy común que cuando creamos una Web utilicemos alguno desarrollado por un tercero. Si ese es el caso, antes de instalarlo, debemos revisar si sus estilos y funcionalidades están optimizadas.

En ocasiones instalamos un tema que es muy bonito y con funcionalidades increíbles, pero es extremadamente lento, lo cual no es bueno para la salud de nuestra Web ni para nuestra puntuación PSI. Es por ello que te recomiendo que siempre chequees las reseñas que les han hecho otros usuarios al tema y sobre todo investigues como se optimizan sus recursos.

Por otra parte, si tienes conocimientos de programación y eres de los que les gusta desarrollar sus propios temas, te dejo algunas recomendaciones para que lo crees de la forma más optimizada posible y tengas una buenapuntuación PSI:

1. Comprime tus CSS y JS: De esta forma el tamaño de tus archivos será más pequeño y los valores de las métricas PSI serán reducidos considerablemente.
2. Implementa algún mecanismo para cargar solo los CSS y JS necesarios en cada página: Es común que nuestro sitio desarrollado con WordPress tenga diferentes post-type (tipos de publicación) con diferentes plantillas. Dado que estas plantillas pueden ser diferentes, te recomiendo asegurarte de solo se carguen los recursos necesarios para cada plantilla. Esto reducirá la cantidad y el tamaño de CSS y JS que utilizará la página, mejorando tu puntuación PSI
3. Agrega dimensiones a las imágenes en las etiquetas <img> para que el navegador reserve el espacio necesario para la imagen mientras se cargue la página y evitar así el no deseado Cambio de diseño acumulativo (CLS)
4. Asegúrate de utilizar imágenes con buena calidad y que no sean muy grandes, sobre todo en dispositivos móviles pues afectan considerablemente los tiempos de carga. Si tu Web tiene una Sección con una Imagen Destacada al Inicio(comúnmente conocida como Hero Section), es crítico que optimices esa imagen, puedes usar reglas CSS para reemplazar la imagen de fondo en dispositivos móviles por una más pequeña o por un gradiente de colores, lo cual mejora considerablemente el CLS y LCP de tu página.

3. Utilizar un Plugin de optimización

En ocasiones es complicado y consume mucho tiempo optimizar a mano nuestro Sitio Web, sobre todo si utilizamos un tema desarrollado por un tercero. Es aquí donde nos ayudan los Plugins de Optimización. Estos plugin nos permiten sin mucho esfuerzo:

1. Optimizar CSS y JS al comprimirlos y cargar solo los archivos necesarios.
2. Optimizar la descarga de imágenes y videos.
3. Pre-cargar las tipografías de letras que esté utilizando el sitio para mejorar los tiempos de carga

Puedes encontrar más información de estos plugins en este enlace.

Aqunque estos plugins son muy buenos no es recomendable utilizar varios que hagan las mismas funciones pues pueden tener conflictos entre ellos, trayendo como consecuencia error de funcionamiento en nuestro sitio.

4. Administrar el DNS con Cloudflare

No se puede hablar de optimización y rendimiento sin mencionar a Cloudflare. Cuando administramos nuestro DNS con Cloudlfare tenemos de forma gratis:

1. Protección contra Ataques de Denegación de Servicios (DDoS)
2. CDN con equilibrio de carga global, el cual nos permite servir nuestro contenido desde el servidor DNS más cercano al destino
3. Certificado SSL Universal

Cloudflare también brinda en sus planes de pago un gran número de funcionalidades de optimización que nos permiten tener un sitio que cumple con todas las Web Vitals como por ejemplo APO Cache, la cual es el mejor sistema de caché existente para WordPress, la herramienta Polish para Optimizar las Imágenes en la caché del DNS, entre muchas otras.

Resumiendo

Lo principal para que nuestro WordPress sea rápido, es optimizar nuestros recursos (CSS, JS, Imágenes) y tener un buen sistema de caché, que puede gestionarse por Nuestro Hosting, por nuestro Proveedor de DNS o utilizando algún plugin de WordPress.

Si necesita un Profesional con experiencia y conocimiento sobre últimos estándares de calidad para ayudarlo a Crear su Página Web o Tienda Online para su negocio, no dude en contactarme a [email protected]