Aghiuta.com es un blog sobre política y seguimiento de los medios escrito por Florin Popescu. Aquí está nuestra optimización de WordPress que hicimos para este blog.
Antes de la optimización
La velocidad de carga de la primera página fue de 4,3 segundos.
La página de inicio tiene 86 solicitudes y 1,3 MB.
- 14 javascripts – 505,6k
- Hoja de estilo de 20 sitios: 41,1 k
- 23 archivos – 601 mil
js
Facebook Connect JS tiene 174,4K y se carga en 0,69 segundos. El cuadro Me gusta de Facebook se puede insertar como un widget de texto copiando el código del iframe de la del cuadro Me gusta de los desarrolladores de Facebook y eso elimina el archivo JS.
El tema Gonzo incluye un archivo script.js que tiene 101,3K. Incluye varios scripts como:
- fitvids
- deslizador flexible
- flexibilización de jquery
- pestañas tabber
- estiramiento de espalda
- caja de luz bonita foto
- elastislide
Backstretch se usa para la imagen de fondo grande, pero al menos cuatro de los otros no se usan: flexslider, Prettyphoto, elastislide, tabber tabs.
Fitvids hace que los vídeos incrustados sean responsivos, por lo que probablemente sea necesario.
jQuery Easing produce algún efecto al hacer clic (la diapositiva del formulario de búsqueda).
Además, jQuery Easing (8,1 K) se carga una vez más mediante el complemento LayerSlider (26K) que no se utiliza en ninguna parte.
Eliminé los scripts no utilizados y el tamaño del archivo disminuyó de 101,3 KB a solo 29 KB.
Botones para compartir archivos JS
El complemento que coloca los botones para compartir en el sitio web tiene un impacto bastante grande en el tiempo de carga:
- Más 1 – 25,8K
- API de Google: 84,2K
- Gorjeo – 84,5K
- Barra social: 1,8K
Todo esto se puede solucionar utilizando otro complemento ( Jetpack ) que carga un único archivo JS de 35K para todos los botones.
jQuery se puede cargar desde la Biblioteca de Google en lugar de cargarlo desde el servidor.
Addfreestats JS da un error 404. Recomendamos utilizar Google Analytics.
CSS
Hay demasiados archivos CSS (20), algunos cargados con @import, que no es la mejor opción para el rendimiento.
Hemos combinado lo que era posible (a veces combinar archivos js o css genera errores) y ahora tenemos solo 7 archivos CSS.
Imágenes
Las imágenes se pueden optimizar mejor para la web (misma calidad pero menos KB) y creo que podemos ahorrar al menos un 5% de cada imagen.
En la primera página, las miniaturas tienen un tamaño de 166x166px, pero las imágenes cargadas son más grandes, 300x300px.
Las imágenes deben cargarse a 166x166px.
WordPress crea demasiadas miniaturas:
- 960×677
- 150×105
- 300×211
- 550×387
- 700×426
- 300×300
- 50×50
- 290×166
- 620×310
- 620×350
- 186×186
- 620×220
El sitio sólo necesita:
- 166×166 – miniaturas de la primera página
- 50×50 – miniaturas para la barra lateral
- 134×77 – miniaturas de publicaciones relacionadas
- 290×166 – miniatura para archivo de categoría
Las dimensiones restantes son inútiles y ocupan espacio en el servidor. Podemos borrarlos y eliminar el código innecesario del tema que le dice a WordPress que haga esos pulgares.
Implementamos Lazy Load para que solo se carguen las imágenes en la parte superior de la página (en la mitad superior de la página), lo que brinda una mejora importante en la velocidad percibida.
Después de la optimización
Después de eliminar el código innecesario de los archivos JS, los archivos CSS combinados, la configuración e implementación correctas del caché de la página y del caché de la base de datos, el sitio web ahora realiza 48 solicitudes y tiene 634,5 KB.
Velocidad de carga de la primera página: 1,47 segundos.
Logramos una mejora del rendimiento de alrededor del 60%.
Podemos optimizar más, pero eso significaría eliminar algunos elementos que brindan una funcionalidad específica deseada por el propietario, por lo que nos detuvimos aquí.
Deja un comentario