Optimización de sitios web

El tiempo de respuesta es una bomba de relojería en la red. La cuenta atrás se pone en marcha cada vez que se abre una página web, y sólo se dispone de segundos para llenar la pantalla de contenido atractivo. Si no se consigue, se traduce en pérdida de usuarios y por tanto, de posibles beneficios.
No se puede confiar en conexiones de alta velocidad, porque la mayoría de los internautas sólo disponen de conexiones de 56K. Con este libro podrá reducir a la mitad el tamaño de sus archivos HTML, XHTML, CSS y JavaScript así como el tamaño de sus imágenes y sus archivos multimedia, disminuyendo significativamente los tiempos descarga.
Las técnicas detalladas se ilustran con ejemplos reales y con porcentajes que demuestran el grado de reducción obtenido. Conseguirá que sus páginas aparezcan en la pantalla casi instantáneamente.

Prólogo

Introducción
  Todos los sitios pueden beneficiarse de la WSO
    ¿Qué ocurre con el ancho de banda?
    Tendencia de la banda ancha
    Tendencia de la velocidad de los sitios
  A quién va dirigido este libro
  A quién no va dirigido este libro
  Organización del libro
  Sitio Web complementario
  Convenciones

Parte I. Psicología del rendimiento

Capítulo 1. Tiempo de espera: ocho segundos, más dos o menos dos
  Velocidad como clave principal de la funcionalidad
    El paradigma de aceptabilidad de Shackel
    Experiencia y utilización
  Breve repaso de la historia del rendimiento en la Web
    Análisis de la afectividad
    Modelos de calidad
    Evaluación automática de la calidad
  Tiempo de respuesta y satisfacción del cliente
    Entrevista con el Dr. Ben Shneiderman
    Impresiones negativas y percepción de la calidad
  Niveles de abandono y umbrales de atención
    Acumulación de frustración y tiempos permitidos adicionales
    Feedback para tareas complejas
    Directrices en el diseño de páginas Web
  Adaptabilidad
    Caos en la Web
    Consistencia en la velocidad de respuesta
    Diseño basado en la adaptabilidad
  Resumen

Capítulo 2. Flujo en el diseño Web
  El flujo y Mihaly Csikszentmihalyi
    ¡Atención! Los suministros son limitados
  ¿Qué causa el flujo emocional en la Web?
    Velocidad y flujo
    Flujo de experimentación y flujo de objetivo
    Diseño de las páginas de compra
    Medición del flujo
    Los beneficios del flujo online
  Páginas Web que favorecen el flujo emocional
  Resumen

Parte II. Optimización del lenguaje de marcado: HTML y XHTML

Capítulo 3. Optimización de HTML
  ¿Qué es la optimización de HTML?
    ¿Por qué debemos optimizar el código HTML?
  Incremento de la complejidad = Diseño de anchos de banda de mayor capacidad
    La página Web ideal
    El esqueleto HTML
    ¿HTML ilegible?
    Ancho de banda frente a estética
  Modo de funcionamiento de los buscadores actuales
    Longitud de línea
  Cómo optimizar el código HTML
    Paso 1: elegir el DOCTYPE adecuado
    Paso 2: minimizar las solicitudes HTTP
    Paso 3: eliminar espacios en blanco
    Paso 4: reducir atributos separados por comas
    Paso 5: omitir etiquetas y atributos innecesarios
    Paso 6: omitir comillas adicionales
    Paso 7: omitir etiquetas de cierre opcionales
    Paso 8: minimizar las referencias de colores y caracteres
    Paso 9: reducir comentarios
    Paso 10: minimizar valores alt
    Paso 11: minimizar los encabezamientos
  Resumen

Capítulo 4. Optimización de HTML avanzado
  Ideas prácticas para las tablas
    Tablas complejas = Baja velocidad de descarga
    Activación de la presentación progresiva
    Consolidación de los atributos de las tablas
    Visualización rápida de tablas
    Control de desbordamiento
    Ejemplo real de diseño fijo de tabla
    Simplificar
    Desanidar
    Niveles
    Truco para incrementar la relevancia de las tablas
    Etiquetas de cerrado opcionales
    Tablas y retornos de carro
    Celdas de colores
  Optimización de formas
    JavaScript y las formas
    GET frente a POST
    Controles de las formas
  Abreviación de los URL
    Ventajas de URL cortos
    Barra oblicua de cierre
  HTML y Compresión
    Ejemplo de compresión de HTML
  Resumen

