Estás en Inicio / Editorial / Aspectos técnicos
28.11.2006
Cómo conseguir que tu página se cargue rápidamente
El siguiente artículo te permitirá conocer algunos puntos a tomar en cuenta al momento de diseñar una página web y que ésta cargue de forma rápida.
La clave está en el ancho de banda: a pesar de que cada vez son más las personas que acceden a la web con banda ancha, un porcentaje muy grande de la gente aún accede a través de lentas conexiones telefónicas.
A la hora de crear un sitio web, la ligereza de ésta es un factor muy importante. Los internautas permanecerán más tiempo en sitios mediocres que se abren con rapidez, del que esperarán en otros excelentes pero mas lentos de cargar.
Diseña con archivos de “poco peso” y eliminarás el obstáculo del ancho de banda para la mayoría de los usuarios. Diseña con archivos grandes , y limitarás el acceso a su web a unos pocos privilegiados que disfrutan de banda ancha.
Diseña con archivos muy grandes y tus visitas se verán reducidas casi a la nada. El mejor diseño web es aquel que es más ligero. Los buenos diseñadores web están constantemente realizando malabares para conseguir perder peso en sus creaciones.
En cambio, los principiantes en el diseño suelen crear una composición en algún editor de imágenes como Adobe Photoshop, la recortan en Adobe ImageReady y utilizan Dreamweaver para dejarla como una web operativa.
Esta web puede tener una apariencia maravillosa, pero es prácticamente seguro que engulla el ancho de banda haciendo el tiempo de descarga mayor. Entonces ¿Cómo aligerar el peso de una página web? :
Utiliza texto en vez de gráficos que contienen texto
Se debe intentar utilizar texto HTML en lugar de imágenes tipográficas allí donde sea posible hacerlo. Hay veces que utilizamos gráficos para mostrar una letra bonita o llamativa pero que resulta pesada al cargar.
Si no es estrictamente necesario, debemos obviar esta práctica ya que los textos se bajan en una fracción de segundo, en cambio, las imágenes tardan bastante más tiempo.
Reduce el peso de las imágenes
Podemos aligera peso intentando recortar nuestras imágenes reduciéndolas de tamaño al guardarlas en formatos adecuados para la web.
Cabe destacar que para fotos es mejor utilizar el formato JPG y para imágenes de colores “planos” (dibujos, logotipos) utilizaremos el formato GIF.
A modo orientativo se debe buscar que las imágenes no superen los 15 KB y que todos los elementos de una página no pesen más allá de 100 KB. Incluso hay “webmasters” que recomiendan no exceder de los 50 KB.
Has más con menos
Cortar una imagen grande en dos o tres trozos pequeños podría reducir el ancho de banda requerido por cada trozo. Pero cuidado, como el servidor responde al requerimiento de una imagen después de otra, podría pasar el efecto contrario.
Si cortaras la imagen en 100 cachos, el ancho de banda aumentaría. Hay que jugar con este recurso para conseguir resultados óptimos.
Reduce la redundancia
Es interesante eliminar redundancias en el código. Como ejemplo, en una tabla por defecto el texto se alinea a la izquierda, así que es redundante recalcar en el código que dicho contenido se alinee a la izquierda:
<td align="left"> sería suficiente con poner </td>
Claro, si ya trabajas con hojas de estilo y estándares ni siquiera hay que pensar en tablas y desde tus hojas de estilo podrás encargarte de estos detalles de formato.
Aprovecha la caché
La caché, es como un almacén en el que se guardan todos aquellos archivos que ya se han bajado por si el usuario los necesita de nuevo. Mientras más veces reutilicemos los elementos de la web mejor.
Se recomienda utilizar cabeceras, pies y menús que utilicen las mismas imágenes ya que solo tendremos que bajar una sola vez estos elementos. A partir de ahí, los gráficos se abren de la memoria caché del disco duro.
No pongas toda la información en una página
Si tenemos que crear una página con mucha información, se recomienda distribuirla en varias páginas con su navegación (adelante, atrás) que poner todo el contenido en una sola página. Con que la información ocupe un máximo de dos altos de pantalla es suficiente.
Califica esta nota:
(3 votos, promedio: 4.33 de 5)
Loading ...Sobre el autor
Axier Ruiz Merino
Con experiencia en el Diseño y Desarrollo Web.
Si eres nuevo en Maestros del Web y te agradan nuestras publicaciones, te invitamos a suscribirte a nuestro Feed.
Sindícanos en: Google Reader, Bloglines, My Yahoo o My MSN | ¿Qué es el Feed?
Comentarios
16 comentarios en total.
-
Muy buenos consejos Axier. Como bien mencionas, el uso de hojas de estilos y la regla de los 100ks es bastante importante para una página principal. En el resto del sitio podrás tener contenidos más grandes, advirtiendo cuando haga falta al usuario, pero el inicio, siempre tiene que ser sencillo, con opciones relevantes y tratando de invitar al usuario a seguir navegando en tu sitio.
Entran a la página y tendrás apenas unos minutos para llamar su atención. Si lo haces bien y con pocos recursos mucho que mejor.
-
Por lo visto el término \”optimizar\” también podremos aplicarlo al diseño Web, al igual que cuando hablamos de posicionamiento en buscadores electrónicos.
Muy buen artículo.Saludos,
Charlie -
Alejandro 01.12.2006 - 13:57 - #
Estan muy buenos estos consejos dados…
Pero es bien dificil seguirlos y mas por gente que no tengan experiencia en el desarrollo de sitios web
salu2
suerte.. -
Calítoe.:. 03.12.2006 - 11:50 - #
Usar inclusiones PHP acelera también mucho la carga y \”optimiza\” en general el código y el propio proceso de construcción y modificación de páginas. Sospecho que se publicará algún tutorial acerca de eso por aquí pronto
-
JM 04.12.2006 - 13:52 - #
falta la tilde en el título \”rápidamente\”
-
Que tiquismiquis!
También el uso de diseño con hojas de estilo y sin usar tablas acelera bastante la carga
-
calledos 06.12.2006 - 15:05 - #
Del tutorial de más arriba.
“Has más con menos”
y habla de reglas ortográficas -
Calítoe (Cristina MJ) 07.12.2006 - 01:54 - #
Tenéis razón, conviene que nosotros mismos seamos los primeros en revisar nuestra redacción… Pondremos nuestro empeño en dar ejemplo. Ya hemos empezado con esto:
http://www.maestrosdelweb.com/editorial/buenaredaccion/
-
Axe 07.12.2006 - 09:32 - #
Son los mismos consejos que fui aprendiendo con el tiempo… Y los mismo que sigo utilizando día a día. Sin duda que son importantes!
-
sergio Vladimir 29.12.2006 - 08:26 - #
haber si alguien me puede ayudar no consigo que las imagenes de mi web se almacenen en el cache por mas que la visito varias veces no se guarda dana de nada en la carpeta del cache
-
Buen artículo. Graxias por los consejos.
SALU-2.
-
yuvi 31.01.2007 - 11:53 - #
como hago para ingresar datos en una pag hecha en dreamwever
-
Gracias a todos por leer el artículo
-
karen 16.03.2007 - 21:18 - #
hola si me quedo claro pero como puedo consegir una pagina
-
Son todo un clásico, pero siempre está bien recordarlos.
-
MANUEL BALIRAC 24.12.2007 - 03:51 - #
YA VEO QUE ESTÁS HECHO UN FENÓMENO EN EL TEMA DE LAS PÁGINAS WEB Y QUE LA GENTE TE DA LAS GRACIAS POR TUS CONSEJOS. POR MI PARTE SOLO DECIRTE QUE ENHORABUENA Y ADELANTE. RECIBE UN SALUDO.
Otras Notas Relacionadas
- Tips para conseguir miles de enlaces
- 56 tips para conseguir visitas en tu blog
- Curso de diseño y programación de páginas web
- Navegabilidad, un factor fundamental
- Adobe Photoshop Elements 4 para Mac
- ¿Qué tres errores debería evitar a toda costa cualquier página web?
- Continental.com abajo por ofertas..
- Seminario online sobre seguridad en documentos electrónicos
- El Problema del Cache de los Browsers
- ¿Para ti qué es la Web 2.0?
