Lo que realmente debes saber para hacer más rápida tu web y tener mejor SEO: Reducir la cantidad de recusos criticos parte 2.
Reducir la cantidad de recursos que bloquean el analizador (parser)
Optimizando el Javascript
Hasta el momento al pobre Javascript lo hemos tenido ignorado, y pues, obviamente es algo muy importante ya que difícilmente en la era del HTML5 tendremos una pagina sin Javascript. Lo lógico que te podría pasar por la mente, considerando lo que hemos visto hasta ahorita, es que necesitas con JS lo mismo que con HTML y CSS: minimizar, comprimir y poner en caché, y sí, por ahí va el asunto, pero si pusiste tu sitio en algunos de los sitios para evaluar la velocidad de carga de tu Web (si no lo viste, en este enlace puedes leerlo) y principalmente en Google PageSpeed Insights, habrás notado de que se «quejan» de que el JavaScript bloquea el analizador (si no lo has hecho, ve y hazlo antes de continuar). «Bloquear el analizador», eso suena raro, veamos que es extendiendo nuestro código de ejemplo agregándole un simple script al final:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link href="css/style.css" rel="stylesheet">
<title>Hablemos de SEO</title>
</head>
<body>
<p>
Hola <span>lectores de</span> <strong>HablemosDeSEO.ninja!</strong>
</p>
<div><img src="images/gato.jpg"></div>
<script>
var span = document.getElementsByTagName('span')[0];
span.innerText = 'mundo'; //cambiamos el contenido del DOM
span.style.display = 'inline'; //cambiamos una propiedad del CSSOM
//creamos un nuevo elemento, le ponemos estilo y lo creamos en el DOM
var loadTime = document.createElement('div');
loadTime.innerText = 'La pagina cargo el: ' + new Date();
loadTime.style.color = 'red';
document.body.appendChild(loadTime);
</script>
</body>
</html>
Este script lo que hace es que mira en el DOM y al primer elemento SPAN que encuentra, que en nuestro caso es el que dice «lectores de» y el mismo script cambia dicho texto por la palabra «mundo» y ademas le agrega una regla CSS, colocando el texto «inline», modificando así el CSSOM. Con esto puedes darte cuenta de como JavaScript tiene la capacidad de modificar tanto el DOM como el CSSOM. Si continuamos con el script, ahora crea un nuevo elemento DIV, le asigna un texto, un color y lo agrega a la pagina. Carga ahora este HTML en tu teléfono y veras como ahora dice «Hola Mundo» en lugar de «Hola lectores de» y los demás elementos que hemos modificado con el script. Ahora te preguntaras «¿que puedo hacer aquí para optimizar JavaScript?» pues bien, como muchos otros elementos, hay libros completos que se dedican solo a la optimizacion del JavaScript, pero a nuestro nivel o lo que perseguimos lo que mas nos importa es aprender a diferenciar como incluir dicho JavaScript en nuestro sitio Web.
Retrocedamos un poco y analiza como haría el navegador para analizar la pagina con un JavaScript incluido. Pues bien, cuando el navegador se encuentra con la etiqueta <script> lo que hace es pausar la construccion del DOM y dejar que se ejecute el JavaScript antes de continuar y por eso se dice que JavaScript es un bloqueador del analizador,
JavaScript’s Externos
Ahora consideremos que el JavaScript anterior no esta dentro de nuestro HTML sino que esta en un archivo externo, ¿que pasaría? pues si has ido comprendiendo, mientras el navegador construye el DOM, cuando encuentre la inclusión del archivo externo JavaScript, detendrá o «bloqueara» la construcción del DOM, y recuerda, el analizador encuentra la etiqueta de inclusión, bloquea y debe esperar a que el archivo llegue (luego de pedirlo al servidor Web), y ejecutarlo, después de esto, puede continuar construyendo el DOM. Así que aqui debes empezar a tomar decisiones, por ejemplo si el JavaScript que usaras solo se ejecuta en una pagina, podrías considerar incluirlo dentro del HTML y no como un archivo externo, pero claro, dependerá de su tamaño y es por eso que es muy importante conocer que es lo que incluyes y porque lo incluyes.
Veamos otro ejemplo, supongamos que tenemos el siguiente codigo:
<style src="style.css" />
<p>
Hola Mundo
<script>
var e = document.getElementByTagName("p")[0];
e.style.color = "red";
</script>
HablemosDeSEO
</p>
El navegador hará lo siguiente:
- Pedira el HTML
- Cuando recibe el HTML comienza a construir el DOM
- Descubre que hay un CSS y lo solicita.
- Luego el analizador continua y encuentra la etiqueta <script> y se bloquea
- Como no sabe que es lo que el <script> va a hacer pues el JavaScript podria intentar acceder a las propiedades CSS, asi que bloque la ejecución del script hasta que el archivo con el CSS llega y construye el CSSOM.
- Solo entonces ejecuta el JavaScript y termina de construir el DOM
En conclusión: el CSS bloquea la renderizacion y ejecución de JavaScript, OJO esto es muy importante de aprender y comprender. Por esta razón debes aprender muy bien como optimizar el CSS.
Por otro lado ya debes haber notado que hay scripts que no modifican ni el DOM ni el CSSOM y por lo tanto no deberíamos de permitir que bloqueen el analizador, para esto tenemos 2 opciones que mucho se dice de ellas pero poco se explica sobre que es cada una y cuando usarlas, un ejemplo clásico de esto es el código de Google Analytics.
Async: Carga asincrona de JavaScript
Si agregamos el atributo async al script le estamos diciendo al navegador que no bloquee el analizador, así que cuando encuentra este atributo el navegador hace la petición del o los archivos pero continua haciendo su trabajo hasta que estos han sido descargados. En otras palabras, cuando el atributo async esta presente:
- El navegador no bloquea la construcción del DOM
- El navegador no bloquea la construcción del CSSOM
Es decir, ASYNC no bloquea el CRP. Como el script se ejecutara tan pronto es descargado, si el script no depende de nada ni afecta a nadie no habrá problema, pero si el archivo depende de otros scripts entonces si podría haber problemas, por esto jQuery requiere que la variable jquery exista antes de poder ejecutar algo mas.
Veamos un ejemplo de como usar async:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link href="css/style.css" rel="stylesheet">
<script src="analytics.js" type="text/javascript" async</script>
<title>Hablemos de SEO</title>
</head>
<body>
<p>
Hola <span>lectores de</span> <strong>HablemosDeSEO.ninja!</strong>
</p>
<div><img src="images/gato.jpg"></div>
</body>
</html>
Como nota final, considerar que la sintaxis correcta para documentos XHTML es async=»async».
Ahora bien, async no puede ser usado con código inline, es decir, solo funciona con scripts externos, una manera de evitar que bloqueen el CSSOM es poniendo el script antes de la carga de los CSS.
Defer: Diferirir la carga de JavaScript (defer JavaScript)
¿cuantas veces han escuchado o leido decir «defer your JavaScript» sin saber que diantres es eso? pues bien, aquí se los explico lo mas sencillo que puedo. El atributo defer lo que le dice al navegador es cuando ejecutar el código JavaScript. Si el atributo esta presente el script es ejecutado hasta que la pagina se ha terminado de analizar por la sencilla razon de que el script no va a generar ningun tipo de contenido en el documento, por ejemplo no tiene comandos como document.write; el script es agregado hasta el final de la lista de scripts a ejecutar respetando en la cola el primero en llegar el primero en salir (FIFO: first in, first out) y la mejor razón para usar defer es: Rendimiento. Al diferir la ejecucion de un codigo JavaScript, el script sera evaluado hasta que la pagina ya este lista.
Cuando defer esta presente, lo que el navegador hace es:
- Hacer los pedidos en paralelo de los archivos (como async)
- Continua analizando el documento como si no hubiera sido interrumpido nunca
- Continua analizando el documento inclusive si los archivos solicitados ya fueron descargados
- Ejecuta cada script en el orden en que fueron encontrados en el documento.
Veamos un ejemplo,
‹script› var test1 = "Test 1 : fail"; ‹/script› ‹script defer› console.log(test1); ‹/script› ‹script› test1 = "Test 1 : pass"; ‹/script›
En este ejemplo el navegador va a:
- Renderizar la pagina
- Ejecutar el segundo script después de todos los demás
- Mostrará «Test1: pass» en la consola. Si la consola muestra «Test 1: fail» es porque los scripts se ejecutaron en el orden en que se encontraban en el código fuente.
Al igual que el atributo async, la sintaxis XHTML de defer es: defer=»defer». Un problema con defer es que algunos navegadores no lo tienen implementado.
Si eres como yo, en este momento te has de estar preguntando ¿cual es la diferencia entre usar async y defer?
Diferencia entre async y defer.
Las diferencias son muy sutiles y cambian un poco si estas usando HTML5 o documentos XHTML, pero como estamos en la era del HTML5 me centrare mas en esto. Async le dice al navegador que descargue el archivo de forma asincrona, es decir, que siga trabajando mientras el archivo se descarga sin esperar a que la pagina termine de cargar (como si nunca hubiese sido interrumpido), y que cuando termine de cargar que lo ejecute, y defer lo que le dice al navegador es que descargue de forma asincrona los archivos y los ejecute hasta que la pagina halla sido analizada. Como puedes ver, es mejor defer, pero con la limitación de los navegadores podrías tener problemas.
En resumen: defer espera para ejecutarse hasta que el documento ha sido analizado, mientras que async corre en background mientras el documento esta siento analizado.
Esto es todo para esta entrega, espero que te sea útil. Si quieres que te avise cuando escriba la siguiente parte o algo nuevo, puedes suscribirte aquí:
No olvides agregarte en el grupo [button color=»success» size=»» type=»squared» target=»false» link=»https://www.facebook.com/groups/HablemosDeSEO.ninja»]Hablemos de SEO[/button] en Facebook
Recuerda que puedes encontrar mas info, tips, comentar, preguntar en los siguientes grupos en Facebook:
[button color=»primary» size=»» type=»» target=»false» link=»https://www.facebook.com/groups/desarrolladores.elsalvador»]Desarrolladores PHP El Salvador[/button][button color=»danger» size=»» type=»» target=»false» link=»https://www.facebook.com/groups/HablemosDeSEO/»]Hablemos de SEO[/button][button color=»info» size=»» type=»» target=»false» link=»https://www.facebook.com/groups/freeit»]Soy de IT y Soy Libre[/button][button color=»warning» size=»» type=»» target=»false» link=»https://www.facebook.com/groups/html5yhtml51/»]HTML5 y 5.1 de Verdad[/button]