Capítulo 5. XHTML Extremo
  Ventajas de XHTML
  XHTML frente a HTML
    XML frente a SGML
  Anatomía de un documento XHTML
    El prólogo
    Declaración DOCTYPE
    Las definiciones de tipo de documento (DTD)
    Espacios de nombre
  Reglas sintácticas de XML
    Regla 1: documentos adecuadamente estructurados
    Regla 2: utilizar comillas para definir los atributos
    Regla 3: no minimizar atributos
    Regla 4: utilizar siempre minúsculas
    Regla 5: prestar especial atención a los diferentes estilos y Script
    Regla 6: identificadores de fragmento con nombre e identificador
  Cómo convertir HTML en XHTML
    HTML Tidy
     Extensiones Dreamweaver
  Optimización de XHTML
    Transformación del código
  Resumen

Capítulo 6. Ejemplo práctico: PopularMechanics.com
  Optimización automatizada
  Optimización manual
    Optimización de CSS
    Optimización de JavaScript
    Reducción del uso de tablas
    Reducción de los comentarios
    Direcciones URL relativas y breves
    Reducción de los nombres de los archivos GIF Spacer
  Resumen

Parte III. Optimización de DHMTL: CSS y JavaScript

Capítulo 7. Optimización de CSS
  Aplicación inteligente de estilos
  Eliminación de espacios en blanco
  Reducción de comentarios
  Minimizar las peticiones de HTTP
  Selectores simples y substitución
    Selectores de tipo
    Selectores descendentes para mayor especificación
    Nombres cortos para los selectores de clase e identificación
    Pseudo-selectores
  Utilización de grupos
    Selectores de grupo
    Declaraciones en grupo
    Grupos de selectores y de declaraciones
    Utilización de varias clases para agrupar estilos comunes
  Herencia
    Ventajas de la herencia
  Organización de estilos por niveles
    Tipos de medios de reproducción
  Uso de las propiedades de abreviación
    Propiedad abreviación de fuente
    Propiedad abreviación del fondo
    Propiedad abreviación de margen
    Propiedad abreviación de borde
    Propiedad abreviación de padding
    Propiedad abreviación de estilo de lista
  Optimización de colores en CSS
    Colores Hexadecimales
    Colores nombrados
    Colores seguros en la Red
  Unidades de longitud: todo es relativo
    Unidades de longitud relativas
    Unidades de longitud absolutas
    Resumen de las unidades de longitud
  Resumen

Capítulo 8. Optimización de CSS avanzado
  Reglas de optimización de CSS
  Sustitución
    Rollover de imágenes
    Rollover puro
    Ejemplos reales de rollovers CSS2
    Menús basados en listas
  Tablas y CSS
  Diseño de las hojas CSS
    Importancia de los niveles
  Resumen

Capítulo 9. Optimización de JavaScript para una mayor velocidad de descarga
  Cuándo optar por la optimización
  Eliminar excesos
    ¿Qué ocurre con la legibilidad?
    Eliminación de espacios en blanco
    Reducción de comentarios
  Aplicación adecuada de JavaScripts
  Reducción de solicitudes HTTP
    Descarga aplazada
    Archivos .js comprimidos en el encabezado
    Descarga condicional de archivos JavaScript externos
  Abreviación y mapeo
  Concentración y ofuscación
    Código indescifrable
    Archivos auto extraíbles
  JavaScript y compresión
  Resumen

Capítulo 10. Optimización de JavaScript para una mayor velocidad de ejecución
  Niveles de diseño
  Medición de cambios
  Algoritmos y estructuras de datos
  Recodificar para simplificar el código
  Reducción de la interacción DOM y E/S
    Reducción de las búsquedas de objeto y propiedad
    Reducción de las cadenas de referencia
    Adición de sub-árboles complejos offline
    Edición de los sub-árboles offline
    Concatenación de cadenas largas
    Acceso directo a las listas de nodos
    Utilización de literales de objeto
  Optimizaciones locales
    Espacio a cambio de tiempo
    Tiempo a cambio de espacio
    Optimización de los bucles
  Depuración de las expresiones
    Varias ideas prácticas para la depuración
  Resumen

Capítulo 11. Ejemplo práctico: DHTML.com

Parte IV. Optimización de gráficos y Multimedia

Capítulo 12. Optimización de gráficos para la Red
  Captura y preparación de imágenes
    Corrección de imágenes
  Optimización de JPEG
    El algoritmo de compresión JPEG
    Línea base y JPEG progresivo
    Preparación de archivos JPEG para una mayor compresión
    Cómo guardar imágenes JPEG
    Texto y JPEG
    Resumen de optimización de JPEG
  Optimización de archivos GIF
    Compresión LZW
    Disminución de la profundidad de bits
    Cuantización del color
    Reducción de tramado para mayor suavizado
    Maximización de la redundancia horizontal y las zonas de color plano
    Entrelazado para incrementar la velocidad percibida
    Optimización localizada
    Relevancia de los buscadores
    Resumen de la optimización del formato GIF
    Optimización de un GIF animado
  Optimización de archivos PNG
    Compresión "Deflate" para PNG
    Reducción de la profundidad de bits
    Desventajas de los PNG entrelazados
    Uso de filtros para una mejor compresión
    PNG frente a GIF
    Resumen de optimización de PNG
  Tiempo de descarga: número de paquetes frente a tamaño de página
  Nuevas perspectivas: JPEG2000 y gráficos basados en vectores
  Resumen

