Cómo optimizar la carga de tu página web colocando correctamente tus CSS y tu código Javascript.
En este artículo lo que pretendo es despejar una serie de dudas que a todos, en alguna ocasión, se nos ha planteado. Si te preocupa el peso de tu web, la rapidez y sobre todo el tener un buen trabajo realizado, este artículo seguro que te interesa bastante.
En relación con el peso de la web, ya hemos hablado en dos ocasiones: la primera con un artículo donde proponemos mejorar la experiencia del usuario en webs "responsive". Además, comentamos en un artículo de interés una web que te da una serie de trucos para que ese peso disminuya, pero lo que pretendemos hoy es profundizar más en estos trucos y dejar clara una serie de prácticas que seguro mejorarán el rendimiento y el peso de cualquier web, sea ésta o no "responsive".
Comenzamos con el tema de la colocación de estilos, lugar, forma etc.
Código CSS
Tenemos que conocer que hay tres métodos de especificar código CSS en nuestra página web. Los tres son correctos, pero sólo uno es el más óptimo.1. En línea: Dicho código lo puedes meter en una etiqueta HTML mediante el atributo "style". Un ejemplo de esta forma de añadir código CSS es el siguiente:
<div style="float:left; width:50%">Lo que sea </div>
2. Incrustado: El código lo puedes introducir en cualquier parte del código mediante la etiqueta . Un ejemplo sería:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>CSS </h1>
<p>
Lo que sea
</p>
<style>
h1{
font-size: 16pt;
color:red;
}
</style>
</body>
</html>
3. Externo: Creamos un archivo o varios .css donde tenemos todo nuestro código CSS totalmente organizado. Lo agregaríamos a nuestro HTML de la siguiente manera:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="estilos.css"> </head> <body> …....
¿Cuál crees que es la opción más óptima para nuestra web? Bien pues os diré que la tercera. Ésta es la forma más adecuada de representar nuestro código CSS. Aunque penséis que de esta forma hacemos otra petición al servidor, cosa que es cierta, os diré que de este modo tarda menos en cargar la página y la petición al servidor apenas se nota porque tarda mucho menos que en cargar CSS mezclado con el código HTML.
Si tenéis que meter código CSS en el documento HTML, es recomendable escribir el CSS al principio del documento para que, al cargar la web, lo primero que se cargue sean el HTML y el CSS y el usuario tenga la página con estilos lo antes posible y no pueda ver la web sin formato ni estilos.
Código Javascript
Una vez que hemos visto cómo insertar el código CSS correctamente para optimizar nuestra web, vamos a hacer lo mismo con los scripts Javascript.Al igual que pasaba con CSS, disponemos de tres métodos de inserción de código Javascript:
1. En línea: Podemos añadir código Javascript por ejemplo a un botón de un formulario en HTML de la siguiente forma:
<form action="loquesea.php" method="post">
<input type="email" value="" name="EMAIL">
<input type="submit" value="Subscribete" name="subscribe" onclick="window.alert('Vas en enviar el formulario')">
</form>
2. Incrustado: podemos situar nuestro código Javascript en cualquier parte del HTML, siempre y cuando esté entre las etiquetas <script></script>
<!DOCTYPE HTML> <html lang="es"> <head>
<meta charset="UTF-8"> <title>Mi página con Javascript</title> </head> <body> ... <script> //Aquí tu código Javascript </script> </body> </html>
3. Externo: Podemos separar nuestro código javascript en un archivo aparte con extensión .js. Para enlazarlo con nuestro HTML utilizamos el siguiente código:
<!DOCTYPE HTML>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi página con Javascript</title>
<script src=loquesea.js ></script>
,,,,
Ya sabemos cómo insertarlo, sencillo ¿no?, bien pero tenemos que analizar cuál es la opción más óptima de cara a la carga de nuestra página.
Comenzamos diciendo que, como en el caso anterior, os recomiendo encarecidamente que saquéis vuestro código javascript, jQuery, etc. fuera del archivo .html. Es la opción más óptima, pero si tenemos que escribir algo en el mismo documento .html, tener en cuenta que lo más aconsejable es escribir los scripts al final del documento.
El porqué es sencillo. Como supongo que ya sabéis, el navegador carga nuestra web de forma lineal, es decir, comienza a leer de arriba a abajo. Bien, pues si el navegador empieza a leer nuestro código y se encuentra con muchos scripts en la parte de la cabecera o del inicio de la web, tardará más en mostrar el contenido, porque tiene que primero procesar todo ese código Javascript, jQuery, etc. Por este motivo es mejor colocarlo abajo. De esta forma, el navegador cargará primero todo el html y los estilos, el usuario verá antes la web en la pantalla y por último cargará todo lo relacionado con Javascript. Esto da una buena impresión al usuario, ya que no tarda en ver la web cargada, aunque le falten funcionalidades, que se cargarán inmediatamente.
Con estas pequeñas directrices la carga de tu web será más rápida, tu código estará más ordenado y limpio y la respuesta del usuario será más positiva.