13 oct. 2011

Consejos y recursos para optimizar la velocidad del blog



En este artículo veremos de manera práctica cómo mejorar la velocidad de carga del Blog. Ha llegado la hora de remangarse y tomarse en serio el problema de lentitud del blog. Si..lo que oyes, mi blog también era lento como el tuyo y eso es malo, muy malo y además está penalizado por Google.

¿Por qué un blog es normalmente más lento que un sitio Web?.


Optimizar la velocidad de tu blog
Optimizar la velocidad de tu blog
La página inicial de un Blog no es como la página inicial de una Web. Un blog puede mostrar varios post, sin embargo, la página de inicio de una web es eso una única página. Por otro lado existen ciertos elementos propios de los blogs como son las fotos de los fans, los últimos comentarios, las entradas más populares, las etiquetas, las imágenes, iconos sociales, la publicidad, buscador, etc., que no son habituales en un sitio Web. 

Con toda esta cantidad de elementos y casi sin darnos cuenta el blog tiene que invocar cada vez a más servicios externos para ofrecer todo lo mencionado anteriormente, perjudicando la velocidad de carga del mismo. Estas peticiones pueden ser rápidas pero evidentemente la suma de todas es lo que hace que nuestro blog sea cada vez más lento.

Objetivo de este artículo

Una vez leas este artículo, no es cuestión de que elimines todos los gadgets de tu blog sino que uses las herramientas que veremos a continuación para analizar de manera detenida y con calma cual de ellos resulta más lento, y si es posible optimizarlo, en caso contrario debes plantearte si aporta un valor real al blog.

¿Cómo considerar si un blog es lento o no?

Es una buena pregunta, se dice que una Web lenta es la que tarda más de 4 segundos en mostrar su contenido. Yo no he encontrado la cifra exacta para un blog y no creo que exista ya que las herramientas de análisis sobre este tipo de cuestiones no hacen distinción entre una web o un blog. Por lo tanto tenemos que aproximarnos lo más posible a 4-7 segundos, pero no mucho más. En cualquier caso un blog que supere los 10 segundos es lento y seguro que puede ser optimizado.

¿Qué elementos son normalmente los más lentos en cargar?

  1. Las animaciones en Flash (normalmente son archivos muy pesados)
  2. Las imágenes no optimizadas asociadas a la estructura del blog (iconos sociales, banners,etcs )
  3. Los Gadgets de terceros, usados para mostrar por ejemplo mapas, usuarios conectados, etc.


¿Cómo saber cuanto tarda el blog en cargar?

Es lo primero que vamos a averiguar, para ello vamos a usar un servicio gratuito llamado GTMetrix que además de informarnos sobre la velocidad del blog nos asesora marcando en color en rojo aquellos aspectos que deberías mejorar. Sigue estos pasos:
  1. Elimina todo el historial y caché del navegador.
  2. Conecta con GTMetrix.com (inglés)
  3. Indica la url de tu blog y presiona el botón Go!
  4. Mira el resultado y fíjate fundamentalmente en dos cosas:
    • El tiempo de carga (Page load time)
    • El tamaño total de la página (Total page size)
  5. La puntuación global se obtiene con dos letras lo ideal es conseguir AA
  6. Guardar el informe resultante a PDF con el fin de tenerlo de referencia
  7. Deja la página abierta ya que vamos a comparar tu blog con otros.


Compara tu blog con tu blog usando las vistas dinámicas

Este es un ejercicio sumamente interesante y es que vamos a comparar tu blog con tu mismo blog usando vistas dinámicas de Blogger.
  1. Vuelve a la página que dejaste abierta
  2. Presiona el enlace situado a la izquierda que pone "Compare to another URL
  3. Añade la url de tu blog y al final pon /view, ejemplo: miblog.blogspot.com/view
  4. Compara los dos mismos parámetros.
