¿Quieres acelerar tu sitio de WordPress? ¿Quieres saber los trucos de optimización de WordPress que pueden ayudarte a reducir el tiempo de carga de tu sitio? En este artículo, le mostraremos cómo acelerar WordPress compartiendo cómo hemos optimizado nuestro sitio List25 para aumentar el rendimiento.
Probablemente has oído que la velocidad de WordPress es importante para el SEO. Un sitio más rápido tiene mejor participación de los usuarios, más vistas de página y mejores ventas. En un extraño estudio de caso, encontraron que un retraso de un segundo puede costarle el 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 se acelera realmente WordPress?
Bueno, en lugar de 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 lo hemos logrado todo.
Descripción general
List25 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 trimestre de vistas BILLION .
El contenido del sitio es principalmente imágenes y vídeos que ocupan terabytes de ancho de banda, por lo que la optimización de la velocidad global fue crucial para mantener los costes bajos, reducir el abandono de páginas y mejorar el tiempo de permanencia en el sitio.
Antes de comenzar la optimización, nuestra página web tardó 2,21 segundos en cargarse según Pingdom. Después de que 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 la puntuación del rendimiento de la velocidad de nuestra página, reducir el número total de solicitudes y mejorar el tiempo total de carga.
Echemos un vistazo a las técnicas de optimización que nos ayudaron a acelerar nuestro sitio de WordPress.
Alojamiento 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 compañía de hospedaje anterior (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 ideal para sitios más pequeños, pero no para algo de esta magnitud.
Buscamos varias opciones de alojamiento de WordPress administradas, y finalmente terminamos usando SiteGround para alojar List25 porque ofrecían el mejor valor total para este sitio.
Usted puede 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 construido potenciadores de rendimiento para plataformas específicas como WordPress, Joomla y Magento. Basados en la plataforma de su sitio, optimizan especialmente sus servidores lo que resulta en un mejor rendimiento general.
Escribimos un artículo sobre cuándo debe cambiar su alojamiento web que habla de los 7 indicadores clave.
Si está buscando cambiar de host, entonces definitivamente pruebe SiteGround. Los usuarios de AprenderWP 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 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 requiere muchos recursos. Cuando se dispone de caché, se ahorra tiempo y recursos.
El siguiente diagrama muestra el proceso. En términos simples, piense en el almacenamiento en caché como la creación de un acceso directo en el escritorio que le ayuda a llegar al archivo más rápido.
Para el sitio de List25, estamos usando el SiteGround SuperCacher, un plugin que ellos construyeron especialmente para sus clientes. Además, añadieron opciones avanzadas de almacenamiento en caché dinámico utilizando Varnish (parte de su potenciador de rendimiento).
Si no estás en Siteground, no te preocupes. Puede configurar la caché en su sitio WordPress utilizando una de las muchas soluciones disponibles como W3 Total Cache o WP Super Cache.
En AprenderWP, estamos utilizando W3 Total Cache, que proporciona una serie de opciones de almacenamiento en caché de páginas, almacenamiento en caché de bases de datos y almacenamiento en caché de objetos.
A medida que más empresas de hosting se especialicen en WordPress, veremos más soluciones de almacenamiento en caché personalizadas. Pagely y WPEngine también ofrecen su propio sistema de almacenamiento en caché integrado.
CDN
Las Redes de Entrega de Contenido (CDN) pueden ayudarle a aumentar la velocidad de su sitio web. Hemos estado usando MaxCDN desde el principio de List25, así que esta parte no ha cambiado.
Hemos escrito un artículo completo sobre qué es una CDN y por qué la necesita junto con una infografía.
CDN nos permite servir todos los CSS, Javascript e imágenes de una Red de Entrega de Contenido. 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á en el mercado de una solución de CDN premium, entonces puede utilizar Cloudflare.
Combinación de archivos para reducir las solicitudes HTTP
A medida que se añaden más plugins, a menudo añaden sus propios archivos JavaScript y CSS. Cada archivo adicional es una nueva petición HTTP.
Combinamos estos archivos JavaScript y CSS en un solo archivo para cada uno de ellos para reducir las solicitudes y acelerar el tiempo de carga. Puede ver más detalles sobre cómo los plugins de WordPress afectan el tiempo de carga.
Mientras que ahora estamos cargando alguna pequeña funcionalidad que puede que no necesitemos en una sección particular del sitio, este código se almacena en la CDN, y los resultados muestran que menos peticiones de archivos proporcionan 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 usas cambian con el tiempo.
Sprites de imágenes
Hicimos uso de un sprite de imágenes que combinaba varios iconos sociales y del sitio en una sola imagen:
Siempre que necesitábamos mostrar un icono en particular, usá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 para que nuestra imagen cargue el icono necesario
Por ejemplo, para cargar los iconos de medios sociales de la barra lateral, usamos:
1234567li.widget_social_icons ul li { float: izquierda; ancho: 36px; altura: 36px; margen: 010px10px0; relleno: 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 { posición de fondo: -36px-50px; }li.widget_social_icons ul li.pinterest { posición de fondo: -72px-50px; }li.widget_social_icons ul li.google { posición de fondo: -108px-50px; }li.widget_social_icons ul li.rss { posición de fondo: -144px-50px; }li.widget_social_icons ul li.youtube { posición de fondo: -180px-50px; }.
Las propiedades CSS de posición de fondo, anchura y altura nos ayudan a apuntar a la sección específica de la imagen que queremos producir:
Como resultado, sólo la primera solicitud de este archivo de imagen utiliza ancho de banda. Las solicitudes subsiguientes a la CDN para la imagen resultarán en la carga de la versión en caché (típicamente local), así como en la necesidad de solicitar una sola imagen frente a 6 iconos sociales diferentes.
Al combinar JavaScript, CSS e imágenes juntas, redujimos significativamente el número de solicitudes.
Minificación de código
La minificación de código implica la eliminación de espacios en blanco y saltos de línea para reducir el tamaño del archivo, lo que hace que sea más rápido de cargar cuando se solicite.
Para List25, usamos SCSS, una hoja de estilo basada en sintaxis (Intro to Sass). Esto nos permite estructurar nuestros archivos CSS a través de 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 espacios en blanco y saltos de línea para asegurar 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: el tema de WordPress y el contenido subido.
Para nuestro tema WordPress, utilizamos CodeKit para asegurarnos de que todas las imágenes estuvieran comprimidas sin pérdidas. Esto asegura 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 imágenes optimizadas para la web. Vea nuestra guía sobre cómo guardar imágenes optimizadas para la web.
Compartición social sin javascript
Compartir socialmente para List25 es realmente importante, como cualquier otro sitio web. Sin embargo, los plugins para uso compartido social pueden ralentizar significativamente su sitio.
Aunque la integración de estos cuatro scripts para redes sociales no afectó el tiempo de carga de la página en nuestras pruebas, ralentizó visiblemente el sitio web cuando se visualizaba en un dispositivo móvil. Los botones de compartición social tardan unos segundos en aparecer, a pesar de que los scripts se cargan asincrónicamente, lo que hace que el contenido de los mensajes se mueva a medida que los botones se cargan a la vista.
Para abordar este problema, nos movimos a una solución (casi) libre de Javascript. Cada uno de los botones para compartir de la red social son renderizados por nuestro plugin WordPress personalizado, 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, todavía queríamos mostrar el número total de acciones que tenía un mensaje en todas las redes sociales. Para ello, hemos producido un pequeño plugin personalizado de WordPress para recuperar y almacenar en caché los recuentos de acciones sociales de cada red social en la metatabla de Post. Estos recuentos se actualizan cada 24 horas, lo que garantiza que las consultas que consumen tiempo no se ejecuten constantemente.
Puede utilizar una API como Sharre o diseccionar la Barra Social Flotante para personalizarla.
Usando el RUM (Real User Monitoring) de Pingdom, este nuevo plugin para compartir redujo el tiempo de carga de la página$0027real$0027 de 6 segundos a poco más de 2 segundos. También aseguró que redujéramos 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.
Pudimos reducir significativamente el tiempo de respuesta de nuestro servidor.
Esto ayudó a reducir el tiempo empleado en la descarga de una página por el 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 estaba cargando más rápido, y al cambiar de host pudimos reducir los errores del servidor.
Como 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 de carga más rápida puede mejorar la participación de los visitantes. Las técnicas que hemos discutido han cubierto un rango de mejoras básicas e intermedias que puedes implementar para optimizar tu sitio de WordPress.
Esperamos que este artículo le haya ayudado a acelerar su sitio de WordPress. También puede consultar nuestro artículo sobre 20 plugins de WordPress para el año 2015.
Si te ha gustado este artículo, suscríbete a nuestros tutoriales de vídeo de YouTube Channel for WordPress. También puede encontrarnos en Twitter y Facebook.