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

En el décimo aniversario de WPBeginner, compartí que nuestra infraestructura de alojamiento recibió una gran mejora gracias a nuestro socio de alojamiento web, HostGator. Después, muchos de nuestros lectores se preguntaron exactamente cómo hicimos que WPBeginner cargara increíblemente rápido, y comencé a recibir correos electrónicos pidiendo 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. Esto no se trata solo de derechos de fanfarronear; se trata de compartir las técnicas exactas que utilizamos para que WordPress funcione a su máximo potencial.

En este artículo, te daré una mirada exclusiva detrás de escena sobre cómo optimizamos WordPress para que sea 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.

Antecedentes

Últimamente, WordPress ha estado recibiendo mala reputación por parte de desarrolladores "modernos" que dicen que WordPress es lento.

La declaración suele ir seguida de que deberías cambiar a un generador de sitios estáticos JAMstack como GatsbyJS. Otros en el mundo empresarial dirán que deberías cambiar a un CMS sin cabeza como Contentful.

Varios de mis amigos emprendedores muy exitosos comenzaron a preguntarme si esto era cierto.

Algunos incluso comenzaron el proceso de migración a un CMS sin cabeza porque leyeron estudios de caso sobre cómo otros obtuvieron 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 costos de migración. Sin mencionar los interminables costos de personalización que se acumularán en el futuro.

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

Puedes llamarme anticuado, pero al final del día, un sitio estático es solo una página que se carga desde la caché.

Resultados

Antes de entrar en la infraestructura exacta de hosting de WordPress, las configuraciones del servidor y los plugins, creo que es útil compartir los resultados.

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

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

Aquí hay una prueba que realicé para una página de una sola publicación, 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 móvil.

Los resultados anteriores son para páginas cacheadas, que es lo que nuestros lectores y los bots 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í hay un resultado de prueba de velocidad para la página de inicio de Gatsby. Este es un generador de sitios estáticos popular del que muchos desarrolladores hablan maravillas:

Aquí está el resultado de la prueba de velocidad de la página de inicio de Netlify, un host de sitios estáticos popular que muchos desarrolladores recomiendan. Notarás que tienen la mitad de solicitudes y su tamaño de página es el 30% del de WPBeginner, y aun así carga más lento que nuestra página de inicio.

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

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

WordPress con una infraestructura de hosting adecuada y optimizaciones puede ser tan rápido como cualquier generador de sitios estáticos. Además, ninguna otra plataforma se acercará al nivel de flexibilidad que WordPress ofrece a los dueños de negocios a través de su gran ecosistema de plugins y temas.

Infraestructura de Hosting de WPBeginner

Cuando se trata de la velocidad del sitio web, nada juega un papel más importante que tu infraestructura de web hosting.

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

A medida que nuestro sitio web creció, actualizamos a su hosting VPS y luego a servidores dedicados.

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

Así que, cuando asumí el desafío de hacer WPBeginner más rápido que los generadores de sitios estáticos, recurrí a ellos para pedir ayuda.

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

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

Aquí hay una descripción general de cómo se ve la configuración de hosting de WPBeginner:

Como pueden ver, esta es una configuración de múltiples servidores distribuida en dos regiones geográficas (Texas y Utah). Hay un total de 9 servidores sin incluir la nube del balanceador de carga. Cada servidor es una CPU Xeon-D con 8 núcleos (16 hilos) con 32 GB de RAM y 2 x 1 TB SSD (configuración RAID).

Estamos utilizando la plataforma de balanceo de carga en la nube de Google, para que podamos tener autoescalado y balanceo de carga sin interrupciones, en todo el mundo.

Once the hardware was set up with proper data syncing in place, the Bluehost and HostGator teams worked together to optimize the server configurations for WordPress. My hope is that some of these optimizations will soon make it into future WordPress hosting plans

Resumen de la Configuración del Servidor

Resumir las configuraciones del servidor de esta compleja configuración en solo unos pocos párrafos es muy difícil, pero haré mi mejor esfuerzo.

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