Aquí llegamos a una conclusión muy, muy importante y es que si te fijas, las plantillas dinámicas no cargan ninguno de los gadgets que tienes en tu blog, ni imágenes (más que la de los propios post), ni publicidad, etc., y gracias a esto tu blog es sumamente más rápido. Esto supone un cambio de mentalidad para los que hasta ahora daban mayor importancia al continente que al contenido. Está claro que tu blog tiene que seguir siendo un blog por esto es muy importante buscar un punto de equilibro entre la estética que ofrecen los gadgets y los contenidos.

Si quieres en este punto, compara tus resultados con iniciablog.com.

Con GTMetrix vas a poder ver (pestaña Timeline) qué elementos tardan más, con lo que podrás incluso eliminar errores de tu blog. Recuerda que en rojo tendrás aquellos elementos que puedes mejorar.


Consejos prácticos para optimizar el tiempo de carga del Blog:

En base a la experiencia acumulada y el uso de la herramienta GTMetrix aquí tienes una batería de concejos prácticos para mejorar la velocidad de tu blog.

Quita los Gadget que no aportan un valor real a tu blog

Sé que es duro, lo sé, pero es necesario y siempre tendrás tiempo de volver a agregarlos.
  1. Gadget de relojes, mapitas, usuarios conectados, traductores del blog
  2. Gadget de pecesitos, ositos, arañitas, pajaritos y demás bichos.
  3. Gadget del tipo frase del día, chiste del día, noticias de otros medios...
  4. Gadget con efecto de tipo estela tras el ratón, nieve, el tiempo en tu ciudad...
  5. Gadget de juegitos, tetris, comecocos...
  6. Gadget del tipo bolsa, cambio de divisas, calculadoras...
  7. Gadget del tipo foto de puestas de sol, de coches, celebrities...
  8. Texto rotativo, deslizante y con efectos

Optimiza las imágenes del Blog

  • En el informe de GTMetrix haz clic en el apartado Optimize images (si te lo ha marcado en rojo) y analiza con detenimiento cada imagen. 
  1. Asociado a cada imagen, dispones de un enlace hasta una imagen optimizada, ideal para reemplazar por la original. Este seria un método para obtener las imágenes optimizadas.
  2. Otro método es usar el servicio SMushIt de Yahoo
    • Sube las imagenes a optimizar hasta este servicio desde la pestaña Uploader
    • Descarga las imágenes optimizadas
    • Vuelve a publicarlas en tu servidor (sigue al proximo punto)
  • ¿Cual de los servidores gratuitos en más rápido para cargar las imágenes asociadas a la interfaz del blog ?
    Para responder esta pregunta, lo que hemos hecho es alojar una única imagen de unos 328kbytes en diferentes servicios gratuitos de hosting y el resultado de estas pruebas han sido estos.
    • Imagen alojada en Picasa tarda 01,143 seg.
    • Imagen alojada en Google Sites tarda 01,473 seg.
    • Imagen alojada en Flickr tarda 02,424 seg.
    • Imagen alojada en Dropbox tarda 02,620 seg. (más de un segundo más lento que picasa)

      Nota: Los tiempos pueden variar en función de las condiciones de la conexión a internet, pero lo que estamos es precisamente midiendo el tiempo de respuesta. El mejor servicio es Picasa o Google Site el peor donde puede alojar tus archivos de imágenes relacionados con el blog son Flickr y Dropbox.
  • Especificar las dimensiones de la imagen
    Se refiere a que debemos indicar tanto el atributo Height (altura) como Width (ancho) en el fragmento HTML asociado a cada imagen, de lo contrario estos valores se obtiene de los atributos del propio archivo y esto es más lento.


Configura el blog en pro de la velocidad

Básicamente existen dos parámetros de configuración que puede ayudarnos a optimizar la velocidad de nuestro blog.
  • Cantidad de post en la página de inicio:
    -En el apartado Configuración, Entradas y comentarios, tienes un apartado llamado Mostrar un máximo de -- entradas. Cuanto mayor es el número más tardará en cargar.
  • No exponer todo el post completo sino un fragmento inicial:
    -En el editor del post. Situa el cursor por donde quieres partir la entrada y presiona el botón Insertar salto de linea (icono de una hoja partida a la mitad).
    -En el apartado Configuración, Otros tienes un apartado denominado Permitir Feed del blog, debes indicar hasta el salto de linea.
    -En el apartado Diseño, presiona el Editar de las entrada del blog, tienes un apartado para indicar el texto que debe figurar en el salto de linea del post (normalmente más información o seguir leyendo...). En este apartado también figuran la cantidad máxima de post a mostrar.


