> Manuales > Manual de HTML

Qué es la optimización de páginas web, cuáles son los principales recursos en una página web susceptibles de recibir mayor optimización y en qué parámetros podemos optimizarlos.

En el mundo de la web cada segundo de carga importa. Incluso cada milisegundo podríamos decir. La explicación es bien sencilla, pues se dice que un usuario estará esperando la carga de un sitio web por 5 segundos máximo, si pasado ese tiempo no se obtiene respuesta alguna del servidor, simplemente abandonará el intento de acceso a la página.

Este detalle se aprecia mejor todavía cuando hablamos de cifras. Por ejemplo según Google, medio segundo de retardo de carga de una página supone un decremento de 20% de su tráfico. Según Amazon, 100 milisegundos de retraso de carga de su web, afecta en 1% la caída de ventas en sus productos. Sin duda datos reveladores. ¿no?

Por este motivo, la optimización de una web es un detalle que no debemos pasar por alto. En este artículo aprenderás los criterios más importantes para conseguir optimizar los archivos y el código de tu sitio web.

Qué recursos son capaces de ofrecer mayor optimización

La optimización de una página depende de varios factores. Obviamente uno de ellos es el servidor donde la tengas publicada. Un servidor rápido te ofrecerá menores tiempos de entrega de tu contenido, pero en este artículo nos vamos a centrar más en la parte que afecta al código de la página.

Nota: no entramos en la configuración del servidor, pues en este momento de nuestro aprendizaje y en el marco del Manual de HTML, la configuración del servidor no forma parte de nuestras responsabilidades como desarrolladores. Generalmente usaremos servidores de alojamiento compartido, por lo que no tendremos muchas opciones de configurar el servidor.

Entonces, en lo que respecta al código de nuestros archivos en una página web, la optimización la podremos realizar en estos tres principales recursos:

Además la importancia de la optimización de un sitio también sigue por lo general este orden, siendo las imágenes el recurso más susceptible de alcanzar mejores resultados con una buena optimización.

Vamos a comenzar con la optimización de los conceptos más sencillos de explicar. Luego veremos algunas herramientas que podemos usar para conseguir todas estas optimizaciones.

Optimizar el CSS

El código CSS sirve para definir la capa de presentación y aunque no lo hemos tocado prácticamente nada en este Manual de HTML, es difícil que hagamos cualquier página web sin incluir algo de CSS.

La optimización de nuestro CSS podrá basarse en estos factores principales:

Nota: Las conexiones al servidor, para descargar todos los archivos externos al propio código HTML, como imágenes, CSS, Javascript, llevan un tiempo. El navegador no es capaz de descargar todo a la vez y si tenemos muchos archivos distintos generalmente tardará más. Esto con el próximo HTTP2 cambiará, puesto que ese nuevo protocolo ha optimizado la posibilidad de realizar más descargas concurrentes sin penalizar el tiempo usado en ellas.
Nota: Como segunda nota, también debes de mantener un buen nivel de calidad de tu código. Por ejemplo, debes intentar reutilizar las declaraciones de estilos, no repetir las reglas a no ser que sea necesario, usar selectores adecuados y en general dejar las cosas sencillas al navegador. Pero esta parte tampoco la vamos a tocar, siendo material de estudio en artículos de Arquitectura de CSS. Te recomendamos la clase en vivo de arquitectura de CSS.

El código CSS compactado luce más o menos como la siguiente imagen:

Otra cosa que se puede hacer con el CSS es dividir los estilos en dos archivos separados. En uno se colocaría el código fundamental para el CSS de cabecera y layout, necesario para la renderización de la parte de la página que se ve al abrirla en el navegador. Luego, se puede usar un segundo archivo CSS en el que se colocan todos los estilos que afectan a los elementos que habrá visibles al hacer scroll hacia abajo. El primer archivo CSS se colocará en el HEAD, para que esté disponible lo más rápido posible y el segundo archivo CSS se enlazará antes de cerrar el BODY, ya que no es necesario tan rápidamente y se puede deferir la carga hasta más tarde.

