Tutorial sobre Google Pagespeed para Bloggers

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 I, mejora la velocidad de tu Blog con Google PageSpeed: Vamos a conocer cómo podemos medir objetivamente la velocidad de nuestra página utilizando Google PageSpeed Insights. El sistema de medición "todo-en-uno" de Google que te permitirá detectar  analizar todo aquello que está haciendo que tu Blog vea lastrada su velocidad de ejecución en los ordenadores de tus usuarios. 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 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 III, Soluciones para cada sugerencia de PageSpeed paso a paso - "Remove render-blocking JavaScript and CSS in above-the-fold content": Posiblemente la regla que más impacto negativo ha tenido en los resultados de Page Speed en la gran mayoría de Blogs de Blogger ha sido la que vamos a tratar y resolver en esta guía: los problemas de generación con bloqueos de Javascript y CSS. Fundamentalmente y siguiendo la máxima de minimizar la cantidad de accesos que se realicen al servidor que puedan penalizar el tiempo de ejecución en el cliente, Google centrándose exclusivamente en el rendimiento puro y duro, ha introducido una nueva regla en Page Speed que verifica si por un lado estamos accediendo a archivos externos al servidor donde se encuentra nuestro blog. 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 V, Soluciones para cada sugerencia de PageSpeed paso a paso - "Minify CSS", "Minify HTML" y "Minify Javascript": Cada recurso que utilizamos en nuestra página web ocupa un "espacio". Ese "espacio" se traduce en tamaño, cuanto mayor espacio ocupan los recursos utilizados para el dibujado de una página web, mayor tamaño y mayor tiempo se emplea en la descarga de la página desde el servidor a los navegadores de los usuarios. Page Speed separa tres grandes recursos que pueden "minimizarse": las CSS, el HTML y el Javascript.  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í.