Mejora el rendimiento de tu web utilizando jascript asíncrono

El rendimiento es algo fundamental para la mejora de la experiencia de usuario y, junto a la calidad de los contenidos que se ofrecen en una web, un gran impulsor del posicionamiento en buscadores.

En Diarios de la nube vamos a ir ayudándote a resolver distintos puntos importante para mejorar el rendimiento de tu sitio web por medio de GTMetrix.

GTMetrix es un servicio de análisis rendimiento de la compañía de hosting GT.net. Es capaz de realizar los test más exigentes para analizar la velocidad de carga de todos los recursos de un sitio web, indicando así su velocidad de carga y localizando posibles "cuellos de botella" que afecten a su rendimiento. Entre las pruebas que realiza para comprobar la velocidad de carga de una web se encuentra la conocida Google Pagespeed y Yahoo YSlow.

Veamos punto por punto, qué mejoras debes implementar en tu web para conseguir un buen rendimiento por medio de la llamada a funciones javascript en modo asíncrono.

Mejora el rendimiento de tu web optimizando sus hojas de estilo css

Optimizar las hojas de estilo mejora considerablemente el rendimiento del dibujado de una página web.

Las hojas de estilo de tu sitio web o blog son las encargadas de darle presentación a los componentes que sirven para formar tu página web.

El cuidado y optimización de las mismas suele ser pasado por alto con frecuencia, normalmente nos basta con que "funcione la presentación" pero no nos damos cuenta de los problemas que conlleva un incorrecto uso de las hojas de estilo.

En Diarios de la nube vamos a ir ayudándote a resolver distintos puntos importante para mejorar el rendimiento de tu sitio web por medio de GTMetrix.

GTMetrix es un servicio de análisis rendimiento de la compañía de hosting GT.net. Es capaz de realizar los test más exigentes para analizar la velocidad de carga de todos los recursos de un sitio web, indicando así su velocidad de carga y localizando posibles "cuellos de botella" que afecten a su rendimiento. Entre las pruebas que realiza para comprobar la velocidad de carga de una web se encuentra la conocida Google Pagespeed y Yahoo YSlow.

Veamos punto por punto, qué mejoras debes implementar en tu web para conseguir un buen rendimiento con las hojas de estilo.

Mejora el rendimiento de tu web optimizando sus imágenes

Optimizar las imágenes, en términos de rendimiento web consiste en hacer que, sin perder su calidad, ocupen menos espacio en KB para que su descarga desde el servidor al navegador del cliente sea lo más rápida posible.

Analizaremos varias formas de optimización de imágenes.

En Diarios de la nube vamos a ir ayudándote a resolver distintos puntos importante para mejorar el rendimiento de tu sitio web por medio de GTMetrix.

GTMetrix es un servicio de análisis rendimiento de la compañía de hosting GT.net. Es capaz de realizar los test más exigentes para analizar la velocidad de carga de todos los recursos de un sitio web, indicando así su velocidad de carga y localizando posibles "cuellos de botella" que afecten a su rendimiento. Entre las pruebas que realiza para comprobar la velocidad de carga de una web se encuentra la conocida Google Pagespeed y Yahoo YSlow.

Veamos punto por punto, qué mejoras debes implementar en tu web para conseguir un buen rendimiento con la optimización de imágenes.

Mejora el rendimiento de tu web aplazando la ejecución de javascript

El aplazamiento de la ejecución del javascript que utilizas en tus páginas web puede mejorar bastante el rendimiento con el que tus páginas se dibujan en el navegador de tus usuarios.

En Diarios de la nube vamos a ir ayudándote a resolver distintos puntos importante para mejorar el rendimiento de tu sitio web por medio de GTMetrix.

GTMetrix es un servicio de análisis rendimiento de la compañía de hosting GT.net. Es capaz de realizar los test más exigentes para analizar la velocidad de carga de todos los recursos de un sitio web, indicando así su velocidad de carga y localizando posibles "cuellos de botella" que afecten a su rendimiento.

