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

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

Poco después, comencé a recibir correos electrónicos de lectores que me pedían que compartiera los detalles sobre cómo hicimos que la carga de WPBeginner fuera increíblemente rápida.

Sí, WPBeginner se 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 detrás de escena de cómo hicimos WordPress más rápido que los generadores de sitios estáticos y las plataformas CMS sin cabeza.

Acelerando WPBeginner - Detrás de escena

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

Actualizar: Ya no usamos la configuración compartida en este artículo. En cambio, hemos cambiado completamente a la plataforma Google Cloud administrada por SiteGround. Tenemos los mismos resultados de velocidad y hemos desbloqueado un rendimiento de back-end aún más rápido. Lea por qué cambiamos a SiteGround.

Antecedentes

Últimamente WordPress ha recibido una gran cantidad de mala reputación de los desarrolladores "modernos" donde dicen que WordPress es lento.

La declaración generalmente se sigue con, debe cambiar a un generador de sitio estático JAMstack como GatsbyJS. Otros en el mundo empresarial dirán que debes 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 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 costos de migración. Sin mencionar, los costos de personalización infinitos que se acumularán en el futuro.

Así que tomé el desafío de demostrar que un gran sitio de contenido 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 vieja escuela, pero al final del día, un sitio estático es solo una página que se carga desde el caché.

Resultados

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

A continuación, le indicamos qué tan rápido se carga la página de inicio de WPBeginner en Pingdom desde su servidor de Washington, DC:

WPBeginner Homepage Pingdom

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

Aquí hay una prueba que ejecuté para una sola página de publicación, ya que tiene imágenes más grandes y más contenido:

Prueba de velocidad de página de publicaciones individuales de WPBeginner de Pingdom

También obtuvimos una puntuación perfecta de "100" en la prueba de velocidad de página de Google para escritorio. Aunque sí tenemos margen de mejora en la puntuación móvil.

Prueba de velocidad de la página de Google WPBeginner

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

En aras de la comparación, aquí hay un resultado de prueba de velocidad para la página de inicio de Gatsby. Este es un generador de sitio estático popular sobre el que muchos desarrolladores están entusiasmados:

Gatsby Homepage Pingdom

Aquí está el resultado de la prueba de velocidad de la página de inicio de Netlify, un host de sitio estático popular, que recomiendan muchos desarrolladores. Tenga en cuenta que tienen la mitad de la cantidad de solicitudes y que el tamaño de su página es del 30% de WPBeginner, pero aún así se carga más lentamente que nuestra página de inicio.

Netdomify Homepage Pingdom

La velocidad de la página de inicio de Contentful, el CMS sin cabeza 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.

Contentful Homepage Pingdom

Estoy compartiendo estas estadísticas no para desacreditar los otros marcos, sino para dar una 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á al nivel de flexibilidad que WordPress ofrece a los propietarios de negocios a través de su gran ecosistema de complementos y temas.

Infraestructura de alojamiento de WPBeginner

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

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 host compartido de HostGator.

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

Durante la última década, tuve la oportunidad de trabajar en estrecha colaboración con muchos de los miembros de su equipo, y se han convertido en una parte extendida de la familia WPBeginner.

Entonces, cuando asumí el desafío de hacer que WPBeginner fuera más rápido que los generadores de sitios estáticos, recurrí 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 del equipo de Bluehost y HostGator para que trabajen estrechamente conmigo para que WPBeginner sea increíblemente rápido.

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

Infraestructura de alojamiento de WPBeginner

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

Estamos utilizando la plataforma de equilibrio de carga en la nube de Google, por lo que podemos tener un escalado automático y un equilibrio de carga en todo el mundo.

Una vez que el hardware se configuró 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 pronto lleguen a futuros planes de alojamiento de WordPress :)

Resumen de configuración del servidor

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

