Cómo optimizamos el rendimiento de List25 en un 256%

¿Quieres acelerar tu sitio de WordPress? ¿Quieres conocer los trucos de optimización de WordPress que pueden ayudarte a reducir el tiempo de carga de tu sitio? En este artículo, te mostraremos cómo acelerar WordPress compartiendo cómo hemos optimizado nuestro sitio List25 para aumentar su rendimiento.

Probablemente hayas oído que la velocidad de WordPress es importante para el SEO. Un sitio más rápido tiene un mejor compromiso de los usuarios, más páginas vistas y mejores ventas. En un estudio de caso de strangeloop, descubrieron que un retraso de un segundo puede costar un 7% de las ventas, un 11% menos de páginas vistas y un 16% de disminución de la satisfacción del cliente.

Entonces, ¿cómo se acelera realmente WordPress?

Pues bien, en lugar de limitarnos a compartir una lista de consejos de velocidad, hemos decidido hacer un estudio de caso completo para mostrarte los resultados de nuestro sitio List25 junto con la forma en que lo logramos.

Resumen

Lista25 es un blog de entretenimiento iniciado por nuestro fundador Syed Balkhi. El sitio tiene más de 1,5 millones de suscriptores, y el Canal de YouTube tiene más de un cuarto BILLÓN vistas.

El contenido del sitio es en su mayoría imágenes y vídeos que ocupan terabytes de ancho de banda, por lo que la optimización de la velocidad general era crucial para nosotros para mantener los costes bajos, reducir el abandono de la página y mejorar el tiempo en el sitio.

Antes de empezar la optimización, nuestra página de inicio tardaba 2,21 segundos en cargarse, según Pingdom. Cuando terminamos, el tiempo de carga de nuestra página bajó a 1,21 segundos (~45% más rápido).

Durante esta optimización, pudimos acelerar el tiempo de respuesta de nuestro servidor, mejorar nuestra puntuación de rendimiento de la velocidad de la página, reducir el número de solicitudes totales y mejorar el tiempo de carga general.

Veamos las técnicas de optimización que nos ayudaron a acelerar nuestro sitio de WordPress.

Alojamiento de WordPress

Tener un buen alojamiento web es crucial para la velocidad de tu sitio web. A medida que nuestro sitio se hizo más popular, simplemente superamos a nuestra anterior empresa de alojamiento (HostGator)

Sus servidores simplemente no podían manejar un sitio de este tamaño porque List25 recibe decenas de millones de páginas vistas. HostGator es estupendo para sitios más pequeños, pero no para algo de esta magnitud.

Buscamos varias opciones de alojamiento gestionado de WordPress, y finalmente acabamos utilizando SiteGround para alojar List25 porque ofrecían la mejor relación calidad-precio para este sitio.

Puedes ver la mejora en el tiempo de respuesta de nuestro servidor inmediatamente. Hemos pasado de un tiempo de respuesta máximo de 442ms a 172ms. Eso es una mejora del 256%.

Siteground ha creado potenciadores de rendimiento para plataformas específicas como WordPress, Joomla y Magento. Basándose en la plataforma de tu sitio, optimizan especialmente tus servidores, lo que se traduce en un mejor rendimiento general.

Hemos escrito un artículo sobre cuándo deberías cambiar de alojamiento web que habla de los 7 indicadores clave

Si estás buscando cambiar de alojamiento, entonces definitivamente dale una oportunidad a SiteGround. Los usuarios de WPMundobytes obtienen un descuento exclusivo del 60% en alojamiento + dominio gratuito.

Plugin de caché

Cuando se trata de acelerar WordPress, el almacenamiento en caché es el segundo factor más importante después del alojamiento web.

Normalmente, cuando un visitante llega a tu sitio de WordPress, tu servidor pasa la petición PHP a la base de datos MySQL, que encuentra la página solicitada, la genera sobre la marcha y la muestra al visitante. Esto consume muchos recursos. Cuando tienes caché, se ahorra tiempo y recursos.

El siguiente diagrama destaca el proceso. En términos sencillos, piensa en el almacenamiento en caché como la creación de un acceso directo en el escritorio que te ayuda a llegar al archivo más rápidamente.

