Saltar al contenido

1

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 $(...)...
});

Cuando  hacemos un test en Google PageSpeed Insights y nos da como una mejora que debes introducir "Especificar cache del navegador", nos da la siguiente explicación:

https://developers.google.com/speed/docs/insights/LeverageBrowserCaching

Captura

 

 

En realidad lo que nos quiere decir es que para mejorar la experiencia de usuario a la hora de cargar la web, el contenido estático como imágenes, hojas de estilo y javascript le podemos indicar una fecha de expiración para que no se cargue cada vez que el usuario accede a la página. Esto se puede hacer muy fácilmente, hay dos opciones, desde PHP o desde .htacces. La primera opción te va permitir decir que páginas quieres que se aplique, en la segunda y más recomendable se aplicará a todo el conjunto de páginas.

Aunque se puede expresar la directiva de tiempo con palabras tipo days, week, moth a mi me gusta más la forma numérica y expresarlo en segundos, de esta forma se calcula así:

- ExpiresDefault A3600 una hora
- ExpiresDefault A604800 para una semana

Y se calcula de la siguiente forma: 30 dias = 60*60*24*30 = 2592000

Expiración utilizando .htacces

<ifmodule mod_expires.c>
 ExpiresActive On
 ExpiresDefault A3600
 <FilesMatch ".(gif|jpg|jpeg|png|swf)$">
 ExpiresDefault A604800
 Header append Cache-Control "public"
 </FilesMatch>
 <FilesMatch ".(xml|txt|html)$">
 ExpiresDefault A604800
 Header append Cache-Control "public"
 </FilesMatch>
 <FilesMatch ".(js|css)$">
 ExpiresDefault A604800
 Header append Cache-Control "public"
 </FilesMatch>
</ifmodule>

Expiración utilizando PHP

Se realizará modificando los headers

header("Expires: ".gmdate ("D, d M Y H:i:s", time() + 60*60*24*30)." GMT");

En las siguientes referencias os dejo otras explicaciones útiles:

 

El compresor de YUI (Yahoo¡) es para mi uno de los mejores, más fáciles de utilizar y desarrollado por un grande como Yahoo. Además, nos permite hacer compresiones de CSS y JS, por lo que utilizando una misma página tendremos comprimidos nuestros archivos.

Otra opción es su carga, podemos hacerlo mediante un copy/paste, mediante la carga de un archivo (mi opción preferida) o directamente desde la URL.

http://refresh-sf.com/yui/

 

Captura

Captura

Dejo unos enlaces para construir las típicas cabeceras o galerias que se van moviendo... pero en JavaScript, concretamente utilizando jQuery. Y pongo puntos suspensivos porque no son en flash... odio el flash y eso que no soy Steve Jobs 🙂

páginas con jQuery:

 

Y una página con un Top23: http://www.geeksucks.com/toolbox/23-jquery-fade-in-fade-out-effect.htm

Es posible que en ocasiones con algun script de carga con ajax y habiéndolo mezclado con los "maravillosos" controles de .Net haga por algún sitio un postback, con lo que la carga inicial se vuelva a realizar...

pues bien para este caso y otros casos que sea necesario controlar el PostBack con Javascript, os dejo como controlarlo:

 

var prm = Sys.WebForms.PageRequestManager.getInstance();
if(!prm.get_isInAsyncPostBack()) {
// llamada
}

Antes de todo y si se quiere emepzar bien, no será de más echarle una ojeada a la documentacion de JQuery, que relativamente no es mucha: http://docs.jquery.com/Main_Page

1- ponemos un identificador (atributo id) para seleccionarlo desde jQuery.

 <a href="#" id="enlaceajax">Haz clic!</a>

2- recordemos cómo asignar una función para cuando se haga clic en el enlace:

$(document).ready(function(){

$("#enlaceajax").click(function(evento){

//elimino el comportamiento por defecto del enlace

evento.preventDefault();

//Aquí pondría el código de la llamada a Ajax

});

})

3- Y ahora la parte más interesante, donde podemos ver qué tan fáciles son las cosas con este framework Javascript. Una única línea de código será suficiente:

 $("#destino").load("contenido-ajax.html");

Ejemplo completo:

<html>

<head>

<title>Ajax Simple</title>

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>

<script>

$(document).ready(function(){

$("#enlaceajax").click(function(evento){

evento.preventDefault();

$("#destino").load("contenido-ajax.html");

});

})

</script>

</head>

<body><a href="#" id="enlaceajax">Haz clic!</a>

<br>

<div id="destino"></div>

</body>

</html>

Tambien es muy interesante, aparte de ver la callback de load en el ejemplo anterior, ver la $.ajax(options)

De tal forma de hacer llamadas así de facil:

 $.ajax({   type: "POST",

url: "some.php",

data: "name=John&location=Boston",

success: function(msg){

alert( "Data Saved: " + msg );

}});

Más documentación en la API de AJAX de JQuey :  http://docs.jquery.com/Ajax