Diarios de la nube Idea guardada 0 veces
Sé la primera persona en valorar esta idea Valorar

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.

¿Qué es la utilización de javascript asíncrono en una web?

A la hora de dibujar una página en un sitio web, lo ideal es contar con recursos que se carguen asíncronamente. Es decir, recursos que permiten que toda la página completa se "dibuje" en el navegador sin necesidad de que éste "espere" a que termine de ejecutarse un determinado script.

De esta manera se consigue dibujar mucho más rápido la página web y se transmite una mayor "fluidez" al usuario, que cuenta con una experiencia mucho más amigable en la utilización de nuestros contenidos.Optimiza el rendimiento de tu web paso a paso con GTMetrix: Google Pagespeed y YSlow:

Este artículo es parte de una guía que te ayudará a optimizar al completo el rendimiento neto de tu web, mejorando así su ejecución en cualquier dispositivo (móviles, tabletas, ordenadores) y permitiéndote una mejora en tu posicionamiento en buscadores.

La guía consta de los siguientes capítulos:

Analiza el rendimiento integral de tu web con GTMetrix.

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

Mejora el rendimiento de tu web optimizando sus imágenes

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

Mejora el rendimiento de tu web utilizando jascript asíncrono

Puedes ejecutar cada entrega por separado, es recomendable seguir el orden planteado para una mejor comprensión.
Comprueba el rendimiento de tu web con GTMetrix



Lo primero es realizar el análisis de rendimiento de GTMetrix para poder visualizar si tenemos algún aviso que nos indique la necesidad de optimizar las hojas de estilo en nuestra web.

Así pues, ejecuta primero esta guía que te explica cómo analizar el rendimiento de tu web con GTMetrix.



Si en el resultado del análisis de tu página te aparecen los siguientes avisos: "Prefer asynchronous resources", lo mejor es que ejecutes los siguientes pasos que explico a continuación para mejorar el rendimiento de tu web.


Cómo localizar los recursos javascript no asíncronos

Gracias a GTMetrix, en el análisis de Google Pagespeed, podréis ver los avisos de los recursos Javascript que requieren optimización y qué clase de actuación requieren al respecto para mejorarlos.



De esta manera, puedes ver dentro del código de tus páginas, qué hojas de estilo están afectando al rendimiento de la misma. A continuación te explico cómo solucionar cada problema.
Conceptos previos muy importantes:

Si estás familiarizado con la utilización de javascript, entenderás que son pequeños "guiones" o scripts de ejecución programados que realizan una serie de instrucciones en la página web para activar recursos, dibujar componentes o actuar en general sobre la presentación y la interacción con el usuario directamente desde una página web.Antiguamente, al Javascript se le llamaba de la siguiente manera (lo verás en muchas páginas web todavía):<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> Esta clase de llamadas al javascript referenciándolo directamente en la página web como un archivo externo almacenado dentro de un ".js" ralentiza considerablemente la ejecución del código y el posterior dibujado de la página web en el navegador.En primer lugar, el navegador tiene que llamar a la URL o dirección donde se encuentra el archivo .js que contiene el javascript. Esta operación debe realizar una búsqueda del archivo en la web, conectándose a la dirección donde se encuentra el archivo ("dns lookup") y perdiendo mucho tiempo no sólo en localizarlo sino además en descargarlo al navegador del cliente. En segundo lugar, una vez descargado el archivo .js, éste debe interpretarse y ejecutarse. Durante todo el tiempo que se busca, se descarga y se interpreta, como se hace "síncronamente", el navegador "espera" a que el recurso se procese por completo para continuar cargando el resto de la página. Con lo que, la sensación para el usuario es que todo está "parado" hasta que dicho javascript se procesa.Con el tiempo, los navegadores se perfeccionaron con el uso de la "memoria caché" y la ejecución forzadamente asíncrona de esta clase de declaraciones de uso de javascript pero continúa suponiendo un problema esta manera de llamarlo.Es por ello que lo ideal es realizar una llamada asíncrona que no haga que toda la ejecución quede pendiente hasta que dicho javascript se procese. En términos generales:
Evita las llamadas de javascript síncrono siempre. No declares el javascript de esta manera en el <head>. Debes dejar la cabecera del documento HTML lo más libre posible de javascript y en caso de no tener más remedio que ejecutarlo (por tener un .js que te obligue a hacerlo en sus recomendaciones) SIEMPRE debes utilizar la versión ASÍNCRONA del mismo.

