Bottico

Una vida de desarrollando

JavaScript Blocks Rendering

| Comentarios

Hace ya tiempo en el primer meetup de Bogodev, @torrenegra hablo sobre tendencias en nueva york, y como la velocidad de carga de una pagina hablaba bien de ella.

La idea de hoy es compartir una pequeña guia de como dar solucion a un problema frecuente a la hora de cargar archivos js :D

El problema

Usualmente se acostumbra a cargar los archivos JavaScript <script> en las cabezeras del documento, <head>esto en cierto sentido no es malo, más sin embargo puede causar un problema a la hora de renderizar nuestra plantilla.

Ficheros js cargados desde head
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src="...."></script>
  <script type="text/javascript" src="...."></script>
  <script type="text/javascript" src="...."></script>
  <script type="text/javascript" src="...."></script>
</head>
<body>

</body>
</html>

Solucion

Los JavaScript <script> que se encuentran en la parte superior de nuestro documento HTML, deberiamos moderlo a la parte inferior de este justo arriba del </body>para que los script sean cargado de ultimos y nuestra plantilla sea renderizado en un mejor tiempo.

ficheros js cargados al final del documento
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title></title>

</head>
<body>

  <script type="text/javascript" src="...."></script>
  <script type="text/javascript" src="...."></script>
  <script type="text/javascript" src="...."></script>
  <script type="text/javascript" src="...."></script>
</body>
</html>

Otra solucion podria ser el uso de una secunencia de comandos de carga asynchronous, mediante un gestor de scripts como ControlJS.

Recursos

  • Chrome DeveloperToolts Sin duda alguna una herramienta indispensable para mi.
  • WebPageTests Genera un reporte de desempeño, con una gran variedad de cosas para jugar
  • Google Page Speed Y Google consintiendonos con una muy buena herramienta, que nos da un reporte y consejos para arreglar los fallos :)

Comentarios