Optimizar el Javascript

El código Javascript tiene muchas posibilidades de optimización. Algunas son similares a las comentadas para el código CSS y otras son específicas.

Esta próxima imagen es una pequeña parte del código de jQuery, una popular librería Javascript, una vez minimizada.

Defer vs Async en la etiqueta SCRIPT

Los atributos "defer" o "async" sirven para decirle al navegador cuándo procesar el código Javascript. Es solamente posible usarlo en etiquetas SCRIPT que enlazan con archivos js externos.

Si no tenemos ni defer ni async, entonces ocurre que la ejecución del Javascript se realizar inmediatamente, y una vez finaliza tal ejecución continúa el proceso de montaje de la página y su renderización en la ventana del navegador.

Nota: Obviamente, un código Javascript optimizado también será aquel que tenga menor complejidad algorítmica y que use más capacidades nativas del navegador y menos librerías externas, pero esta parte queda fuera de nuestro alcance en este momento de nuestro aprendizaje.

Optimización de las imágenes

Por fin llevamos a las imágenes, que son realmente importantes porque tenemos mucho margen para optimizar y realmente es bastante sencillo de hacer en el momento en el que estamos. Los principales argumentos para la optimización son los siguientes:

Herramientas para la optimización web

Ahora te preguntarás ¿cómo consigues todas estas optimizaciones?. Bueno, la verdad es que aquí las posibilidades son enormes, ya que existen multitud de programas, herramientas, automatizadores de tareas, etc.

Sin entrar en explicar cada una de las herramientas, pues sería extraordinariamente extenso para este artículo, podría clasificarlas en los siguientes apartados.

Programa de diseño

Básicamente, para la parte de las imágenes podrás usar cualquier programa de diseño que tengas. Photoshop, Gimp, Affinity Photo, Sketch, Pixlr, etc. Todos tienen herramientas para que, al guardar los archivos, se pueda ajustar su calidad.

Puedes aprender más sobre este tema por ejemplo en el Manual de Photoshop. Con Gimp puedes aprender a optimizar imágenes con este vídeo.

Programas de automatización de tareas con interfaz gráfica

Existen muchos programas que permiten automatización de tareas de optimización web, con interfaz gráfica y relativamente sencillos de usar.

Estos programas incluyen asuntos como el minimizado del código Javascript y CSS, así como la optimización de las imágenes usadas en un proyecto.

Alternativas conocidas serían Prepros, CodeKit, Koala, Compass. Koala es la única que es de código abierto y gratuita.

Automatización de tareas profesional

Los profesionales del desarrollo frontend más puristas prefieren las herramientas como Gulp o Grunt, o incluso scripts npm, para realizar este tipo de tareas de optimización.

Estas herramientas son lanzadores de tareas, que permiten automatizar todos los procesos de optimización de un sitio web, adaptando al 100% las características de cada proyecto. Tienen la ventaja de ser gratuitas y permitir un sin fin de posibilidades a los desarrolladores, así como la desventaja de requerir algo más de estudio para dominarlas.

Este tipo de herramientas las puedes estudiar por ejemplo en el Curso de automatización y optimización frontend de EscuelaIT.

WPO

Ya para acabar queremos mencionar que existe toda una disciplina en torno de la optimización web llamada WPO. Es una disciplina importante y prueba de ello es que hay profesionales que solamente se dedican al WPO.

WPO son las siglas de "Web Performante Optimization", optimización del rendimiento de la web e incluye tanto la parte del sitio web como la optimización del servidor. Es algo de lo que ya hemos hablado en varios momentos en DesarrolloWeb.com, así que te recomendamos asistir a esta clase, en la que se habla de WPO y que es la primera de las clases del Taller de WPO de EscuelaIT.

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online Escu...

Manual