Sitios web rápidos

Mensaje Nº 1 | 5:32 PM 2009-06-30

Sitios web rápidos

1. Cómo acelerar la carga de un sitio Web

Steve Souders ha trabajado junto a un grupo de personas en formas de medir y reducir el tiempo que demoran en cargar las páginas de un sitio web. Este tiempo incluye tanto la interacción de la red, como la ejecución de los scripts de la página y el despliegue de esta por parte del navegador. La experiencia que su grupo ha recogido puede resumirse en los siguientes puntos:

1.1. Hacer menos peticiones HTTP
Una página incluye varios recursos que son descargados en forma separada. La página HTML en sí es uno de ellos, pero a eso hay que sumar cada hoja de estilo, cada imagen, cada script, y cada objeto embebido. Los browsers modernos hacen entre 4 y 6 peticiones simultáneamente a un mismo servidor, de modo que si una página tiene muchos elementos, será lenta de desplegar.

Se puede ver fácilmente qué elementos tiene una página usando el plug-in de Firefox Firebug, que además es muy útil para varias otras tareas de desarrollo web.

1.2. Usar una red de distribución de contenido
Una red de distribución de contenido es un grupo de servidores distribuidos en todo el mundo que actúan como cachés locales de contenido para una serie de sitios Web. Por ejemplo, las imágenes o videos de un sitio web de alto tráfico pueden servirse desde una de estas redes de contenido, y automáticamente la red de distribución de contenido seleccionará un servidor cercano a cada cliente para enviarle estos archivos.

1.3. Agregar un encabezado de expiración
En la respuesta del requerimiento HTTP es posible indicar una fecha de expiración para un recurso. Si el recurso es estático (una foto, o un video que no se modificará después), se puede poner una fecha de expiración muy en el futuro para evitar un requerimiento de verificación por parte de un crawler o de un usuario. La sintaxis es:

Quote

Expires: Thu, 1 Jan 2015 12:00:00 GMT

1.4. Comprimir el contenido de la página
GZIP puede usarse para enviar el contenido de la página (básicamente el HTML, pero también otras componentes). Para recursos estáticos, se puede habilitar la compresión de HTTP en el servidor mismo, por ejemplo en Apache usando el mod_deflate:

Quote

AddOutputFilterByType DEFLATE text/html text/plain text/xml

Cuando se trata de páginas dinámicas, también es posible habilitarlo, en este caso dependerá del programa usado, pero siempre conviene hacerlo.

1.5. Poner las hojas de estilo al comienzo
Distintos browsers hacen cosas distintas con las hojas de estilo. Algunos, esperan a cargar la hoja de estilo antes de mostrar la página; antes de recibir la hoja de estilo sólo muestran el título y una página en blanco. Otros, muestran la página sin la hoja de estilo y apenas la han cargado, cambian el estilo de la página. En ambos casos, es mejor poner la hoja de estilo al comienzo de la página, dentro del elemento <head> ... </head>.

1.6. Usar scripts externos, y cuidar la forma en que se cargan
1.6.1. Scripts externos
Parece un poco de más en este punto, pero dado que se puede hacer caché muy agresivo de los CSS y del Javascript, es mejor usar por ejemplo:

Quote

Que insertar directamente el código del Javascript dentro de la página. Además hay que tener cuidado de no poner dos veces el mismo script en una página para evitar cargarlo dos veces.

1.6.2. Minificar los scripts
Minificar en este contexto significa quitar todos los comentarios y espacio. El sitio Scriptalizer puede hacer esto por tí, pero hay varias herramientas que lo hacen. Lo apropiado es tener dos versiones de cada script, una sin minificar para desarrollo y una minificada para explotación. Además nota que algunas bibliotecas en Javascript se pueden descargar en versión minificada.

1.6.3. Los scripts bloquean la carga de la página
Otra cosa problemática con Javascript es que mientras un script no se carga lo que sigue más abajo en la página no se muestra. Esto es desconocido por muchos desarrolladores, pero se puede resolver fácilmente. La primera solución es poner los scripts al final de la página. La segunda solución es usar en el <head> ... </head> de la página:

Quote

Este truco no bloquea la carga de la página y permite que la descarga del script comience inmediatamente.

1.7. Reducir el número de hosts distintos en la página
Si cada imagen, hoja de estilo y script está en un host distinto, o si los enlaces internos del sitio que los usuarios ocupan alternan entre distintos nombres de host, el requerimiento DNS que debe hacerse antes de la conexión quitará instantes valiosos de la experiencia del usuario.

1.8. Evitar las redirecciones
Las redirecciones múltiples ayudan a mantener un sitio, por ejemplo usando URLs cortas para referirse a objetos que en realidad tienen una URL más larga; pero quitan tiempo a los usuarios. Una solución es evitarlas del todo, o simplemente asegurarse de que las páginas intermedias son pequeñas y tienen fechas de expiración muy en el futuro.

1.9. Optimizar imágenes
Esta foto es de 1280x850 pixeles, y pesa 140 Kb originalmente. Reducida a 300x200, pesa 38 Kb si no se optimiza, y 7 Kb si se optimiza mucho; valores intermedios también son posibles. Obviamente en el caso de imágenes más grandes lo que se ahorra en tiempo de descarga es mucho más.

El programa GIMP tiene una ventana de diálogo al grabar archivos JPG que permite elegir el nivel de optimización y previsualizar el resultado. Si además usas JPG progresivo, recomendado para imágenes grandes, el usuario puede ver una versión de baja resolución de la imagen mientras esta se está cargando.

2. YSlow
YSlow es una herramienta para desarrolladores Web que evalúa estos aspectos en un sitio Web. En el fondo, contesta a la pregunta ¿por qué el sitio es lento? (why ("Y") is it slow?")

Las vírgenes tienen muchas navidades pero ninguna Nochebuena.

Mensaje Nº 15 | 6:18 PM 2017-12-24

Hola, se que esto no va a qui, pero he estado intentando crear un nuevo hilo para pedir su ayuda y no he podido lograrlo.
Espero no se molesten y puedan ayudarme.

Soy nuevo en Ucoz, y en el poco tiempo que llevo acá he estado buscando temas relacionados a la información que necesito, empece este tema, obviamente porque no lo encontré.

Para entrar un poco en el tema y para hacer las cosas mas cortas: Soy deportista desde hace mucho tiempo, y tengo una licenciatura en Letras, la cosa es que me gustaría comenzar un sitio uniendo mis dos pasiones. La idea principal es hablar es crear un sitio dedicado al deporte en general, pero hay muchas cosas que me hacen dudar.
Una de estas si debo contratar a un equipo, puesto que mi sueño es alcanzar el nivel de este tipo de paginas http://mundo-electroestimulacion.com/electroestimulador/ y de muchos otros a los que leo con frecuencia y admiro, y es lógico que llevan años, y que hay mas de una persona cuidando que todo sea perfecto. Entonces, debería pagar a profesionales para que me ayuden a alcanzar este nivel, o son de los que piensan que el éxito se disfruta mas si lo conseguiste solo?

También deseo que mi sitio sea único, que tenga algo distinto. La verdad es que hay muchos sitios sobre deporte, rendimiento y todo eso, por eso quiero agregarle algo distinto, no se si a ustedes se les ocurre algo.

Esto es solo para empezar y para que tengan una idea de lo que pasa en mi cabeza

Cualquier idea, cualquier opinión, la verdad la respetare y la tomare en cuenta sea positiva o no.

''Aquellos que quieran mover al mundo, que se muevan ellos primero''

Últimos temas

Temas populares

Página 1 de 2 1 2 »
Moderador del foro: ZorG