Capítulo 13. Minimización de multimedia, por Jason Wolf
  Conceptos básicos de multimedia
    Tipos de datos multimedia en la Web
    Tipos de datos de vídeo
    Animación
    Limitaciones de Multimedia
    Codecs
    Emisión de medios de flujo
    Ideas prácticas para la producción de multimedia
  Compresión y optimización de audio
    Equipo
    Ajuste de niveles
    Normalización
    Compresores de audio
    Codificación
   Optimización de vídeo
    Equipo
    Iluminación
    Captura
    Optimización de vídeo después de capturarlo
  Compresión de vídeo
    Optimización de Shockwave
    Optimización de Cult3D
  Optimización de PDF
    Crear PDF pequeños
    Creación de PDF dinámico
    Guardar los PDF
    Evitar las formas grandes
    Optimización de archivos PDF
  Resumen

Capítulo 14. Ejemplo práctico: Apple.com, por Jason Wolf
  Resultado
  Pistas
  Imagen
  Ajuste
  Codificación
  Audio
  Resultados finales

Parte V. Optimización de los buscadores

Capítulo 15. Optimización del teclado
  Visión general
    Sintagmas destino
    Clasificación de los sitios según los motores de búsqueda
  Directrices para la optimización de las palabras clave
    Paso 1: determinar los sintagmas clave
    Paso 2: clasificar según la popularidad
    Paso 3: combinar sintagmas clave
    Paso 4: clasificar de nuevo según su popularidad
    Paso 5: elegir un título para la página con dos o tres de los sintagmas más relevantes
    Paso 6: escribir una etiqueta description meta
    Paso 7: escribir una etiqueta keywords meta
    Paso 8: añadir palabras clave dentro de las etiquetas y atributos principales
    Paso 9: enviar la página a los buscadores más comunes
    Paso 10: ver aumentar el contador de visitas
  Diseño acorde con los programas Spider
  Características de una página de gran relevancia
  Resumen

Capítulo 16. Ejemplo práctico: PopularMechanics.com e iProspect.com
  PopularMechanics.com
    Etiqueta de título con escasos términos
    Etiquetas meta vacías
    Encabezamiento excesivo
    Atributos alt vacíos
  iProspect.com
    Título con palabras clave
    Etiquetas meta con palabras clave
    Encabezado reducido
    Atributos alt significativos
    Etiquetas clave y atributos con términos clave
    Palabras clave en el cuerpo del texto

Parte VI. Técnicas avanzadas de optimización

Capítulo 17. Técnicas del servidor
  Inclusiones en el lado del servidor
    SSI condicionales
    Variables de configuración y prueba
  Ventajas del SSI: velocidad y amplia compatibilidad
    Desventajas de SSI
  Ajuste de mod_include
    Importancia de XBitHack o .shtml
    Ejecución de mod_include mediante un servidor virtual
    Utilización de AllowOverride None
    Activación de la memoria caché con XBitHack Full o mod_expires
    Detección de buscadores por parte del servidor
    Detección de buscador más rápida con BrowserMatch
    Detección de buscadores PHP
    Ventajas y desventajas de la detección de buscadores del lado del servidor
    browscap: El archivo con capacidades de buscador
    BrowserHawk: detección avanzada del lado del servidor
    Etiquetas meta condicionales
  Abreviación de URL mediante mod_rewrite
    Ajuste de mod_rewrite
    El reto de la abreviación
    La solución RewriteRule
    La solución del RewriteMap para abreviaciones múltiples
    Abreviación automática de URL
  Optimización de formas y de CGI
    Importancia de mod_perl para incrementar la velocidad de los scripts Perl
    No más www
  Resumen

Capítulo 18. Métodos de compresión, por Konstantin Balashov
  Algoritmos de compresión de texto
  Compresión del contenido
    Compresión GZIP
    La compresión del módem no es suficiente
  Compresión de contenidos del lado del cliente
    HTML y compresión
    Compresión de hojas CSS
    Compresión de JavaScript
  Compresión de contenidos del lado del servidor
    Compresión de contenido en Apache
    Compresión de contenidos en el servidor IIS de Microsoft
  Compresión de contenidos basada en el servidor Proxy
  Herramientas de evaluación
    PipeBoost Analyzer
    ApacheBench
    Website Analyzer de VIGOS
  Futuros avances en la compresión
  Resumen

Capítulo 19. Ejemplo práctico: Yahoo.com y WebReference.com
  Técnicas de abreviación en Yahoo.com
  Técnicas de abreviación en WebReference.com

Índice alfabético