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

En el décimo aniversario de WPBeginner, compartí que la infraestructura de alojamiento de WPBeginner recibió una gran actualización gracias a nuestro socio de alojamiento web, HostGator.

Poco después, empecé a recibir correos electrónicos de lectores pidiéndome que compartiera los detalles sobre cómo hicimos que WPBeginner cargara rapidísimo.

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.

En este artículo, te daré un vistazo entre bastidores de cómo hicimos WordPress más rápido que los generadores de sitios estáticos y las plataformas CMS sin cabeza.

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

Actualización: Ya no estamos utilizando la configuración compartida en este artículo. En su lugar, hemos cambiado por completo a la plataforma Google Cloud gestionada por SiteGround. Tenemos los mismos resultados de velocidad y hemos desbloqueado un rendimiento back-end aún más rápido. Lea por qué cambiamos a SiteGround.

Antecedentes

Últimamente WordPress está recibiendo mucha mala reputación por parte de los 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 muy correctos comenzaron a preguntarme si esto era cierto.

Algunos incluso comenzaron el proceso de migración a un CMS sin cabeza porque leyeron estudios de casos de cómo otros desbloquearon 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án en el futuro.

Así que lo tomé como un reto para demostrar que un sitio de contenido de WordPress grande 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 final del día, un sitio estático es sólo 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.

Aquí está la velocidad de carga de la página de inicio de WPBeginner en Pingdom desde su servidor en Washington, DC:

Dependiendo de la hora del día y de la ubicación desde la que lo marques / compruebes, este resultado variará entre 400ms – 700ms, lo cual es bastante rápido para una página de inicio.

Aquí está una prueba que corrí para una sola página de entradas, 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 algo de margen de mejora en la puntuación móvil.

Los resultados anteriores 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).

Para comparar, aquí está el resultado de la prueba de velocidad de la página de inicio de Gatsby. Este es 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á optimizado en absoluto. Este fue el sitio web más lento que probamos.

Estoy compartiendo estas estadísticas no para desacreditar a los otros marcos, sino más bien para dar la perspectiva de que no todas las cosas nuevas son tan brillantes como pueden parecer.

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 a través de su gran ecosistema de plugins y temas.

Infraestructura de alojamiento de WPBeginner

Cuando se trata de la velocidad del sitio web, nada juega 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 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, me dirigí a ellos en busca de ayuda.

Compartí mi visión con su equipo de liderazgo, y se ofrecieron a ayudarme a construir una configuración de alojamiento empresarial única para WPBeginner.

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

Aquí está una visión general de lo que la configuración de alojamiento WPBeginner parece:

Como se puede ver, se trata de una configuración multi-servidor repartidos en dos regiones geográficas (Texas y Utah). Hay un total de 9 servidores sin incluir el balanceador de carga en la nube. 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 tener autoescalado y equilibrio de carga sin problemas, en todo el mundo.

Una vez configurado el hardware con la sincronización de datos adecuada, el equipo 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 instalación en unos pocos párrafos es muy difícil, pero intentaré hacerlo lo mejor posible.

Estamos usando Apache para nuestro 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 está utilizando PHP 7+, entonces se está perdiendo una seria optimización de la velocidad.

Estamos usando Opcode caching con un calentador de caché avanzado para asegurar que ningún usuario real experimente una página sin caché.

También estamos utilizando caché de objetos con memcache, por lo que podemos mejorar el tiempo de respuesta para las visitas a la página sin caché y otros tiempos de respuesta de la API en el área de administrador 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 de WordPress:

Para ponerlo en perspectiva, nuestra experiencia en el área de administrador es ahora 2 veces más rápida que la anterior.

Para nuestro servidor de base de datos, cambiamos de MySQL a 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 de nuestra base de datos, la conmutación por error y el equilibrio de carga.

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, 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 punto fuerte es el marketing. Sí, soy un bloguero que escribe acerca de WordPress, pero muchas de las optimizaciones técnicas están muy por encima de mi nivel.

Fueron hechas por ingenieros súper inteligentes en el equipo de Endurance, incluyendo a David Collins (arquitecto jefe de Endurance / CTO de HostGator), Mike Hansen (desarrollador del núcleo de WordPress), y otros a quienes agradeceré en la sección de agradecimientos / reconocimientos / acreditaciones a continuación.

CDN, WAF y DNS

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

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

Como quiero tener el máximo control y repartir el riesgo, estoy usando tres compañías separadas para manejar cada parte eficientemente.

