Cómo crear WordPress más rápido que los generadores de sitios estáticos (estudio de caso …

En el décimo aniversario de WPBeginner, anuncié que la infraestructura de alojamiento de WPBeginner ha recibido una actualización importante gracias a nuestro socio de alojamiento web HostGator.

Pronto recibí correos electrónicos de lectores que me pedían que compartiera los detalles de cómo cargamos WPBeginner increíblemente rápido.

Sí, WPBeginner se carga más rápido que la mayoría de los creadores de sitios estáticos, y en algunos casos más rápido que los sitios de Google AMP.

  

En este artículo, le daré un vistazo detrás de escena de cómo hicimos WordPress más rápido que los creadores 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 final para 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. Desbloqueamos los mismos resultados de velocidad e incluso un rendimiento de backend más rápido. Lea por qué cambiamos a SiteGround.

fondo

Recientemente, WordPress ha recibido muchas malas reputaciones de los desarrolladores “modernos” de que WordPress es lento.

La instrucción generalmente sigue que debe cambiar a un generador de ubicación JAMstack estático como GatsbyJS. Otros en los negocios dicen que necesita cambiar a un CMS sin cabeza como Contentful.

Algunos de mis amigos emprendedores muy exitosos me preguntaron si esto era cierto.

Algunos incluso han comenzado a migrar a un CMS sin cabeza porque han leído estudios de casos de cómo otros han desbloqueado enormes mejoras de velocidad al cambiar de WordPress a generadores de sitios estáticos.

Fue muy frustrante para mí porque sabía que se desperdiciaban decenas de miles de dólares en costos de migración. Sin mencionar el costo infinito de personalización que ocurrirá en el futuro.

Es por eso que asumí el desafío de demostrar que un buen sitio de contenido de WordPress como WPBeginner 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 vieja escuela, pero al final del día, un lugar estático es solo una página cargada del caché.

resultados

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

El sitio web de WPBeginner en Pingdom se cargará desde su servidor en Washington, DC lo antes posible:

WPBeginner Home Pingdom

Dependiendo de la hora del día y el lugar que revise, este resultado varía entre 400 ms y 700 ms, que es bastante rápido para una página de inicio.

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

Prueba de velocidad Pingdom WPBeginner para páginas de publicación individuales

También obtuvimos una puntuación perfecta de “100” en la Prueba de velocidad de la página de Google Desktop. Aunque tenemos margen para mejoras en los resultados móviles.

Prueba de velocidad de página de Google WPBeginner

Los resultados anteriores se refieren a páginas en caché. Nuestros lectores y robots de motores de búsqueda reciben esto cuando visitan nuestro sitio. El tiempo de carga percibido para WPBeginner 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 el sitio web de Gatsby. Este es un generador de sitio estático popular que entusiasma a muchos desarrolladores:

Gatsby Home Pingdom

Aquí está el resultado de la prueba de velocidad en el sitio web de Netlify, un host de sitio estático popular recomendado por muchos desarrolladores. Tenga en cuenta que tienen la mitad de las solicitudes y que su tamaño de página es del 30% de WPBeginner, pero sigue siendo más lento de lo que carga nuestro sitio web.

Netdomify Home Pingdom

La velocidad del sitio web rico en contenido, el CMS sin cabeza que “las empresas ofrecen mejores experiencias digitales” simplemente no está optimizado en absoluto. Este fue el sitio más lento que probamos.

Contenido del sitio web Pingdom

No comparto esta estadística para desacreditar los otros marcos, sino para dar una idea de que no todas las cosas nuevas son tan brillantes como pueden parecer.

WordPress con la infraestructura de alojamiento y las optimizaciones adecuadas puede ser tan rápido como cualquier generador de sitios estáticos. Además, ninguna otra plataforma logrará la flexibilidad que WordPress ofrece a los propietarios de negocios a través de su gran plugin y ecosistema de temas.

infraestructura de alojamiento WPBeginner

Cuando se trata de la velocidad del sitio, nada importa más que su infraestructura de alojamiento web.

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

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

He tenido la oportunidad de trabajar en estrecha colaboración con muchos de los miembros de su equipo durante la última década y se han convertido en una parte extendida de la familia WP Beginner.

Ante el desafío de hacer que WPBeginner sea más rápido que los constructores estáticos, recurrí a ellos en busca de ayuda.

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

Contrataste a los mejores ingenieros de los equipos 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 WPBeginner:

infraestructura de alojamiento WPBeginner

Como puede ver, es una configuración multiservidor que se extiende por dos regiones geográficas (Texas y Utah). Hay de todo 9 Servidor sin saldos de carga en la nube. Cada servidor es una CPU Xeon-D de 32 núcleos (16 hilos) con 32 GB RAM y 2 x 1 TB SSD (Configuración RAID).

Utilizamos la plataforma de equilibrio de carga en la nube de Google para escalar automáticamente y equilibrar la carga en todo el mundo.

Después de configurar el hardware con la sincronización de datos correcta, Bluehost y HostGator trabajaron juntos para optimizar la configuración del servidor de WordPress. Espero que algunas de estas optimizaciones se apliquen pronto a futuros planes de alojamiento de WordPress :) :)

