Seis cuestiones a tener en cuenta para optimizar nuestro código XHTML.
1. Usar Strict Doctype
Con la versión estricta (no la transicional) se hace posible una separación completa de la estructura, presentación y comportamiento del sitio web.
2. Mejor con UTF
Ya se ha hablado mucho sobre los beneficios de usar UTF así que simplemente hago referencia a un buen artículo: ¡UTF-8 vale la pena!.
Intentar llevar UTF-8 a todas las capas de la arquitectura de una aplicación web (Web, Apache, MySQL).
Entidad HTML para carácter &
Con UTF-8 podemos (entre otras cosas) evitar el uso de entidades HTML para acentos y otros caracteres especiales de un idioma en concreto. No obstante existe una excepción, es conveniente no usar de forma literal el carácter & y en este caso si es recomendable usar su entidad HTML:
&
3. No incrustar CSS y JavaScript en el XHTML
Para el CSS
No recomendado:
<style type="text/css">
body { color: #666666; }
</style>
</head>
<p style="font-weight:700; color: red;">Importante!</p>
Recomendado:
<link rel="stylesheet" href="http://aurea.es/style.css" type="text/css" media="screen" /> </head>
Preferiblemente vinculamos todo el CSS por medio de un fichero externo.
Cuidado también con las propiedades CSS particulares.
Para el JavaScript
No recomendado:
<script type="application/javascript">
document.getElementById('text').focus();
</script>
</head>
Recomendado:
<script type="text/javascript" src="/javascript.js"></script>
Nuevamente es preferible vincular también el JavaScript a través de un fichero externo.
Para eventos JavaScript
No recomendado:
<input id="name" type="text" onmouseover="this.focus();" />
Recomendado (ejemplo en mootools):
$('name').addEvent('mouseover', function(event) { this.focus(); });
Añadimos al elemento con ID «name» un evento mouseover que al dispararse ponga el foco sobre si mismo, todo ello en un documento JavaScript externo y vinculado.
4. Optimizar CSS y JavaScript
Seguro que si optimizamos nuestro CSS y JavaScript conseguimos reducir el código XHTML.
Debemos para ello tener en cuenta:
- Evitar la classitis, divitis y spamania innecesaria.
- Organizar adecuadamente el CSS.
- Usar inteligentemente el potencial de la cascada.
- Usar las formas abreviadas para optimizar más el CSS.
- Tanto el CSS como JavaScript pueden ser comprimidos.
5. Hacer más semántico el XHTML
Pensando muy bien el orden, estructura y contenido de los elementos XHTML, de forma colateral el anidamiento será más simplificado y correcto.
6. Nombrar de forma más semántica y convencional
No recomendado:
<div id="cabecera"> <p class="rojo">alerta!</p> </div>
Recomendado:
<div id="header"> <p class="alert">alerta!</p> </div>
El nombre para el ID «header» es más semántico y toda una convención, por otro lado el elemento párrafo contiene una clase llamada «alert» aportando más semántica (sobre todo para el diseñador que manipula el código).
