Cuando abordamos un proyecto web, la correcta implementación de lenguajes y tecnologías resulta clave para garantizar un desarrollo eficiente, rendidor y accesible. Más allá de las tecnologías y características puntuales del servidor que usemos, es esencial seguir buenas prácticas que mejoren la usabilidad, accesibilidad, rendimiento y optimización para motores de búsqueda (SEO).

En este artículo, veremos recomendaciones que te ayudarán a gestionar proyectos web de manera más eficiente y escalable.

Estructura HTML semántica

Un buen código HTML debe construirse respetando la semántica, es decir, utilizar las etiquetas adecuadas para describir el propósito de cada elemento. Esto no solo mejora la accesibilidad, sino que también optimiza el SEO y facilita el mantenimiento.

• Uso adecuado de etiquetas. Debemos emplear de manera correcta las etiquetas semánticas incorporadas a partir de HTML5. En este grupo se destacan etiquetas como <header>, <footer>, <article>, <section>, y <aside> para estructurar el contenido. Esto ayuda a los motores de búsqueda a entender la jerarquía de cada página del sitio y mejora la experiencia de usuarios con tecnologías de asistencia, como lectores de pantalla.
• Evita etiquetas genéricas. Es importante minimizar el uso de <div> y <span>. Deben emplearse cuando no haya una etiqueta semántica disponible.
• Etiquetas ARIA. Para mejorar la accesibilidad, tenemos disponibles roles y atributos ARIA. Debemos usarlos cuando sea necesario, especialmente en elementos interactivos como menús y botones.

Organización del CSS y uso de preprocesadores

El CSS puede volverse difícil de manejar a medida que un proyecto crece. Para evitar esto, recomiendo organizar el CSS y adoptar metodologías que mantengan el código modular y escalable.

• BEM (Block, Element, Modifier). La metodología BEM es útil para nombrar clases. Esto facilita la legibilidad y el mantenimiento del código. Por ejemplo: block__element--modifier.
• Preprocesadores CSS: Herramientas como Sass o Less nos permiten usar variables, anidación, mixins y más, lo que hace que el CSS sea más eficiente y reutilizable.
• CSS Grid y Flexbox. Podemos aprovechar CSS Grid para diseños complejos y Flexbox para alineaciones interiores más simples. Estas técnicas ofrecen flexibilidad y son altamente compatibles con navegadores modernos.
• Variables CSS. Es una opción usar variables para colores, tamaños y espaciados. Esto facilita la personalización y el mantenimiento del diseño.

JavaScript moderno

Las versiones más modernas de JavaScript nos ofrecen características que optimizan tanto el desarrollo como el rendimiento del código.

• Modularidad con ES6. Emplear import y export ayuda a dividir nuestro código en módulos. Esto mejora la legibilidad y permite reutilizar funciones y componentes en todo el proyecto.
• Asincronía. Implementar async y await para gestionar operaciones asíncronas es clave en los proyectos actuales. Estas características son un solución moderna, en lugar de depender de promesas encadenadas o callbacks. Esto mejora la legibilidad del código.
• Lazy loading. La implementación de carga diferida (lazy loading) ayuda a que el contenido prioritario se cargue primero. Esto resulta fundamental cuando el proyecto cuanta con recursos pesados, como imágenes y videos

Uso de multimedia de forma eficiente

En el punto anterior mencionaba la importancia de la carga diferida, en especial cuando se trabaja con recursos multimedia. En este sentido, el uso adecuado y optimizado de imágenes, videos y otros recursos multimedia es crucial para ofrecer un muy buen rendimiento y una experiencia del usuario adecuada.

• Optimización de imágenes. Es una buena opción recurrir a formatos modernos, como WebP. Esto ayuda a reducir el tamaño de las imágenes sin perder calidad. Además, es importante pensar en imágenes adaptables. Una opción es usar atributo srcset para cargar la imagen adecuada según el tamaño de pantalla. Pero también contamos con otras alternativas para lograrlo, según las características del proyecto.
• Videos embebidos. Si incluimos videos, incluir servicios externos como YouTube o Vimeo ayuda minimizar el peso en tu servidor. Si es necesario alojarlos en el servidor del proyecto, debemos asegurarnos de contar con una compresión óptima. La etiquetas <video> permite incluir múltiples formatos. En este sentido también es importante verificar las limitaciones del servicio de alojamiento y los límites de transferencia mensual (o si hay costos por GB de transferencia).
• Lazy load para imágenes y vídeos. Agregar el atributo loading="lazy" a las imágenes y vídeos ayuda a que se carguen solo cuando el usuario los visualice. Esto permite mejorar el tiempo de carga inicial de la página.