WPBeginner DNS funciona con DNS Made Easy (la misma empresa 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 (StackPath). 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. Además 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.

Cuando se trabaja en la optimización de la velocidad de un sitio web, cada milisegundo es importante. Es por eso que el uso de estos proveedores de soluciones combinadas con nuestra nueva infraestructura de alojamiento web hace 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 de primera clase en comparación con estos otros sitios web populares. Cada una de estas mejoras se compone 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 entradas y páginas de WPBeginner.

Minientrada todas las cosas que he mencionado anteriormente, también estamos engañando a la latencia mediante el uso de una secuencia de comandos llamada instant.page que utiliza justo a tiempo de precarga.

Básicamente, antes de que un usuario haga clic en un enlace, tiene que enlazar su ratón sobre ese enlace. Cuando un usuario ha pasado el cursor durante 65 ms (un periodo de tiempo muy corto), uno de cada dos hará clic en el enlace.

El scriptInstant. 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.

Actualización: He desactivado instant.page por ahora, y voy a probar el plugin FlyingPages en un futuro próximo. Gijo Varghese compartió su nuevo plugin conmigo en el grupo de Facebook WPBeginner Engage, y parece combinar lo mejor de instant.page y quicklink script.

Optimización de imágenes para Web

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

También puede 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, para no subir archivos grandes al servidor.

Actualmente, no estamos haciendo ninguna carga diferida para las imágenes, pero tengo la intención de añadir 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.

Actualización: Pocas horas después de publicar la entrada del blog, Google ha diferido la versión del plugin Native Lazy Load para WordPress.

Limitación de 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 tiene muchos plugins en su sitio web.

Para más detalles, vea 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 hacer esto 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 en WPBeginner.

Aparte 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 secuencia de comandos afectará a la velocidad de tu sitio web.

Por ejemplo, si tienes muchos scripts de publicidad o de retargeting, ralentizarán tu sitio. Puede utilizar una herramienta como Google Tag Manager para cargar secuencias de comandos de forma condicional solo cuando sea necesario.

Si se trata de un sitio web compatible con publicidad, como TechCrunch o TheNextWeb, hay muy poco que pueda 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? Mira la entrada de mi blog sobre los ingresos de WPBeginner.

Lecciones Aprendidas (hasta ahora) + Mis Pensamientos 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, ya que nos ha ayudado a aumentar nuestro ranking SEO, y nuestra área de administrador es mucho más rápido.

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

Lo que esto significa es que ahora tenemos una versión adecuada de control incorporado, y hay medidas puestas en marcha para detenerme de ser 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 establecen la ruta para que finalmente me retire del desarrollo y entregue las riendas del sitio WPBeginner a nuestro equipo de desarrollo.

He estado resistiendo esto durante años, pero creo que el momento está llegando, 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:

Primero, actualizar WordPress no es tan sencillo 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, tenemos que tener una mejor comunicación entre los equipos porque tuvimos una pequeña crisis con la configuración incorrecta del equilibrador de carga que dio lugar a algunos tiempos de inactividad. Para colmo, estaba en un vuelo transatlántico de Turkish Airlines y el WiFi no funcionaba.

Por suerte, 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 los incidentes 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á empezando un sitio web, blog, o una tienda en línea, entonces usted NO necesita esta configuración sofisticada empresa.

Yo siempre recomiendo que empiece de a poco con los planes compartidos de HostGator o Bluehost como yo lo hice, y luego actualice su infraestructura de alojamiento a medida que su negocio crece.

Usted puede aplicar muchas de las optimizaciones que he compartido anteriormente en 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.

Usted puede combinar eso con un CDN + WAF como Sucuri para acelerar significativamente su sitio web.

Ahora bien, si usted es un mercado medio / empresa que quiere una configuración de alojamiento similar, entonces por favor póngase en contacto conmigo a través de nuestro formulario de contacto. Puedo ayudarle a apuntar en la dirección correcta.

Agradecimientos especiales + acreditaciones

Mientras que en el artículo anterior, he dado un montón de gritos a las marcas HostGator y Bluehost, quiero tomar un momento para reconocer y apreciar las personas individuales que trabajaron detrás de las escenas para que esto suceda.

En primer lugar, quiero dar las gracias al equipo de liderazgo 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 en el equipo del centro de datos para hacer el trabajo duro y hacer que suceda.

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 Pérez y Daniel Cid en Sucuri por estar siempre a mi lado.

Por último, pero no menos importante, quiero dar un reconocimiento especial a Chris Christoff. Él es el co-fundador de MonsterInsights, y tuvo la amabilidad de ayudarme con muchas de las pruebas y el despliegue.

Realmente espero que hayas encontrado útil este caso de estudio entre bastidores acerca de la infraestructura de alojamiento de WPBeginner. 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.

Si te ha gustado este artículo, suscríbete a nuestro canal de YouTube para ver tutoriales en vídeo sobre WordPress. También puedes encontrarnos en Twitter y Facebook.