Cómo hicimos que WordPress fuera más rápido que los creadores de sitios estáticos (estudio de caso: aceleración de AprenderWP)

En el décimo aniversario de AprenderWP, compartí que la infraestructura de alojamiento de AprenderWP se ha actualizado 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 detalles sobre cómo hicimos que WPMundobytes se cargara más rápido.

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

En este artículo, le daré una mirada detrás de escena de cómo hemos hecho que WordPress sea más rápido que los creadores de sitios estáticos y las plataformas de CMS sin cabeza.

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

Actualización: Ya no usamos la configuración compartida en este artículo. En cambio, nos mudamos por completo a la plataforma Google Cloud operada por SiteGround. Obtuvimos los mismos resultados de velocidad y desbloqueamos un rendimiento de back-end aún más rápido. Descubra por qué nos cambiamos a SiteGround.

Fondo

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

La declaración suele ir seguida de, debe cambiar a un generador de sitio estático JAMstack como GatsbyJS. Otros en el mundo corporativo dirán que debería cambiarse a un CMS sin cabeza como Contenido.

Varios de mis exitosos amigos empresarios comenzaron a preguntarme si eso era cierto.

Algunos incluso comenzaron el proceso de migrar a un CMS sin cabeza porque leyeron estudios de casos de cómo otros desbloquearon enormes mejoras de velocidad al cambiar de WordPress a creadores de sitios estáticos.

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

Así que asumí el desafío de demostrar que un gran sitio de contenido de WordPress como AprenderWP puede cargarse tan rápido, si no más rápido, que la mayoría de los creadores de sitios estáticos modernos.

Puedes llamarme de la 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 pasar a la infraestructura exacta de alojamiento de WordPress, las configuraciones del servidor y los complementos, creo que vale la pena compartir los resultados.

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

Según la hora del día y la ubicación desde la que esté consultando, este resultado variará entre 400 ms y 700 ms, lo que es bastante rápido para una página de destino.

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

También obtuvimos un puntaje perfecto de "100" en la prueba de velocidad de la página de escritorio de Google. Aunque tenemos algo de margen de mejora en la puntuación móvil.

Los resultados anteriores son para páginas almacenadas en caché, lo que nuestros lectores y rastreadores de motores de búsqueda obtienen cuando visitan nuestro sitio web. El tiempo de carga percibido de WPMundobytes es casi instantáneo (más sobre eso 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 popular generador de sitios estáticos que entusiasma a muchos desarrolladores:

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

La velocidad de la página de inicio de Contentful, el CMS autónomo que explica "cómo las empresas ofrecen mejores experiencias digitales", simplemente no está optimizada en absoluto. Es el sitio web más lento que hemos probado.

Comparto estas estadísticas no para desacreditar otros marcos, sino para mostrar que no todo lo nuevo es tan estelar como parece.

WordPress con la infraestructura de alojamiento adecuada y las optimizaciones pueden ser tan rápidos como cualquier creador de sitios estáticos. Además, ninguna otra plataforma se acercará al nivel de flexibilidad que WordPress ofrece a los dueños de negocios con su vasto ecosistema de complementos y temas.

Marco de alojamiento para principiantes de WPMundobytes

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 WPMundobytes en 2009 en una pequeña cuenta de alojamiento compartido de HostGator.

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

Durante la última década, he tenido la suerte 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 WPMundobytes.

Entonces, cuando asumí el desafío de hacer que WPMundobytes fuera más rápido que los creadores 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 crear una configuración de alojamiento empresarial única para AprenderWP.

Pusieron a los mejores ingenieros de los equipos de Bluehost y HostGator para trabajar en estrecha colaboración conmigo para hacer que WPMundobytes sea súper rápido.

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

Como puede ver, esta es una configuración de múltiples servidores dividida en dos geografías (Texas y Utah). Hay un total de 9 servidores sin incluir la nube del balanceador de carga. Cada servidor es un procesador Xeon-D de 8 núcleos (16 hilos) con 32 GB de RAM y 2 SSD de 1 TB (configuración RAID).

Utilizamos Plataforma de equilibrio de carga en la nube de Googlepara que podamos beneficiarnos del escalado automático y el equilibrio de carga sin problemas 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 algunos de estas optimizaciones pronto se incorporarán a futuros planes de alojamiento de WordPress

Resumen de configuración del servidor

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

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

Usamos PHP 7.2 con pools de PHP-FPM, lo que nos permite manejar altas cargas de procesos y solicitudes. Si su empresa de alojamiento no utiliza PHP 7+, se está perdiendo una importante optimización de la velocidad.

Utilizamos el almacenamiento en caché de Opcode con un calentador de caché avanzado para garantizar que ningún usuario real encuentre una vista de página no almacenada en caché.

También utilizamos el almacenamiento en caché de objetos con Memcache para mejorar el tiempo de respuesta de las páginas no almacenadas en caché y otros tiempos de respuesta de la API en el área de administración de WordPress para usuarios registrados (nuestros editores). 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 ahora es 2 veces más rápida que la que teníamos antes.

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 pasamos de HyperDB a LudicrousDB ya que 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 a mejorar el rendimiento y la escalabilidad, como HTTP/2 y HSTS. para una conexión más rápida + encriptación, capacidad de activar servidores adicionales en nuevas regiones en caso de falla del centro de datos, etc.

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

Fueron creados por algunos ingenieros súper inteligentes del equipo de Endurance, incluidos David Collins (Arquitecto jefe de Endurance/CTO de HostGator), Mike Hansen (Desarrollador principal de WordPress) y otros a quienes mencionaré en la sección de créditos a continuación.

CDN, WAF y DNS

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

Aunque lo enumeré como tres cosas separadas, muchas compañías ahora ofrecen estas soluciones en un plan combinado como Sucuri, Cloudflare, MaxCDN (StackPath), etc.

Dado que quiero tener el máximo control y repartir el riesgo, utilizo tres empresas independientes para gestionar cada parte de manera eficiente.

WPMundobytes DNS funciona con DNS Made Easy (la misma empresa que Constellix). son sistemáticamente clase 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 JavaScript) desde su amplia red de servidores en todo el mundo.