Estamos utilizando PHP 7.2 junto con pools de PHP-FPM, para que podamos manejar altas cargas de procesos y solicitudes. Si su empresa de hosting no está utilizando PHP 7+, entonces se está perdiendo una optimización de velocidad seria.

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

También estamos utilizando caché de objetos con memcache, para que podamos mejorar el tiempo de respuesta para los accesos a páginas sin caché y otros tiempos de respuesta de API en el área de administración de WordPress para usuarios registrados (nuestros redactores). Aquí hay una pestaña de carga de red de nuestra pantalla "Todas las publicaciones" en el administrador de WordPress:

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

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 nuestra replicación de base de datos, conmutación por error y balanceo 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 + cifrado más rápidos, la capacidad de iniciar servidores adicionales en nuevas regiones en caso de interrupción del centro de datos, etc.

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

Fueron realizados por ingenieros súper inteligentes del equipo de Endurance, incluyendo a David Collins (arquitecto jefe de Endurance / CTO de HostGator), Mike Hansen (desarrollador principal de WordPress), y otros a quienes agradeceré en la sección de créditos a continuación.

CDN, WAF y DNS

Además del alojamiento web, las otras áreas que juegan un papel importante en la velocidad de tu sitio web son tu proveedor de DNS, tu red de entrega de contenido (también conocida como CDN) y tu firewall de aplicaciones web (WAF).

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

Como quiero tener el máximo control y distribuir el riesgo, estoy utilizando tres empresas separadas para manejar cada parte de manera eficiente.

El DNS de WPBeginner es impulsado por DNS Made Easy (la misma empresa que Constellix). Constantemente están clasificados como los proveedores de DNS más rápidos del mundo. La ventaja de DNS Made Easy es que puedo dirigir el 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 está impulsada por MaxCDN (ahora StackPath CDN). Básicamente, nos permiten servir nuestros activos estáticos (imágenes, archivos CSS y JavaScript) desde su gran red de servidores en todo el mundo.

Estamos usando Sucuri como nuestro firewall de aplicaciones web. Además de bloquear ataques, también actúan como otra capa de CDN, y su rendimiento general es simplemente asombroso. Creo que tienen la mejor solución de firewall para WordPress del mercado.

Al trabajar en la optimización de la velocidad del sitio web, cada milisegundo cuenta. Es por eso que el uso de estos proveedores de soluciones combinado con nuestra nueva infraestructura de alojamiento web marca una gran diferencia.

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

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

instant.page, imágenes optimizadas y otras mejores prácticas

Una de las cosas que quizás hayas notado es el tiempo de carga casi instantáneo cuando navegas por las publicaciones y páginas de WPBeginner.

Además de todas las cosas que mencioné anteriormente, también estamos engañando a la latencia usando un script llamado instant.page que utiliza pre-carga justo a tiempo.

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

El script de Instant.page comienza a precargar esa página en este momento, por lo que cuando el usuario realmente 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 habilitar Instant.page en tu sitio, simplemente puedes instalar y activar el plugin de WordPress Instant Page.

Este script es bastante genial. Recomiendo encarecidamente visitar su sitio web y hacer clic en el botón "prueba tu velocidad de clic" para ver cómo engaña al cerebro.

Optimizando imágenes para la web

Si bien hay nuevos formatos de imagen en desarrollo como webp, aún no los estamos utilizando. En su lugar, pedimos a todos nuestros escritores que organicen cada imagen usando la herramienta TinyPNG.

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

Sin embargo, personalmente prefiero que el equipo haga esto manualmente, para no subir archivos grandes al servidor.

Actualmente, no estamos haciendo ningún tipo de lazy loading para imágenes, pero planeo agregarlo en un futuro cercano ahora que Google tiene soporte para lazy loading integrado en Chrome 76.

También hay un ticket en el núcleo de WordPress para agregar esta función a todos los sitios (espero sinceramente que esto suceda pronto), para no tener que escribir un plugin personalizado.

