Para aquellos familiarizados con la fotografía, cuando ajustamos la velocidad de disparo, entran en juego dos diales: la sensibilidad (la ISO speed) y el anillo de abertura. Las combinaciones son muchas pero el escenario de resultados es bastante predecible (aunque hay que decirlo, un buen resultado técnico no es suficiente para una buena fotografía).
Pero cuando intentamos ajustar la velocidad de un web site WordPress, no ocurre lo mismo. La lista de «ajustes» que afectan la velocidad es bastante más larga y el escenario en el que nos desenvolvemos no es en absoluto predecible.
Tabla de contenidos
- Introducción ¿Quién no quiere una web WordPress rápida?
- Las etapas de carga de página a analizar frente a un WordPress lento
- El camino hacia un alojamiento WordPress rápido
- ¿Cómo optimizar WordPress y el servidor que lo aloja?- el Checklist
- Conclusión
Introducción ¿Quién no quiere una web WordPress rápida?
En este post Parte 1/2, aprenderemos «Quién es Quién» en términos de velocidad, con qué herramientas medir y luego analizaremos los parámetros que afectan la velocidad del lado «servidor»: El lado que implica a nuestro proveedor de alojamiento y al motor WordPress encargado de construir nuestras páginas web.
En la Parte 2/2 –Mejorando la descarga de contenido y pintado de Página de nuestro WordPress –, nos trasladaremos al lado «cliente» para enfrentarnos al mundo del –cómo se reciben los contenidos– y del –cómo los digiere un navegador–.
El objetivo de ambas publicaciones es evitar caer en el «ensayo técnico» o en la superficialidad de un listado de plugins y aprender a identificar y controlar los puntos clave causantes del 95% de los problemas de rendimiento de nuestro WordPress.
Las etapas de carga de página a analizar frente a un WordPress lento
Antes de empezar a jugar con los ajustes de WordPress, necesitamos entender las bases de la velocidad de una página web y cómo poder medirla.
El auténtico camino para saber si una página WordPress es rápida es medirlo todo de extremo a extremo: desde el lado server al usuario, lo que llamamos –Tiempo de carga– o «Browser page load time».
El tiempo de carga o Browser page load time
El –Tiempo de carga– que percibimos como usuarios es la suma de cuatro fases diferenciadas. En cada una de estas fases intervienen factores distintos, por eso suelen medirse y tratarse por separado.
En éste gráfico de Newrelic es fácil visualizar la separación:
Tiempo de Carga graficado con Newrelic monitor
Es importante como mínimo saber que existe esta división (en negrita está destacada la tarea principal) pues son términos que mencionaremos más adelante.
- Web application (Aplicación web): El tiempo que emplea el servidor para construir la página web que queremos ver.
- Network (Red): La fase Red incluye tanto los tiempos de petición, transmisión como los dedicados a redireccionamientos.
- DOM processing: (proceso de DOM) El tiempo invertido por el navegador en interpretar el código recibido convirtiéndolo en una estructura DOM, junto al tiempo destinado a interpretar y ejecutar los scripts síncronos.
- Page rendering (Pintado de la página): En esta fase el navegador ya sabe lo que tiene que mostrar y empieza a pintar contenidos. En esta fase se incluyen los tiempos de descarga de scripts y recursos estáticos. A partir de aquí pueden sucederse cargas de contenidos asíncronas, que el usuario percibirá pero que no todas las herramientas de medición capturan.
¿Pero quién arruina la velocidad de mi WordPress?
WordPress es una herramienta de doble filo. Su facilidad para construir y expandirse puede convertirse en un problema de velocidad si no prestamos atención. Podemos tener el mejor y más caro de los servicios de hosting y arruinar nuestro Page load time por tener mal resuelto los tiempos de carga en el Navegador.
Éste es precisamente el ejemplo mostrado en la anterior gráfica: se invierte 1 segundo en las fases web application y red, pero se necesitan 4 segundos en el navegador!!!
Pon atención a todas las fases del tiempo de carga.
Si quieres una web WordPress realmente rápida, tendrás que poner atención a todas las fases de velocidad del Tiempo de Carga.
NOTA: En esta primera parte, no entraremos a analizar la calidad, cantidad o estructura del contenido de una web ni las técnicas para minimizar el impacto de distribución utilizando CDNs.
¿WordPress es lenta para todo usuario o solo al administrar desde wp-admin?
No debemos olvidar que en WordPress hay dos entornos, luego dos velocidades:
- La velocidad que como usuarios percibimos al navegar por nuestro web site,
- Y la velocidad que como administradores percibimos al gestionar nuestro WordPress desde el panel de administración.
Cada una de estas «velocidades» podrá tener un tratamiento diferenciado. Usaremos pués los términos «velocidad de usuario» y «velocidad admin» para referirnos a cada una de ellas.
El camino hacia un alojamiento WordPress rápido
En este post trabajaremos con las velocidades Web application y Network (red)
Deberemos identificar los cuellos de botella de ambas velocidades centrando la atención en estos tres actores involucrados:
- El set de Plugins y el Tema WordPress: principales responsables de la carga de trabajo que entregamos a nuestro servidor para que éste lleve a cabo la fase deconstrucción.
- Nuestro servidor de hosting: responsable de la construcción de las páginas (Web Application).
- La red: involucrada en la recepción de la petición y distribución de la página y sus contenidos (Network speed).
TTFB, una métrica para medir tu alojamiento
!Tenemos suerte! Disponemos de una simple métrica, muy buena, para medir la suma de las fases de velocidad Web application y red, es el TTFB – Time to first byte. (Transcurso de Tiempo del Primer Byte).
TTFB nos mide el tiempo que empleamos en contactar nuestro servidor (latencia de la red), más el empleado en la construcción de la página (Web Application)
Según la Wikipedia: TTFB mide la duración desde que el usuario o cliente realiza una solicitud HTTP hasta el primer byte de la página que recibe el navegador del cliente.
Es bueno manejarse con soltura con esta métrica. El TTFB nos ayudará a comparar de forma correcta configuraciones de servidor de red. Es un aliado para poder evaluar si las cosas van bien del lado proveedor de alojamiento.
¿Qué es un buen TTFB cuando medimos la velocidad de usuario WordPress?
TTFB tiene un fuerte impacto al analizar la velocidad de usuario de WordPress con Google Page Speed o Google Lighthouse:
| Time To First Byte en milisegundos | Impacto en Google Page Speed. |
| 10 to 200 ms | Recomendado por Google |
| 200 to 400 ms | Correcto |
| 400 to 600 ms | Lento |
| 800 to 1000 ms | Malo |
| 1000 ms o más | Google lo considera inaceptable. |
¿Qué es un buen TTFB al medir la velocidad de administración de WordPress?
Cuando trabajas en el lado del administrador de WordPress, las cosas son diferentes, auí ya no es importante la percepción de . WordPress en wp-admin necesita más recursos del servidor.
Las tareas de edición de contenido y administración de WordPress se realizan a una velocidad cómoda cuando tu TTFB es inferior a los 500ms.
Usando el navegador para medir el TTFB
No es necesario instalar ninguna herramienta, la mayoría de navegadores permiten medir el TTFB desde su sección «developers». En nuestro caso usaremos el panel Developers Tools de Chrome y en concreto la pestaña Network.
(En la documentación oficial encontrareis más información).
Para acceder al panel seleccionamos:
- «Menú→View→Developer→Developer Tools. o
- la combianción de téclas «⌥+⌘+I» en OSX Mac o
- «F12+Ctrl+Shift+I» en Windows.
Nota: también puedes abrir el panel desde el menú de puntos situado arriba a la derecha:
Luego, tras abrirse el panel seleccionamos la pestaña Network:
En la columna de la izquierda aparecerán filas para cada una de las peticiones que componen una página. No hay que alarmarse pues para empezar con la página principal tendremos suficiente. Es la primera petición y la que desencadena las restantes. En la siguiente captura de pantalla vemos resaltada la petición de nuestra propia página web wetopi.com:
En la captura el TTFB es de 31.57 ms. Éste es un excelente resultado. Más adelante detallamos el checklist a seguir para conseguir un resultado como este.
En la siguiente captura medimos la «admin speed«. Éste TTFB es bastante mayor 327.38 ms. Es la espera que sufrimos constantemente cuando pulsamos el botón «Guardar» mientras editamos artículos desde nuestro Panel WordPress.
En el Panel Administración de WordPress, no podemos aprovechar la mayoría de técnicas de cacheado (prefabricación de páginas y consultas). Aquí necesitamos que brille la potencia de nuestro servidor y sobretodo disponer de un WordPress ligero.
¿Cómo optimizar WordPress y el servidor que lo aloja?- el Checklist
Sigue estos pasos para obtener un WordPress rápido durante las etapas de aplicación web y red.
1 Valida la latencia de tu hosting
La latencia es la parte del TTFB relacionada con la red; es el tiempo en milisegundos que tarda una unidad mínima de datos en desplazarse entre un origen y un destino.
IMPRESCINDIBLE: una latencia inferior a los 100ms dentro del continente origen, y menos de 200ms en continentes remotos.
Puedes construir tu mapa de latencias
RECOMENDADO: La latencia esta estrechamente ligada a la infraestructura de tu proveedor. Si tienes problemas de latencia, a) comunícaselo a tu proveedor, b) busca proveedores de hosting que trabajen en el continente donde tu audiencia reside y traza un mapa de latencias de cada uno de ellos.
2 Aligera tu WordPress
El más común de los problemas cuando estamos frente a un elevado TTFB es un WordPress cargado de plugins.
RECOMENDADO: Instala solo los necesarios. Lanzar una cifra de «qué son muchos plugins» no es hacer ciencia, pero sí que podemos levantar una «luz de alarma» si nos enfrentamos a más de 20 plugins. Dan Norris, co-fundador de la empresa de servicios de soporte WordPress «WP Curve» (adquirida por GoDaddy), suele recomendar no sobrepasar los 20. En wetopi estamos usando 16 plugins!
RECOMENDADO: para medir el impacto de los plugins que tienes instalados utiliza de forma temporal el plugin P3 Plugin Profiler o Query Monitor.
IMPRESCINDIBLE: Valida el tema. Muchos temas de «propósito general» suelen venir con infinidad de opciones. Lo que a priori parece una ventaja, suele tener en la mayoría de los casos una contrapartida: bajo rendimiento. Una simple prueba para ver si tu tema es el causante de bajo rendimiento es comparar el TTFB de una de las páginas de tu site usando uno de los temas por defecto de WordPress.
PRECAUCIÓN: Antes de realizar experimentos con tu web site production, haz una copia de seguridad, o mejor aún: experimenta siempre en un clon o en un entorno «sandboxing».
Recuerda que cada plugin o tema que añadimos implica cambios en la base de datos y en la estructura de archivos. Y hay que tener presente que el proceso inverso «desinstalar», no siempre volverá a dejar nuestro WordPress en el mismo estado en el que estaba inicialmente.
!El sandboxing o trabajar en clones no es perder el tiempo!
Hoy en día experimentar sobre un clon del site producción está al alcance de cualquiera. Éste es uno de esos servicios añadidos que deberemos siempre exigir a cualquier hosting especializado en WordPress.
3 Optimiza la base de datos
Si nuestro WordPress lleva tiempo en marcha, es imprescindible optimizar y «limpiar» la base de datos.
RECOMENDADO: Optimiza la base de datos. Si no te sientes cómodo administrando la base de datos, puedes ayudarte de plugins como WP-Optimize. Éste plugin te asistirá en el proceso de optimizar tablas de datos y en la limpieza de registros «prescindibles». En este tutorial encontraremos un «paso a paso» detallado. Ah! no olvidemos desactivar o eliminar este plugin tras realizar las tareas de limpieza.
4 Utiliza un servidor veloz
Éste es otro de los puntos con impacto en el TTFB: el Hardware y el software encargados de construir y servir las páginas de nuestro WordPress
IMPRESCINDIBLE: un hosting con recursos reservados: Por ejemplo en wetopi.com usamos contenedores. El uso de contenedores permite ofrecer aislamiento y reserva de recursos tal como haríamos con máquinas virtuales, reduciendo los costes de mantenimiento y administración. Es ahí en realidad donde recae el verdadero coste de los servidores dedicados.
IMPRESCINDIBLE: un alojamiento con SSD (Solid State Disks).
EVITAR: un hosting con SSD pero sin RAID o sin solución equivalente para disponer de redundancia. Sí, los SSD son más fiables pero también fallan.
RECOMENDABLE: Un servidor de páginas Nginx configurado para servir páginas WordPress. Nginx bien sintonizado junto a PHP-fpm puede sin problemas ir el doble de rápido de lo que iría una configuración estándar Apache+mod_php.
IMPRESCINDIBLE: revisa la configuración de PHP, es imprescindible tener activado el sistema de cache Opcache o equivalente, más información. Es la primera de las etapas de cacheado que debemos introducir. Dado que su gestión resulta casi transparente es una opción que podemos considerar imprescindible.
RECOMENDADO: php7. Busca un proveedor de hosting que te permita crear un entorno sandboxing o simplemente clonar tu sitio web para que así puedas validar el nuevo motor php7.
WordPress core lleva tiempo siendo compatible con php7, solo tendrás que validar que tu tema y plugins también lo son.
En nuestro caso, esta misma página, está alojada en un «servidor virtualizado en contenedores» de tamaño «Medium» donde por defecto tanto hardware, como Nginx web server están configurados pensando en WordPress.
5 Cache
Después de introducir las mejoras de los puntos 2, 3 y 4, el siguiente paso es ayudarnos de un sistema de «Cache» en la etapa final de construcción de la página. Éste tipo de cache consiste en dejar las páginas de nuestro website «prefabricadas», quitándole trabajo a nuestro servidor. Aquí podremos mejorar mucho la velocidad de usuario pero poco podremos hacer para ayudar a la velocidad admin, la del entorno de administración de WordPress.
RECOMENDADO: Usar un plugin de cache: WP Super Cache (sencillo y eficaz), W3 Total Cache (potente pero muy complejo).
Más información: https://premium.wpmudev.org/blog/top-wordpress-caching-plugins/
En wetopi utilizamos WP Super Cache con configuración de nginx para servir las páginas sin utilizar los recursos de PHP.
6 HTTP/2 or HTTP/3
Se trata del protocolo dede red. Es tu servidor de páginas web quien lo implementa y en sus versiones HTTP/2 y HTTP/3 ofrece importantes mejoras de rendimiento.
¿Qué es HTTP/3?
HTTP/3 es la revisión más reciente e importante del protocolo de transferencia de hipertexto (HTTP). Mejora la velocidad, la seguridad y la fiabilidad de las conexiones y transmisiones.
Puedes poner tu servidor detrás de los proxies de Cloudflare para tener fácilmente HTTP/3.
IMPRESCINDIBLE: Si ya usas HTTPS pero no estás trabajando con este nuevo protocolo, aquí tienes mucho por mejorar. Las conexiones HTTPS ya de por sí añaden tiempos extra necesarios para el intercambio de llaves, lo que llamamos negociación. Cuenta por lo menos con 100 ms de más. HTTP/2 puede compensar sobradamente ese tiempo mediante técnicas de multiplexación. Imprescindible habilitar este protocolo.
RECOMENDADO: un moderno web server que sea capaz de negociar HTTP/2 y soporte el moderno protocolo de negociación ALPN. Las nuevas ventajas que aporta como el «Multiplexing» y la compresión de cabeceras «HTTP» te ayudarán a mejorar el –Tiempo de carga– o «Browser page load time».
Es importante que el proveedor de servicios proporcione una sencilla plataforma para gestionar los Certificados Seguros. En Wetopi por ejemplo todo site WordPress puede habilitar en segundos un certificado HTTPS LetsEncrypt gratis pasando a trabajar con HTTP/2 al instante.
Más información: keycdn
¿Cómo inspeccionar la versión del protocolo HTTP?
No hay necesidad de herramientas adicionales, las «Developer Tools» de Google Chrome nos permiten ver el protocolo utilizado en cada conexión.
El protocolo HTTP se muestra en la columna «Protocol» en la pestaña Red o «Network».
Si no se ve la columna «Protocolo», haz clic con el botón derecho en la fila de títulos de la lista y selecciona las columnas que deseas mostrar.
Conclusión
Aquí termina el «checklist». Solo 6 puntos, pero los más efectivos para optimizar la velocidad de WordPress en las etapas iniciales de construcción de la página y su distribución red.
Si llegaste hasta estas líneas finales, realmente te estás tomando en serio la optimización de WordPress.
No nos juzgues demasiado si hemos dejado por el camino algún aspecto que consideras crucial. Optimizar la velocidad de WordPress es algo complejo y este artículo intenta mostrar el camino más efectivo!
Resumidamente, somos unos techies apasionados por WordPress que hemos creado Wetopi, un Hosting Gestionado WordPress, para minimizar la fricción a la que todo profesional se enfrenta al trabajar y alojar proyectos WordPress.
¿No tienes una cuenta en wetopi?
Incluye servidores desarrollo Gratis.
Sin tarjeta de crédito.