Botones sociales al pie de cada entrada

Durante las pruebas para lograr este post, me he percatado que los botones de compartir (como los que tienes al pie de esta entrada) son algo lentos, curiosamente el de Google+ es más lento que el de Facebook y el de Twitter. Lo que he hecho es no mostrar estos botones en la vista inicial del blog sino en la vista del post. Para lograr este efecto he puesto el siguiente condicional asociado al código de los botones en el editor HTML:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
.... código de los botones de Twitter, Facebook, Google+ e imprimir
</b:if>


Seguimiento del tiempo medio de carga del blog

A través de las Herramientas para Webmaster de Google, podemos obtener un gráfico que muestra la evolución del tiempo medio del blog (pestaña Labs y luego Rendimiento del sitio).

Antes de realizar la optimización de iniciaBlog:

Gráfico de rendimiento de iniciaBlog (Herramientas para Webmaster) antes de optimizarlo











Después de realizar la optimización de iniciaBlog:




 Si comparas los dos gráficos puedes ver como he conseguido pasar de 15,4 segundos a 6 segundos,

Nota: Fíjate en el gráfico anterior, parece el perfil del cañon del colorado, no llego a entender muy bien estas variaciones, he comprobado que el punto más alto coincide con la incorporación de publicidad de Google Adsense en el blog. Habrá que preguntárselo a Google.


Resultados obtenidos en iniciaBlog tras optimizarlo:

Gracias a GTMetrix he podido:
  • Optimizar las imágenes del Blog
  • He puesto el atributo Height y Width a cada imagen
  • He detectado que determinados enlaces a directorios de blog eran lentos en cargar
  • Me he cuestionado ciertos Gadget y finalmente he quitado los que no aportaban valor al blog
En resultado es que ahora iniciaBlog carga en 4,43segundo y pesa 505KB, mostrando en la vista inicial los últimos 10 post. Aquí te dejo el último resultado:
Resultado del test sobre iniciaBlog ya optimizado, mostrando los últimos 10 post en la vista inicial del blog


Otros servicios para medir el tiempo de carga del blog

  • Loads.in.
    Interfaz espectacular. Además puedes probar simulando diferentes navegadores y simular una conexión desde otros países.
  • Page Speed Service de Google  
    Servicio desde el que puedes obtener hasta una secuencia en video de la carga del blog
  • Numion.
    Funciona como si midiéramos nosotros mismos el tiempo a través de un cronómetro
  • Pindgom.
    Permite también monitorizar el tiempo del blog por ejemplo via email.


Lecturas recomendadas:

Como siempre, te invito a utilizar los comentarios para dejar tu opinión en este artículo. Si te ha gustado esta publicación y no quieres perderte ninguna otra, sígueme a través de Facebook, Twitter, suscripción por email, Google Friend , RSS ahora también en Google +. Usa los botones sociales al pié de la publicación para recomendarla a tus amigos. ¡Gracias! ;-)