Si utilizas el código asíncrono te aseguras de que el dibujado de la página corra en paralelo a la descarga e interpretación del javascript. El problema es que al ser asíncrono, no podrás nunca llegar a saber con total exactitud cuándo se va a ejecutar y si tienes algún javascript que dependa del que cragaste asíncronamente, puede no funcionar por no encontrarse disponible en el momento de ejecución el javascript cargado en modo asíncrono.

Las llamadas asíncronas se pueden "diferir" si se controla su carga gestionando el evento window.onload o similares, en el momento en que se vaya a ejecutar algún javascript dependiente, pero en estos casos es mejor utilizar javascript en modo diferido.Situaciones particulares:
Todo el código .js que pertenezca a un plugin de cualquier clase (por ejemplo redes sociales) debe ser ejecutado siempre en modo asíncrono. Especialmente cuando es un script cuyas especificaciones del fabricante recomienden instalarlo en el <head> o al principio del <body>.

La combinación de la utlización de javascripts asíncronos sin dependencias posteriores en el <head> y javascript diferido al final del documento HTML, antes del </BODY> es una combinación que en general ofrece las mejores perspectivas de rendimiento.

Como optimizar la utilización de javascript con llamadas asíncronas:

Los siguientes pasos que a continuación se enumeran son obligatorios dada su importancia para mejorar el rendimiento neto de una página web.

En el ejemplo anterior, hemos mostrado cómo se hace una llamada síncrona y "lenta" al javascript que ejecuta Google para sus +1 en Google+ (muy presente en muchísimos sitios web y blogs):

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

Google, al igual que todas las compañías que proporcionan código javascript para sus componentes (como facebook con su "like" o Twitter con su "tweet"), ofrecen código con ejecución asíncrona de todos sus componentes.

Por ejemplo, Google ofrece la posibilidad de utilizar javascript asíncrono para su +1 y se realiza con el siguiente código que te muestro:

<!-- Inserta esta etiqueta en la sección "head" o justo antes de la etiqueta "body" de cierre. -->
<script src="https://apis.google.com/js/platform.js" async defer>
{lang: es}
</script>

<!-- Inserta esta etiqueta donde quieras que aparezca Botón +1. -->
<div class="g-plusone" data-annotation="inline" data-width="300"></div>

Asi pues, basta con sustituir la llamada que realizabas expuesta anteriormente con esta otra forma que te ofrece Google.

