Cuando hablamos de sitios web no podemos olvidar cómo funciona el protocolo que permite el intercambio de información, que principalmente es el HTTP. Los navegadores tienen ciertos límites a la hora de descargar y enviar información, y es que no podemos pretender descargar 100 cosas en paralelo porque simplemente la carga de los sitios se haría interminable.
Es por esto que los navegadores paralelizan entre 2 y 5 conexiones simultáneas para de esa manera poder ir descargando información poco a poco y que se vaya mostrando por pantalla.
El mayor problema de esto es tener muchas peticiones pequeñas o tener peticiones que bloquean otras, ya que no todas se pueden tratar de la misma manera.
MEJOR UNA GRANDE QUE MUCHAS PEQUEÑAS
Categoría: Conectividad
Las peticiones HTTP suelen consumir algunos bytes en cada una de sus peticiones que son “inútiles” en cuanto a que se utilizan para la comunicación de las plataformas pero no para mostrar el resultado final del sitio web. Teniendo en cuenta esto, en la mayoría de casos, se da pie a que es mejor hacer una petición grande que muchas pequeñas para reducir el coste de estas comunicaciones.
Es por esto que es muy recomendable la combinación de CSS y JS o de las imágenes en CSS Sprites.
INCLUIR LOS CSS EN LA PARTE SUPERIOR
Categoría: Conectividad, CSS
Como la mayoría de sitios hoy en día utilizan hojas de estilo, su uso implica que el navegador ha de saber exactamente dónde ha de ir la información antes de mostrarla por pantalla para un uso óptimo. Esto significa que cuanto antes tenga dicha información, antes podrá aparecer.
El hecho de incorporar los CSS en la parte del <head> del HTML implica que se debería cargar esta información antes de mostrar el resto de la página en el navegador, algo que aumentará la velocidad a la hora de renderizar los elementos.
INCLUIR LOS JS EN LA PARTE INFERIOR
Categoría: Conectividad, JavaScript
Los JavaScript tienen una peculiaridad y es que es muy probable que bloqueen la carga del sitio debido a que no suelen permitir más de 2 peticiones en paralelo, dependiendo del navegador usado.
Esto también puede llegar a hacer bloquear todo el sitio si por alguna razón el JavaScript no puede procesarse en un tiempo razonable, y en tal caso puede bloquear imágenes, CSS u otros contenidos.
Por esta razón se recomienda que, en la medida de lo necesario, los ficheros de JavaScript se sitúen al final de la página, para que se puedan cargar todos los otros elementos antes, y al final estos scripts.
USO DEL ATRIBUTO «DEFER» PARA SCRIPTS QUE SIN «DOCUMENT.WRITE»
Categoría: Conectividad, JavaScript
Una de las peculiaridades que tiene la carga de JavaScript desde ficheros externos es que se le puede indicar que sean “aplazados” mediante el atributo defer.
<script src=”fichero.js” defer></script>
Gracias a esto, aquellos ficheros de funciones o que no necesiten “pintar por pantalla” pueden cargarse posteriormente si el sistema así lo decide y no bloquear el resto de peticiones.
USO DE «NON-BLOCKING SCRIPTS»
Categoría: Conectividad, JavaScript
Gracias a la aparición de nuevas versiones de navegadores y, sobre todo, de nuevos motores de proceso de este lenguaje, el trabajo del AJAX (JavaScript asíncrono) esté permitiendo que los scripts se carguen de una forma que no bloquean el resto de peticiones.
Además, se está planteando añadir el atributo “async” en la carga de los scripts para que no bloquee en absoluto las peticiones del navegador y no tenga porqué cargarse en el orden establecido.
Normalmente, en el caso de usar el “async”, el sistema funcionaría como si cargásemos el script tras un “onload” de la página.
Otra de las formas sencillas de cargar archivos de forma que no queden bloqueados es a través del uso de JavaScript y elementos del DOM. Para ello podemos usar un sistema bastante sencillo:
var js = document.createElement('script');
js.src = 'fichero.js';
var head = document.getElementsByTagName('head')[0];
head.appendChild(js);
En este caso la carga del JavaScript se hará desde la propia cabecera del sitio y no se incluirá en el pie, como se suele recomendar.
Aunque, otra opción más avanzada sería la de descargar el JavaScript, y, en el momento en el que está descargado el fichero, hacer que el navegador lo cargue y en este momento, si se ha de ejecutar se podría hacer sin necesidad de esperar.
var js = document.createElement("script");
js.preload = true;
js.src = "fichero.js"; //aquí se descarga
js.onpreload = function() {
document.body.appendChild(script); //aquí se ejecuta
};
De la misma forma, aunque no sea con scripts, Firefox tiene limitaciones con los ficheros CSS, de forma que podríamos cargarlos mediante un sistema similar.
var h = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.href = 'fichero.css';
link.type = 'text/css';
link.rel = 'stylesheet';
h.appendChild(link);
A parte de estos métodos, podemos encontrar dos formas más para cargar archivos en JavaScript que tampoco bloquean la carga. La primera de ellas es utilizando la función setTimeout().
setTimeout(function() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "archivo.js";
document.getElementsByTagName("head")[0].appendChild(script);
}, 0);
Al cargar el setTimeout() con un tiempo de 0 lo que hacemos es cargarlo en cuando se lea el código de una forma asíncrona.
La otra forma es la carga cuando la ventana se haya acabado de cargar, es decir, cuando se haya acabado de renderizar el código.
window.onload = function() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "archivo.js";
document.getElementsByTagName("head")[0].appendChild(script);
};
EVITAR ENLACES A CONTENIDOS «404 NOT FOUND»
Categoría: Conectividad, Contenidos
Otro de los grandes problemas que provoca una ralentización a la hora de descargar contenidos de cualquier tipo es hacer peticiones a archivos que no existen, ya sean imágenes, JavaScript, CSS…
Por norma general, si se hace una petición a un elemento inexistente, el navegador parará todas las peticiones hasta que se procese correctamente el error.