Descripción general de la configuración del servidor

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

Utilizamos Apache para nuestro software de servidor web porque el equipo está más familiarizado con él. No participaré en el debate NGINX-Apache.

Usamos PHP 7.2 junto con los grupos PHP-FPM, para que podamos manejar grandes cargas de procesos y requisitos. Si su empresa de alojamiento es PHP 7+ no utilizado, pierda una optimización de velocidad seria.

Utilizamos el caché opcode con un calentador de caché avanzado para garantizar que ningún usuario real experimente una visita a la página sin un caché.

También utilizamos el caché de objetos con Memcache para que podamos mejorar el tiempo de respuesta para el acceso a la página sin caché y otros tiempos de respuesta API en el área de administración de WordPress para usuarios registrados (nuestros autores). Aquí hay una pestaña de carga de red para nuestra captura de pantalla de todas las publicaciones del Administrador de WordPress:

Pantalla de edición de publicaciones de WPBeginner

Nuestra experiencia administrativa es ahora dos veces más rápida que antes.

Para nuestro servidor de base de datos, cambiamos de MySQL a MariaDB, un clon de MySQL que es más rápido y mejor. También cambiamos de HyperDB a LudicrousDB, ya que esto 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: B. HTTP / 2 y HSTS para una conexión más rápida + cifrado, la capacidad de habilitar servidores adicionales en nuevas regiones en caso de falla del centro de datos, etc.

Siento que no estoy haciendo la configuración increíble a la que el equipo le hizo justicia, pero sé que mi mayor 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 creados por ingenieros súper inteligentes en el equipo de Endurance, incluidos David Collins (Arquitecto Líder de Endurance / CTO para HostGator), Mike Hansen (Desarrollador Líder de WordPress) y otros, a quienes quiero agradecer en la sección “Créditos” a continuación.

CDN, WAF y DNS

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

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

Como tengo el máximo control y deseo distribuir el riesgo, utilizo tres compañías separadas para manejar cada parte de manera efectiva.

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 enrutar el tráfico global cuando un centro de datos en particular en mi CDN o WAF no funciona correctamente para garantizar la máxima disponibilidad.

Nuestro CDN funciona con MaxCDN (StackPath). Básicamente, nos permiten entregar nuestros activos estáticos (imágenes, archivos CSS y JavaScripts) desde una gran red de servidores en todo el mundo.

Utilizamos Sucuri como firewall de aplicaciones web. No solo bloquean los ataques, sino que 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.

Al optimizar la velocidad del sitio, es importante reducir cada milisegundo. Por esta razón, el uso de estos proveedores de soluciones en combinación con nuestra nueva infraestructura de alojamiento web marca una gran diferencia.

Para ilustrar el desglose superpuesto de WPBeginner.com vs.GatsbyJS.org vs. CloudFlare.com:

Distribución superpuesta de requisitos 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 populares. Cada una de estas mejoras se combina para obtener los mejores resultados.

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

Una de las cosas que puede haber notado es el tiempo de carga casi instantáneo al navegar por publicaciones y páginas de WPBeginner.

Además de todas las cosas que mencioné anteriormente, también engañamos la latencia mediante el uso de un script llamado instant.page que utiliza la precarga oportuna.

Básicamente, antes de hacer clic en un enlace, un usuario debe mover el mouse sobre ese enlace. Si un usuario permanece 65 ms (muy poco tiempo), cualquier otro usuario hace clic en el enlace.

El script Instant.page comienza a cargar esta página de inmediato. Entonces, si el usuario realmente hace clic en el enlace, gran parte del trabajo pesado ya está hecho. Como resultado, el cerebro humano percibe que el tiempo de carga del sitio es casi instantáneo.

Para habilitar Instant.page en su sitio, simplemente puede instalar y activar el complemento WordPress Instant Page.

Script de página inmediata

Este guión es bastante bueno. Recomiendo visitar su sitio y hacer clic en el botón “Pruebe su tasa de clics” para ver cómo está engañando el cerebro.

actualizar: He deshabilitado instant.page por ahora y probaré el complemento FlyingPages en un futuro próximo. Gijo Varghese compartió conmigo su nueva incorporación al grupo de Facebook WPBeginner Engage y parece combinar lo mejor de instant.page y script de enlace rápido.

Optimizar imágenes para la web

Aunque se están desarrollando nuevos formatos de imagen como webp, todavía no los estamos utilizando. En cambio, les pedimos a todos nuestros autores que 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 haga esto manualmente para que no carguemos archivos grandes al servidor.

No estamos retrasando la carga de imágenes en este momento, pero planeo agregarla en un futuro cercano ya que el soporte de carga diferida de Google está incorporado Chrome 76a

También hay un ticket en el kernel de WordPress para agregar esta función a todos los sitios (espero que esto suceda pronto) para que no tenga que escribir un complemento personalizado.

actualizar: Algunas horas después de publicar la publicación del blog, Google lanzó el complemento Native Lazy Load para WordPress.

Limitación de consultas HTTP + mejores prácticas

Reduzca los requisitos de HTTP entre dominios

