Cómo hicimos WordPress más rápido que los generadores de sitios estáticos (Estudio de caso – Aceleración de WPBeginner)

En el 10º aniversario de WPBeginner, compartí que nuestra infraestructura de alojamiento había recibido una gran actualización gracias a nuestro socio de alojamiento web, HostGator.

Muchos de nuestros lectores se preguntaban cómo habíamos conseguido que WPBeginner cargara rapidísimo. Empecé a recibir correos electrónicos preguntando por los detalles.

Sí, WPBeginner carga más rápido que la mayoría de los generadores de sitios estáticos y en algunos casos más rápido que los sitios de Google AMP también.

Y eso es exactamente lo que queremos compartir contigo. No se trata sólo de presumir, sino de compartir las técnicas exactas que utilizamos para que WordPress rindiera al máximo.

En este artículo, te mostraré en exclusiva cómo hemos optimizado WordPress para que sea más rápido que los generadores de sitios estáticos y las plataformas CMS sin cabecera.

Nota: Este artículo es un poco más técnico de lo que solemos publicar en WPBeginner. Para los usuarios no técnicos, recomiendo seguir nuestra guía definitiva sobre cómo acelerar WordPress.

Fondo

Últimamente WordPress está recibiendo mucha mala reputación por parte de desarrolladores “modernos” que dicen que WordPress es lento.

La afirmación suele ir seguida de, usted debe cambiar a un generador de sitios estáticos JAMstack como GatsbyJS. Otros en el mundo empresarial dirán que usted debe cambiar a un CMS sin cabeza como Contentful.

Varios de mis amigos empresarios de éxito empezaron a preguntarme si esto era cierto.

Algunos incluso iniciaron el proceso de migración a un CMS sin cabecera porque leyeron casos prácticos de cómo otros consiguieron enormes mejoras de velocidad al cambiar de WordPress a generadores de sitios estáticos.

Esto fue muy frustrante para mí porque sabía que estaban desperdiciando decenas de miles de dólares en costes de migración. Por no hablar de los interminables costes de personalización que se acumularían en el futuro.

Así que me lo tomé como un reto para demostrar que un gran sitio de contenido de WordPress como WPBeginner puede cargar tan rápido, si no más rápido, que la mayoría de los generadores de sitios estáticos modernos.

Puedes llamarme de la vieja escuela, pero al fin y al cabo, un sitio estático no es más que una página que se carga desde la caché.

Resultados

Antes de pasar a la infraestructura exacta de alojamiento de WordPress, las configuraciones del servidor y los plugins, creo que es útil compartir los resultados.

Así de rápido se carga la página de inicio de WPBeginner en Pingdom desde su servidor de Washington, DC:

Dependiendo de la hora del día y del lugar desde el que se marque / compruebe, este resultado variará entre 400 y 700 ms, lo que es bastante rápido para una página de inicio.

He aquí una prueba que realicé para una página de una sola entrada, ya que tiene imágenes más grandes y más contenido:

También obtuvimos una puntuación perfecta de “100” en la prueba de velocidad de página de Google para escritorio. Aunque tenemos margen de mejora en la puntuación para móviles.

Los resultados de arriba son para páginas en caché, que es lo que nuestros lectores y los robots de los motores de búsqueda obtienen cuando ven nuestro sitio web. El tiempo de carga percibido de WPBeginner es casi instantáneo (más sobre esto más adelante).

A modo de comparación, aquí tienes el resultado de la prueba de velocidad de la página de inicio de Gatsby. Se trata de un popular generador de sitios estáticos del que muchos desarrolladores están hablando maravillas:

Aquí está el resultado de la prueba de velocidad de la página de inicio de Netlify, un popular alojamiento de sitios estáticos, que muchos desarrolladores recomiendan. Aviso de que tienen la mitad de la cantidad de solicitudes, y su tamaño de página es 30% de WPBeginner, sin embargo, todavía se carga más lento que nuestra página de inicio.

La velocidad de la página de inicio de Contentful, el CMS sin cabeza que es “cómo las empresas ofrecen mejores experiencias digitales” no está optimizada en absoluto. Este fue el sitio web más lento que probamos.