Estamos usando 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 usando PHP 7.2 junto con grupos PHP-FPM, por lo que podemos manejar grandes cargas de procesos y solicitudes. Si su empresa de alojamiento no está utilizando PHP 7+, se está perdiendo una optimización de velocidad seria.

Estamos usando el almacenamiento en caché de Opcode con un calentador de caché avanzado para garantizar que ningún usuario real experimente una visita de página sin caché.

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

Pantalla de edición de publicaciones de WPBeginner

Para poner en perspectiva, nuestra experiencia en el área de administración ahora es 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 la replicación de la 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, la capacidad de activar 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 ha construido el equipo, pero sepa que mi principal fortaleza 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 salarial.

Fueron realizados por ingenieros súper inteligentes en el equipo de Endurance, incluidos 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 su sitio web son su proveedor de DNS, su red de entrega de contenido (también conocida como CDN) y su firewall de aplicaciones web (WAF).

Si bien lo tengo en la lista como tres cosas separadas, muchas compañías ahora ofrecen estas soluciones en un plan integrado como Sucuri, Cloudflare, MaxCDN (StackPath), etc.

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

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 dirigir el tráfico global cuando un centro de datos específico en mi CDN o WAF no funciona correctamente para garantizar el máximo tiempo de actividad.

Nuestro 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 firewall 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 firewall de WordPress en el mercado.

Cuando se trabaja en optimizaciones de velocidad del sitio web, es importante reducir cada milisegundo. Es por eso que usar estos proveedores de soluciones combinados con nuestra nueva infraestructura de alojamiento web hace una gran diferencia.

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

Desglose en cascada de solicitudes en WPBeginner

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

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

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

Además de todas las cosas que mencioné anteriormente, también estamos haciendo trampa en 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, debe pasar el mouse sobre ese enlace. Cuando un usuario ha permanecido durante 65 ms (período de tiempo muy corto), uno de cada dos realmente hará clic en el enlace.

Instant.page script 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 su sitio, simplemente puede instalar y activar el complemento Instant Page de WordPress.

Script de página instantánea

Este guión es bastante bueno. Recomiendo visitar su sitio web y hacer clic en el botón "probar su velocidad de clic" para ver cómo engaña al cerebro.

Actualizar: He inhabilitado instant.page por ahora, y voy a probar el complemento FlyingPages en un futuro próximo. Gijo Varghese compartió su nuevo complemento conmigo en el grupo de Facebook WPBeginner Engage, y parece combinar lo mejor de instant.page y script de enlace rápido.

Optimización de imágenes para la web

Si bien se están desarrollando nuevos formatos de imagen, como webp, todavía no los estamos utilizando. En cambio, pedimos a todos nuestros escritores que optimicen cada imagen utilizando la herramienta TinyPNG.

También puede automatizar la compresión de imágenes utilizando complementos como Optimole o EWWW Image Optimizer.

Sin embargo, personalmente prefiero que el equipo haga esto manualmente, por lo que no estamos cargando archivos grandes en el servidor.

Actualmente, no estamos haciendo ninguna carga diferida para las imágenes, pero planeo agregarla en un futuro próximo ahora que Google tiene soporte de carga diferida integrado en Chrome 76.

También hay un ticket en el núcleo de WordPress para agregar esta función en todos los sitios (con la esperanza de que esto suceda pronto), por lo que no tengo que escribir un complemento personalizado.

Actualizar: Pocas horas después de que publiqué la publicación del blog, Google lanzó el complemento Native Lazy Load para WordPress.

Limitación de consultas HTTP + mejores prácticas

Reduce las solicitudes HTTP entre dominios

Dependiendo de los complementos de WordPress que use, algunos agregarán archivos CSS y JavaScript adicionales en cada carga de página. Estas solicitudes HTTP adicionales pueden salirse de control si tiene muchos complementos en su sitio web.

Para más detalles, vea cómo los complementos de WordPress pueden afectar el tiempo de carga de su sitio.

