Frikipandi – Web de Tecnología – Lo más Friki de la red. Web de Tecnología con las noticias más frikis de Internet. Noticias de gadgets, Hardware, Software, móviles e Internet. Frikipandi 
El tiempo de carga en una página es muy importante para el SEO. Por lo que debemos aplicar técnicas de WPO. Una de las formas de mejorar la carga es evitar bloqueos a la hora de cargar contenidos Javascript en la página. ¿Cómo cargar Javascript sin bloqueo en el navegador?
Hay 5 técnicas que podemos usar para cargar el Javascript sin bloquear el navegador. Es muy interesante para cargar funcionalidad que luego dependerá de eventos del usuario y que no debe entorpecer la carga inicial de la página.
Las 5 técnicas para cargar Javascript sin bloqueo en el navegador
- XHR Eval
- XHR Injection
- Script DOM Element
- Script Defer
- document.write Script Tag
XHR Eval
Usas XMLHttpRequest (XHR) para obtener el JavaScript, cuando esta cargado ejecutas con eval el contenido en el navegador.
1 2 3 4 5 6 7 8 9 10 | var xhrObj = getXHRObject();xhrObj.onreadystatechange = function() { if ( xhrObj.readyState == 4 && 200 == xhrObj.status ) {eval(xhrObj.responseText);}};xhrObj.open('GET', 'myScript.js', true);xhrObj.send(''); |
XHR Injection
Usas XMLHttpRequest (XHR) para obtener el JavaScript, cuando esta cargado injecta el contenido en un script tag creado dinamicamente ene l head
1 2 3 4 5 6 7 8 9 10 11 12 | var xhrObj = getXHRObject();xhrObj.onreadystatechange = function() { if ( xhrObj.readyState == 4 ){var scriptElement = document.createElement('script');document.getElementsByTagName('head')[0].appendChild(scriptElement);scriptElement.text = xhrObj.responseText;}};xhrObj.open('GET', 'myScript.js', true);xhrObj.send(''); |
Script DOM Element
Usa JavaScript para crear un elemento script dado al atributo src la ruta del script extermo a acargar.
1 2 3 4 | var scriptElement = document.createElement('script');scriptElement.src = 'http://example.com/myScript.js';document.getElementsByTagName('head')[0].appendChild(scriptElement); |
Script Defer
Usa la propiedad defer del elemento script. Además esta soportado por Internet Explorer. Hace que el navegador no cargue el script inmediatamente.
1 | <script defer="" src="myScript.js"></script> |
document.write Script Tag
Usa la función de javascript document.write para escribir el script dentro de la página.
1 | document.write("<scr"+"ipt type="text/javascript" src="myScript.js"></scr"+"ipt>"); |
Una mejora es que tanto XHR Eval y XHR Injection pueden usar JQuery.ajax para cargarlo pero obliga a que la librería JQuery esté cargada primero. Pero podemos tener una fúnción getXhrObject() para permitir la carga sin usar jQuery.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | function getXhrObject() {if (window.XMLHttpRequest)return new XMLHttpRequest();if (window.ActiveXObject) {var names = [ "Msxml2.XMLHTTP.6.0", "Msxml2.XMLHTTP.3.0","Msxml2.XMLHTTP", "Microsoft.XMLHTTP" ];for (var i in names) {try{return new ActiveXObject(names[i]);}catch (e){//Nothing}}}return null;} |
Cargar Javascript sin bloqueo en el navegador. Espero que os sirva para mejorar la carga de vuestra página haciendo algo de WPO a vuestras páginas haciendo que el Javascript no bloquee las páginas.