Dependiendo de los complementos de WordPress que use, se agregan algunos archivos CSS y JavaScript adicionales cada vez que se carga la página. Estas solicitudes HTTP adicionales pueden salirse de control si su sitio contiene muchos complementos.

Para obtener más información, consulte Cómo los complementos de WordPress afectan el tiempo de carga de su sitio web.

Antes de concluir erróneamente que demasiados complementos de WordPress son malos, me gustaría informarle que hay 62 complementos activos ejecutándose en el sitio WPBeginner.

Si es posible, combine archivos CSS y JavaScript para reducir los requisitos de HTTP. Algunos complementos de caché de WordPress como WP Rocket pueden hacer esto automáticamente con su función de minimización.

También puede seguir las instrucciones de este artículo para hacerlo manualmente. Nuestro equipo en WPBeginner lo hizo.

Además de las solicitudes HTTP que agregan complementos y temas, también debe conocer otros scripts de terceros que agregue a su sitio ya que cada script afecta la velocidad de su sitio.

Por ejemplo, si tu Ejecutar muchos scripts de anuncios o redireccionar scripts ralentizará su sitio. Es posible que deba usar una herramienta como Google Tag Manager para cargar scripts solo cuando sea necesario.

Si tiene un sitio financiado por anuncios como TechCrunch o TheNextWeb, hay muy poco que pueda hacer al respecto, ya que la eliminación de 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 WPBeginner Earnings.

Lecciones aprendidas (hasta ahora) + mis últimos pensamientos

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

Hasta ahora, me encantan las mejoras de velocidad porque nos han 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, estamos introduciendo un nuevo proceso de implementación para que WPBeginner esté a la par con todos los otros sitios de productos Awesome Motive.

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

Estos cambios también establecen el camino para que usted complete el desarrollo y entregue los reinados del sitio WPBeginner a nuestro equipo de desarrollo.

He soportado esto durante años, pero creo que es el momento adecuado y solo tengo que aceptarlo.

La nueva configuración no tiene cPanel o WHM, por lo que soy prácticamente inútil de todos modos ya que ya no soy muy fluido en la línea de comando.

Hasta ahora, hemos aprendido dos buenas lecciones:

En primer lugar, actualizar WordPress no es tan fácil debido a la sincronización / replicación del servidor. Cuando comenzamos mi blog personal (SyedBalkhi.com) en WordPress 5.2 actualizado, los archivos de actualización en uno de los nodos web no se sincronizaron correctamente y la resolución de problemas tomó mucho más tiempo de lo esperado. Estamos trabajando para crear un mejor proceso de compilación / prueba para ello.

En segundo lugar, necesitamos una mejor comunicación entre los equipos porque tuvimos una pequeña crisis con una configuración de equilibrio de carga incorrecta que resultó en tiempo de inactividad. Para empeorar las cosas, estaba en un vuelo transatlántico con Turkish Airlines y WiFi no funcionaba.

Afortunadamente, gracias al rápido tiempo de respuesta del equipo de hosting, todo se resolvió. Sin embargo, esto nos ayudó a crear varios nuevos procedimientos operativos estándar (SOP) para manejar mejor el incidente en el futuro.

En general, estoy muy satisfecho con la configuración y sé que algunas de las configuraciones / optimizaciones de caché hechas 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 está lanzando un sitio web, un blog o una tienda en línea, NO necesita esta configuración empresarial sofisticada.

Siempre recomiendo que comience gradualmente con los planes HostGator o Bluehost compartidos y luego actualice su infraestructura de alojamiento a medida que su negocio crezca.

Puede aplicar muchos de los ajustes que compartí anteriormente en sus planes actuales de alojamiento de WordPress.

Por ejemplo, el plan estándar de Bluehost ya incluye un complemento de caché integrado que puede usar, y también ofrecen PHP de forma predeterminada 7 sucesivamente.

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

Si es una empresa mediana que desea una configuración de alojamiento similar, contácteme utilizando nuestro formulario de contacto. Puedo ayudarte a tomar la dirección correcta.

Agradecimientos especiales + créditos

Muchas gracias a HostGator y Bluehost.

Si bien agradecí a las marcas HostGator y Bluehost muchas veces en el artículo anterior, me gustaría tomar un momento para reconocer y apreciar a las personas que trabajaron detrás de escena para lograr esto.

Primero, me gustaría agradecer al equipo de liderazgo 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. haz el trabajo duro y haz que suceda.

Quiero agradecer a Steven Job (fundador de DNSMadeEasy) por responder rápidamente a mis preguntas y ayudarme a comprender mejor algunas de las configuraciones. También me gustaría saludar a Tony Pérez y Daniel Cid de Sucuri por estar siempre de espaldas.

Finalmente, me gustaría darle un reconocimiento especial a Chris Christoff. Es cofundador de MonsterInsights y tuvo la amabilidad de ayudarme con muchas pruebas e implementaciones.

Realmente espero que haya encontrado útil este estudio de caso detrás de escena de la infraestructura de alojamiento de WPBeginner. También puede leer nuestra guía final de aceleración de WordPress, que es mucho más amigable para principiantes.

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

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