Quitar el JavaScript que bloquea la visualización de contenido
Seguro que estas cansado de ver en PageSpeed Insights que tu web no esta optimizada por: «Quitar el JavaScript que bloquea la visualización de contenido»
De forma predeterminada, el código JavaScript bloquea la generación de DOM, lo que retrasa el primer renderizado. Por tanto, para que el código JavaScript no bloquee los analizadores, te recomendamos que introduzcas secuencias de comandos externas con el atributo HTML async. Por ejemplo:
<script async src="my.js"> |
Pero no todo es oro lo que reluce, la carga de ficheros javascript se genera de forma aleatoria y si tienes ficheros propios normalmente son más livianos que los que pertenecen al framework como puede suceder con jQuery provocando errores de ejecución al ejecutarse primer tu script antes de tener cargado jQuery.
Para ello la solución que se proponer es la siguiente,
empezamos con la carga del js de forma async:
<!DOCTYPE html> <html> <head> <title>Prueba</title> <link href="hojadeestilos.css" rel="stylesheet" type="text/css"> <script src="js/load_plus.js" type="text/javascript" <strong>async="async"</strong>></script> </head> <body> <div class="content"> </div> </body> </html> |
Contenido del fichero load_plus.js:
function addEvent(element, event, fn) { if (element.addEventListener) { element.addEventListener(event, fn, false); } else if (element.attachEvent) { element.attachEvent('on' + event, fn); } } function loadScript(src, callback) { var s, r, t, write; write = src.split("/"); r = false; s = document.createElement('script'); s.type = 'text/javascript'; s.src = src; s.onload = s.onreadystatechange = function() { if ( !r && (!this.readyState || this.readyState == 'complete') ) { r = true; if (callback !== undefined) { callback(); } } }; t = document.getElementsByTagName('script')[0]; t.parentNode.insertBefore(s, t); } addEvent(window, 'load', function(){ loadScript( 'http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js', function () { loadScript('<strong>js/tu_script.js</strong>'); } ); }); |
Y el contenido de tu_script.js tendría que tener esta inicialización:
$(document).ready(function() { //funciones o ejecuciones utilizando jQuery $(...)... }); |