No comparto estas estadísticas para desacreditar a los demás marcos, sino más bien para dar una perspectiva de que no todas las cosas nuevas son tan brillantes como parecen.

WordPress, con una infraestructura de alojamiento y optimizaciones adecuadas, puede ser tan rápido como cualquier generador de sitios estáticos. Además, ninguna otra plataforma se acercará siquiera al nivel de flexibilidad que WordPress ofrece a los empresarios gracias a su gran ecosistema de plugins y temas.

Infraestructura de alojamiento WPBeginner

Cuando se trata de la velocidad de un sitio web, nada desempeña un perfil más importante que su infraestructura de alojamiento web.

Como muchos de ustedes ya saben, he sido cliente de HostGator desde 2007. Empecé el blog WPBeginner en 2009 en una pequeña cuenta de alojamiento compartido de HostGator.

A medida que nuestro sitio web crecía, nos actualizamos a su alojamiento VPS y luego a servidores dedicados.

Durante la última década, he tenido la oportunidad de trabajar estrechamente con muchos de los miembros de su equipo, y se han convertido en una parte extendida de la familia WPBeginner.

Así que cuando asumí el reto de hacer WPBeginner más rápido que los generadores de sitios estáticos, acudí a ellos en busca de ayuda.

Compartí mi visión con su equipo directivo y me ofrecieron ayuda para crear una configuración de alojamiento empresarial única para WPBeginner.

Pusieron a los mejores ingenieros de los equipos de Bluehost y HostGator a trabajar estrechamente conmigo para hacer que WPBeginner fuera rapidísimo.

Aquí tienes un resumen de cómo es la configuración de alojamiento de WPBeginner:

Como puede ver, se trata de una configuración multiservidor repartida en dos regiones geográficas (Texas y Utah). Hay un total de 9 servidores sin incluir la nube del equilibrador de carga. Cada servidor es una CPU Xeon-D de 8 núcleos (16 hilos) con 32 GB de RAM y 2 discos SSD de 1 TB (configuración RAID).

Estamos utilizando la plataforma Cloud Load Balancing de Google, por lo que podemos disponer de autoescalado y equilibrio de carga sin fisuras, en todo el mundo.

Una vez establecido el hardware con la sincronización de datos adecuada, los equipos de Bluehost y HostGator trabajaron juntos para optimizar las configuraciones del servidor para WordPress. Espero que algunas de estas optimizaciones lleguen pronto a los futuros planes de alojamiento de WordPress

Resumen de la configuración del servidor

Resumir las configuraciones del servidor de esta compleja configuración en unos pocos párrafos es muy difícil, pero intentaré hacerlo lo mejor posible.

Estamos utilizando Apache para nuestro software de servidor web porque el equipo está más familiarizado con él. No voy a entrar en el debate NGINX vs Apache.

Estamos usando PHP 7.2 junto con pools PHP-FPM, por lo que podemos manejar altas cargas de procesos y peticiones. Si su empresa de alojamiento no utiliza PHP 7+, se está perdiendo una importante optimización de la velocidad.

Estamos utilizando Opcode caché con un calentador de caché avanzada para asegurar que ningún usuario real debe experimentar una página sin caché.

También estamos utilizando caché de objetos con memcache, por lo que podemos mejorar el tiempo de respuesta para los accesos a páginas sin caché y otros tiempos de respuesta de la API en el área de administración de WordPress para los usuarios conectados (nuestros escritores). Aquí hay una pestaña de carga de red de nuestra pantalla “Todas las entradas” en el administrador / administración de WordPress:

Para ponerlo en perspectiva, nuestra experiencia en el área de administrador / administración es ahora 2 veces más rápida que la que teníamos anteriormente.

Para nuestro servidor de bases de datos, cambiamos MySQL por MariaDB, que es un clon de MySQL pero más rápido y mejor. También cambiamos de HyperDB a LudicrousDB porque nos ayuda a mejorar la replicación, la conmutación por error y el equilibrio de carga de nuestra base de datos.

