Entradas
Vamos a cerrar estas entradas dedicadas al rendimiento de nuestros blogs, localizando qué es lo que más está influyendo negativamente en el dibujado de nuestras páginas en el navegador del usuario.
Muchos usuarios se preocupan lógicamente por el rendimiento que su Blog ofrece de cara a sus usuarios. Saben que la decisión de pasar de una web a buscar en otra puede durar unos escasos dos segundos, que no hay nada más impaciente ante un navegador que un usuario deseando acceder a los contenidos de una página.
El posicionamiento de las páginas en los buscadores está en gran medida condicionado por el rendimiento que una web puede dar frente a las otras. Cualquier buscador basará la posición en múltiples parámetros que quizás no estén totalmente en nuestra mano tanto como el de mejorar el rendimiento.
Nos vamos a centrar esta vez para cerrar las entregas para mejorar el rendimiento del Blog en la medición objetiva de aquellos condicionantes que pueden estar generando problemas a la hora de dibujar nuestro Blog y cómo localizarlos. Así podremos localizar con precisión los puntos de mejora y solucionarlos teniendo en cuenta algunas claves que te voy a proporcionar.
Los que no estáis en contacto con las anteriores entradas realizadas en el Blog para corregir los problemas de lentitud, es necesario que primero comprendáis porqué se producen ralentizaciones cuando se "dibuja" nuestra web en el navegador.
INTRODUCCIÓN. ALGUNOS BREVES CONCEPTOS INICIALES. UNA EXPLICACIÓN PARA LOS MÁS CURIOSOS.
¿Qué Interviene?, ¿cómo funciona?:
Voy a simplificar al máximo la idea de lo que sucede cuando tu blog se dibuja en la pantalla del usuario, qué "actores" intervienen y cómo se comunican entre sí
- Tenemos un servidor (o varios) que nos proporcionan los datos: vamos a verlo como "la máquina o máquinas donde está todo lo que compone nuestro blog (imágenes, vídeo, código fuente, etc...).
- Un navegador: La aplicación que le sirve al usuario para navegar por Internet. Lee las páginas que componen nuestro blog porque se las descarga del servidor o servidores donde todos los componentes que conforman sus páginas residen.
- La Conexión, el ancho de banda: Entre media tenemos una conexión a Internet que permite a nuestros usuarios, por medio del navegador, conectarse al servidor o servidores donde residen los componentes que forman las páginas de nuestro Blog.
- El Ancho de banda: La conexión que antes mencionamos dispone de un "ancho de banda", que para entendernos se trata de la velocidad a la que los datos se mueven por ella. Es decir, si el ancho de banda es "grande", el usuario desde su navegador recibirá más rápido los datos del servidor.
Así pues, simplificando de nuevo, cuando el usuario escribe una dirección web en la barra de direcciones del navegador está llamando al servidor para que le "descargue" todos los componentes que conforman nuestro blog. Si hay componentes que son muy pesados como las imágenes, o añadidos que le hayamos puesto a ese blog, haremos que todo vaya más lento. Por ello, ahora toca descubrir qué es lo que tenemos en nuestro Blog que hace que todo se ralentice.
Una explicación más técnica, bajando a los datos, ¿qué pasa con el ancho de banda del que disponen nuestros usuarios?:
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 transferencia 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.
MIDIENDO EL RENDIMIENTO OBJETIVO DE NUESTRO SITIO WEB O BLOG PARA LOCALIZAR QUÉ COMPONENTES DEL MISMO PUEDEN ESTAR DANDO PROBLEMAS:
La medición o benchmark de páginas web no es nada nuevo dentro de esta enorme red de redes que es internet. Si bien es cierto que depende de diversos factores ajenos al propio creador del sitio, también es verdad que se pueden poner los medios necesarios para reducir o atenuar dichos problemas. El usuario puede tener un ancho de banda determinado, problemas de conexión de cierto tipo pero si además le sumamos una incorrecta gestión de la velocidad de trabajo de nuestro sitio, el cóctel resultante le llevará a buscar otra página que "funcione mejor".
Google pone a nuestra disposición un conjunto de herramientas de optimización para la mejora del rendimiento que nuestro sitio web puede dar a los usuarios, su nombre es "PageSpeed". Aprendamos cómo utilizarlo paso a paso con unos simples ejemplos, que a modo de guía básica, permitan luego a los más curiosos o entrenados creadores poner a punto su blog o sitio web.
PageSpeed nos dará un resultado promediado de la eficiencia en materia de rendimiento que nuestro sitio es capaz de ofrecer, dándonos las recomendaciones adecuadas en aquello que pueda afectarnos en nuestros resultados de cara al usuario.
Analicemos los resultados objetivos que influyen en el tiempo de respuesta de nuestro sitio de cara a los usuarios.
UTILIZANDO GOOGLE PAGE SPEED INSIGHT PARA ANALIZAR EL RENDIMIENTO DE NUESTRO SITIO WEB
1) En primer lugar, para poder utilizar "Google PageSpeed" es necesario estar registrado con un usuario Google (de GMAIL, BLOGGER, etc...). Si ya has hecho login en alguna herramienta Google, no te pedirá ni siquiera validación de usuario. Es recomendable realizar el uso de esta herramienta desde un navegador Google Chrome.
2) Teclea la URL en la barra de direcciones de tu navegador:
https://developers.google.com/speed/pagespeed/
3) Verás una pantalla como la que te muestro a continuación:
4) En ella, pulsa la opción "Analyze your site online" para que se muestre una pantalla como la que presento a continuación:
5) Estarás en Google Page Speed Insights. Introduce en la caja de texto de entrada en la que pone "Enter a Web page URL" (debajo del slogan "Make your web faster") la dirección de tu sitio web o blog. Por ejemplo, para un blogger:
http://nombre_blog.blogspot.com.es/
donde "nombre_blog" es el nombre de tu blog.
6) pulsa el botón "Analyze" para proceder con un análisis de tu sitio web que comprobará todo lo referente al rendimiento del mismo. Cuando termine el análisis (tarda unos segundo, aunque depende del tamaño de la web a analizar) aparecerá una pantalla como la que te muestro en pantalla:
7) Obtienes los resultados de tu análisis.
CONSIDERACIONES DE LOS RESULTADOS:
- En primer lugar se aprecia bajo "Overview" que se presenta una puntuación promedio basada en el análisis realizado por el propio Google PageSpeed. Calculará en función de los problemas que detecte en los componentes o la realización de nuestro sitio, así como de aquello que detecte correctamente construído un resultado total que es el promedio al lado del texto "overall PageSpeed score". La puntuación que asigna PageSpeed no está basada en los tiempos en que se llegan a cargar las páginas, sino que profundiza en todo aquello que los alarga para sugerirnos cambios que puedan mejorar el rendimiento general.
- Justo bajo la puntuación, aparece "Suggestion Summary", donde se nos ofrecen las sugerencias que podrían incrementar la optimización de nuestro sitio web o blog para alcanzar mejores prestaciones a nivel de rendimiento.
- A la izquierda, asignará prioridades a cada aspecto detectado que requiera tu atención, siendo "High Priority" las que más drásticamente pueden mejorar el rendimiento general, "Medium Priority" las que pueden mejorar notoriamente la velocidad y "Low Priority" las que menos impacto pueden estar produciendo en el resultado final.
- Al realizar "clic" sobre cualquiera de las sugerencias informadas en el menú izquierdo, nos llevará a una descripción detallada donde nos dará el enlace al componente que puede mejorarse.
- Muchas de las optimizaciones que se presentan no tienen porqué necesariamente realizarse, partamos de la base de que si eres un usuario de Blogger, salvo que hayas realizado cambios muy drásticos sin el conocimiento adecuado en las páginas, no deberías tener problemas realmente graves. Sí es interesante comprobar cómo el peso de las imágenes (tamaño en KB), los vídeos utilizados, las redirecciones incorrectas, las hojas de estilo u otros componentes, siempre pueden reducirse para ahorrar espacio en el limitado ancho de banda del usuario y así obtener unos tiempo de carga mucho mejores.
- Te ofrecerá aquellos componentes de tu sitio que más tardan en cargarse, contándote los milisegundos en que se muestran en pantalla.
- Qué imágenes pueden mejorarse por su excesivo peso o su costoso escalado dependiendo de las resoluciones empleadas por los usuarios.
- Controlar el uso de Javascript o de CSS de gran tamaño.
- Te ayudará a controlar el tiempo que debes mantener en caché ciertos componentes de tu página.
- Un montón de características para analizar que harán las delicias de los que gustan de exprimir el máximo rendimiento a sus creaciones.
- Cada mejora entregada, en su detalle proporciona siempre un "Learn more" donde te explican qué puedes hacer para mejorar el problema. Muchos cambios aquí son de nivel "avanzado" o requieren conocimientos técnicos para saber lo que se está haciendo, no os adentréis a realizar cambios sin el conocimiento adecuado.
LA LLAMADO "RUTA CRÍTICA":
Esta pantalla del análisis de Pagespeed es esencial porque te permitirá localizar desde que comienza hasta que termina de "dibujarse" en el navegador del usuario nuestro Blog, el tiempo que CADA componente del mismo se ha tomado para llegar a generarse en pantalla.
Con el "Critical Path" determinaremos aquellos "componentes" o añadidos que están de más.
En la pantalla inferior, fijaros en el recuadro que he añadido a la imagen para señalar cómo visualizar "la ruta crítica"
Al pulsar la ruta crítica observaréis una pantalla como la que os detallo:
- Es una gráfica que tiene en la parte superior una escala de tiempo de mili-segundos a segundos donde te indica todo lo que se ha ido dibujando en pantalla y la duración que ha tenido cada descarga.
- Si te posicionas sobre un elemento en concreto te detallará qué componente ha causado el retraso.
- Durante todos los segundos que dura el camino crítico el usuario no ha tenido la pantalla en blanco, cada línea en paralelo ha ido corriendo a las demás, con lo que el usuario NO se queda esperando hasta que termina toda la "ruta crítica". Pero te sirve para ver dónde se están "produciendo" atascos que pueden representar un problema para el rendimiento.
Ahora contrasta el resumen que te ha proporcionado Page Speed de las alertas más importantes con lo que te informa la "ruta crítica" y verifica qué componentes que estás utilizando podrían llegar a ser prescindibles.
Es MUY IMPORTANTE que no te compliques en esto, ".js", ".css" normalmente vendrán con la plantilla de Blogger y no podrás hacer nada con ellos. Pero imágenes, "plugins" que son scripts (como el botón me gusta de Facebook, el de Twitter, botones de impresión de aplicaciones externas, carga de aplicaciones externas "incrustadas" en código, etc..) pueden darte pistas de por dónde está el problema.
RECOMENDACIONES PARA ARREGLAR LOS PROBLEMAS DETECTADOS MÁS FRECUENTES:
- El excesivo uso de scripts:
Uno de los grandes enemigos del rendimiento son los "scripts". Esos aditivos que incorporamos en nuestros sitios buscando añadirle funcionalidades que no sabemos crear por código fuente nosotros mismos.
La utilización del script de impresión de sitios webs externos, la adición de capas para colocar botoneras no estándar (diferentes de las que ya trae Blogger por sí) para conectar con Facebook, Twitter y similares, utilización de calendarios, documentos incrustados provenientes de otros sitios web, etc... Constituyen un conjunto de "extras" a intentar evitar en la medida de lo posible. Cuantos menos scripts utilicemos en la página principal, menos tiempo de carga estaremos dándole a nuestro sitio web o Blog.
Tened en cuenta que retardan y "postergan" el dibujado de otras zonas de nuestro sitio sólo porque hay que esperar a que el servidor que nos los proporciona nos pase los datos necesarios para que estos funcionen.
Si vas a utilizar scripts, asegúrate que tengan carga asíncrona. Esto es, que cuando se carguen no interrumpan el dibujado del resto de la página si no finalizan. La mayor parte de los añadidos para conectar con una aplicación social e indicar que un contenido es de nuestro agrado con un icono, suelen implementarse incorrectamente porque están programados de tal forma que ralentizan el dibujado de la página, bloqueando hasta que terminan de generarse ellos mismos. Afortunadamente los navegadores hoy día no hacen las cargas totalmente "síncronas", pero sí que en muchas ocasiones (sobre en ordenadores poco potentes) esta clase de scripts dan la mayor parte de los problemas de rendimiento. Este tema es más complejo y obliga a tener nociones de programación, para los más curiosos recomiendo esta lectura de Google Developers al respecto.
- La cantidad de "Gadgets" que utilizamos:
Controlad la cantidad de "Gadgets" que estáis utilizando en la vista de diseño del Blog. Los Gadgets suelen llevar scripts asociados que los hace ser más lentos de lo normal. Probad a quitar o añadir aquellos que veáis innecesarios y pasad Google Page Speed Insight para comprobar si mejoráis la velocidad eliminado aquellos que habéis visto como prescindibles.
- El número de entradas de la página principal:
Evitad que se muestren directamente todas las entradas del blog. Es recomendable que, en función del espacio que hayas dejado para cada resumen de entrada y lo que ocupa cada una en pantalla, encuentres un número limitado de éstas que se dibujen en la página principal. Para limitar el número de entradas de la página principal:
1) Dentro de Blogger, en el menú de la izquierda, haz clic en la opción "Diseño".
2) Dentro de Diseño, haz "clic" en la opción "editar" del Gadget "Entradas del Blog".
En la opción "Opciones de la página principal" y concretamente en "número de entradas de la página principal", limita el citado número a una cantidad proporcional al resumen de tus entradas y trata de no pasar de 7 como máximo. Es preferible que el usuario tenga que "paginar" y darle en la parte inferior del blog a "Entradas Antiguas" para ver el resto de entradas, a que se le cargue mucho más despacio todo el sitio debido a un exceso de éstas en la página principal.
Si has realizado esta guía, complétala con la primera entrega . Cualquier duda, me tienes en los comentarios del Blog.