Limitando consultas HTTP + Mejores prácticas

Dependiendo de los plugins de WordPress que uses, algunos agregarán archivos CSS y JavaScript adicionales en cada carga de página. Estas solicitudes HTTP adicionales pueden salirse de control si tienes muchos plugins en tu sitio web.

Para más detalles, consulta cómo los plugins de WordPress pueden afectar el tiempo de carga de tu sitio.

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

Lo que necesitas hacer es combinar archivos CSS y JavaScript siempre que sea posible para reducir las solicitudes HTTP. Algunos plugins de caché de WordPress como WP Rocket pueden hacer esto automáticamente con su función de minificación.

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

Además de las solicitudes HTTP que agregan los plugins y temas, también debes tener en cuenta otros scripts de terceros que agregas a tu sitio web, ya que cada script impactará la velocidad de tu sitio web.

Por ejemplo, si estás ejecutando muchos scripts de publicidad o scripts de retargeting, estos ralentizarán tu sitio. Es posible que desees usar una herramienta como Google Tag Manager para cargar scripts condicionalmente solo cuando sean necesarios.

Si eres un sitio web con publicidad como TechCrunch o TheNextWeb, entonces hay muy poco que puedas hacer al respecto, ya que eliminar los anuncios no es una opción.

Por suerte, WPBeginner no depende de scripts de publicidad de terceros para ganar dinero. ¿Quieres ver cómo WPBeginner gana dinero? Mira mi publicación de blog sobre los ingresos de WPBeginner.

Lecciones aprendidas (hasta ahora) + Mis pensamientos finales

Esta es una infraestructura de hosting completamente nueva, y estoy seguro de que hay muchísimas lecciones que aprenderé con el tiempo.

Hasta ahora me encantan las mejoras de velocidad porque nos han ayudado a impulsar nuestros rankings de SEO, y nuestra área de administración es mucho más rápida.

Con la nueva configuración de múltiples servidores, introdujimos un nuevo flujo de trabajo de implementación para poner a WPBeginner al mismo nivel que el resto de los sitios de productos de Awesome Motive.

Lo que esto significa es que ahora tenemos un control de versiones adecuado integrado, y se han implementado medidas para evitar que sea imprudente (es decir, agregar complementos sin pruebas adecuadas, actualizar complementos desde el panel sin pruebas, etc.).

Estos cambios también allanan el camino para que finalmente salga del desarrollo y entregue las riendas del sitio WPBeginner a nuestro equipo de desarrollo.

Me he estado resistiendo a esto durante años, pero creo que el momento se acerca y solo necesito aceptarlo.

La nueva configuración no tiene cPanel ni WHM, así que esto me hace prácticamente inútil de todos modos, ya que ya no tengo mucha fluidez con la línea de comandos.

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 la depuración tomó mucho más tiempo de lo anticipado. Estamos trabajando en la creación de un mejor proceso de compilación/pruebas para esto.

Segundo, necesitamos tener una mejor comunicación entre equipos porque tuvimos una pequeña crisis con configuraciones erróneas del balanceador de carga que resultaron en algo de tiempo de inactividad. Para empeorar las cosas, estaba en un vuelo transatlántico en Turkish Airlines, y el WiFi no funcionaba.

Afortunadamente, todo se resolvió gracias al tiempo de respuesta rápido del equipo de hosting, pero esto nos ayudó a crear varios Procedimientos Operativos Estándar (POE) nuevos para manejar mejor el incidente en el futuro.

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

Creo que no hace falta decir que si apenas estás empezando un sitio web, un blog o una tienda en línea, entonces NO necesitas esta sofisticada configuración empresarial.

Siempre recomiendo que empieces poco a poco con los planes compartidos de HostGator o Bluehost, como hice yo, y luego actualices tu infraestructura de hosting a medida que tu negocio crezca.

Puedes aplicar muchas de las optimizaciones que compartí anteriormente a tus planes actuales de hosting de WordPress.

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

Puedes combinar eso con una CDN + WAF como Sucuri para acelerar significativamente tu sitio web.

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