26 comentarios:

  1. Gracias, muy útil para mejorar nuestros 3 blogs!! ya comenzamos aplicar todos los consejos.

    ResponderEliminar
  2. Gracias Entre Ríos....mucha suerte con la optimización de los blogs ya nos contarás.

    Un abrazo Jesús.

    ResponderEliminar
  3. Excelente información, muy interesante la verdad.
    Gracias por las herramientas y consejos, vienen muy bien!

    ResponderEliminar
  4. Gracias Fran...espero que te sirvan y puedas aplicarlas con éxito, de eso de trata...

    Muuuchas gracias por tu comentario, seguimos en contacto.
    Un abrazo, Jesús.

    ResponderEliminar
  5. Simplemente FANTASTICO POST!! Bien explicado, detallado y entendible!!. Gracias por compartir tu conocimiento con todos los que te leemos y te seguimos en TWITTER.
    Buen fin de samana!!

    ResponderEliminar
  6. Gracias Esmeralda....comentarios como este son la gasolina de este blog...gracias por tu apoyo.
    Un abrazo, Jesús.

    ResponderEliminar
  7. Excelente post! No conocía GTmetrix.

    Te recomiendo (si todavía no has visto) este post sobre optimizar Wordpress.

    http://www.bp-es.com/noticias/2009/10/19/la-biblia-para-la-optimizacion-de-wordpress/

    Un abrazo!

    ResponderEliminar
  8. Un artículo estupendísimo, de repente me han entrado unas ganas locas de borrar todo lo prescindible, incluso quitar todas las imágenes y solo dejar texto y enlaces, pero; ¿tu crees qué una mejoría en la velocidad de carga te puede posicionar mejor que un aumento en el pageRank? Tienen relación estos? Un saludo y gracias por el post! :D

    ResponderEliminar
  9. Hola Negro de Saliceta,
    La cuestión no es borrar o eliminar todos los gadgets que tengas en tu blog, la cuestion es analizar aquellos que son más lentos, tratar de optimizarlos si es posible y en caso contrario analizar si aportan valor al blog.
    En lecturas recomendadas tienes varios articulos que hablan sobre la velocidad, seo, posicionamiento y pagerank, espero que te sirvan.

    Seguimos en contacto

    ResponderEliminar
  10. Muy interesante y completo artículo, enhorabuena.
    Creo que eres muy generoso con la recomendación del tiempo de carga. Para mí el tiempo óptimo son 2 segundos y máximo, 5 segundos. Algo que se puede conseguir sin dificultad con los buenos consejos que das.

    Gracias por el artículo y por recomendar mi post.
    Saludos

    ResponderEliminar
  11. Gracias Juana por este comentario tan positivo. Es muy importante para mi y para los seguidores de este blog contar con la opinión de una experta como tu...ahí quedan anotados los valores que indicas.

    Gracias nuevamente y seguimos en contacto.

    Jesús González.

    ResponderEliminar
  12. Hola, me pregunta yo que si tenemos una imagen alojada en cualquier sitio como picasa y es esta es muy grande pero le ponemos los atributos al código fuente de la página para que se vea con un tamaño reducido, ¿es tan eficiente como reducir la imagen original al tamaña deseado para que aparezca en nuestro sitio? Un saludo.

    ResponderEliminar
  13. Hola Negro de Saliceta....me elegra verte de nuevo por aquí. Tu pregunta es muy buena...lo ideal es que la imagen tenga la resolución a la que se va a mostrar. Me explico si tienes una imagen grande y luego la muestras por ejemplo a la mitad de su tamaño no es una buena práctica. Lo ideal es que la imagen ya esté optimizada y adaptada a la resolución a la que la vas a mostrar en la web.

    Un abrazo...por cierto déjanos saber cual es tu blog...
    Gracias, Jesús González.

    ResponderEliminar
  14. La verdad es que cuando un blog carga lento pierde más de la mitad de las personas que iban a leerlo… Yo, al menos, si entro a un blog y veo que tarda despacio me voy tan rápido como he llegado
    Para los que tengáis un blog, como yo, aquí os dejo algunos consejos para conseguir que cargue más deprisa… Son buenos: http://tecnologia.uncomo.com/articulo/como-conseguir-que-mi-blog-cargue-mas-rapido-4455.html

    Suerte a tod@s!

    ResponderEliminar
    Respuestas
    1. Gracias Judith,

      Gracias por comentar ahí queda tu enlace y recomendaciones. Gracias

      Eliminar
  15. Excelente articulo Jesús, muy bueno, ya le reduje a 4,11 s la velocidad.

    ResponderEliminar
    Respuestas
    1. Hola Juanfe....no sabes la alegría que me acabas de dar con tu comentario, sobre todo porque tu experiencia un buen referente para otro...además con las herramientas que menciono se aprende muchísimo y al final es la suma de pequeños detalles....

      Este comentario me viene bien y me recuerda que debo hacer seguimiento para ver cómo está iniciaBlog ya que he puesto nuevos Gadget y elementos que debo analizar en cuanto al rendimiento.

      Un fuerte abrazo y agradecerte nuevamente tu comentario

      Saludos,
      Jesús González.

      Eliminar
  16. Pingdom Tools me dice:

    Tiempo de carga
    2,00 s

    Tamaño de la página
    959.6 kB

    Solicitudes
    39

    gtmetrix me dice:

    Tiempo de carga
    10.23 s

    Tamaño de la página
    925 kB

    Solicitudes
    35

    no coinciden ni siquiera en las solicitudes, a cual le creo?
    refiriéndome a cual da resultados mas confiables, este es mi blog:
    http://duug.blogspot.com/

    ResponderEliminar
  17. Hola Jesus, en este post de optimizar tu blog, me surgio un problema y en ingresar un salto de linea en mis entradas, y dar Permitir Feed del blog, e indicar hasta el salto de linea, cunado guardo y visualizo mi blog, se ve bien el salto, pero le doy a mas información y no da lugar a ampliar la información, no actua, y revise pero no sabria donde esta el fallo, mi plantilla es Vista Dinamica, si puedes ayudar gracias de antemano,Saludos

    ResponderEliminar
    Respuestas
    1. Gracias Manuel por tu comentario,
      El motivo es porque estás usando las vistas dinámicas y estas requieren que el post sea completo, no vale ni corto y hasta el salto de página.

      De todas formas las vistas dinámicas ya sabes que son plantilla "avanzadas" de Blogger y está más que optimizadas, son muy rápida y desde el punto de vista SEO son muchos mejores que la plantilla simple. El inconveniente es que no puedes modificar el HTML de la plantilla. Supongo que es cuestión de tiempo que puedas hacerlo

      Seguimos conversando,

      Jesús González

      Eliminar
  18. ok,gracias seguiré atento a tus post y recibirás mas consultas mías
    Saludos
    Manuel

    ResponderEliminar
  19. soy nueva en esto y me gustaria que me asesoraras en algunas cosas gracias........

    ResponderEliminar
    Respuestas
    1. Hola Lesly,

      Si quieres contacta conmigo via email a través del formulario de contacto que puedes encontrar en el menú superior del blog

      Muchas gracias por comentar!

      Jesús.

      Eliminar
  20. Con mis saludos, hice la prueba usando GTMetrix y me da estos resultados:
    Vista normal..... 7,85s en carga y 2,18 MB en página
    Vista dinámica... 2,49s en carga y 296 KB en página
    Aunque no los considero malos, los puedo optimizar cuando tenga un poco de paciencia.
    Recibe mi agradecimiento por tus aportes.

    ResponderEliminar
    Respuestas
    1. No te obsesiones pero si es algo que no podemos descuidar. Yo también tengo que volver a ponerme al día.

      Lo cierto Gabriel es que un sitio Web lento es lo peor con lo que se encuentra un internauta que trata de encontrar soluciones.

      Muchas gracias por comentar!

      Eliminar

Te agradezco la participación en iniciaBlog a través tu comentario. Recuerda que te responderé con otro comentario justo debajo del tuyo. Gracias y mucha suerte! ;-)

Más información ¿Cómo poner el botón de...:?

Premio Bitácoras

Aviso Legal

Licencia Creative Commons
iniciaBlog - Te ayuda con Blogger a mejorar tu blog
iniciaBlog se encuentra bajo una Licencia Creative Commons Reconocimiento-NoComercial-CompartirIgual 3.0 Unported.
Basada en una obra en www.iniciablog.com.

Creado por Jesús González

Política de Privacidad de iniciaBlog | Política de Cookies
2015 © Jesús González es el autor de iniciaBlog.com
Tema creado por Way2themes y adaptado por inciciablog