Página 1 de 11
Moderador del foro: ZorG 
Foro uCoz » Información General » Para los principiantes » Sitios web rápidos
Sitios web rápidos
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 1 | 5:32 PM
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
<script type="text/javascript" src="scripts.js"> </script>

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
<script type="text/javascript">
var se = document.createElement("script");
se.src = "http://midominio.com/scripts.js";
document.getElementsByTagName("head")[0].appendChild(se);
</script>

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.
silviacastillo
Mensajes: 4
Reputación: 0
Mensaje Nº 2 | 5:30 PM
Muchas gracias por el aporte!
comoaprenderrapido
Mensajes: 1
Reputación: 0
Mensaje Nº 3 | 8:27 AM
Muchas gracias por ayudarme a aprender como acelerar la página, es una guía muy completa :-)
Vive como si fueras a morir mañana. Aprende como si fueses a vivir siempre.
elblogdetubebe
Mensajes: 2
Reputación: 0
Mensaje Nº 4 | 4:14 PM
Muy buen tutorial. Yo solo solía realizar lo de comprimirla un poco más para acelerar la carga de la página pero he visto que tengo muchas cosas pendientes todavía por hacer. Saludos biggrin
¡Hola! Mi nombre es Pilar y soy una apasionada de las tecnologías. Tengo un blog de bebés www.elblogdetubebe.com que espero que os guste. Saludos :)
maquillajedeblog
Mensajes: 1
Reputación: 0
Mensaje Nº 5 | 9:07 PM
Muchas gracias por el tutorial, esta muy completo. Se agradece enormemente biggrin
hdehistorias
Mensajes: 1
Reputación: 0
Mensaje Nº 6 | 9:22 PM
Genial post yo ya habia utilizado YSlowy la verdad es que una maravilla biggrin
las mejores frases www.disparafrases.com
Post editado por hdehistorias - Martes, 2015-10-27, 9:23 PM
tumejorfisico100
Mensajes: 1
Reputación: 0
Mensaje Nº 7 | 5:03 AM
Muchas gracias muy buen post de como acelerar la página, es una guía completisima,enhorabuena :-) biggrin
Testeando mi nuevo proyecto http://tumejorfisico.com.
Post editado por tumejorfisico100 - Lunes, 2016-01-11, 5:05 AM
mariaperez505020
Mensajes: 1
Reputación: 0
Mensaje Nº 8 | 3:56 PM
Muchas gracias por el artículo, me parece magnífico, muy claro y fácil de entender y me va a venir muy bien ya que acabo de lanzar una web sobre una tienda online de juguetes originales con un toque vintage y voy a hablar con el webmaster para que me optimice la velocidad de carga de la web siguiendo tus recomendaciones.

Un saludo. María biggrin
nandasutadd
Mensajes: 2
Reputación: 0
Mensaje Nº 9 | 2:42 AM
Muchas gracias por tan valiosa información !
En el camino a la excelencia
manuel_4_14
Mensajes: 4
Reputación: 0
Mensaje Nº 10 | 3:40 AM
Muchas gracias biggrin
malosocity
Mensajes: 2
Reputación: 0
Mensaje Nº 11 | 9:36 AM
buen aporte
cindydiaz157
Mensajes: 2
Reputación: 0
Mensaje Nº 12 | 7:45 PM
Geniaaaal!! Excelente aporte!!
Mi Blog: Super Salud
Foro uCoz » Información General » Para los principiantes » Sitios web rápidos
Página 1 de 11
Búscar: