Cómo solucionar los problemas de lentitud en mi Blog

¿Porqué va despacio mi Blog?, ¿Qué soluciones puedo darle a mi problema? Descubre cómo mejorar los tiempos de respuesta y solucionar los problemas de lentitud en tu Blog de una manera sencilla, con una guía paso a paso. 
La velocidad a la que se presenta nuestro blog en pantalla es inversamente proporcional a la cantidad de tiempo que el usuario aguantará hasta que cargue. Es una realidad que 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.

Si nuestro Blog es lento, la probabilidad de abandono del usuario es muy alta. Tendemos a minusvalorar el rendimiento en favor de otros factores que en la balanza final que compone el interés del usuario no resultan tan importantes.

Voy a repasar la herramienta de estudio de rendimiento de sitio web de Google y a dar las recomendaciones necesarias para solucionar los problemas más habituales asociados a una carga de tiempos excesiva de nuestro blog en el navegador del cliente.

Si quieres mejorar la fluidez de navegación, la velocidad de presentación y obtener una mayor calidad en la experiencia de uso de tu blog por parte de tus usuarios, este artículo te interesa.

Introducción. Algunos breves Conceptos Iniciales. Una explicación para los más curiosos.

Si te lían las cifras y los datos, puedes pasar directamente a los siguientes enunciados de la guía para resolver el problema de lentitud en el Blog. Si tienes curiosidad por entender qué sucede, porqué está funcionando todo tan lento, quizás esta parte de la guía te interesa:

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.

La Guía

Dividiremos la guía de optimización en dos grandes puntos, la medición objetiva del rendimiento que somos capaces de dar y un segundo punto donde ver la manera de solucionar los problemas que se nos hayan presentado.

Midiendo el rendimiento objetivo de nuestro sitio web o Blog:

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.

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.

• 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.

•    El incorrecto uso de imágenes:

En este apartado es fundamental centrarse en estos tres puntos, con especial énfasis en que estos consejos que te doy, deben utilizarse especialmente en las imágenes que aparecerán en los resúmenes de las entradas de la página principal de tu blog :

• La cantidad de imágenes a mostrar en la página principal del blog, la que muestra todas nuestras entradas iniciales, debe ser la estrictamente necesaria. Los resúmenes de entrada no deberían de tener más de una imagen, de manera que dejemos más ancho de banda disponible para direccionar otros objetos que componen nuestro blog al navegador.

• El "peso" en Kilo Bytes  de las imágenes de la página principal del Blog debe ser lo más reducido posible. Cuando insertéis imágenes en la entrada que correspondan al apartado de resumen visible desde la página principal, debéis intentar utilizar el tamaño "pequeño" de las opciones de inserción que se os presentan. Luego las del contenido de la entrada podéis hacerlas más grandes (aunque no es recomendable) pero como mínimo aquellas que se mostrarán en la página principal deben ser reducidas. 

• La extensión de la imagen es fundamental para que esta se encuentre comprimida todo lo posible. No utilicéis .bmp jamás pues su compresión es bajísima y consumiréis ancho de banda innecesariamente. Siempre tratad de que las imágenes que se muestren en la página principal tengan extensión .jpeg y dentro de las entradas, si queréis más nivel de detalle utilizad .png.

Te explico a continuación cómo poder editar imágenes sin herramientas externas instaladas en tu ordenador para que puedas mejorarlas para poner en tu Blog. La Edición de imágenes con Google+ sin programas externos:

Procurad buscar imágenes que no contengan resoluciones excesivas, imágenes con tamaños elevados y sin comprimir. Podéis utilizar para cambiar su tamaño cualquier editor de imágenes como Photoshop, Image Resizer o incluso el editor de Google. Podéis utilizar un álbum en Google Plus para colocar las fotos que utilizaréis en vuestro Blog y poder editarlas.

Solucionar los problemas con las imágenes 

Cuando vayas a seguir estos pasos, recuerda subir a la herramienta que vamos a explicar sólo imágenes con extensión .jpeg para la zona de resumen de tu entrada y .png para el interior de la entrada (si quieres ganar en calidad, pero sólo dentro de la entrada, mejor incluso si son siempre .jpeg):

1) En tu escritorio Google+ fíjate en los iconos a modo de menú que te aparecen a la izquierda: "Inicio", "Perfil", "Explora" y "Fotos". Si pasas el ratón por encima de "fotos" sin hacer clic te saldrá la opción de "Añadir Fotos".

2) Te saldrá una pantalla donde puedes poner el "Nombre del Álbum" y a continuación hacer "clic" en el botón "Seleccionar fotos de tu ordenador", donde al pulsarla, podrás subir la imagen que vas a utilizar para tu título del lugar del disco duro donde la tengas almacenada para colocar en el Blog.

3) Una vez ha subido la imagen, la verás en una ventana "pequeña" a modo Preview, si pasas por encima de la Previsualización, se te dibujarán unos pequeños iconos dentro de la misma donde el que tiene forma de lápiz te abrirá el Editor de Imágenes.

 4) Antiguamente [Piknic] http://www.picnik.com/ era una potente WEB especializada en la edición de imágenes que finalmente adquirió Google. El editor que se te abre tras realizar el paso 3 es Piknic. Desde aquí vamos a configurar la imagen para que adquiera los valores de altura y anchura deseemos, de manera que no tenga una resolución excesiva y por tanto su peso en Kilo Bytes se reduzca drásticamente.

 Tenemos dos opciones:

• Recortar: puedes extraer de la imagen la porción que te interese para poner en tu Blog. 

Estamos recortando el trozo que queremos. Ponemos el tamaño del punto deseado de la imagen para mostrar en el Blog.

• Cambiar Tamaño: reducir directamente el tamaño de la imagen que deseamos utilizar de fondo del marco del título. El problema aquí es ser capaces de conseguir respetar la relación de aspecto de la imagen de origen para que no quede "estirada" o "deformada" cuando la situemos en el blog

Estamos poniendo que el tamaño de largo sea 920 de ancho por 517 de alto. La imagen original era de 1920x1080, la reducción de resolución nos permite ahorrar en el tamaño que ocupará cuando se descargue en el navegador del usuario.

5) Si después de haber almacenado la imagen en Google+ deseas utilizar la imagen editada en tu Blog, cuando utilices el icono de "insertar imagen", en lugar de hacer "clic" sobre la opción "Subir" o "Desde este Blog", selecciona la opción "Desde Álbumes Web de Picassa" donde se encontrará la imagen editada.

¡Eso es todo!, tras aplicar estos consejos como mínimo en la página principal, seguro que al pasar Google Page Speed, la medición objetiva ha ganado en rendimiento y fluidez. Tus usuarios te lo agradecerán.