Para el sitio de List25, estamos utilizando el SuperCacher de SiteGround, un plugin que han creado especialmente para sus clientes. Además, han añadido opciones avanzadas de almacenamiento en caché dinámico utilizando Varnish (parte de su potenciador de rendimiento).

Si no tienes Siteground, no te preocupes. Puedes configurar la caché en tu sitio de WordPress utilizando una de las muchas soluciones disponibles como W3 Total Cache o WP Super Cache.

En WPMundobytes utilizamos W3 Total Cache, que ofrece varias opciones de caché de página, de base de datos y de objetos.

A medida que más empresas de alojamiento se especialicen en WordPress, veremos más soluciones de caché personalizadas. Pagely y WPEngine también ofrecen su propio sistema de caché integrado.

CDN

Las redes de distribución de contenidos (CDN) pueden ayudarte a aumentar la velocidad de tu sitio web. Llevamos utilizando MaxCDN desde el inicio de List25, así que esta parte no ha cambiado

Hemos escrito un artículo completo sobre qué es una CDN y por qué la necesitas, junto con una infografía.

La CDN nos permite servir todo el CSS, el Javascript y las imágenes desde una Red de Entrega de Contenidos. Esto funciona determinando la ubicación del visitante del sitio, y sirviendo el contenido desde un servidor más cercano al visitante.

Si no estás interesado en una solución CDN premium, puedes utilizar Cloudflare.

Combinar archivos para reducir las peticiones HTTP

Cuando añades más plugins, a menudo añaden sus propios archivos JavaScript y CSS. Cada archivo adicional es una nueva petición HTTP.

Hemos combinado estos archivos JavaScript y CSS en un único archivo para cada uno de ellos para reducir las peticiones y acelerar el tiempo de carga. Puedes ver más detalles sobre esto en cómo los plugins de WordPress afectan al tiempo de carga.

Aunque ahora cargamos algunas pequeñas funcionalidades que podríamos no necesitar en una sección concreta del sitio, este código se almacena en la caché de la CDN, y los resultados muestran que un menor número de peticiones de archivos proporciona un mejor rendimiento que la carga de varios archivos JS más pequeños.

Esto es algo que tienes que hacer regularmente porque los plugins que utilizas cambian con el tiempo.

Sprites de imagen

Hemos utilizado un sprite de imagen que combina varios iconos sociales y de sitios en una sola imagen:

Cuando necesitábamos mostrar un icono concreto, utilizábamos CSS para:

1. Cargar la imagen como imagen de fondo
2. Define la anchura y la altura del elemento para el que necesitamos el icono
3. Establece la posición de fondo de nuestra imagen para cargar el icono necesario

Por ejemplo, para cargar los iconos de las redes sociales de la barra lateral, utilizamos

li.widget_social_icons ul li { float: left; width: 36px; height: 36px; margin: 0 10px 10px 0; padding: 0; background: url(../images/sprite.png) no-repeat; }
li.widget_social_icons ul li.twitter { background-position: 0 -50px; }
li.widget_social_icons ul li.facebook { background-position: -36px -50px; }
li.widget_social_icons ul li.pinterest { background-position: -72px -50px; }
li.widget_social_icons ul li.google { background-position: -108px -50px; }
li.widget_social_icons ul li.rss { background-position: -144px -50px; }
li.widget_social_icons ul li.youtube { background-position: -180px -50px; }

El background-position, width y height Las propiedades CSS nos ayudan a dirigirnos a la sección específica de la imagen que queremos imprimir:

Como resultado, sólo la primera solicitud de este archivo de imagen está utilizando el ancho de banda. Las siguientes peticiones de la imagen a la CDN harán que se cargue la versión en caché (normalmente local), además de que sólo será necesario solicitar una única imagen frente a 6 iconos sociales diferentes.

Combinando el JavaScript, el CSS y las imágenes, reducimos significativamente el número de peticiones.

Minificación del código

La minificación del código consiste en eliminar los espacios en blanco y los saltos de línea para reducir el tamaño del archivo y agilizar su carga cuando se solicite.

