Desde que WPML se volvió comercial, wpml.org está gestionando mucho más tráfico. Hace dos semanas, nuestro servidor funcionaba con una carga del 95 % y el tiempo de respuesta era superior a 10 segundos. Con W3TC, nuestra carga ha vuelto al 5 % y el tiempo de respuesta es de unos 300 ms.
Si no lo conoce, W3TC es un plugin de rendimiento del sitio. Incluye caché de páginas, pero eso es solo el principio. Más allá del almacenamiento en caché básico de páginas, también minifica los archivos JS y CSS, lo comprime todo y ejecuta una CDN (red de distribución de contenidos). En conjunto, estas funciones pueden acelerar enormemente un sitio, lo que permite a los sitios de WordPress complejos hacer frente a un gran volumen de tráfico.
¿Por qué es tan importante para los sitios de WordPress?
Una imagen vale más que mil palabras. Así es como carga nuestro sitio sin ningún tipo de caché (generado por Pingdom Tools):
Si cree que esto asusta, tenga en cuenta que en realidad era peor. Este gráfico de tiempo de carga se tomó cuando nuestro servidor funcionaba en realidad con una carga del 5 %. Cuando realmente funcionaba sin caché, el servidor estaba al 95 % de carga y el tiempo de procesamiento era mucho mayor. El primer byte tardó 5 segundos en salir y no 1/2 segundo como puede ver en este gráfico.
Para mostrar completamente nuestra página de inicio, nuestro servidor tuvo que enviar 77 archivos. Incluso este gráfico, ejecutándose con una carga del servidor del 5 %, termina con un tiempo de espera agotado a los 30 segundos (vea las líneas rojas).
¿Se debe a una programación descuidada y a malas prácticas de diseño? No.
El poder de WordPress proviene de la modularidad. Puede elegir el tema que quiera, con cualquier combinación de plugins. Esto significa que cada uno de ellos se desarrolla de forma independiente y se ejecuta con sus propios recursos. La mayoría de los plugins que activa incluyen varios archivos CSS y Javascript y contribuyen a los esfuerzos de procesamiento de PHP y MySQL. Podría optimizarlo manualmente, pero entonces perdería toda esta gran modularidad y volveríamos a la casilla de salida.
Pase su sitio por las herramientas de Pingdom, u otra medición del tiempo de carga de la página (hay un complemento para Firefox para ello). Vea qué archivos cargan y su orden. Notará que los archivos CSS cargan imágenes y otros CSS y que hay montones de archivos Javascript que se cargan en cada página.
Para ir abriendo boca, esto es lo que conseguimos utilizando todas las funciones de W3TC:
Los números que ve aquí son correctos. Se obtienen un total de 28 archivos para mostrar la página. 5 archivos provienen de wpml.org (nuestro propio servidor) y el resto proviene de la CDN (red de distribución de contenidos). PHP apenas necesita hacer nada para servir esta página, excepto comprobar que está en la caché y algunas otras comprobaciones menores.
Toda la página carga en menos de 2 segundos y causa una carga que apenas podemos medir en el servidor. Nosotros estamos contentos, los visitantes están contentos e incluso Google está contento.
Paso 1) Caché de páginas
Lo primero y más básico que querrá hacer es activar el almacenamiento en caché de las páginas. Vaya a Rendimiento (Performance), active W3TC y configure la sección Caché de páginas (Page Caching).
Para la caché de páginas, nos quedamos con la configuración básica. Una cosa que añadimos fue excluir la cuenta de cliente y las secciones de descarga de la caché de páginas, para que W3TC no interfiera con las cuentas de cliente de WPML y las descargas de WPML.
Si utiliza una caché de código de operación (opcode), W3TC la aprovechará para acelerar aún más su sitio. Nosotros no la utilizamos, pero merece la pena si ejecuta un procesamiento PHP complejo que no está almacenado en caché.
Paso 2) Minificar: empaquetar y comprimir CSS y JavaScript
¿Recuerda todos esos archivos CSS y JS que añaden el tema y los plugins? Ahora es el momento de solucionar la carga que están causando.
La minificación recopila varios archivos de recursos, los empaqueta en un solo archivo y lo comprime. El resultado es un archivo más grande en lugar de docenas de archivos diminutos.
Aunque el tamaño total se reduzca solo en un 50 %, la carga que esto ahorra es enorme. En lugar de que el navegador tenga que emitir múltiples peticiones HTTP y obtener muchos archivos diminutos, emite una sola petición y los obtiene todos juntos. Probablemente, este cambio sea el que más contribuya a mejorar la capacidad de respuesta de su sitio, especialmente para los nuevos visitantes (que aún no tienen su CSS y JS en caché).
Haga clic en el botón Ayuda (Help) en la parte superior de la página. W3TC recorrerá todo su sitio y buscará archivos de recursos. Luego, le permite elegir cuáles combinar. Normalmente, puede seleccionarlos todos, pero debe prestar un poco de atención a lo que hace, ya que esto puede cambiar el orden de carga.
Una vez que haya seleccionado los archivos CSS y JS para minificar, debe asegurarse de que su orden sea el correcto.
Para los archivos CSS, arrastre los archivos hacia arriba y hacia abajo en la lista.
El orden que ve en esta lista debe coincidir con el orden en el que se cargan los archivos CSS sin minificar. Puede verlo en el código fuente de su página HTML.
Los archivos Javascript son un poco más complicados. Aquí, el orden de carga es aún más crítico, ya que el orden incorrecto provocará errores de JS y una funcionalidad interrumpida.
W3TC le permite elegir qué archivos JS van a la sección de la cabecera (header) y cuáles van al cuerpo (body). Por ejemplo, los scripts de Google Analytics irían justo antes, mientras que jQuery va en la cabecera, ya que necesita ejecutarse primero (y fuera de la lista de minificación).
Paso 3) Red de distribución de contenidos (CDN)
Para nosotros, la guinda del pastel viene en forma de una CDN maravillosamente funcional.
Configurar y ejecutar una CDN va más allá del alcance de esta entrada, ya que requiere crear una cuenta en un servicio de terceros.
Para nuestros propios sitios, utilizamos Amazon S3 para el almacenamiento y CloudFront para la distribución. Hay otras buenas opciones disponibles que puede explorar y comparar.
Una vez que su cuenta CDN esté configurada, W3TC envía sus archivos locales a la CDN y reemplaza los enlaces de su servidor por los archivos de la CDN. A continuación, su servidor solo envía los archivos HTML y la CDN se encarga del resto.
Mientras que su servidor es una sola máquina, la CDN es en realidad una red de servidores. Enviará los archivos desde el servidor más cercano a cada visitante. Las CDN pueden servir archivos estáticos mucho más rápido que cualquier servidor individual. Al utilizar una CDN, mejora la experiencia de sus visitantes y reduce drásticamente el ancho de banda y el uso de la red de su servidor.
Debe seguir el asistente de configuración de la CDN en W3TC. Le ayudará a transferir la biblioteca de medios, el tema y los recursos de los plugins a la CDN.
¿Se divierte con la optimización del rendimiento del sitio? ¡Háganoslo saber dejando un comentario aquí!
