Acelerando WordPress: Cómo optimizamos el rendimiento de List25 en un 256

¿Quieres acelerar tu sitio 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 optimizamos nuestro sitio List25 para aumentar el rendimiento.

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

Entonces, ¿cómo acelerar WordPress?

Bueno, en lugar de simplemente compartir una lista de consejos de velocidad, decidimos hacer un estudio de caso completo para mostrarle los resultados de nuestro sitio List25 junto con la forma en que logramos todo.

Visión general

List25 es un blog de entretenimiento creado por nuestro fundador Syed Balkhi. El sitio cuenta con más de 1,5 millones de suscriptores, y el canal de YouTube tiene más de un cuarto de MILLÓN de visitas.

El contenido del sitio son principalmente 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 la página bajó a 1,21 segundos (un 45% más rápido).

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

Echemos un vistazo a 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 su 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 está muy bien para sitios pequeños, pero no para algo de esta magnitud.

Buscamos varias opciones de alojamiento gestionado de WordPress, y finalmente terminamos utilizando SiteGround para el alojamiento de 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. Pasamos 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 su sitio, optimizan especialmente sus servidores, lo que se traduce en un mejor rendimiento general.

Hemos escrito un artículo acerca de cuándo debe cambiar su 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 WPBeginner obtienen un descuento exclusivo del 60% en alojamiento + dominio gratis.

Plugins 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 su sitio WordPress, su servidor pasa la petición PHP a la base de datos MySQL que encuentra la página que se está solicitando, la genera sobre la marcha, y se la muestra al visitante. Esto consume muchos recursos. Cuando se tiene caché, se ahorra tiempo y recursos.

El siguiente diagrama muestra el proceso. En términos sencillos, piense en el almacenamiento en caché como la creación de un atajo de escritorio que le ayuda a llegar al archivo más rápidamente.

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

Si no tienes Siteground, no te preocupes. Puede configurar la caché en su sitio de WordPress mediante el uso de una de las muchas soluciones disponibles como W3 Total Cache o WP Super Cache.

En WPBeginner, estamos utilizando W3 Total Cache que proporciona una serie de opciones de caché de página, caché de base de datos y caché de objetos.

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

CDN

Las redes de distribución de contenidos (CDN) pueden ayudarle a aumentar la velocidad de su sitio web. Hemos estado utilizando MaxCDN desde el principio de List25, por lo que esta parte no cambió.

Hemos escrito un artículo completo sobre lo que es un CD N y por qué lo necesita junto con una infografía.

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

Si usted no está en el mercado para una solución CDN premium, entonces usted puede utilizar Cloudflare.

Combinar archivos para reducir las solicitudes HTTP

A medida que añades más plugins, éstos suelen añadir 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 con el fin de reducir las peticiones y acelerar el tiempo de carga. Puede ver más detalles acerca de esto en cómo los plugins de WordPress afectan al tiempo de carga.

Aunque ahora estamos cargando algunas pequeñas funcionalidades que podríamos no necesitar en una sección concreta del sitio, este código se almacena en caché en 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 hay que hacer regularmente porque los plugins que se utilizan cambian con el tiempo.

Sprites de imagen

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

Cada vez que necesitábamos mostrar un icono concreto, utilizábamos CSS para:

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

Por ejemplo, para cargar los iconos de los medios 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; }

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

Como resultado, solo la primera solicitud de este archivo de imagen utiliza ancho de banda. Las siguientes solicitudes de la imagen a la CDN tendrán como resultado la carga de la versión almacenada en caché (normalmente local), así como la necesidad de solicitar solo una imagen frente a 6 iconos sociales diferentes.

Al combinar JavaScript, CSS e imágenes, hemos reducido considerablemente el número de solicitudes.

Minimización del código

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

Para List25, utilizamos SCSS, una hoja de estilos basada en sintaxis(Introducción a Sass). Esto nos permite estructurar nuestros archivos CSS a través de varias áreas de desarrollo en una disposición 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 imágenes

Optimizamos 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 instruimos a todos nuestros redactores acerca de la importancia de guardar imágenes optimizadas para la web. Consulte nuestra guía sobre cómo guardar imágenes optimizadas para la web.

Compartir en redes sociales sin JavaScript

El intercambio social para List25 es realmente importante como cualquier otro sitio web. Sin embargo, los plugins de intercambio social pueden ralentizar significativamente su 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 provocaba que el contenido de la entrada se moviera mientras los botones se cargaban.

Para solucionar este problema, optamos por una solución (casi) sin JavaScript. Cada uno de los botones para compartir de las redes sociales es procesado por nuestro plugin personalizado de WordPress, y el Javascript del tema solo 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 veces que se había compartido una entrada 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 meta tabla de entradas. Estos recuentos se actualizan cada 24 horas, lo que garantiza que no se ejecuten constantemente consultas que consumen mucho tiempo.

Puede utilizar una API como Sharre o diseccionar la barra social flotante para personalizarla.

Utilizando el RUM (Real User Monitoring) de Pingdom, este nuevo plugin para compartir redujo el tiempo “real” de carga de la página de 6 segundos a poco más de 2 segundos. También garantizó que redujéramos el número de peticiones realizadas por scripts de terceros.

Resultado

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

Pudimos reducir significativamente el tiempo de respuesta de nuestro servidor.

Esto ayudó a reducir el tiempo dedicado a la descarga de una página por el bot de Google, lo que ayudó a nuestra tasa / tarifa de rastreo.

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

Como se puede 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 puede ver, un sitio web que carga 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 puede implementar para optimizar su sitio de WordPress.

Esperamos que este artículo le haya ayudado a acelerar su sitio WordPress. También puedes marcar / comprobar nuestro artículo acerca de 20 must have WordPress plugins for 2015.

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