También hay muchas otras configuraciones que nos ayudan con el rendimiento y la escalabilidad, como HTTP/2 y HSTS para una conexión más rápida + cifrado, la capacidad de girar servidores adicionales en nuevas regiones en caso de interrupción del centro de datos, etc.

Siento que no estoy haciendo justicia a la increíble configuración que el equipo ha construido, pero por favor, sepan que mi núcleo es la comercialización. Sí, soy un blogger que escribe acerca de WordPress, pero muchas de las optimizaciones técnicas aquí están muy por encima de mi nivel de pago.

Fueron realizados por ingenieros super inteligentes en el equipo de Endurance, incluyendo David Collins (arquitecto jefe de Endurance / CTO de HostGator), Mike Hansen (desarrollador del núcleo de WordPress), y otros a los que daré las gracias en la sección de agradecimientos / reconocimientos / acreditaciones a continuación.

CDN, WAF y DNS

Minientrada en el alojamiento web, las otras áreas que desempeñan un perfil importante en la velocidad de su sitio web son su proveedor de DNS, su red de distribución de contenidos (también conocida como CDN) y su cortafuegos de aplicaciones web (WAF).

Aunque yo lo he catalogado como tres cosas separadas, muchas empresas ofrecen ahora estas soluciones en un lote, como Sucuri, Cloudflare, MaxCDN (ahora StackPath CDN), etc.

Como quiero tener el máximo control y repartir el riesgo, recurro a tres empresas distintas para gestionar cada parte con eficacia.

WPBeginner DNS funciona con DNS Made Easy (la misma compañía que Constellix). Están constantemente clasificados como los proveedores de DNS más rápidos del mundo. La ventaja de DNS Made Easy es que puedo hacer la dirección de tráfico global cuando un centro de datos específico en mi CDN o WAF no está funcionando correctamente para garantizar el máximo tiempo de actividad.

Nuestra CDN funciona con MaxCDN (ahora StackPath CDN). Básicamente nos permiten servir nuestros activos estáticos (imágenes, archivos CSS y JavaScripts) desde su gran red de servidores en todo el mundo.

Estamos utilizando Sucuri como nuestro cortafuegos de aplicaciones web. Minientrada de bloquear los ataques, también actúan como otra capa de CDN, y su rendimiento general es simplemente increíble. Creo que tienen la mejor solución de cortafuegos para WordPress del mercado.

A la hora de optimizar la velocidad de un sitio web, cada milisegundo es importante. Por eso, el uso de estos proveedores de soluciones combinado con nuestra nueva infraestructura de alojamiento web marca una gran diferencia.

Para ilustrarlo, aquí está el desglose en cascada de WPBeginner.com vs GatsbyJS.org vs CloudFlare.com:

Aviso de que el tiempo de DNS de WPBeginner, el tiempo de SSL, el tiempo de conexión y el tiempo de espera son todos de primera categoría en comparación con estos otros sitios web populares. Cada una de estas mejoras está compuesta para ofrecer los mejores resultados.

Instant.page, imágenes optimizadas y otras buenas prácticas

Uno de los avisos que habrás notado es el tiempo de carga casi instantáneo cuando navegas por las entradas y páginas de WPBeginner.

Minientrada a todo lo mencionado anteriormente, también estamos engañando a la latencia mediante el uso de un script llamado instant.page que utiliza la precarga justo a tiempo.

Básicamente, antes de que un usuario haga clic en un enlace, tiene que pasar el ratón por encima de ese enlace. Cuando un usuario ha pasado el ratón durante 65 ms (un periodo de tiempo muy corto), uno de cada dos hace clic en el enlace.

Instant.page comienza a precargar la página en ese momento, de modo que cuando el usuario hace clic en el enlace, gran parte del trabajo pesado ya está hecho. Esto hace que el cerebro humano perciba el tiempo de carga del sitio web como casi instantáneo.

Para activar Instant.page en su sitio, sólo tiene que instalar y activar el plugin Instant Page WordPress.

Este script es muy bueno. Recomiendo encarecidamente comprobar su sitio web y hacer clic en el botón “prueba tu velocidad de clic” para ver cómo engaña al cerebro.