Ahora, antes de llegar a la conclusión errónea de que demasiados complementos de WordPress son malos, quiero hacerle saber que hay 62 complementos activos ejecutándose en el sitio web de WPBeginner.

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

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

Además de las solicitudes HTTP que agregan complementos y temas, también debe tener en cuenta otros scripts de terceros que agregue en su sitio web porque cada script afectará la velocidad de su sitio web.

Por ejemplo, si está ejecutando muchos guiones publicitarios o guiones de redireccionamiento, entonces ralentizarán su sitio. Es posible que desee utilizar una herramienta como el Administrador de etiquetas de Google para cargar scripts condicionalmente solo cuando sean necesarios.

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

Afortunadamente, WPBeginner no depende de scripts de anuncios de terceros para ganar dinero. ¿Quieres ver cómo gana dinero WPBeginner? Vea mi publicación de blog sobre los ingresos de WPBeginner.

Lecciones aprendidas (hasta ahora) + Mis pensamientos finales

Esta es una infraestructura de alojamiento completamente nueva, y estoy seguro de que hay toneladas de lecciones que aprenderé en horas extras.

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

Con la nueva configuración multiservidor, presentamos un nuevo flujo de trabajo de implementación para que WPBeginner esté a la par con el resto de sitios de productos Awesome Motive.

Lo que esto significa es que ahora tenemos una versión adecuada que controla el control incorporado, y hay medidas implementadas para evitar que sea imprudente (es decir, agregar complementos sin pruebas adecuadas, actualizar complementos desde el tablero sin pruebas, etc.).

Estos cambios también establecieron el camino para que finalmente salga del desarrollo y entregue los reinados del sitio WPBeginner a nuestro equipo de desarrollo.

He resistido esto durante años, pero creo que está llegando el momento, y solo necesito aceptarlo.

La nueva configuración no tiene cPanel o WHM, por lo que esto me hace prácticamente inútil de todos modos ya que ya no soy muy fluido 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 previsto. Estamos trabajando para crear un mejor proceso de compilación / prueba para esto.

En segundo lugar, necesitamos tener una mejor comunicación entre los equipos porque tuvimos una crisis menor con las configuraciones incorrectas del equilibrador de carga que resultó en un 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 rápido tiempo de respuesta del equipo de alojamiento, pero esto nos ayudó a crear varios nuevos Procedimientos Operativos Estándar (SOP) 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 almacenamiento en caché que se hicieron para WPBeginner se convertirán en una parte estándar de los planes de alojamiento de HostGator Cloud y Bluehost WordPress.

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

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

Puede aplicar muchas de las optimizaciones que compartí anteriormente en sus planes actuales de alojamiento de WordPress.

Por ejemplo, el plan estándar de Bluehost ya viene con un complemento de almacenamiento en caché incorporado que puede usar, y también ofrecen PHP 7 de forma predeterminada.

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

Ahora, si usted es una empresa del mercado medio / empresarial que desea una configuración de alojamiento similar, comuníquese conmigo a través de nuestro formulario de contacto. Puedo ayudarte a orientarte en la dirección correcta.

Agradecimientos especiales + Créditos

Gracias HostGator y Bluehost

Mientras que en el artículo anterior, he dado un montón de 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 suceda.

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 miembros del equipo del centro de datos. haciendo el trabajo duro y haciéndolo 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 dar un saludo a Tony Pérez y Daniel Cid en Sucuri por siempre tener mi espalda.

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

Realmente espero que haya encontrado útil este estudio de caso detrás de escena sobre la infraestructura de alojamiento WPBeginner. También es posible que desee ver nuestra guía definitiva sobre cómo acelerar WordPress, que es mucho más amigable para principiantes.

Prima: Aquí están los mejores complementos y herramientas de WordPress que recomiendo para todos los sitios de WordPress.

Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver videos tutoriales de WordPress. También nos puede encontrar en Twitter y Facebook.

Publicaciones relacionadas

Botón volver arriba