17 sept. 2013

Tutorial sobre Google Pagespeed para Bloggers

Soluciona los problemas de lentitud con tu Blog, realiza cada paso de Google PageSpeed Insights para conseguir una mejora en la velocidad de tu Blog, en la experiencia de usuario y en tu posicionamiento.

La velocidad  a la que nuestro sitio web o Blog se descarga y presenta en los navegadores de nuestros usuarios es fundamental por dos motivos: mejora considerablemente la experiencia de usuario, es fundamental para el posicionamiento en el buscador de nuestros resultados.




La rapidez a la que se presenta nuestro blog en pantalla es inversamente proporcional a la cantidad de tiempo que el usuario aguantará hasta que cargue. La primera impresión que se lleva el usuario, muchas veces está más relacionada con el tiempo que tarda en dibujarse el sitio al que pretende acceder en su navegador que incluso a la presentación o contenidos del mismo.

A causa de su importancia y por tratarse de una temática especialmente sensible o "compleja" para muchos usuarios, me propongo darte un conjunto de entregas que te faciliten el uso y comprensión de esta magnífica herramienta de Google.

En Diarios de la nube hemos tratado múltiples veces la materia del rendimiento, hemos analizado el servicio de Google Page Speed Insights. Este servicio de Google Developers, proporciona información de rendimiento sobre nuestro sitio web o Blog, dando un listado de sugerencias para corregir los problemas que impiden que nuestros contenidos se ejecuten a la velocidad adecuada.




La velocidad de ejecución en los ordenadores de quienes nos leen, los usuarios. ¿Por qué va todo tan lento?:
  • El ancho de banda del cliente, de nuestro usuario, determina la velocidad a la que le es posible descargar y subir datos a la red. Podemos imaginar el ancho de banda del cliente como un embudo de "tubo pequeño". Por ese "escaso espacio" deben viajar: nuestras imágenes, nuestras hojas de estilo, componentes HTML, scripts, etc... dado que es limitado, debemos gestionar correctamente lo que vamos a "hacer pasar" por ese pequeño "tubito" del embudo. 
  • El ancho de banda actualmente para tasas de transferencias domésticas (caseras) se mide en Megabits. un Megabit por segundo son 1 millón de bits que transmitimos en el espacio de tiempo indicado. 
  • Pensemos ahora en una conexión de ejemplo que un usuario doméstico posee de unos 8 Megabits (Ojo, no Megabytes). Ese usuario puede recibir 8 millones de bits en un segundo. 
  • Muchas de las imágenes u objetos con los que tratamos en nuestro blog, si no son debidamente tratados ocupan varios Megabytes. Un Megabyte son 8 Megabits. Por tanto si nosotros utilizamos imágenes u objetos de más de 1 Megabyte o el total del "peso" de nuestra web supera el Megabyte, la descarga en el cliente superará el segundo.  
  • Si descargamos la friolera de 5 imágenes de 1 Megabyte estamos retardando el dibujado de las mismas en el cliente con 8 Megabits contratados de decarga hasta un total de 5 segundos. Pues haced vuestros propios cálculos si a eso le sumamos muchos más condicionantes como scripts que tengamos cargados, distancia al servidor, latencia y otros tantos factores que puede influir en la ecuación...  
  • El resultado es que si no tomamos medidas, podemos conseguir que una página que nosotros vemos estupenda en nuestro navegador tarde la friolera de 15 segundos en cargarse en el cliente, ¿cuántos de vosotros no habéis cambiado a otra página cuando ha tardado en cargarse más de 5 segundos?... Parece poco, pero delante de un ordenador es una eternidad. Ese es el problema que vamos a intentar paliar estudiando qué mejoras se pueden hacer para que nuestros usuarios no padezcan una lentitud "insoportable" al navegar por nuestro pequeño rincón de Internet.

Aprende a entender y solucionar cada sugerencia que Page Speed te ofrece. Mejora el rendimiento de tu página  web o Blog.