Para List25, utilizamos SCSS, una hoja de estilo basada en sintaxis (Introducción a Sass). Esto nos permite estructurar nuestros archivos CSS en varias áreas de desarrollo en un diseño fácil de leer:

Utilizamos CodeKit para compilar los archivos SCSS en un único archivo CSS. CodeKit también elimina los espacios en blanco y los saltos de línea para garantizar que el archivo sea lo más pequeño posible:

Como resultado, pudimos reducir el tamaño de nuestro archivo CSS en un 28%.

Optimización de la imagen

Hemos optimizado nuestras imágenes en dos áreas: nuestro tema de WordPress y el contenido subido.

Para nuestro tema de WordPress, utilizamos CodeKit para asegurarnos de que todas las imágenes se comprimieran sin pérdidas. Esto garantiza que el tamaño de los archivos sea lo más pequeño posible, sin pérdida de calidad.

También educamos a todos nuestros escritores sobre la importancia de guardar las imágenes optimizadas para la web. Consulta nuestra guía sobre cómo guardar imágenes optimizadas para la web.

Compartir en redes sociales sin Javascript

La compartición social para List25 es realmente importante como cualquier otro sitio web. Sin embargo, los plugins de compartición social pueden ralentizar significativamente tu sitio.

Aunque la integración de estos cuatro scripts de redes sociales no afectó al tiempo de carga de la página en nuestras pruebas, ralentizó visiblemente el sitio web cuando se visualizó en un dispositivo móvil. Los botones para compartir en redes sociales tardaban unos segundos en aparecer, a pesar de que los scripts se cargaban de forma asíncrona, lo que hacía que el contenido de la publicación se moviera mientras los botones se cargaban.

Para solucionar este problema, pasamos a una solución (casi) sin Javascript. Cada uno de los botones para compartir de la red social es representado por nuestro plugin personalizado de WordPress, y el Javascript del tema sólo se utiliza para abrir la ventana del navegador web cuando el usuario hace clic en un botón.

Sin embargo, queríamos mostrar el número total de comparticiones de una publicación en todas las redes sociales. Para ello, creamos un pequeño plugin de WordPress personalizado para recuperar y almacenar en caché los recuentos de comparticiones sociales de cada red social en la tabla meta de la publicación. Estos recuentos se actualizan cada 24 horas, lo que garantiza que las consultas que consumen mucho tiempo no se ejecuten constantemente.

Puedes utilizar una API como Sharre o diseccionar el Barra Social Flotante para su personalización

Utilizando el RUM (Real User Monitoring) de Pingdom, este nuevo plugin de compartición redujo el tiempo "real" de carga de la página de 6 segundos a poco más de 2 segundos. También nos permitió reducir el número de solicitudes de scripts de terceros.

Resultado

Hemos mejorado significativamente la velocidad de nuestro sitio. El tiempo de carga pasó de 2,2 segundos a 1,22 segundos.

Hemos conseguido reducir significativamente el tiempo de respuesta de nuestro servidor.

Esto ayudó a reducir el tiempo de descarga de una página por parte del bot de Google, lo que ayudó a nuestra tasa de rastreo.

Nuestra tasa de rebote general se redujo en un 7% porque el sitio se cargaba más rápido, y al cambiar de anfitrión pudimos reducir los errores del servidor.

Como puedes imaginar, con la tasa de rebote más baja, el tiempo de permanencia en el sitio también aumentó en más de 30 segundos.

Conclusión

Como puedes ver, un sitio web que cargue más rápido puede mejorar la participación de los visitantes. Las técnicas que hemos discutido han cubierto una serie de mejoras básicas e intermedias que puedes implementar para optimizar tu sitio de WordPress

Esperamos que este artículo te haya ayudado a acelerar tu sitio de WordPress. Quizás también quieras consultar nuestro artículo sobre los 20 plugins de WordPress imprescindibles para 2015.

Si te ha gustado este artículo, suscríbete a nuestro Canal de YouTube para los videotutoriales de WordPress. También puedes encontrarnos en Twitter y Facebook.