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.