En este artículo, explicamos cómo mejorar la rapidez de carga y el rendimiento del navegador mediante algo tan sencillo como la ubicación del CSS y el JavaScript en nuestra página web. Al optimizar nuestro código conseguiremos mayor velocidad y eso redunda en una mejor experiencia de usuario, una de nuestras máximas, que también es uno de los criterios importantes de cara al posicionamiento en buscadores.
Antes que nada, recuerda que hoy más que nunca debemos guiarnos por tres máximas:
- Diseñar para todos los browers y sistemas operativos.
- Cubrir todas las resoluciones de pantalla
- Dar soporte a todas las velocidades de conexión.
A continuación, enumeramos una serie de buenas prácticas que te ayudarán a disminuir el tiempo de carga de una página y, en ocasiones, el peso de tu web.
Optimización código CSS
Existen tres maneras de especificar código CSS en nuestra web:
- En línea: por este método se introduce el código CSS en una etiqueta HTML, mediante el atributo «style».
<div style="float:left; width:50%">Contenido del elemento</div> - Incrustado: introduciendo el CSS en cualquier parte del código mediante la etiqueta <style>.
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> h1{ font-size: 16pt; color:red; } </style> </head> <body> <h1>CSS </h1> <p> Lo que sea </p> </body> </html> - Externo: Creando uno o varios archivos .css donde tendremos todo nuestro código ordenado.
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documento</title> <link rel="stylesheet" href="estilos.css"> </head> <body> ...
Concretamente esta última forma de representar el CSS de nuestra web es la más correcta. De este modo, conseguiremos que el cargar la página tarde mucho menos, porque las declaraciones de estilos se descargan una sola vez. Las siguientes páginas que visite el usuario el CSS no será necesario cargar el archivo CSS porque se encontrará en la caché.
Pero no solo eso, también estaremos ayudando a los motores de renderizado de los navegadores, ya que saben de antemano qué estilos tienen que usar para representar un elemento. Por el mismo motivo, en caso de tener que meter código CSS en el documento HTML (incrustado), es recomendable escribir el CSS al principio del documento. Así, al cargar la web también facilitamos que el usuario vea la página con estilos lo antes posible.
Otra recomendación si usamos el método Externo es enlazar con una única hoja de estilos, un único archivo CSS, lo que nos permitirá reducir el tiempo de carga por realizar menos solicitudes al servidor.
Optimización código Javascript
Con el código en JavaScript ocurre algo parecido que con el código CSS. Existen tres maneras de insertarlo, y una que nos ayudará a optimizar nuestra web:
- En línea: añadiendo el código Javascript por ejemplo a un botón de un formulario en HTML.
<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>
- Incrustado: situando el código Javascript en cualquier parte del HTML, 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>
- Externo: Separando el código javascript en un archivo aparte, comúnmente con extensión .js, y enlazándolo con el HTML.
<!DOCTYPE HTML> <html lang="es"> <head> <meta charset="UTF-8"> <title>Mi página con Javascript</title> <script src=loquesea.js ></script> ……….
Por los mismos motivos descritos con el código CSS, es preferible sacar nuestro Javascript, jQuery, etc. fuera del archivo .html. Además, la recomendación actual es colocar las etiquetas <script> justo antes del </body>, para que el navegador se ocupe de renderizar el contenido antes de comenzar la ejecución de los scripts, permitiendo que el usuario pueda empezar a leer el texto de la web antes de nada.
Del mismo modo, si tenemos que escribir algo en el mismo documento .html, lo más aconsejable será siempre escribir los scripts al final del documento. Recuerda que el navegador interpretará el documento HTML de forma lineal (de arriba a abajo). Si empieza a leer nuestro código y se encuentra con muchos scripts en el inicio de la web, tardará más en mostrar el contenido.
Algunas recomendaciones adicionales para mejorar la velocidad web
Por último hay que mencionar dos recomendaciones adicionales. Una ya la hemos mencionado con CSS y es colocar, si es posible, todos los scripts de la página en un mismo archivo… O en los menos posibles, para evitar realizar más solicitudes al servidor de las necesarias.
La segunda recomendación antes de acabar es minimizar los archivos, para lo que podemos utilizar las herramientas de minimización que permiten compactar el código y que ocupe menos espacio. Hablaremos de estas herramientas en próximos artículos, aunque ya dimos un adelanto y trucos adicionales en nuestro post Trucos y herramientas para optimizar el código de una página web.