Optimización de imágenes para la Web

Aunque se están desarrollando nuevos formatos de imagen, como webp, todavía no los utilizamos. En su lugar, pedimos a todos nuestros redactores que optimicen cada imagen utilizando la herramienta TinyPNG.

También puedes automatizar la compresión de imágenes con plugins como Optimole o EWWW Image Optimizer.

Sin embargo, personalmente prefiero que el equipo lo haga manualmente, así no estamos subiendo archivos grandes al servidor.

Actualmente, no estamos haciendo ninguna carga diferida para las imágenes, pero tengo la intención de añadirlo en un futuro próximo ahora que Google tiene soporte de carga diferida integrado en Chrome 76.

También hay un tique en el núcleo de WordPress para añadir esta característica en todos los sitios (realmente espero que esto suceda pronto), así que no tengo que escribir un plugin personalizado.

Limitación de las consultas HTTP + Buenas prácticas

Dependiendo de los plugins de WordPress que utilice, algunos añadirán archivos CSS y JavaScript adicionales en cada carga de página. Estas peticiones HTTP adicionales pueden descontrolarse si tienes muchos plugins en tu sitio web.

Para más detalles, consulte cómo los plugins de WordPress pueden afectar al tiempo de carga de su sitio.

Ahora, antes de que llegues a la conclusión errónea de que demasiados plugins de WordPress son malos, quiero que sepas que hay 62 plugins activos funcionando en el sitio web de WPBeginner.

Lo que tienes que hacer es combinar archivos CSS y JavaScript siempre que sea posible para reducir las peticiones HTTP. Algunos plugins de caché de WordPress como WP Rocket pueden hacerlo automáticamente con su característica de minimización.

También puedes seguir las instrucciones de este artículo para hacerlo manualmente, que es lo que ha hecho nuestro equipo de WPBeginner.

Además de las peticiones HTTP que añaden los plugins y temas, también debes tener en cuenta otras secuencias de comandos de terceros que añadas a tu sitio web, ya que cada una de ellas afectará a la velocidad de tu sitio web.

Por ejemplo, si utiliza muchos scripts publicitarios o de retargeting, ralentizarán su sitio. Es posible que desee utilizar una herramienta como Google Tag Manager para cargar secuencias de comandos condicionalmente solo cuando sea necesario.

Si se trata de un sitio web compatible con anuncios como TechCrunch o TheNextWeb, entonces hay muy poco que puedas hacer acerca de esto ya que quitar los anuncios no es una opción.

Por suerte, WPBeginner no depende de scripts publicitarios de terceros para ganar dinero. ¿Quieres ver cómo WPBeginner gana dinero? Vea la entrada de mi blog sobre los ingresos de WPBeginner.

Lecciones aprendidas (hasta ahora) + Mis reflexiones finales

Se trata de una infraestructura de alojamiento totalmente nueva, y estoy seguro de que aprenderé muchas cosas con el tiempo.

Hasta ahora me encantan las mejoras de velocidad porque nos han ayudado a mejorar nuestro posicionamiento SEO, y nuestra área de administrador / administración es mucho más rápida.

Con la nueva configuración multi-servidor, hemos introducido un nuevo flujo de trabajo de despliegue para que WPBeginner esté a la par con el resto de sitios de productos Awesome Motive.

Lo que esto significa es que ahora tenemos un control de versiones adecuado incorporado, y hay medidas puestas en marcha para evitar que sea imprudente (es decir, la adición de plugins sin pruebas adecuadas, la actualización de plugins desde el tablero de instrumentos sin pruebas, etc).

Estos cambios también establecieron la ruta para que yo finalmente dejara el desarrollo y entregara las riendas del sitio WPBeginner a nuestro equipo de desarrollo.

Llevo años resistiéndome, pero creo que está llegando el momento y sólo tengo que aceptarlo.

La nueva configuración no tiene cPanel o WHM, así que esto me hace prácticamente inútil de todos modos ya que no soy muy fluido con la línea de comandos más.

