¿Optimizaciones comunes para reducir el tamaño de página HTML o XHTML?

¿Cuáles son algunas optimizaciones comunes realizadas para reducir el tamaño de página HTML o XHTML? Algunos que vienen a la mente son:

• eliminando comentarios,
• eliminar espacios en blanco extraños,
• mover estilos en línea repetitivos a una hoja de estilo CSS,
• etc.

¿Cuáles son algunos otros? ¿Cuál ofrece la mayor inversión por dinero o podría ser realizada automáticamente por una herramienta o módulo?

Google ha resumido y explicado sus recomendaciones para minimizar al máximo el tamaño de la carga útil . Incluyen las siguientes técnicas:

1. Habilitar la compresión
2. Eliminar CSS no utilizado
3. Minify JavaScript
4. Minificar CSS
5. Minify HTML
6. Aplazar la carga de JavaScript
7. Optimizar imágenes
8. Servir imágenes escaladas
9. Servir recursos desde una URL consistente

Estas sugerencias son parte de su proyecto de complemento de código abierto Firefox / Firebug llamado Page Speed . Similar al YSlow de Yahoo! complemento . El complemento de Page Speed ​​real buscará muchas más optimizaciones de las que esa lista explica en detalle. También se presentan instrucciones para usar Page Speed.

Las mejores prácticas de Yahoo! Para acelerar su sitio web identifican un conjunto similar de mejores prácticas:

1. Minimizar solicitudes HTTP
2. Use una red de entrega de contenido
3. Agregar una caducidad o un encabezado de control de caché
4. Componentes Gzip
5. Poner hojas de estilo en la parte superior
6. Poner guiones en la parte inferior
7. Evitar expresiones CSS
8. Hacer JavaScript y CSS externo
9. Reducir las búsquedas de DNS
10. ...

(La lista de Yahoo! tiene ~ 35 elementos, no es necesario citarla en su totalidad).

Tanto YSlow (enlace de imagen) como Page Speed (enlace de imagen) le permitirán ejecutar pruebas en sus páginas, sugiriendo cosas que puede hacer y mostrándole qué, de sus recomendaciones, ya está implementado.

Alguien va a decir que el marcado debe ser Gzipped, por lo que bien podría ser yo.

Aquí hay una larga explicación de lo que es Gzip con enlaces sobre cómo configurarlo en Apache e IIS .

Un artículo sobre WebReference establece que encontrará las siguientes mejoras de rendimiento al usar el módulo mod_gzip Apache.

Los webmasters suelen ver un aumento del 150-160% en el rendimiento del servidor web, y una reducción del 70% - 80% en el ancho de banda HTML / XML / JavaScript utilizado, utilizando este módulo. En general, el ahorro de ancho de banda es de aproximadamente 30 a 60%

Probablemente no valga la pena.

He jugado un poco con la eliminación de espacios en blanco en HTML , y solo vi una reducción del tamaño del 10% en la carga útil después de comprimir.

Siendo realistas, la eliminación de espacios en blanco y salto de línea está haciendo un trabajo que la compresión estaría haciendo por nosotros. Solo estamos agregando un poco de eficiencia asistida por humanos:

                  Crudo comprimido
CSS no optimizado 2,299 bytes 671 bytes
CSS optimizado 1,758 bytes 615 bytes

(sí, esto dice CSS pero las mismas reglas básicas se aplican también a HTML)

El problema es,

1. GZIP está haciendo el 90% del trabajo por usted, por lo que esta es una microoptimización loca. Quiero decir, tal vez si eres Google o Yahoo.
2. Esa reducción de tamaño adicional del 10% tiene el costo bastante elevado de HTML completamente ilegible en "ver código fuente"

ok, uno pequeño: mantenga los nombres y atributos de las etiquetas en minúsculas y consistentes (como mandatos estándar, por cierto). Aumentará la relación de compresión en un porcentaje o dos.

Si usted es un sitio con un volumen extremadamente alto, es posible que desee considerar el uso de una identificación de entidad y nombres de clase súper cortos, ya que estos reducen el tamaño tanto de la página HTML como de la página CSS utilizada para darle estilo.

Además, tenga cuidado con la composición del sitio excesivamente estructurada; es fácil agregar secciones div y span cuando no son realmente necesarias. También puede considerar estrategias como la paginación para grandes conjuntos de resultados y resultados similares.

En realidad, estas optimizaciones tienen una amortización extremadamente limitada (y para la estrategia de paginación, posibles desventajas de SEO) valen la pena para los sitios que no están en la misma categoría de tráfico que Google. Simplemente siga la recomendación de jessegavin para habilitar la compresión GZip / Deflate y termine con ella.

