Optimización de WordPress para Wide Magazine

compatible con dispositivos móviles

Wide Magazine es una revista de estilo de vida que presenta experiencias interesantes en el centro de Bucarest.

Aunque la revista estaba alojada en un VPS, la velocidad era lenta. El costo del VPS administrado parecía excesivamente alto.

La velocidad de carga del sitio fue de 6,99 segundos, los componentes de la página totalizaron 2,5 MB y realizaron 113 solicitudes al servidor.

resultados de ping antes de la optimización
antes de la optimización

La página de inicio se estaba cargando:

  • 30 archivos JS – 883,2 KB
  • 11 archivos CSS: 138,3 KB
  • 22 imágenes CSS – 255,2 K
  • 13 imágenes – 1320,7K
  • 1 favicon – 16,9 K

La puntuación de Google PageSpeed ​​Insights fue 57/100, las recomendaciones fueron:

  • habilitar la compresión
  • aprovechar el almacenamiento en caché del navegador
  • optimizar imágenes
  • reduce el tiempo de respuesta del servidor
Puntuación de Google PageSpeed ​​Insights antes
antes de la optimización

Informe de optimización

Incluso el favicon tiene demasiados KB. Hicimos una prueba, la descargamos y la importamos a favicon.cc donde generamos uno nuevo. Obtuvimos un archivo de 1,6 K (aunque de menor calidad).

Imágenes

Las imágenes no están optimizadas y también se pueden mostrar gradualmente a medida que los visitantes se desplazan para acelerar la carga del contenido de la mitad superior de la página (carga diferida).

Otro problema con la visualización de imágenes es que se cargan en su tamaño original (1024*682px) y el navegador las cambia de tamaño a 676*450px.

Se recomienda cargar las imágenes directamente en una resolución de 676*450px o configurar una miniatura en ese tamaño en particular.

De esta manera, el navegador funciona menos al cambiar el tamaño de las imágenes y el tamaño de la página (KB) disminuye. Estos dos factores conducen a la mejora de la velocidad de carga.

Por ejemplo, tomamos una imagen aleatoria que tenía 163 KB, cambiamos el tamaño a 676 * 450 px y luego eso lo optimizamos con jpegmini.com. El archivo resultante tenía 70,7 K.

Incluso lo dejamos en 1024*682px y simplemente optimizándolo con JPEGMini obtuvimos un archivo de 90,3K, una mejora notable con respecto a los 163K iniciales.

archivos JS

Lo siguiente que buscamos es la cantidad y el tamaño total de los archivos JS: 30 archivos con un total de 883,2 KB.

Y aquí también encontramos algunos problemas.

JQuery se estaba cargando dos veces: la versión 1.9.1 (92.6K) de code.jquery.com y la versión 1.8.3 (93.6K) cargada desde la carpeta local de WordPress.

El mismo problema con el código de Google Analytics: una vez la versión anterior, ga.js (39,8K) y una vez la nueva versión, Analytics.js (20,3K).

Eso es 133,4K extra.

Hay varios archivos JS cargados por 2 complementos que esencialmente hacen lo mismo, mostrando galerías de fotos: NextGen Gallery y PrettyPhoto Media.

PrettyPhoto Media no parece usarse, por lo que se puede eliminar para ahorrar alrededor de 50 000 y 2 solicitudes.

Complementos

Se pueden eliminar 2 complementos adicionales, jQuery Mega Menu y Useful Banner Manager. jQuery Mega Menu no parece usarse en ninguna parte. Useful Banner Manager se utiliza para un solo banner, que podría mostrarse mediante un simple código html insertado en un widget de texto.

El complemento ShareThis que agrega botones para compartir a las publicaciones utiliza un JS de 125,1K. Podría reemplazarse con Jetpack, que usa un JS de solo 38,5K.

Facebook Like Box no está implementado de la forma más eficiente, utilizando un JS de 171,9K.

El método más simple y efectivo es copiar el código iframe de la página Me gusta de los desarrolladores de Facebook y pegarlo en un widget de texto, eliminando así la necesidad de JS.

El complemento de Google Maps utiliza cuatro archivos JS con un total de 60,7 KB.

Al igual que con Like Box, Google Maps también se puede integrar con un iframe.

Revisé las últimas 10 publicaciones y ninguna ha integrado un mapa, por lo que si no es una funcionalidad estándar y se usa raramente, es más eficiente ingresar manualmente los mapas con iframes en las publicaciones.

lo que hicimos

  • optimizamos imágenes
  • Configuramos la carga progresiva de imágenes en el sitio.
  • implementamos caché de página + caché de base de datos
  • Resolvimos el jQuery duplicado.
  • Resolvimos el JS duplicado de Google Analytics.
  • Resolvimos el cuadro Me gusta de Facebook.

El resultado

resultados de ping después de la optimización
después de la optimización

La página de inicio ahora tiene 62 componentes con un total de 672,6 000, en comparación con 113 elementos que suman 2,5 MB = una mejora del 73 % .

La velocidad de carga promedio es ahora de 1,5 segundos, en comparación con 6,99 segundos = mejora del 78% .

Si necesita un sitio web de WordPress más rápido, no dude en ponerse en contacto con nosotros y ver qué podemos hacer para ayudarlo.

Comentarios

Deja un comentario

Su dirección de correo electrónico no será publicada. Los campos obligatorios están marcados *

Inglés