[SOLUCIONADO] ¿Cómo Optimizar el rendimiento del Blog? ¿Reducir CSS manualmente?

rbnncls · #1 (**permalink**) 12/10/2013, 12:48

¡Hola!
Hace poco acabé el diseño del Blog y me di por satisfecho con ello.

Pero algunos amigos me dijeron que les tardaba mucho en cargar, más de 30 segundos, otros me decían que no tardaba ni 10 segundos. Personalmente me tarda como 10 segundos y será porque lo abro a diario.

El caso es que usé Google PageSpeed Insights para medir la velocidad y pues me da esta puntuación acá la podéis ver: http://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fklaus-net.blogspot.com.es%2F

Respecto a Optimizar las imágenes, no lo quiero hacer porque ya he probado hasta reducir al máximo el peso manteniendo la calidad.

Mi problema está en el CSS, y es que he metido todos los JS en la plantilla del Blog, incluso los jQuery, y todo va bien, ya los pude quitar del hosting.

Pero he estado aprendiendo a usar el Audit este del Google Chrome, y me decía esto:

Así que copié los CSS del Bundle.css a la plantilla de Blog. Pero no sé eliminar la llamada porque según el visor del código fuente de Chrome, esa llamada la realiza la etiqueta <HTML>

:
Y he leído en Vagabundia que esas cosas no las puedo eliminar porque entonces se me jode todo

No sé qué hacer

Aparte de todo esto, usé la página CleanCSS.com y limpié gran parte del código, me lo dejó muy bien estructurado. Pero es que según el Chrome, el 89% del CSS ¡¡¡No se usa en la página!!!

Y quiero saber cómo puedo eliminar todo ese código que no se usa sin tener que hacerlo manualmente

He probado eliminando cosas, pero se me pierden los estilos del Blog, y lo habré hecho 30 veces y no sé cómo reducir el código si es que realmente sobra el 89%

Bueno, dejaré de explicarme porque si no me puedo volver pesado.

Saludos, y por favor espero que alguien me puede ayudar, si es que hay solución para esto, gracias por adelantado.

Por cierto, ¿creéis que esa puntuación de velocidad está bien y no debería preocuparme más, o debo conseguir que llegue al 99% ?

ArturoGallegos · #2 (**permalink**) 13/10/2013, 18:50

con un sitio asi yo no me preocuparia del CSS de momento primero tienes que replantearte la estructura y funcionalidad de tu sitio.

- Es molesto que cuando lo habres te aparesca un splash de carga y no te muestre nada del sitio hasta que termina de cargar.
- imagenes de fondo mal cortadas u optimizadas.
- tus imagenes del estan terriblemente mal optimizadas.
- formatos inadecuados para las imagenes.
- imagenes fuera de proporcion, estas se deben redimencionar al tamaño que seran utilizadas.

Tu sitio para ti puede ser rapido ya sea por cache del navegador o por que tienes una coneccion rapida.

Para poder verlo tienes que descargar 3 megas y con una conexion lenta esto implica mucho tiempo de espera, lo que para ti son segundos para otros usuarios pueden ser minutos.... y ni hablar si se trata de un mobil.

te doy dos ejemplos, en el slide del header la imagen de la chica con texto al lado pesa casi 500kb con una optimizada y formato correcto no debe pesar mas de 60kb sin perder calidad.

en el home aparece una imagen de los chicos de "Tengen Toppa Gurren Lagann " pesa 800kb no deberia pesar mas de 130kb y si le pones el tamaño en que se usara no pasaria de 20kb

yo tengo internet de 5MB y me tardo entre 12 a 20 segundos cada que recargo el sitio.... imaginate la gente que solo tiene 1MB o menos.

Dando una segunda revisada veo exceso de codigo css en el mismo documento html, sin optimizas... es amigable a la vista pero cero optimizacion.... lo mismo de javascript.... y algunos errores html

pzin · #3 (**permalink**) 14/10/2013, 01:50

Realmente 10 segundos sigue siendo demasiado tiempo para la carga de un sitio.

Audits te analiza la página en la que estás, no toda la web. Por lo que tal vez te dice que no se usa el 89% del código CSS en una página dada, pero si tienes un solo archivo CSS para toda la web, obviamente el resto se usará en las demás páginas.

Pero bueno, el problema principal estará en las imágenes como dice Arturo. Dudo que tengas ni tan siquiera un mega en CSS.

rbnncls · #4 (**permalink**) 24/10/2013, 12:47

Hola a todos

Finalmente conseguí aumentar a un 90 / 100 en PageSpeed Insights de Google, primero llevando a cabo vuestro consejo de redimensionar algunas imágenes, las he pasado sobre todo a GIF, pero no todas, ya que tengo algunos detalles y quiero que tengan calidad.

El segundo paso fue eliminar el Bloqueo de CSS que crea el propio Blogger, siguiendo los pasos de este tutorial en Diarios de la Nube

http://diariosdelanube.blogspot.com.es/2013/09/la-guia-de-rendimiento-para-bloggers_10.html#.Umlq2vl7Lng

Saludos a todos y gracias de nuevo.