Acelerando WordPress Cómo optimizamos el rendimiento de la lista25 en un 256%

¿Quieres acelerar tu sitio de WordPress? ¿Desea conocer los trucos de optimización de WordPress que pueden ayudarle 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 mejorar el rendimiento..

Probablemente has escuchado que la velocidad de WordPress es importante para SEO. Un sitio más rápido tiene una mejor participación de los usuarios, más visitas a la página y mejores ventas. En un estudio de caso de Strangeloop, encontraron que una demora de un segundo puede costarle un 7% de las ventas, un 11% menos de visitas y un 16% de disminución en la satisfacción del cliente.

Entonces, ¿cómo realmente 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 lo logramos..

Visió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. BILLONES puntos de vista.

El contenido del sitio consiste principalmente en imágenes y videos que ocupan terabytes de ancho de banda, por lo que la optimización de la velocidad en general fue crucial para que podamos reducir 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 demoró 2.21 segundos en cargarse de acuerdo con Pingdom. Después de 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 nuestro puntaje de rendimiento de velocidad de 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 servicio de alojamiento web es crucial para la velocidad de su sitio web. A medida que nuestro sitio se hizo más popular, simplemente superamos nuestra empresa de alojamiento anterior (HostGator).

Sus servidores simplemente no pudieron manejar un sitio de este tamaño porque List25 recibe decenas de millones de visitas de página. HostGator es ideal para sitios más pequeños, pero no para algo de esta magnitud.

Analizamos varias opciones de alojamiento de WordPress administradas y finalmente terminamos usando SiteGround para hospedar List25 porque ofrecían el mejor valor general para este sitio..

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

Siteground ha creado impulsores de rendimiento para plataformas específicas como WordPress, Joomla y Magento. Basados ​​en 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, entonces definitivamente pruebe SiteGround. Los usuarios de WPBeginner 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 de 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 tienes caché, ahorra tiempo y recursos.

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

Para el sitio List25, estamos usando SiteGround SuperCacher, un complemento creado 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ás en Siteground, entonces no te preocupes. Puede configurar la memoria caché en su sitio de WordPress utilizando una de las muchas soluciones disponibles, como W3 Total Cache o WP Super Cache.

En WPBeginner, estamos usando W3 Total Cache, que proporciona varias 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 para WordPress, veremos más soluciones de almacenamiento en caché personalizadas creadas. Pagely y WPEngine también ofrecen su propio sistema de almacenamiento en caché incorporado..

CDN

Las redes de distribución de contenido (CDN) pueden ayudarlo 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 qué es un CDN y por qué lo necesita junto con una infografía..

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

Si no está buscando una solución CDN premium, entonces puede usar Cloudflare.

Combinando archivos para reducir las solicitudes HTTP

A medida que agrega más complementos, a menudo agregan sus propios archivos de JavaScript y CSS. Cada archivo adicional es una nueva solicitud HTTP.

Combinamos estos archivos de JavaScript y CSS en un solo archivo para reducir las solicitudes y acelerar el tiempo de carga. Puede ver más detalles sobre esto sobre cómo los complementos de WordPress afectan el tiempo de carga.

Si bien ahora estamos cargando una pequeña funcionalidad que quizás no necesitemos en una sección particular del sitio, este código se almacena 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 tiene que hacer de forma regular porque los complementos que usa cambian las horas extraordinarias.

Sprites de Imagen

Hicimos uso de un sprite de imagen que combinó varios iconos sociales y de sitio en una sola imagen:

Cada vez que necesitábamos mostrar un ícono en particular, usábamos CSS para:

1. Cargar la imagen como imagen de fondo.
2. Defina el ancho y alto del elemento para el que necesitamos el ícono.
3. Establezca 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; ancho: 36px; altura: 36px; margen: 0 10px 10px 0; relleno: 0; fondo: url (… /images/sprite.png) no-repetir;  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;  

los posición de fondo, anchura y altura Las propiedades CSS nos ayudan a dirigirnos a la sección específica de la imagen que queremos generar:

Como resultado, solo la primera solicitud de este archivo de imagen está utilizando el ancho de banda. Las solicitudes posteriores a la CDN para la imagen darán como resultado la carga de la versión en caché (generalmente local), así como la necesidad de solicitar una sola imagen frente a 6 iconos sociales diferentes.

Al combinar JavaScript, CSS e imágenes juntas, redujimos significativamente la cantidad de solicitudes..

Código de Minificación

La reducción de código implica eliminar 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 solicita.

Para List25, usamos SCSS, una hoja de estilo basada en la sintaxis (Intro to 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 espacios en blanco y 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

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érdida. 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. Consulta nuestra guía sobre cómo guardar imágenes optimizadas para web..

Intercambio social sin Javascript

Compartir redes sociales para List25 es realmente importante como cualquier otro sitio web. Sin embargo, los complementos para compartir en redes sociales pueden ralentizar significativamente su sitio..

Aunque la integración de estos cuatro scripts de redes sociales no afectó el tiempo de carga de la página en nuestras pruebas, visiblemente ralentizó el sitio web cuando se ve 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 asíncrona, 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, pasamos a una solución (casi) libre de Javascript. Cada uno de los botones de uso compartido de la red social está representado por nuestro complemento personalizado de WordPress, 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, todavía queríamos mostrar el número total de acciones que una publicación tenía en todas las redes sociales. Para hacer esto, produjimos un pequeño complemento personalizado de WordPress para recuperar y almacenar en caché los recuentos de redes sociales de cada red social en la tabla de metadatos Post. Estos recuentos se actualizan cada 24 horas, lo que garantiza que las consultas que consumen tiempo no se estén ejecutando constantemente.

Puede usar una API como Sharre o analizar la Barra social flotante para personalizarla.

Con el RUM de Pingdom (Real User Monitoring), este nuevo complemento para compartir redujo el tiempo de carga de la página "real" de 6 segundos a solo 2 segundos. También se aseguró de que redujéramos la cantidad de solicitudes hechas 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 de Google bot, 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 se puede imaginar, con el índice de rebote más bajo, el tiempo dedicado 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 analizado han cubierto una serie de mejoras básicas e intermedias que puede implementar para optimizar su sitio de WordPress. 

Esperamos que este artículo te haya ayudado a acelerar tu sitio de WordPress. También puede consultar nuestro artículo sobre 20 que debe tener complementos de WordPress para 2015.

Si le ha gustado este artículo, suscríbase a nuestros tutoriales en video del Canal de YouTube para WordPress. También puedes encontrarnos en Twitter y Facebook..