A continuación repasamos las siete entregas realizadas en Diarios de la nube con el objetivo de acercar a todo el mundo la posibilidad de mejorar la velocidad con la que ofrecen sus páginas web a través de Google PageSpeed Insights:



  • La guía de rendimiento para Bloggers - Entrega II, Soluciones para cada sugerencia de PageSpeed paso a paso - "Avoid Landing Page Redirect": La redirección dentro de una página web, a todos los efectos, produce un descenso en el rendimiento provocado por la pérdida de tiempo que supone cambiar de una dirección a otra en una misma página web. Muchas páginas poseen "landing pages" o páginas que ni siquiera tienen código y redireccionan a otra que sí lo tiene. Normalmente esta manera de trabajar está muy pegada al uso de "scripts" para la detección de si se está accediendo por un dispositivo móvil (smartphone o tablet) o por un ordenador personal (portátil o de sobremesa). Para entrar en el detalle de esta guía pulsa sobre el título de la entrega o haz "clic" aquí.


  • La guía de rendimiento para Bloggers - Entrega IV, Soluciones para cada sugerencia de PageSpeed paso a paso - "Enable compression" y "Leverage browser caching"En una página web se puede activar la compresión de las páginas que sirve el servidor web al usuario. Recordamos que el servidor es "la máquina" que contiene las páginas que componen nuestro blog. Al realizar la descarga de las mismas para que el navegador del usuario las interprete y dibuje en su pantalla, si la compresión no está activada se gastará más tiempo en descargar la página que si está comprimida. La caché, sin entrar en detalles muy técnicos que escapan a las pretensiones del artículo, es una "memoria intermedia" que se encuentra disponible en tu navegador para almacenar objetos o componentes de las páginas webs (imágenes, .css, etc...) que visitas en tu disco duro. De esa manera, cuando vuelves a visitar ese sitio web, tu navegador no tiene que solicitar al servidor de nuevo los objetos que componen la página web porque dispone ya de ellos en tu disco duro. Para entrar en el detalle de esta guía pulsa sobre el título de la entrega o haz "clic" aquí.


  • La guía de rendimiento para Bloggers - Entrega VI, Soluciones para cada sugerencia de PageSpeed paso a paso - "Optimize images"En esta ocasión vamos a repasar la optimización total de imágenes. Algunos Blogs, dependiendo de su temática, suelen poseer gran cantidad de imágenes. Muchas de ellas no suelen estar optimizadas porque no han sido tratadas a tal efecto cuando se copiaron de Google, se añadieron desde una cámara fotográfica o se realizaron con un editor de imágenes. Optimizar las imágenes, en términos de rendimiento web consiste en hacer que sin perder calidad ocupen menos espacio en KB para que su descarga desde el servidor al navegador del cliente sea lo más rápida posible. Para entrar en el detalle de esta guía pulsa sobre el título de la entrega o haz "clic" aquí.

  • La guía de rendimiento para Bloggers - Entrega VII, Soluciones para cada sugerencia de PageSpeed paso a paso - "Prioritize visible content", "Reduce server response time"Es necesario entender llegados a este punto que hay una parte de código que se ejecuta "antes de que se cargue" la página y otra que se ejecuta "una vez se ha cargado la página". Debes establecer la prioridad de carga y la colocación de los recursos que componen tu página web o Blog pensando en cuáles corresponden a la carga inicial y cuáles se ejecutan o tienen sentido posteriormente a dicha carga. "El tiempo de respuesta del servidor mide el tiempo que tarda en cargar el código HTML necesario para comenzar la prestación de la página quitando la latencia de red entre Google y el servidor" afirma el famoso buscador en su web de soporte. Para entrar en el detalle de esta guía pulsa sobre el título de la entrega o haz "clic" aquí.











    Escrito por Miguel García Sánchez - Colomer

    Dispuesto a ayudarte con tu Blog en todo lo posible, Diarios de la nube es mi medio para llegar hasta ti. El conocimiento es universal, es del mundo, es de todos, esta es mi parte y la comparto contigo.

    6comentarios:

    1. Me encanta la sencillez con que lo explicas. Besooos 40ytantas

      ResponderEliminar
    2. Tengo este pendiente desde hace semanas, a ver si ahora me pongo con tus tutoriales ;-)

      ResponderEliminar
    3. Creamos la nueva forma de buscar y quardar insiraciones. En www.copiapop.es se puede añadir fotos, vídeos y artículos en el espacio ilimitado y totalmente gratis! Tienes miedo de perder todos tus achivos para tu blog? Ahora tendrán todos los datos en un lugar sequro! Es una manera ideal por promoccionar tu trabajo. Estamos muy interesados en tu opion sobre nuestra platforma social. ¡
      Pruébenlo! Maria

      ResponderEliminar

     

    © 2015 Por: Miguel García Sánchez - Colomer en Diarios de la nube Todos los derechos reservados.