Accesibilidad Web (WCAG)

La accesibilidad es una responsabilidad crítica en el desarrollo web. Algunas buenas prácticas de accesibilidad que debemos considerar son:

• Colores y contraste. El texto debe tener un buen contraste con el fondo para ser legible por todas las personas.
• Textos alternativos (alt). Debemos incluir descripciones adecuadas en las imágenes y otros medios no textuales para que los dispositivo y sistemas puedan entender el contenido. En caso de ser necesario, esos texto alternativos pueden ser leídos e interpretados para el usuario.
• Navegación por teclado: Todos los elementos interactivos deberían ser accesibles mediante teclado, utilizando atributos como tabindex. Esto ayuda a la navegabilidad y accesibilidad de la página.

Optimización para motores de búsqueda

Para que un sitio sea visible en los motores de búsqueda debemos seguir recomendaciones de SEO y también tener siempre presenta la experiencia del usuario. Algunos aspectos a tener en cuenta en este sentido:

• Título y etiquetas meta. Es importante incluir las etiquetas meta adecuadas, como description y title, para que los motores de búsqueda puedan indexar correctamente tu sitio. De estas etiquetas, la más relevante es title, ya que también es la que se muestra en la pestaña activa del navegador y con la cual, generalmente, se guarda en favoritos. Vale decir que algunas redes sociales también cuentan con sus propias meta descripciones que debemos tener en cuenta.
• Contenido optimizado. Es fundamental emplear encabezados semánticos y jerárquicos (<h1>, <h2>, <h3>, <h4>, <h5> y <h6>). La estructura jerárquica bien definida y descriptiva ayuda a estructurar el contenido. La etiqueta <h1> es la más relevante en cada página, seguida por encabezados descendentes.
• Sitemap y robots.txt. Para la indexación de contenidos, es importante incluir un sitemap.xml en nuestro proyecto. También podemos definir un archivo robots.txt para indicar a los motores de búsqueda qué páginas indexar (y las que no).
• URLs amigables. Es muy recomendable implementar URLs claras y amigables para SEO. Deben describir el contenido de la página. Es importante evitar cadenas de caracteres sin sentido o IDs innecesarios.

Optimización del rendimiento

Como ya mencioné anteriormente, el rendimiento web es esencial para evitar altas tasas de rebote. Aquí algunas recomendaciones clave:

• Minificación de archivos. A la hora de publicar nuestros proyectos, resulta recomendable minificar los archivos CSS y JavaScript para reducir el tamaño de distribución.
• Compresión del lado servidor: Existen características para el lado servidor que aportan mayor compresión (como el caso de Gzip). Si está disponible podemos considerar activar este tipo de características. Como nota adicional, si se activa cualquier compresión, es fundamental realizar tests que nos permitan verificar que no existan conflictos ni problemas en el resultado final.
• CDN (Content Delivery Network): Los CDN son una alternativa para servir recursos estáticos como CSS y JavaScript. Esto distribuye el contenido en servidores cercanos al usuario, reduciendo los tiempos de carga. Recurrir a esta técnica cuenta con ventajas y desventajas, por lo cual es fundamental evaluar que archivos se usarían en producción con este tipo de mecanismo. También resulta recomendable establecer mecanismos de resguardo o fallback, en el caso de que los recursos no estuvieran disponibles.
• Carga diferida de scripts. Cuando sea posible, se puede recurrir a async o defer para los archivos JavaScript. Esto ayuda a que no bloqueen la carga de la página. Para comprenderlo mejor, async carga los scripts de forma asíncrona mientras se renderiza el HTML, y defer espera hasta que el DOM esté completamente cargado.

Consideraciones finales

Documentar el código es una práctica a menudo subestimada, pero vital para proyectos de largo plazo. Es recomendable documentar tanto la lógica, como los pasos para la configuración y despliegue del proyecto. Esto es especialmente importante si trabajas en equipo o en proyectos que crecerán con el tiempo.

En el mundo del desarrollo moderno, también es importante utilizar control de versiones con Git, creando ramas para funcionalidades específicas y realizando commits claros y frecuentes.

Siguiendo estas prácticas, no solo obtendremos mejoras en la calidad técnica de nuestros proyectos, sino que también lograremos que sean escalables, accesibles y optimizados.

Si te interesa saber más como crear proyectos web déjame un comentario o escríbeme un mensaje.