Agradecimientos especiales + Créditos

Si bien en el artículo anterior he dado muchos agradecimientos a las marcas HostGator y Bluehost, quiero tomarme un momento para reconocer y apreciar a las personas individuales que trabajaron detrás de escena para que esto sucediera.

Primero, quiero agradecer al equipo de liderazgo de Endurance, Suhaib, Mitch, John Orlando, Mike Lillie y Brady Nord por aceptar ayudarme con el desafío.

También quiero agradecer 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 del equipo del centro de datos por hacer el trabajo duro y hacerlo realidad.

Quiero dar un agradecimiento especial a Steven Job (fundador de DNSMadeEasy) por responder rápidamente a mis preguntas y ayudarme a comprender mejor algunas configuraciones. También quiero agradecer a Tony Perez y Daniel Cid de Sucuri por respaldarme siempre.

Por último, pero no menos importante, quiero dar un reconocimiento especial a Chris Christoff. Él es el cofundador de MonsterInsights, y fue lo suficientemente amable como para ayudarme con gran parte de las pruebas y la implementación.

Preguntas frecuentes (FAQ)

Entendemos que esta es mucha información técnica para asimilar. Aquí están las respuestas a algunas de las preguntas más comunes que recibimos sobre la velocidad y el rendimiento de WordPress.

¿Necesito una configuración de hosting compleja como la de WPBeginner para tener un sitio web rápido?

Absolutamente no. Este estudio de caso muestra lo que es posible a nivel empresarial. Para la mayoría de los usuarios, comenzar con un plan de hosting compartido de calidad de Bluehost o HostGator es el punto de partida perfecto. Siempre puedes mejorar a medida que tu sitio crece.

¿Cuáles son los factores más importantes para la velocidad de WordPress?

Los tres pilares de la velocidad de un sitio web son tu infraestructura de hosting web, el almacenamiento en caché y una Red de Entrega de Contenidos (CDN). Si aciertas con estas tres cosas, resolverás los mayores cuellos de botella de rendimiento para la mayoría de los sitios web de WordPress.

¿Puedo hacer que mi sitio de WordPress sea rápido sin ser un experto técnico?

Sí. Si bien este artículo es técnico, no necesitas entender todo lo que contiene. Siguiendo guías fáciles de usar, utilizando un buen plugin de caché como WP Rocket y optimizando tus imágenes, puedes tener un gran impacto en la velocidad de tu sitio sin necesidad de saber programar.

¿Usar muchos plugins ralentiza WordPress?

No es la cantidad de plugins, sino su calidad lo que importa. Un plugin bien codificado tendrá un impacto mínimo. Sin embargo, los plugins mal codificados pueden agregar código innecesario y consultas a la base de datos que ralentizan tu sitio.

Recursos Adicionales para Mejorar el Rendimiento del Sitio Web

Si encontraste útil este estudio de caso, tenemos otras guías que te explican paso a paso cómo hacer que tu sitio de WordPress sea más rápido. Échales un vistazo para obtener más consejos prácticos:

• La Guía Definitiva para Aumentar la Velocidad y el Rendimiento de WordPress – Nuestra guía más completa para usuarios de todos los niveles de habilidad para mejorar la velocidad del sitio.
• Cómo Elegir el Mejor Alojamiento Web para WordPress – Aprende a elegir el proveedor de alojamiento adecuado para tus necesidades y presupuesto.
• Por qué Necesitas una CDN para tu Blog de WordPress – Una explicación detallada de cómo funciona una CDN y por qué es esencial para la velocidad.
• El Plano de WPBeginner – Ve la lista completa de herramientas y plugins que usamos para administrar WPBeginner hoy.

Bono: Aquí están los mejores plugins de WordPress y herramientas que recomiendo para todos los sitios de WordPress. También podrías echar un vistazo a WPBeginner’s Blueprint, que enumera los plugins y herramientas que usamos para administrar el sitio web de WPBeginner hoy en día.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.