Entre las pruebas que realiza para comprobar la velocidad de carga de una web se encuentra la conocida Google Pagespeed y Yahoo YSlow.

Veamos punto por punto, qué mejoras debes implementar en tu web para conseguir un buen rendimiento y, por consiguiente, buenas puntuaciones en Google Pagespeed y Yahoo YSlow.

Mejoremos en definitiva el rendimiento web para conseguir una mejor experiencia de usuario.

Analiza el rendimiento integral de tu web con GT METRIX

El rendimiento de una web es fundamental para mantener una buena experiencia de usuario.

Un sitio web lento, que expone sus contenidos con "bloqueos", "parones" o lentitud, genera un enorme número de abandono de visitas por parte de sus usuarios.

Un rendimiento malo incrementa notablemente el porcentaje de rebote, dado que los usuarios no pueden interactuar con el sitio web debido a que tienen que esperar demasiado tiempo para que éste les conteste.

El rendimiento es una materia pendiente fundamental en todo Internet. Hoy día es tan importante saber dar la información como proporcionarla a la velocidad suficiente para que siga siendo atractiva para el usuario.

Veamos cómo analizar los problemas de rendimiento que nuestro sitio web pueda tener y, en las sucesivas entregas, cómo solucionar estos inconvenientes para proporcionar la mejor experiencia de usuario posible.

Cómo localizar problemas de rendimiento en tu web

Muchas veces tenemos problemas de rendimiento en nuestras web que son de difícil detección. En ocasiones las imágenes, otras veces algún script o componente que hemos instalado y ralentiza su dibujado en los navegadores de nuestros usuarios... Problemas que son de difícil detección si no se poseen suficientes conocimientos técnicos.

Te propongo una manera sencilla de detectar qué puede estar afectando al rendimiento de tu web para así poderle poner remedio. Vamos a utilizar la Pingdom Tools para hacerlo de la manera más sencilla posible.

Cómo mejorar el rendimiento de tu sitio web con Google Pagespeed Insights.

Pagespeed Insights es un servicio de Google que permite analizar el código fuente de una página web para determinar su rendimiento y ofrecer sugerencias para mejorarlo.

A parte del análisis orientado al rendimiento también proporciona una evaluación de la experiencia de usuario para dispositivos móviles, con lo cual es capaz de proporcionar una buena visión general de algunos de los aspectos que conforman la calidad de una página.

Vamos a realizar un pequeño resumen de los cambios que plantea la herramienta para cualquier web.

Ayuda con tu Google Pagespeed

Esta es una entrada de soporte para todos aquellos que necesiten mejorar el rendimiento de su Blog o sitio web. Para conseguirlo vamos a utilizar Google Pagespeed Insights: la herramienta de medición y mejora de rendimiento y usabilidad de Google. Lo único que tienes que hacer es crear un comentario para que pueda darte soporte, de manera que  plantees tus dudas del informe de Pagespeed y pueda asesorarte en todas ellas para solucionarlas. ¿Empezamos?.

¿Qué es Google Pagespeed Insights?

Se trata de un servicio de Google Developers que te permitirá conocer aquellos puntos de tu web que deben ser mejorados para conseguir un rendimiento y una usabilidad aceptable para tus usuarios.

• Pagespeed analizará el código fuente de tu web para ofrecerte las mejoras en materia de rendimiento que debes aplicar. Te avisará cuando tengas código que bloquee el correcto dibujado de la página o cuando utilices imágenes sin optimizar que puedan representar un problema para tu velocidad de ejecución.
• Adicionalmente, Pagespeed hará un análisis de la usabilidad de tu sitio web para móviles y dispositivos portátiles. Controlará si hay botones, zonas de tu web o código que pueda no estar adaptado o preparado para funcionar en móviles o tabletas.

¿Qué ventajas me ofrece un buen rendimiento y usabilidad en mi Blog?