Combina css, imágenes y javascripts comunes en un solo archivo. Esto no reduce el tamaño del archivo, pero reducirá la cantidad de solicitudes http. Para archivos más pequeños, la sobrecarga de http supera con creces el tiempo de descarga. Es fácil escribir una secuencia de comandos para combinar archivos css y javascript para que pueda administrarlos más fácilmente durante el desarrollo pero implementarlos en un solo archivo.

Consulte http://css-tricks.com/css-sprites para obtener más información sobre la combinación de imágenes.

Además, consulte el compilador de cierre de Google. No lo he usado, pero dice hacer que javascript se descargue y se ejecute más rápido.

Como otros han dicho, el mayor beneficio proviene del gzipping.

Asegúrese de utilizar elementos HTML adecuados. En lugar de <div class="page-title">Hello World</div>usar <h1>Hello World</h1>.

Y la obvia: ¡no use tablas para el diseño! Use un sistema de cuadrícula simple como 960.gs (o haga rodar su propia versión liviana). Puede haber una gran diferencia entre el tamaño HTML, especialmente con tablas anidadas. Comparar:

<table cellpadding="3" cellspacing="0" border="0">
<tbody>
    <tr>
        <td width="200">...</td>
        <td width="600">...</td>
    </tr>
</tbody>
</table>

y

<div class="colSmall">...</div>
<div class="colLarge">...</div>

Si está utilizando un sitio web ASP.NET, tenga cuidado con ViewState . Puede generar campos ocultos muy grandes en la página, sobrecargándolo a menudo mientras no sea necesario (ya se me ocurrió que ViewState es más pesado que el resto de la página).
Es especialmente cierto si usa AJAX, ya que ViewState se enviará de un lado a otro con cada solicitud, lo que ralentizará su sitio web y aumentará el volumen de tráfico.

Sin embargo, la solución está en el código .net .

Hay un montón de herramientas gratuitas de análisis y optimización del rendimiento web . Puede compilar su propia lista de verificación a partir de los informes que generan.

Aquí hay un par de puntos parafraseados de una Evaluación de desempeño de Zoompf:

• Evite el contenido generado dinámicamente (imagen). Considere dibujar o cambiar el tamaño de una imagen fuera de línea como un archivo de imagen estática.
• Evite usar etiquetas de imagen sin dimensiones.
• Google Analytics (& Ads) admite la carga asincrónica de su archivo JavaScript. En caso de que los use, puede optar por cargarlos de forma asincrónica.

Una estrategia comúnmente pasada por alto es eliminar todo el código HTML innecesario de la página.

Para cualquier proyecto dado, tendrá que decidir cuál de estas estrategias utilizará en función de la versión (X) HTML que esté utilizando y la forma en que se utilizará el sitio web.

(Aparentemente, no puedo publicar más de un hipervínculo por respuesta ya que soy un usuario nuevo, por lo que estas URL deberán copiarse y pegarse ... Espero que sea kosher).

• En HTML4 y HTML5, para muchos elementos, no se requiere la etiqueta de cierre. La etiqueta de apertura para el elemento del cuerpo tampoco es necesaria. Ver:

meiert.com/en/blog/20080601/optional-tags-in-html-4/

code.google.com/speed/articles/optimizing-html.html

• El protocolo (http :) parte de las URL HTTP puede omitirse.

meiert.com/en/blog/20090218/performance-and-rfc-2396/

• Con etiquetas como <br>, simplemente puede omitir la barra utilizada en la sintaxis XHTML (<br />) a menos que realmente necesite usar XHTML.

• Estos son algunos ejemplos de pequeñas estructuras de documentos HTML:

meiert.com/en/blog/20080429/best-html-template/

html5doctor.com/html-5-boilerplates/

Otros lo han dicho, pero simplemente no han apuntado el punto lo suficiente a casa: gzipoteo.

1. Prácticamente sin esfuerzo ni inconvenientes.
2. En mi experiencia limitada, reduce el tamaño de HTML entre un 60% y un 90%.

Todos los otros ajustes que puede hacer en HTML requieren más esfuerzo / mantenimiento, y apenas tienen ningún efecto en comparación con solo gzip y olvidar. Simplemente no valen la pena a menos que seas Google. No eres Google

(Sin embargo, como otros han mencionado, cuanto más coherente sea su HTML, más efecto tendrá gzipping, ya que, de acuerdo con mi conocimiento limitado, gzipping busca cadenas idénticas en su archivo y reemplaza cada instancia repetida con un pequeño código que hace referencia al original. Por lo tanto, las prácticas de autor como mantener sus atributos en el mismo orden y mantener todas sus cubiertas iguales, pueden ayudar a que gzipping haga su trabajo).

Ah, y si está minimizando automáticamente su HTML en algún momento de su proceso de compilación / publicación, eso no requiere mucho más esfuerzo / mantenimiento. Algunos minificadores de HTML se enumeran aquí:

/programming/728260/html-minification