¿Quieres acelerar tu sitio de WordPress? ¿Quiere conocer los trucos de optimización de WordPress que pueden ayudarlo a reducir el tiempo de carga de su sitio? En este artículo, le mostraremos cómo acelerar WordPress compartiendo cómo optimizamos nuestro sitio List25 para aumentar el rendimiento.
Probablemente hayas escuchado que la velocidad de WordPress es importante para el SEO. Un sitio más rápido tiene una mayor participación del usuario, más páginas vistas y mejores ventas. En un caso de estudio de strangeloop, descubrieron que una demora 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 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 cómo lo logramos todo.
Descripción general
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 MIL MILLONES puntos de vista.
El contenido del sitio son principalmente imágenes y videos que ocupan terabytes de ancho de banda, por lo que la optimización de la velocidad general fue crucial para nosotros para mantener bajos los costos, reducir el abandono de páginas y mejorar el tiempo en el sitio.
Antes de comenzar la optimización, nuestra página de inicio tardó 2.21 segundos en cargarse de acuerdo con Pingdom. Una vez que terminamos, el tiempo de carga de nuestra página se redujo 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 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 proveedor de alojamiento web es fundamental 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 es ideal para sitios más pequeños, pero no para algo de esta magnitud.
Analizamos varias opciones de alojamiento administrado de WordPress y, finalmente, terminamos usando SiteGround para alojar List25 porque ofrecían el mejor valor general para este sitio.
Puede ver la mejora en el tiempo de respuesta de nuestro servidor de inmediato. Pasamos de un tiempo de respuesta máximo de 442 ms a 172 ms. Eso es una mejora del 256%.
Siteground ha creado potenciadores de rendimiento para plataformas específicas como WordPress, Joomla y Magento. Según la plataforma de su sitio, optimizan especialmente sus servidores, lo que se traduce en un mejor rendimiento general.
Escribimos un artículo sobre cuándo debe cambiar su alojamiento web que habla sobre los 7 indicadores clave.
Si está buscando cambiar de host, definitivamente pruebe SiteGround. Los usuarios de obtienen un descuento exclusivo del 60% en hosting + dominio gratis.
Complemento de almacenamiento en caché
Cuando se trata de acelerar WordPress, el almacenamiento en caché es el segundo factor más importante después de su alojamiento web.
Normalmente, cuando un visitante llega a su sitio de WordPress, su servidor pasa la solicitud PHP a la base de datos MySQL, que encuentra la página que se solicita, la genera sobre la marcha y se la muestra al visitante. Esto requiere muchos recursos. Cuando tiene almacenamiento en caché, ahorra tiempo y recursos.
El siguiente diagrama destaca el proceso. En términos sencillos, piense en el almacenamiento en caché como la creación de un acceso directo en el escritorio que le ayuda a acceder al archivo más rápido.
Para el sitio List25, estamos utilizando SiteGround SuperCacher, un plugin construyeron especialmente para sus clientes. Además de eso, agregaron opciones avanzadas de almacenamiento en caché dinámico utilizando Varnish (parte de su refuerzo de rendimiento).
Si no está en Siteground, no se preocupe. Puede configurar la caché en su sitio de WordPress utilizando una de las muchas soluciones disponibles como W3 Total Cache o WP Super Cache.
En , utilizamos 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 alojamiento se especialicen en WordPress, veremos más soluciones de almacenamiento en caché personalizadas creadas. Pagely y WPEngine también ofrecen su propio sistema de almacenamiento en caché integrado.
CDN
Content Delivery Networks (CDN) puede ayudarlo a aumentar la velocidad de su sitio web. Hemos estado usando MaxCDN desde el comienzo de List25, por lo que esta parte no cambió.
Hemos escrito un artículo completo sobre qué es un CDN y por qué lo necesita junto con una infografía.
CDN nos permite ofrecer 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 ofreciendo contenido desde un servidor más cercano al visitante.
Si no está buscando una solución CDN premium, puede usar Cloudflare.
Combinar archivos para reducir las solicitudes HTTP
A medida que agregas más plugins, a menudo agregan sus propios archivos JavaScript y CSS. Cada archivo adicional es una nueva solicitud HTTP.
Combinamos estos archivos JavaScript y CSS en un solo archivo para cada uno para reducir las solicitudes y acelerar el tiempo de carga. Puede ver más detalles sobre esto sobre cómo WordPress plugins afectar el tiempo de carga.
Si bien ahora estamos cargando algunas funciones pequeñas que es posible que no necesitemos en una sección particular del sitio, este código se almacena en caché en la CDN y los resultados muestran que menos solicitudes de archivos proporcionan un mejor rendimiento que cargar varios archivos JS más pequeños.
Esto es algo que tienes que hacer de forma regular porque el plugins usas el cambio de horas extras.
Sprites de imagen
Hicimos uso de un sprite de imagen que combinó varios íconos sociales y del sitio en una sola imagen:
Siempre que necesitáramos mostrar un ícono en particular, usamos CSS para:
- Cargue la imagen como imagen de fondo
- Defina el ancho y alto 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 íconos de redes sociales de la barra lateral, usamos:
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; }
La background-position, width y height Las propiedades CSS nos ayudan a apuntar a la sección específica de la imagen que queremos generar:
Como resultado, solo la primera solicitud de este archivo de imagen utiliza ancho de banda. Las solicitudes posteriores a la CDN para la imagen darán como resultado que se cargue la versión en caché (generalmente local), además de que solo se necesitará solicitar una sola imagen frente a 6 íconos sociales diferentes.
Al combinar JavaScript, CSS e imágenes, redujimos significativamente el número de solicitudes.
Minificación de código
La minificación del código implica eliminar los espacios en blanco y los saltos de línea para reducir el tamaño del archivo, lo que agiliza la carga cuando se solicita.
Para List25, usamos 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:
Usamos CodeKit para luego compilar los archivos SCSS en un solo 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 imagen
Optimizamos nuestras imágenes en dos áreas: nuestro tema de WordPress y contenido cargado.
Para nuestro tema de WordPress, usamos CodeKit para asegurarnos de que todas las imágenes se comprimieran sin pérdidas. Esto asegura que los tamaños de archivo sean lo más pequeños posible, sin pérdida de calidad.
También educamos a todos nuestros escritores sobre 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 al igual que cualquier otro sitio web. Sin embargo, el intercambio social plugins puede ralentizar significativamente su sitio.
Si bien la integración de estos cuatro scripts de redes sociales no afectó el tiempo de carga de la página en nuestras pruebas, ralentizó visiblemente el sitio web al visualizarlo en un dispositivo móvil. Los botones para compartir en redes sociales tardarían unos segundos en aparecer, a pesar de que los scripts se cargan de forma asincrónica, lo que hace que el contenido de la publicación se mueva a medida que los botones se cargan a la vista.
Para abordar este problema, nos mudamos a una solución (casi) libre de Javascript. Cada uno de los botones para compartir de la red social son procesados por nuestro complemento de WordPress personalizado, y el Javascript del tema solo se usa para abrir la ventana del navegador web cuando el usuario hace clic en un botón.
Sin embargo, aún queríamos mostrar el número total de veces que se compartió una publicación en todas las redes sociales. Para hacer esto, creamos un pequeño complemento de WordPress personalizado para recuperar y almacenar en caché los recuentos de acciones sociales de cada red social en la metatabla Publicar. Estos recuentos se actualizan cada 24 horas, lo que garantiza que las consultas que consumen mucho tiempo no se ejecutan constantemente.
Puedes usar una API como Sharre o diseccionar el Barra social flotante para la personalización.
Usando RUM (Real User Monitoring) de Pingdom, esta nueva acción plugin disminuyó el tiempo de carga de la página «real» de 6 segundos a poco más de 2 segundos. También aseguró que redujimos el número de solicitudes realizadas para 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 descargar 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 host, pudimos reducir los errores del servidor.
Como puede imaginarse con la tasa de rebote más baja, el tiempo dedicado al 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 una variedad 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 de WordPress. También puede consultar nuestro artículo sobre 20 debe tener WordPress plugins para 2015.
Si le gustó este artículo, suscríbase a nuestro Canal de Youtube . También puedes encontrarnos en Twitter y Facebook.
Acelerando WordPress: Cómo optimizamos el rendimiento de List25 en un 256% .