Pagespeed te ayuda fundamentalmente a mejorar la calidad de tu Blog. Dicha calidad puede redundar en un mejor posicionamiento: el contenido de calidad apoyado por un buen rendimiento y usabilidad siempre será mejor posicionado que el que no ha sido optimizado.

¿Cómo funciona esta ayuda de Google Pagespeed para tu Blog?

Simplemente realiza un análisis de tu Blog siguiendo los pasos explicados abajo y plantea tus dudas en los comentarios. Trataré de responder en riguroso orden cada duda paso a paso para darte soluciones a las sugerencias que PageSpeed te informa.

¿Qué tengo que hacer para probar mi Blog con Pagespeed?

1) Es necesario estar registrado con un usuario Google (de GMAIL, BLOGGER, etc...). Si ya has hecho "login" (accedido) 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:

 7) Obtienes los resultados de tu análisis. En esta nueva versión de Page Speed te ofrecerá dos "pestañas" con resultados distintos: aquellos que pertenecen a tu sitio web ejecutado desde un cliente "Mobile" o desde un ordenador.
La puntuación del apartado "Mobile" ha ganado mucho peso en los resultados de Page Speed por la importancia que Google le está dando al "mundo móvil": smartphones, tablets, smartclocks, smartv, etc... la apuesta de futuro por esta clase de sistemas no es anecdótica, el uso de estos dispositivos para navegador por Internet está ampliamente extendido y poco a poco irá a más. Es por ello que ahora, más que nunca, debemos prestarle especial valor a dichos resultados.

8) Con los resultados o las dudas que te surjan me preguntas en los comentarios lo que necesites. No es necesario que pongas todo el informe Pagespeed, sólo plantea tus dudas.

CSS. La guía paso a paso para la depuración, optimización e instalación en una página web o blog.

Las hojas de estilo de tu sitio web o blog son las encargadas de darle presentación a los componentes que sirven para formar tu página web.

El cuidado y optimización de las mismas suele ser pasado por alto con frecuencia, normalmente nos basta con que "funcione la presentación" pero no nos damos cuenta de los problemas que conlleva un incorrecto uso de las hojas de estilo.

W3C, web y Blogger. Adapta tus hojas de estilo a los estándares de la industria.

La necesidad de depurar el código fuente que utilizamos a menudo es necesaria. Si bien hoy día los navegadores casi en su totalidad son capaces de interpretar cualquier código por muy mal que esté organizado, bien es cierto que no sólo funciona a mayor velocidad cuando este está correctamente validado sino que fundamentalmente será más compatible para funcionar en cualquier navegador.

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.

Prioriza el contenido visible en tu Blog. Mejora los tiempos de respuesta del servidor: "Prioritize visible content", "Reduce server response time"

Page Speed controla múltiples parámetros que analizan una página web  para evaluar su rendimiento y ofrecer un conjunto de sugerencias que pueden ayudar a mejorarlo. Para ello utiliza un conjunto de reglas que estamos analizando en cada entrega de esta guía de rendimiento para Bloggers.

Vamos a repasar las reglas de priorización de contenido visible ("Prioritize visible content") y de reducción del tiempo de respuesta del servidor ("Reduce server response time").

Consigue una mejor velocidad de ejecución de tu Blog optimizando sus imágenes: "Optimize images".

Page Speed controla múltiples parámetros que analizan una página web  para evaluar su rendimiento y ofrecer un conjunto de sugerencias que pueden ayudar a mejorarlo. Para ello utiliza un conjunto de reglas que estamos analizando en cada entrega de esta guía de rendimiento para Bloggers.

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.

Minimiza los CSS, Javascript y el HTML de tu Blog: "Minify CSS", "Minify HTML" y "Minify Javascript".

Page Speed controla múltiples parámetros que analizan una página web  para evaluar su rendimiento y ofrecer un conjunto de sugerencias que pueden ayudar a mejorarlo. Para ello utiliza un conjunto de reglas que estamos analizando en cada entrega de esta guía de rendimiento para Bloggers.