Hasta ahora hemos aprendido dos grandes lecciones:

En primer lugar, la actualización de WordPress no es tan sencilla debido a la sincronización/replicación del servidor. Cuando actualizamos mi blog personal (SyedBalkhi.com) a WordPress 5.2, los archivos de actualización no se sincronizaron correctamente en uno de los nodos web, y depurar los errores llevó mucho más tiempo del previsto. Estamos trabajando en la creación de un mejor proceso de construcción/prueba para esto.

En segundo lugar, necesitamos una mejor comunicación entre los equipos, porque tuvimos una pequeña crisis con una mala configuración del equilibrador de carga que provocó algunos periodos de inactividad. Para colmo, estaba en un vuelo transatlántico de Turkish Airlines y el WiFi no funcionaba.

Afortunadamente, todo se solucionó gracias a la rápida respuesta del equipo de alojamiento, pero esto nos ayudó a crear varios Procedimientos Operativos Estándar (POE) nuevos para gestionar mejor el incidente en el futuro.

En general, estoy muy contento con la configuración, y sé que algunas de las configuraciones de almacenamiento en caché / optimizaciones que se hicieron para WPBeginner se convertirá en una parte estándar de HostGator Cloud y Bluehost WordPress planes de alojamiento.

Creo que esto debería ir sin decir que si usted está comenzando un sitio web, blog, o una tienda en línea, entonces usted NO necesita esta configuración sofisticada empresa.

Siempre recomiendo empezar poco a poco con planes compartidos de HostGator o Bluehost, como hice yo, y luego actualizar la infraestructura de alojamiento a medida que crezca tu negocio.

Usted puede aplicar muchas de las optimizaciones que compartí anteriormente a sus actuales planes de alojamiento de WordPress.

Por ejemplo, el plan estándar de Bluehost ya viene con un plugin de almacenamiento en caché incorporado que puede utilizar, y también ofrecen PHP 7 por defecto.

Puedes combinarlo con un CDN + WAF como Sucuri para acelerar significativamente tu sitio web.

Ahora bien, si usted es una empresa mediana que desea una configuración de alojamiento similar, póngase en contacto conmigo a través de nuestro formulario de contacto. Puedo ayudarle a orientarse en la dirección correcta.

Agradecimientos especiales + acreditaciones

Aunque en el artículo anterior, he dado toneladas de saludos a las marcas HostGator y Bluehost, quiero tomar un momento para reconocer y apreciar a las personas individuales que trabajaron detrás de las escenas para hacer que esto suceda.

En primer lugar, quiero dar las gracias al equipo directivo de Endurance, Suhaib, Mitch, John Orlando, Mike Lillie y Brady Nord, por aceptar ayudarme con el reto.

También quiero dar las gracias a Mike Hansen, David Collins, Rick Radinger, Chris Miles, David Ryan, Jesse Cook, David Foster, Micah Wood, William Earnhardt, Robin Mendieta, Rod Johnson, Alfred Najem y otros miembros del equipo del centro de datos por hacer el trabajo duro y conseguirlo.

Quiero agradecer especialmente a Steven Job (fundador de DNSMadeEasy) por responder rápidamente a mis preguntas y ayudarme a entender mejor algunos ajustes. También quiero dar las gracias a Tony Perez y Daniel Cid de Sucuri por cubrirme siempre las espaldas.

Por último, pero no menos importante, quiero dar un reconocimiento especial a Chris Christoff. Es el cofundador de MonsterInsights, y tuvo la amabilidad de ayudarme con muchas de las pruebas y el despliegue.

Espero que este caso práctico sobre la infraestructura de alojamiento de WPBeginner te haya resultado útil. Puede que también quieras ver nuestra guía definitiva sobre cómo acelerar WordPress, que es mucho más amigable para los principiantes.

Bonus: Aquí están los mejores plugins y herramientas de WordPress que recomiendo para todos los sitios de WordPress. También puedes echar un vistazo a WPBeginner’s Blueprint, que enumera los plugins y herramientas que utilizamos para ejecutar el sitio web WPBeginner hoy.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.