¿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:
- Cargar la imagen como imagen de fondo
- Definir la anchura y la altura del elemento para el que necesitamos el icono
- 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.
Peter
I love Performance Guides so much
Thanks for Sharing with us. In Germany there not so many Wordpress Blogs. But we have Great Guides too.
But don’t forget HTTP/2 this will change a lot. I mean combine fiels no longer good for optimize and priority are comes in the game
Gabe Livan
To further reduce the number of HTTP requests I recommend “WP Asset Clean Up” plugin as it removes all unnecessary styles and scripts that are not needed on the home page and other posts/pages.
Patrick Evans
I’m using Rosehosting to host my WordPress websites and I’m very pleased with the speed and reliability of my VPS.
From your tutorials, I learned how to make use of image sprites and how to save images optimized for web and my websites are faster now.
Thanks!
Miro
Switched to site ground recently and I am really happy with them. I also followed steps in this article and got quite good results except one thing. I failed in Combining Files to Reduce HTTP Requests. Plugins that are out there to do so don’t work well, moreover, they either break my site or make it extremely slow. Do you have an article / a tutorial on how to manually Combine Files to Reduce HTTP Requests? Would you suggest anyone who provides such a service (combining js and css files to reduce http requests). Thank you
Jane
Thanks for the article guys.
We deffo needed something to optimize our speed due to large number of high res images
We use Wp Cache on our free photo site, but we also noticed that even though this helps, we still need to compress (resize) images cause it takes a lot of time to laod 20 images (on home page).
So, basically, resize everything and keep high resolution images in the background (for downloads)
Have a great weekend
Jane
Piet
For the images you use a sprite you say, but the images you’re using can easily be replaced with a font icon such as FontAwesome. Depending how you install that (I would use Bower), it’s not even an outgoing http request, so you could save yourself the loading of that image file (and all the calculating to make it right of course).
Jay Castillo
Wow! Your numbers for List25 with Siteground are awesome! Did you use the GoGeek plan or is there a bigger plan not listed on their website?
One more thing, what tool did you use to get server response times (the graph just above Google bot crawl rate)?
Editorial Staff
We are using their Dedicated server plan with the WordPress Booster package. We used Pingdom for the server response time graph.
Administrador
Jay Castillo
Got it, thanks!
Alberto Serrano
Hello , I hosted my site on site ground but didn’t knew they had a cache plugin already installed so I installed WP supercache , should I disable one and which one would be better ?
Thanks
Editorial Staff
Yup you probably don’t need SuperCache. I would confirm with SiteGround support just to make sure though
Administrador
Lawrence
Thanks for this very helpful guide!
Please, did you setup Maxcdn together with Siteground’s SuperCacher?
I recently moved to siteground and will love to know how to setup Maxcdn, given that the supercacher plugin is already active on my account
WPBeginner Support
Hi Lawrence,
When you cache content on your website, it is still served by the same server. MaxCDN, on the other hand serves your content using their content delivery network which improves your website’s performance. As for compatibility concerns, you may want to contact your hosting provider.
Ian Douglas
Please consider letting loose your custom social sharing plugin into the wild (i.e., free to download for the public). Social sharing has always been a drain on pages, so it would be great to get a sleek and fast option.