Lo mismo sucede con las llamadas al código de Facebook, de Twitter u otros muchos ejemplos.
Como optimizar la llamada a jQuery de manera asíncrona:
Llamada asíncrona de jQuery con código inline:Esta es otra manera de optimizar las llamadas javascript a unos niveles de rendimiento importantes. La idea es lanzar en asíncrono la carga de jQuery y realizar las llamadas posteriores a las funciones dependientes una vez el documento HTML está listo. Esta forma de realizar llamadas te permite ejecutar en modo asíncrono una librería Javascript completa para después una vez se ha dibujado la página y sin perder tiempo en descargas de .js, se ejecuten funciones inline dependientes de la asíncrona.<html><head>
</head> <body> <!-- TODO TU CÓDIGO DEL BODY hasta antes del </BODY> --><script type=text/javascript> <!-- EJEMPLO DE CARGA ASÍNCRONA A JQUERY -->(function(){ var bsa = document.createElement(script); bsa.type = text/javascript; bsa.async = true; bsa.src = https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js; (document.getElementsByTagName(head)[0]||document.getElementsByTagName(body)[0]).appendChild(bsa);})();</script> <script>window.onload = function(){ <!-- CUANDO LA VENTANA ESTÁ CARGADA -->
<!-- LLAMADAS A jQuery CON LA LIBRERÍA YA CARGADA Y LISTA -->jQuery(document).ready(function(e){e(".PRUEBA-1432447472-id").hide();e("ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a").addClass("tabs-widget-current").show();e(".tabs-widget-content-widget-themater_tabs-1432447472-id:first").show();e("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").click(function(){e("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").removeClass("tabs-widget-current a");e(this).addClass("tabs-widget-current");e(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();var f=e(this).attr("href");e(f).fadeIn();return false})});jQuery(document).ready(function(e){var f=function(){setTimeout(function(){e("ul.prueba-list li:first").animate({marginTop:"-50px"},800,function(){e(this).detach().appendTo("ul.ticker-list").removeAttr("style")});f()},5000)};f()});
}</script>
</body></html> En este ejemplo hemos llamado asíncronamente a la librería jQuery para después ejecutar una función javascript dependiente de la misma de manera "inline".
Si quieres profundizar en cómo utilizar el javascript en tu web, no dudes en realizar este tutorial que te ayudará paso a paso a ejecutarlo de la manera más óptima y haciendo que te de su mejor rendimiento: Cómo mejorar el rendimiento de tu sitio web con las hojas de estilo y el javascript.

Para usuarios de Blogger, no dudes en seguir la guía de rendimiento para bloggers, te ofrece paso a paso cómo mejorar el rendimiento de este particular sistema de publicación de Blogs de Google.

Cualquier duda me tienes en los comentarios para lo que necesites.

Fuente: este post proviene de Diarios de la nube, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

SEO con imágenes

Las imágenes que utilizas en tu Blog, en tu web, no son sólo un reclamo o un añadido decorativo para tus contenido. Pueden servir a los buscadores web para comprender mejor la información que proporci ...

Etiquetas: rendimiento

Recomendamos

Relacionado

rendimiento

Mejora el rendimiento de tu web con GTMetrix: Defer Parsing of Javascript

En Diarios de la nube vamos a ir ayudándote a resolver cada respuesta que GTMetrix pueda devolverte al analizar tu web. 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 bot ...

rendimiento

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

general rendimiento

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

rendimiento

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

rendimiento

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

general seo

Page Analytics by Google, información al instante de todas las estadísticas de tu web ¡sin salir de ella!.

El visionado de información de datos estadísticos de una web es fundamental para mejorar sus contenidos y posicionamiento en buscadores. Dichas estadísticas suelen calcularse y presentarse en sistemas analíticos que explotan la información de uso de nuestras web para proporcionarnos entre otros, datos exactos de su uso. Dentro de las herramientas analíticas disponibles en el mercado particular e i ...

Linux

Optimizando el rendimiento de Apache – Parte 2

Este artículo forma parte de la serie Guía del servidor Apache : Securing Apache on Ubuntu – Part 1 Securing Apache on Ubuntu – Part 2 Optimización del rendimiento de Apache – Parte 1 Optimizando el rendimiento de Apache – Parte 2 Setting Up Name-Based Virtualhost Apache Configuración de IP y Port-Based Virtualhost en Apache Cómo configurar el directorio web de protecc ...

SEO

Aprovecha tu web al máximo con Google Analytics

Google Analytics es la herramienta para el análisis y la monitorización del tráfico de un sitio web. Como herramienta analítica posee numerosos informes que te servirán para aprovechar al máximo tu web y poder desarrollar estrategias que la orienten hacia los objetivos que te propongas. Vamos a sacarle provecho a esta magnífica herramienta de Google que seguro te sorprenderá con la cantidad de inf ...

internet blog posiciona tu web ...

5 acciones que no benefician a tu posicionamiento web

Uff..! Ese mes llego por los pelos a mi cita en el blog de Celia. Ha sido y está siendo un mes un poco duro y estresante pero no podía dejar de seguir acompañando a mi bloguera Gina en su camino a mejorar su posicionamiento web. Quizás las circunstancias que están rodeando mi vida me han hecho plantear este post en plan negativo aconsejando las cosas que NO os ayudaran a mejorar vuestro Seo. Dejar ...

Seo on page pasos de posicionamiento

21 Pasos para mejorar tu posicionamiento web al instante

En este artículo estarás leyéndo los mejores 21 pasos de posicionamiento web que debes hacer para que estés en primer lugar, ya que muchas veces nosotros no optimizamos nuestra página web para que sea relevante y de gran calidad o no aplicamos las mejores técnicas seo. Posicionamiento web 1.Escoge un dominio acorde a tu nicho Si quieres posicionar rápido un ejemplo en carros es necesario, pero no ...