En esta ocasión vamos a repasar las tres reglas de "minimización" de recursos: CSS, HTML y Javascript. Conseguiremos una interesante mejora del rendimiento al disminuir el tamaño de los recursos utilizados en la página.

Activar la compresión de contenidos, entender cómo gestionar la caché con Blogger: "Enable compression" y "Leverage browser caching"

Page Speed controla múltiples parámetros que analizan una página web  para evaluar su rendimiento y ofrecer un conjunto de sugerencias que pueden ayudar a mejorarlo. Para ello utiliza un conjunto de reglas que estamos analizando en cada entrega de esta guía de rendimiento para Bloggers.

En esta ocasión vamos a repasar dos nuevas reglas de Page Speed: "Enable compression" para activar la compresión a nivel de servidor web y "Leverage browser cahcing" para gestionar el uso de la memoria caché para acelerar la presentación de componentes de nuestra página.

Mejora el rendimiento de tu Blog optimizando los CSS y JavaScript: "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.

Cómo solucionar la sugerencia Page Speed: "Avoid Landing Page Redirect"

La medición objetiva del rendimiento de nuestra página web o Blog, según los últimos criterios y reglas establecidos por Google en su servicio Page Speed Insights, nos permitirá saber hasta qué punto estamos ofreciendo un servicio de calidad, lo suficientemente rápido y fluido para que pueda posicionarse adecuadamente en los resultados del buscador.

Cuando nosotros los Boggers o incluso muchos administradores de páginas web recibimos la puntuación media y el listado de sugerencias a solucionar de Page Speed, muchas veces no entendemos qué nos están indicando que podríamos modificar ni cómo poder hacerlo.

Mejora la velocidad de tu Blog con Google PageSpeed.

Page Speed controla múltiples parámetros que analizan una página web  para evaluar su rendimiento y ofrecer un conjunto de sugerencias que pueden ayudar a mejorarlo. Para ello utiliza un conjunto de reglas que estamos analizando en cada entrega de esta guía de rendimiento para Bloggers.

Vamos a conocer cómo podemos medir objetivamente la velocidad de nuestra página utilizando Google PageSpeed Insights.

CSS-SPRITE - Pon tus iconos para redes sociales a la máxima velocidad

Pagespeed ha actualizado su lista de normas para la optimización del rendimiento de nuestros sitios web añadiendo una nueva comprobación, la utilización de css sprites.

A menudo para nuestros "iconos sociales", también conocidos como "follow buttons", hemos utilizado imágenes que se cargaban independientemente una de otra según las íbamos llamando en el código. En guías como esta, trabajábamos con enlaces que llamaban a nuestros perfiles para redes sociales cuando el usuario hacía "clic" en una imagen con el icono de una red social determinada.

La caché en Blogger

La mejora en el rendimiento de nuestros blogs influye a nivel de optimización de para los motores de búsqueda. Es decir, la posición de nuestro sitio en los resultados de búsqueda se ve influenciada por la velociad con la cual somos capaces de ofrecer nuestras páginas a los usuarios.

Es normal que no puntúe igual para la colocación en los primeros puestos de resultados una página lenta frente a una rápida. Por ello, es importante que ajustemos bien los consejos de "Page Speed Insights" para optimizar todo lo posible nuestros resultados. No sólo ya de cara a obtener mejores resultados SEO sino también porque nuestros usuarios agradecerán enormemente el tiempo de respuesta que nuestro sitio les brinde. Sin embargo, dado que utilizamos Blogger, tendremos "limitadas" algunas posibilidades que nos permitirían tener un mayor control de la caché de nuestro sitio y que no podemos resolver de otra manera que a través de meta etiquetas que emulan la respuesta de las cabeceras HTTP de nuestro sitio web.

Aunque las mejoras que te presento no cambiarán tu puntuación en el page-speed, notarás que sí hay mejoría en la gestión de la caché en los navegadores de tus usuarios, transmitirás una mayor sensación de velocidad y "paliarás" en parte el problema que tenemos de no poder editar las cabeceras HTTP del servidor.