Usamos Sucuri como 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 de WordPress que existe.

Cuando se trabaja en la optimización de la velocidad del sitio web, es importante reducir cada milisegundo. Es por eso que el uso de estos proveedores de soluciones combinados con nuestra nueva infraestructura de alojamiento web marca una gran diferencia.

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

Tenga en cuenta que el tiempo de DNS, el tiempo de SSL, el tiempo de conexión y el tiempo de espera de AprenderWP son de primera categoría en comparación con estos otros sitios web populares. Cada una de estas mejoras se combinan para proporcionar 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 al navegar por las publicaciones y páginas de AprenderWP.

Además de todo lo que mencioné anteriormente, también engañamos a la latencia usando un script llamado instant.page que usa 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 se ha desplazado durante 65 ms (período de tiempo muy corto), uno de cada dos hará clic en el enlace.

página instantánea La secuencia de comandos comienza a precargar esa página en este punto, por lo 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, simplemente puede instalar y activar el Complemento de WordPress de página instantánea.

Este guión es bastante limpio. Recomiendo visitar su sitio web y presionar el botón "prueba tu velocidad de clic" para ver cómo engaña al cerebro.

Actualización: He deshabilitado instant.page por ahora, y probaré Complemento de páginas voladoras en el futuro cercano. Gijo Varghese compartió conmigo su nuevo complemento en el Participar en el grupo de Facebook de WPMundobytesy parece combinar lo mejor de la secuencia de comandos instant.page y quicklink.

Optimización de imágenes para la web

Aunque se están desarrollando nuevos formatos de imagen, como Webp, todavía no los estamos utilizando. En cambio, requerimos que todos nuestros editores optimicen cada imagen usando 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 lo haga de forma manual, para no subir archivos pesados ​​al servidor.

Actualmente no hacemos carga diferida para imágenes, pero planeo agregarlo en un futuro cercano ahora que Google admite la carga diferida integrado en cromo 76.

También hay una boleto en el núcleo de WordPress para agregar esta funcionalidad a todos los sitios (realmente espero que suceda pronto), por lo que no necesito escribir un complemento personalizado.

Actualización: Unas horas después de publicar la publicación del blog, Google publicó el Complemento nativo de carga diferida para WordPress.

Limitación de solicitudes HTTP + prácticas recomendadas

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

