Si el CSS es crítico en cuanto a la carga de un sitio se refiere, el JavaScript lo es aún más. Una primera base para tener presente es hacer que el sitio no dependa de JavaScript al menos hasta que esté cargado, y más si depende de bibliotecas externas como jQuery.
Cuando hablamos de la carga de JavaScript lo primero es separar los distintos elementos y no cargar todo a la vez, ya que se generaría un bloqueo sobre todo el sitio.
Es por esto que la base inicial es cargar las diferentes bibliotecas de elementos que simplemente se carguen, pero sin que se ejecute nada. Todo el JavaScript ha de ejecutarse una vez se haya producido el “Load del DOM”. En general este tipo de ficheros, una vez cargados no ejecutan nada, por lo que no bloquean de por sí.
Lo siguiente que haremos es minimizar el contenido de los ficheros de JavaScript, al igual que se hace con los CSS. El objetivo es eliminar bytes que no son útiles y reducir el tiempo de descarga.
Un ejemplo de código podría ser el siguiente:
$(document).ready(function() {
$("p").click(function() {
$(this).hide();
});
});Que quedaría de la siguiente manera:
$(document).ready(function(){$("p").click(function(){$(this).hide()})});Otro de los elementos principales hoy en día en JavaScript son los códigos de terceros. Aquí podemos incluir los códigos de Google Analytics, los de botón de compartir en Twitter, o los Likes de Facebook. Estos códigos no los alojamos nosotros, ni los hemos programado nosotros ni marcamos los tiempos nosotros.
Como en general la mayoría de los problemas que aparecen en los datos de WebPageTest o de PageSpeed Insights vienen derivados de estos scripts, hay que plantearse varias opciones con lo que respecta a ellos.
Lo primero que haremos es identificar estos scripts. Por norma general estas herramientas ya te lo permiten ver ya que suelen ser todos aquellos que hacen llamadas fuera de tu hostname.
Algunas cosas que podemos hacer para mejorar los tiempos de respuesta vienen principalmente en cómo se cargan estos scripts. Para ello tenemos una primera opción que es la de cargar los scripts de forma asíncrona (async) o aplazada (defer). En ocasiones funciona, en ocasiones no. A ser posible lo mejor es cargarlos de forma asíncrona, y si no funciona, aplazada. En caso de no funcionar deberíamos plantear otras estrategias.
<script async src="/script.js"><script defer src="/script.js">Por defecto los scripts bloquean la carga del HTML. Esto significa que el HTML no empieza a ser funcional hasta que todo el script está funcionando y activo.
En el caso del aplazado lo que se hace es cargar los scripts, y comenzar a ejecutarlos una vez se ha acabado de cargar el HTML, de forma que va por pasos.
El caso óptimo es el asíncrono, que en paralelo a la carga del HTML va cargando los scripts sin bloquearse unos a otros.
Otra forma de optimizar la carga de elementos externos, como se ha comentado antes, es la precarga de los elementos con preconnect y prefetch. De esta forma haremos llamadas a elementos que se cargarán en el navegador para que, posteriormente cuando sean necesarios, ya estén disponibles.
Otra opción que puede ser interesante para reducir los tiempos de carga es descargar los scripts de terceros y servirlos directamente desde tu propio servidor, pudiéndoles aplicar sistemas de minimización automática.
El funcionamiento, algo más complejo técnicamente, sería el de:
- Descargar el fichero JS del servidor original con cierta frecuencia (cada hora, cada día) de forma programada.
- Optimizar el fichero descargado con sistemas automáticos de compresión y minimizado.
- Servir el script directamente desde nuestro sitio web y no desde el sitio original.
Posteriormente serviríamos el script como si de cualquier otro script nuestro se tratase, pudiéndolo cargar de forma asíncrona sin problema.