WPO (Web Performance Optimization) – Optimización de Rendimiento Web

Qué es WPO

Conjunto de técnicas y estrategias utilizadas para mejorar el rendimiento y la velocidad de carga de un sitio web.

Para qué utilizar WPO

• Mostrar contenido rápido y optimizado
• Ofrecer UX experiencia de usuario óptima
• Realizar consumo eficiente de los recursos

Por qué utilizar WPO

• Porque los gestores de contenido como WordPress son lentos
• Porque los usuarios están acostumbrados a grandes empresas con web rápidas y pretenden lo mismo de una pequeña con menos contenido
• Proque mejora el posicionamiento en los motores de búsqueda de google (SEO)
• Porque reduciremos los recursos limitados del servidor

Cómo se mide un WPO

• Primero a través de la experiencia del usuario (UX – User Experiencie)
• Herramientas que analizan parámetros y métricas (pagespeed, gtmetrix, etc) lo que en Google se denomina Core Web Vitals

Qué métricas miden las CORE WEB VITALS

Desde que se produce el renderizado de una web o carga inicial total:

• Largest Contentful Paint (LCP): mide el rendimiento de carga de una web, debe ser menor a 2.5 segundos
• First Input Delay (FID): mide el tiempo que tarda un sitio en responder a una acción del usuario, debe ser menor a 100 milisegundos
• Cumulative Layout Shift (CLS): mide la estabilidad visual o si objetos se desplazan durante la carga (puede provocar clicks erróneos que frustran al usuario), debe tener una puntuación menor de 0,1

Qué rendimiento debe tener una página web

Una web es aprobada si cumple con los objetivos recomendados en el percentil 75 para las tres métricas anteriores

Cómo aplicar WPO en WordPress

Para optimizar una web en WordPress debemos tener en cuenta

Hosting (servidor de alojamiento)

• que tenga Discos SSD con espacio suficiente y bases de datos ilimitadas
• últimas versiones del software base (Apache, NginX, PHP,  MySQL y MariaDB)
• protocolo HTTP/2 o HTTP/3 y herramientas cron, gzip, seguridad y de optimización

CDN (Red de distribución de contenido)

servidores repatidos a nivel mundial que hacen copias de contenidos estáticos del sitio web y las sirven rápidamente a los visitantes del sitio web desde el punto de la CDN más cercano al usuario

Caché

• Standard: es una memoria que almacena copias estáticas de consultas dinámicas de un sitio y que permiten al siguiente visitante acceder a esa misma página sin realizar una nueva petición al servidor
• Dinámica: almacena las consultas en la memoria del servidor lo que es más rápido
• Memchché: caché de objetos persistente, un tipo de caché especial que reutiliza las consultas más habituales a la base de datos

Selección del Tema

elegir livianos, rápidos y para maquetadores optimizados, no más de 200kb por página, no debe cargar fuentes web, y si lo hace ofrecer la posibilidad de precargarlas y almacenarlas en caché

Instalación de Plugins

aplicaciones que se ejecutan 24 horas al día, 365 días al año, para ofrecer de manera permanente funcionalidades en tu web, y siempre están consumiendo recursos y aumentando el peso de tus páginas

Precarga de Fuentes

se cargan desde servidores externos, y deberemos añadir los dominios desde donde se descarguen, normalmente el servidor de Google Fonts o puedes utilizar servicios gratuitos que realizan el reeemplazo directo y aceleración de fuentes de Google como BunnyCDN

Optimización de Imágenes (webp)

Un modo «elegante» de usar imágenes optimizadas es usar nuevos formatos, distintos de PNG o JPEG, como son WebP o AVIF

Minificado (html/css/js)

analiza todo el código generado en tus páginas y elimina espacios en blanco, comentarios innecesarios en el código, tabulaciones, y todo aquello que no sea exclusivamente el código necesario para mostrar el contenido de la página

Carga Diferida de Medios (lazy load)

solo se mostrarán las imágenes o medios necesarios para la parte visible inicialmente en la pantalla del navegador del visitante, y empezará a cargarse el resto, cuando WordPress detecte que el usuario empieza a navegar para ver más elementos de la página

Precarga de Recursos Externos

preload en nuestra web de recursos externos, como scripts de publicidad, códigos de newsletter, píxeles de redes sociales, etc

Bloqueo de Renderizado

cuando plugins o servicios añaden sus códigos y scripts en la cabecera de todas las páginas, y fuerzan a que, antes de mostrarse el contenido del sitio, se carguen todos esos recursos, muchas veces ralentizando innecesariamente la visualización por eso debemos exlcuir el JS que bloquea el renderizado

CSS crítico

los temas y plugins cargan el CCS (hoja de estilos) necesario para toda la web y se resuelve utilizando un plugin de optimización que analizará y extraerá primero qué CSS hace necesario para la visualización correcta de cada página individual, cargandon el resto de modo aplazado o solo cuando sea necesario

Carga Condicional

por ejemplo si instalas un plugin de formularios de contacto para añadir un formulario en una sola página, el plugin no «sabe» dónde vas a añadirlo, así que cargará sus estilos y códigos JavaScript necesarios en todas las páginas por lo que debemos optimizar su carga según su uso

Optimizar Base de Datos

activar y desactivar temas y plugins generan bases de registro que debemos limpiar, optimizar y eliminar además de borrar datos transitorios, borradores y otros elementos temporales de la base de datos

API de Heartbeat

desactivar el servicio interno de WordPress que realiza comprobaciones de manera frecuente sobre tu instalación, haciendo montones de consultas al archivo admin-ajax.php que ralentizan la carga

Cron

servicio que «vigila» la actividad de tu sitio WordPress es el WP Cron, activo por defecto, y que ejecuta acciones programadas, por ti o automáticas, como comprobación de actualizaciones, publicación de entradas programadas, renovación de pedidos, etc por lo que deberíamos reducir su actividad

Recursos Innecesarios

desactivar o borrar (plugins sin usar o temas adicionales)