Optimizar Código HTML: trucos y herramientas esenciales

La velocidad de carga de la web es uno de los factores que influyen en el posicionamiento en buscadores de una página web e incluso en la conversión de sus ventas. En este artículo, recopilamos las técnicas más efectivas para mejorar la velocidad de carga de una web y repasamos algunas herramientas que nos ayudarán a hacer un seguimiento y comprobar su optimización.

Consejos para optimizar una web

La lista de aspectos que puedes tener en cuenta para optimizar una web podría ser inacabable, siendo algunos aplicables a nivel de diseño, código fuente en el lado del cliente o en el lado del servidor. Nos vamos a centrar en la parte que nos toca en el navegador, ya que es un área que todos los desarrollos incluyen y en la que cualquier persona puede meter mano.

• Reducir el número de solicitudes al servidor. Uno de los detalles que ralentizan una página es el hecho de incluir muchos elementos externos al propio HTML, que están en ficheros separados, por ejemplo imágenes, Javascripts, CSS, etc. En este sentido deberíamos ser muy cuidadosos y eliminar cualquier tipo de llamada a archivos externos que sea evitable. Por ejemplo, si tenemos el CSS dividido en varios archivos y los traemos por separado será mucho peor que si juntamos todo el CSS en un mismo fichero.
• Sprites CSS. Dado que queremos reducir el número de solicitudes, es bueno usar técnicas como los Sprites CSS. Esto básicamente se trata de incluir en una sola imagen todas las imágenes sueltas que usas en una página para generar las interfaces de usuario (iconos, logos, fondos, etc.) Luego con CSS somos capaces de decir qué partes de la imagen grande queremos mostrar en cada elemento.
• Minimizar el JavaScript / CSS. La minimificación se basa en quitar todo lo que resulta superfluo en un código CSS o JavaScript (se puede aplicar incluso al HTML). Así quitamos comentarios, espacios en blanco innecesarios, etc. Eso hace que los archivos tengan menos peso en bytes y por lo tanto se transfieran más rápidamente.
• Colocar el CSS en la cabecera. Esto permite que la renderización de los documentos HTML sea más rápida.
• Los scripts JavaScript, antes del .  En general, conviene situar  los scripts antes de cerrar la etiqueta . Así,  el contenido de la página se carga antes y el usuario puede empezar leyendo la web y el navegador no se «entretiene»  bajando código de librerías JavaScript que solo necesita cuando la página ha terminado de cargarse.

Herramientas

Aunque exiten numerosas alternativas para medir la velocidad de un sitio web, nos centraremos en las dos más extendida: Yslow y PageSpeed

• Yslow. Es una herramienta de Yahoo! que nos permite medir la velocidad del sitio atendiendo a numerosos factores y nos ofrece un grado de optimización. Lo interesante es que nos desglosa los factores y nos ofrece ayudas para encontrar aquellas parcelas que requieren más nuestra atención. Se integra como complemento o extensión en los navegadores más usados.
• PageSpeed se encuentra dentro de las muchas herramientas para desarrolladores de Google y es muy parecida a Yslow, aunque tiene complementos que se integran en el servidor web para optimizar tu página automáticamente.

La lista de herramientas y recomendaciones  podría ampliar mucho más, pero queremos dejaros con un sitio web muy interesante, que explica estos temas con mayor profundidad e incluye muchos más consejos. Se trata de BrowserDiet.

Publicado el 19/04/2024 por:

Fernán García de Zúñiga

Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.