Manofmany.com es una revista de estilo australiana dedicada a los hombres.
Todos los días, el equipo publica cosas interesantes sobre estilo, gadgets, tecnología, etc.
Después de charlar con ellos en Google+, les entregamos este sencillo informe de optimización.
Tiempo de carga
Diferentes herramientas muestran diferentes datos:
- Barra de herramientas SEO de Chrome: 7,43 segundos
- Herramientas Pingdom – 12.62 dic
- GTMetrix – 9,86 segundos
- Webpagetest.org – 24,14 seg
Tamaño de página
Diferentes herramientas muestran diferentes datos:
- YLento: 3096,5 bytes
- Herramientas Pingdom: 4,0 MB
- GTMetrix: 3,88 MB
- Página webtesst.org: 3.816 KB
Voy a utilizar sólo una herramienta más, YSlow.
Componentes
Demasiadas solicitudes http: 51. 51 no es enorme pero se puede mejorar.
JavaScript
Hay 15 archivos js, tamaño total 627,1K:
- https://apis.google.com/js/plusone.js – 22,9 mil
- http://platform.twitter.com/widgets.js – 80,7 mil
- http://www.google-analytics.com/ga.js – 37,3 mil
- http://edge.quantserve.com/quant.js – 5,8 mil
- http://manofmany.com/wp-content/themes/clearly/library/js/modernizr.full.min.js – 13,6 k
- http://manofmany.com/wp-content/themes/clearly/library/js/jquery.fitvids.js?… – 2,7k
- http://manofmany.com/wp-content/themes/clearly/library/js/scripts.js?… – 7,1k
- http://s3.buysellads.com/ac/bsa.js – 16,1 mil
- http://s3.buysellads.com/r/s_74ca33a0013c12e56d70fc5c06b96646.js?… – 2,1k
- http://pagead2.googlesyndication.com/pagead/show_ads.js – 13,9 mil
- http://manofmany.com/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?… – 15,1k
- http://manofmany.com/wp-content/plugins/contact-form-7/includes/js/scripts.js?… – 6,9k
- https://apis.google.com/…/cb=gapi.loaded_0 – 129,7k
- http://manofmany.com/wp-includes/js/jquery/jquery.js?… – 93,6k
- http://connect.facebook.net/en_GB/all.js#xfbml=1&appId=363084773773073 – 178,9 mil
JQuery.js se puede cargar desde la Biblioteca de Google para mejorar la velocidad.
El mayor problema son los archivos JS de las redes sociales; Definitivamente no están usando el mejor complemento para compartir en redes sociales. Se podría hacer con un solo JS de 38,5k o incluso sin script.
Eso reducirá 249,6K y dejará el número JS en 11. Es una mejora considerable en el tamaño de la página.
CSS
Hay 12 archivos CSS con un tamaño total de 63,7K.
El tamaño no es mucho pero el número es un poco alto.
Se pueden combinar 3 archivos en uno: el tema estilos.css y los complementos Easy Columns y Contact Form.
El resto son fuentes cargadas desde la Biblioteca de Google, por lo que la pregunta aquí es: ¿realmente necesitas 9 fuentes?
Por lo general, deberías utilizar 2 fuentes: una para los títulos y otra para el cuerpo del texto.
PT Sans y Open Sans no son tan diferentes, por lo que podrías usar solo uno de los 2.
Lora y PT Serif: igual que el anterior, use solo una o solo use Georgia (es una hermosa fuente segura para la web).
Nixie One: no lo veo en uso en el sitio.
Para las fuentes que se usan raramente, no tiene sentido cargarlas cada vez, simplemente use fuentes del sistema: Georgia, Arial, Courier.
Eso mejorará las solicitudes de 12 a solo 3-4, las mejoras de tamaño no son tan grandes pero se suman.
Imágenes
Ese es el mayor problema del sitio web con mayor impacto en la velocidad: 18 imágenes, tamaño total de 2597,5 K.
Eso es enorme; necesitan optimizar las imágenes antes de subirlas.
La imagen más grande del sitio tiene 420K y un simple smush.it muestra que se puede mejorar en un 27,6%, eso es 104K ahí mismo.
Si podemos mejorar todo en un 25%, eso significa una pérdida de peso de más de 600.000.
Soluciones:
1. Optimización de imágenes
Utilice Photoshop y Guarde para la web al 60% y esté marcado de forma progresiva. Si sus visitantes usan Chrome, Firefox o IE9, los archivos jpg progresivos se cargan súper rápido. Por lo demás, será un poco más lento que los jpg normales.
De lo contrario, simplemente ahorre para la web al 60% -80% y verifique la optimización. Esto guarda archivos jpg normales.
Después de eso, proceda a cargar imágenes en WordPress.
¿Sin Photoshop?
Utilice jpegmini.com para optimizar las imágenes antes de cargarlas o simplemente utilice un complemento de WP para hacerlo automáticamente al cargarlas.
2. Servir imágenes
Sirve contenido estático desde un dominio sin cookies y paraleliza las descargas entre nombres de host.
Esas dos cosas se pueden lograr cargando imágenes desde un subdominio sin cookies, algo así como imágenes.manofmany.com.
Ahora, el navegador puede descargar varios elementos a la vez, mejorando la velocidad del sitio web.
Carga diferida
Esto significa que las imágenes se cargarán una por una y serán visibles para los usuarios sólo cuando sea necesario.
Se cargan cuando son visibles únicamente en la ventana gráfica del navegador.
Al cargar solo imágenes en la mitad superior de la página, la ganancia de velocidad es significativa.
Otras cosas que puedes hacer
– almacenamiento en caché del navegador
– combine js (si es posible)
– agregue un encabezado de caducidad
– comprima con gzip
– use etags
– Complementos de creación de perfiles para ver cuál afecta el tiempo de carga y reemplácelo con mejores complementos
– Use código en funciones.php en lugar de complementos para cosas simples como cargar Google Fonts
– resolver errores 404
– minimizar las redirecciones
– cargar javascript en la parte inferior de la página
– puedes usar solo 5 publicaciones por página en lugar de 10
– puedes usar imágenes más pequeñas como miniaturas, pero eso significa interfiriendo con el diseño
Conclusión
La mayoría son cosas simples que pueden tener un gran impacto.
Para una optimización más avanzada, deberíamos mirar el tema y los complementos y verificar si hay problemas de rendimiento.
Deja un comentario