Reducir el ancho de página de WordPress de alojamiento

¿Quieres acelerar su sitio de WordPress? ¿Quieres conocer los trucos de optimización de WordPress que pueden ayudar a reducir el tiempo de carga del sitio? En este artículo, vamos a mostrar cómo acelerar WordPress al compartir cómo hemos optimizado nuestro sitio List25 para aumentar el rendimiento.

velocidad de WordPress es probable que haya oído 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 ventas. En un estudio de caso Strangeloop, encontraron que un segundo de retraso puede costar 7% de las ventas, el 11% menos de páginas vistas, y el 16% de disminución en la satisfacción del cliente.

Entonces, ¿cómo realmente acelerar WordPress?

Así, en lugar de simplemente compartir una lista de consejos de velocidad, decidimos hacer un estudio de caso completo para lograr que los resultados de nuestro sitio List25 junto con la forma en que hemos logrado todo.

List25 es un blog de entretenimiento iniciado 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 mil millones de visitas trimestre.

El contenido del sitio es en su mayoría imágenes y vídeos que ocupa terabytes de ancho de banda, por lo que la optimización de la velocidad en general era crucial para nosotros mantener los costos bajos, reducimos la página abandono y mejorar la calidad de tiempo en el sitio.

Antes de empezar la optimización, nuestra página web tomó 2.21 segundos en cargar acuerdo con Pingdom. Después de habernos hecho, nuestro tiempo de carga se redujo a 1,21 segundos (

Durante esta optimización, hemos sido capaces de acelerar el tiempo de respuesta del servidor, mejora nuestro nivel de rendimiento de velocidad de la página, reducir el número de total de la petición, y mejorar el tiempo de carga total.

Vamos a echar un vistazo a las técnicas de optimización que nos ayudaron a acelerar nuestro sitio de WordPress.

Tener un buen proveedor de alojamiento web es crucial para la velocidad de su sitio web. A medida que nuestro sitio se hizo más popular, simplemente superó nuestra empresa de alojamiento anterior (HostGator).

Sus servidores simplemente no podía 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.

Nos fijamos en las diversas opciones de WordPress hosting gestionado, y, finalmente, terminamos usando Iart para acoger List25 porque ofrecían el mejor valor general para este sitio.

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

SiteGround ha construido impulsores de rendimiento para plataformas específicas como WordPress, Joomla, Magento y. Basado en la plataforma de su sitio, especialmente optimizar sus servidores lo que se traduce en un mejor rendimiento general.

Se escribió un artículo acerca de cuándo debe cambiar su alojamiento web que habla de los 7 indicadores clave.

Reducir el ancho de página de WordPress de alojamiento para reducir

Si usted está buscando para cambiar de alojamiento, entonces definitivamente dar Iart intentarlo. WPBeginner usuarios reciben un exclusivo 60% de descuento en hosting + dominio gratis.

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, el servidor pasa la solicitud de PHP a la base de datos MySQL que encuentra la página que se está solicitando, genera sobre la marcha, y mostrar al visitante. Esto ocupa una gran cantidad de recursos. Cuando se tiene el almacenamiento en caché, se ahorra tiempo y recursos.

El siguiente diagrama pone de relieve el proceso. En términos simples, pensar en el almacenamiento en caché como la creación de un acceso directo de escritorio que le ayuda a obtener al archivo más rápido.

Para List25 sitio, estamos utilizando el Iart SuperCacher, un plugin que construyen especialmente para sus clientes. Además de eso, agregaron opciones de caché dinámicas avanzadas utilizando Barniz (parte de su refuerzo de rendimiento).

Si usted no está en Siteground. entonces no se preocupe. Usted puede almacenar en caché de configuración en su sitio de WordPress mediante el uso de una de las muchas soluciones disponibles como W3 Total Cache o Super GT caché.

En WPBeginner, estamos utilizando W3 Total Cache, que ofrece una serie de opciones de almacenamiento en caché de la página, el almacenamiento en caché de base de datos y almacenamiento en caché de objetos.

A medida que más empresas de alojamiento se especializan para WordPress, vamos a ver más soluciones de almacenamiento en caché de encargo construidas. Pagely y WPEngine también ofrecen su propio sistema de almacenamiento en caché integrada.

Redes de distribución de contenidos (CDN) pueden ayudar a aumentar su velocidad de página web. Hemos estado utilizando MaxCDN desde el comienzo de List25, por lo que esta parte no cambió.

Hemos escrito un artículo completo en lo que es un CDN y por qué lo necesita, junto con una infografía.

CDN nos permite servir a todos los CSS, Javascript y las imágenes de una red de distribución de contenido. Esto funciona mediante la determinación de la ubicación del visitante del sitio, y servir contenido desde un servidor más cercano al visitante.

Si no está en el mercado para una solución de alta calidad CDN, entonces se puede utilizar Cloudflare.

A medida que agrega más plugins, a menudo añaden sus propios archivos JavaScript y CSS. Cada archivo adicional es una nueva petición HTTP.

Hemos combinado estos archivos JavaScript y CSS en un solo archivo para cada uno de reducir las solicitudes y acelerar el tiempo de carga. Puede ver más detalles sobre esto en la forma de plugins de WordPress afectar el tiempo de carga.

Mientras que ahora estamos cargando alguna pequeña funcionalidad que no podríamos necesitar en una sección particular del sitio, este código se almacena en caché en el CDN, y los resultados muestran que un menor número de solicitudes de archivos proporcionan un mejor rendimiento que cargar varios archivos JS más pequeños.

Esto es algo que tiene que hacer sobre una base regular, porque los plugins que utiliza el cambio de horas extras.

Hicimos uso de un sprite de imagen, que combina varios iconos sociales y sitios en una sola imagen:

Cada vez que necesitamos para mostrar un icono en particular, nos gustaría utilizar CSS para:

Cargar la imagen como imagen de fondo
Definir la anchura y la altura del elemento que necesitamos en el icono de
Establecer la posición de fondo para nuestra imagen para cargar el icono necesaria

Por ejemplo, para cargar los iconos de redes sociales de la barra lateral, usamos:

La posición de fondo. anchura y altura CSS propiedades ayudan a orientar la sección específica de la imagen que queremos de salida:

Como resultado, sólo la primera solicitud de este archivo de imagen está utilizando el ancho de banda. Las solicitudes posteriores a la CDN para la imagen que se traducirá en la versión en caché (típicamente local) que se carga, así como que sólo necesitan para solicitar una única imagen vs. 6 iconos sociales diferentes.

Mediante la combinación de JavaScript, CSS y las imágenes juntos, hemos reducido el número de solicitudes de manera significativa.

minimización de código implica la eliminación de espacios en blanco y saltos de línea para reducir el tamaño del archivo haciéndolo más rápido para cargar cuando se le solicite.

Para List25, utilizamos SCSS, una hoja de estilo basado en la sintaxis (Introducción a Sass). Esto nos permite estructurar nuestros archivos CSS a través de varias áreas del desarrollo en un formato fácil de leer diseño:

Utilizamos CodeKit a continuación, compilar los archivos SCSS en un solo archivo CSS. CodeKit también elimina los espacios en blanco y saltos de línea para asegurar el archivo es tan pequeño como sea posible:

Como resultado, hemos sido capaces de reducir el tamaño del archivo CSS en un 28%.

Hemos optimizado nuestras imágenes en dos áreas: nuestro tema de WordPress y subido contenido.

Para nuestro tema de WordPress, se utilizó CodeKit para asegurar que todas las imágenes se comprimen sin pérdida. Esto asegura que los tamaños de archivo son lo más pequeño posible, sin pérdida de calidad.

También educamos todos nuestros escritores acerca de la importancia del ahorro de imágenes optimizadas para la web. Vea nuestra guía sobre cómo guardar imágenes optimizadas para la web.

Compartir redes sociales para List25 es muy importante al igual que cualquier otro sitio web. Sin embargo sociales para compartir plugins pueden ralentizar considerablemente su sitio.

Mientras que la integración de estas cuatro secuencias de comandos de redes sociales no afectar el tiempo de carga de la página en nuestras pruebas, es visiblemente más lento el sitio web cuando se ve en un dispositivo móvil. botones sociales para compartir tomarían unos segundos en aparecer, a pesar de los scripts que cargan de forma asíncrona, que resultan en el contenido del post moverse como los botones cargados a la vista.

Para hacer frente a este problema, se pasó a una solución de (casi) libre Javascript. Cada uno de los botones de uso compartido de la red social son prestados por nuestra costumbre Plugin de WordPress, y 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ía mostrar el número total de acciones tenía un puesto en todas las redes sociales. Para ello, hemos producido un pequeño encargo Plugin de WordPress para recuperar y almacenar en caché los recuentos de las acciones sociales de cada red social en la tabla de meta Post. Estos recuentos se actualizan cada 24 horas, lo que garantiza consultas que consumen tiempo no están funcionando constantemente.

También se puede usar una API como Sharre o diseccionar la barra flotante Social para la personalización.

Usando RUM de Pingdom (Real supervisión de usuarios), este nuevo plugin participación disminuyó el tiempo ‘verdadera’ carga de la página de 6 segundos a poco más de 2 segundos. También se aseguró de que hemos reducido el número de solicitudes hechas para los scripts de terceros.

Hemos mejorado significativamente nuestra velocidad del sitio. tiempo de carga fue de 2,2 segundos a 1,22 segundos.

Hemos sido capaces de reducir el tiempo de respuesta del servidor de manera significativa.

Esto ayudó a reducir el tiempo de descarga de una página de Google bot que ayudó a nuestra frecuencia de rastreo.

Nuestra tasa global de rebote se redujo en un 7% debido a que el sitio se carga más rápida, y por los ejércitos de conmutación hemos sido capaces de reducir los errores de servidor.

Como se puede imaginar con la tasa de rebote baja, el tiempo de permanencia en el sitio subió a su vez por más de 30 segundos.

Como se puede ver un sitio web de carga rápida puede mejorar la implicación de los usuarios. Las técnicas que hemos analizado han cubierto una gama de mejoras básicas e intermedias que se pueden implementar para optimizar su sitio de WordPress.

Esperamos que este artículo le ayudó a acelerar su sitio de WordPress. También es posible que desee comprobar hacia fuera nuestro artículo sobre 20 debe tener plugins de WordPress para el año 2015.

Si te gusto este artículo, por favor, suscribirse a nuestro canal de YouTube de video tutoriales de WordPress. También se puede encontrar en Twitter y Facebook.

¡Mira este video!

Choose Hosting

Top 3

Reducir el ancho de página de WordPress de alojamiento

Artículos relacionados