Para obtener 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 equivocada de que demasiados complementos WordPress es malo, quiero informarle que hay 62 complementos activos ejecutándose en el sitio web de AprenderWP.

Lo que debe hacer es combinar archivos CSS y JavaScript siempre que 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, como lo hizo nuestro equipo de AprenderWP.

Además de las solicitudes HTTP agregadas por complementos y temas, también debe considerar otros scripts de terceros que agregue a su sitio web, ya que cada script afectará la velocidad de su sitio web.

Por ejemplo, si ejecuta muchos scripts publicitarios o de reorientación, ralentizarán su sitio. Puede usar una herramienta como Google Tag Manager para cargar secuencias de comandos de forma condicional solo cuando sea necesario.

Si tiene un sitio web con publicidad como TechCrunch o TheNextWeb, no hay mucho que pueda hacer al respecto porque eliminar anuncios no es una opción.

Afortunadamente, AprenderWP no depende de scripts de anuncios de terceros para ganar dinero. ¿Quieres ver cómo WPMundobytes gana dinero? Vea mi publicación de blog sobre las ganancias de WPMundobytes.

Lecciones aprendidas (hasta ahora) + Mis reflexiones finales

Esta es una infraestructura de alojamiento completamente nueva y estoy seguro de que aprenderé muchas lecciones con el tiempo.

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

Con la nueva configuración de múltiples servidores, hemos introducido un nuevo flujo de trabajo de implementación para poner a WPMundobytes al día con el resto de Impresionantes sitios de productos motivadores.

Esto significa que ahora tenemos incorporado un control de versiones adecuado y se han implementado medidas para evitar que sea imprudente (es decir, agregar complementos sin las pruebas adecuadas, actualizar complementos desde el tablero sin probar, etc.).

Estos cambios también me allanaron el camino para finalmente salir del desarrollo y entregar las riendas del sitio de AprenderWP a nuestro equipo de desarrollo.

Me resistí a esto durante años, pero creo que ha llegado el momento y solo tengo que aceptarlo.

La nueva configuración no tiene cPanel o WHM, por lo que me hace bastante inútil de todos modos, ya que ya no estoy muy familiarizado con la línea de comandos.

Hasta ahora, hemos aprendido dos grandes lecciones:

En primer lugar, actualizar WordPress no es tan fácil 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 esperado. Estamos trabajando para configurar un mejor proceso de compilación/prueba para esto.

En segundo lugar, debemos tener una mejor comunicación entre los equipos, ya que tuvimos una crisis menor con configuraciones incorrectas del balanceador de carga que resultaron en tiempo de inactividad. Para colmo, 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 hosting, pero nos ayudó a crear varios procedimientos operativos estándar (SOP) 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 almacenamiento en caché que se realizaron para WPMundobytes se convertirán en una parte estándar de los planes de alojamiento HostGator Cloud y Bluehost WordPress.

Creo que no hace falta decir que si está iniciando un sitio web, un blog o una tienda en línea, NO necesita esta elegante configuración comercial.

Siempre recomiendo que comience de a poco con los planes compartidos de HostGator o Bluehost como lo hice yo, luego actualice su infraestructura de alojamiento a medida que su negocio crezca.

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

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

Puede combinar esto con un CDN+WAF como Sucuri para acelerar drásticamente su sitio web.

Ahora, si usted es una empresa / empresa de tamaño mediano 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

Si bien en el artículo anterior le di muchos reconocimientos 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.

En primer lugar, quiero agradecer al equipo de gestión de resistencia Suhaib, Mitch, John Orlando, Mike Lillie y Brady Nord por aceptar ayudarme con el desafío.

También me gustaría 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 por hacer el trabajo duro y hacer que suceda.

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 Pérez y Daniel Cid de Sucuri por apoyarme siempre.

Por último, pero no menos importante, quiero agradecer especialmente a Chris Christoff. Él es el co-fundador de MonsterInsightsy tuvo la amabilidad de ayudarme con gran parte 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 de WPMundobytes. También puede consultar nuestra guía definitiva sobre cómo acelerar WordPress, que es mucho más fácil de usar para principiantes.

Principal: Aquí están los mejores complementos 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 tutoriales en vídeo de WordPress. También puedes encontrarnos en Gorjeo y Facebook.