Diez formas de acelerar la descarga de tus páginas web

¿Te gusta esperar a que las páginas se carguen? A tus usuarios tampoco. Descubre cómo acelerar el tiempo de descarga de tus páginas en este artículo. 1. Da formato a tus páginas con CSS, no con tablas El CSS se carga más rápido que las tablas porque: 1) Los navegadores

Artículos recientes

¿Te gusta esperar a que las páginas se carguen? A tus usuarios tampoco. Descubre cómo acelerar el tiempo de descarga de tus páginas en este artículo.

1. Da formato a tus páginas con CSS, no con tablas

El CSS se carga más rápido que las tablas porque:

1) Los navegadores tienen que leer las tablas dos veces antes de mostrarlas: una para dibujar la estructura y otra para escribir el contenido.
2) Las tablas aparecen en la pantalla de una sola vez (hasta que no se descargue y genere la tabla entera, no aparecerá ninguna de sus partes)
3) Las tablas fomentan el uso de imágenes espaciadoras para ayudar al posicionamiento
4) El CSS requiere, por lo general, menos código que las tablas.
5) El CSS puede colocarse en un documento externo, que se llama una sola vez y queda almacenado en caché. La composición con tablas se almacena en cada documento HTML y tiene que cargarse cada vez que se muestra una página.
6) Con CSS puedes controlar el orden en que los ítems se descargan en la pantalla: hacer que el contenido aparezca antes que las imágenes de descarga lenta, algo que tus usuarios sin duda apreciarán.
(?)

2. No uses imágenes para mostrar texto

Nuestro viejo amigo el CSS acude al rescate otra vez. No hace falta usar imágenes para mostrar texto si puedes hacerlo con CSS. Echa un vistazo a este código:
a:link
{
color: #ffffff;
background: #ff9900;
text-decoration: none;
padding: 0.2em;
border: 4px solid;
border-color: #99f #008 #008 #99f
}
a:hover
{
color: #ffffff;
background: #ffaa11;
text-decoration: none;
padding: 0.2em;
border: 4px solid;
border-color: #008 #99f #99f #008
}

Este código crea un botón realmente sencillo que parece presionarse al pasar el ratón por encima. Puedes verlo en acción aquí si quieres. Echa un vistazo a cómo puedes usar CSS para hacer botones de navegación.

3. Llama las imágenes decorativas a través del CSS

Es posible presentar imágenes como parte del fondo llamándolas a través de CSS. Si tienes una imagen de 200px por 100px puedes utilizar el siguiente código HTML:

<div class="pretty-image"></div>

Y este CSS:

.pretty-image
{
background: url(filename.gif);
width: 200px;
height: 100px
}

Quizá parezca innecesario, pero esta técnica realmente puede mejorar el tiempo de descarga de tus páginas. Básicamente, los navegadores descargan las imágenes de fondo después de todo lo demás. Con esta técnica, tu texto se cargará instantáneamente y tus usuarios podrán moverse por la página mientras tu fantástica imagen de 50kb se descarga.

Esta técnica impide utilizar el atributo ALT, pero si tienes mucho interés en ponerlo puedes sustituir el HTML arriba indicado por este otro:

<image src="spacer.gif" class="pretty-image" alt="description" />

Spacer.gif es una imagen transparente de 1px por 1px. Ahora tienes una imagen transparente de 50 bytes y el contenido principal cargando primero, y tu gran imagen decorativa, además del texto alternativo, cargando en segundo lugar. Perfecto.

Por favor, ten en cuenta que esta técnica sólo vale para imágenes decorativas y no imágenes que aporten información. Cualquier usuario que tenga el CSS desactivado no podrá ver tus imágenes incrustadas en el CSS (ni su texto alternativo).

4. Usa selectores contextuales

Esto es ineficaz:

 
<p class="text">Esto es una frase</p>  

  <p class="text"> Esto es otra frase </p>  

  <p class="text"> Esto es otra frase más</p>  

  <p class="text"> Y otra frase más </p>`  

`.text  
{  
color: #03c;  
font-size: 2em  
}  

En lugar de asignar un valor a cada párrafo individual, podemos anidarlos dentro de un &lt;div&gt; y asignar un valor a esa etiqueta.

 
<div class="text">  

  <p> Esto es una frase </p>  

  <p> Esto es otra frase </p>  

  <p> Esto es otra frase más </p>  

  <p> Y otra frase más</p>  

  </div>`  

`.text p  
{  
color: #03c;  
font-size:2em  
}`  

Este segundo ejemplo CSS básicamente dice que a todos los párrafos dentro de la clase class="text" debe asignárseles un valor de color de #03c y un tamaño de fuente de 2em.

A primera vista no parece muy importante, pero si puedes aplicar esto apropiadamente a todo tu documento, fácilmente puedes ahorrar un 20% del tamaño del archivo.

Puede que hayas notado que los valores de la propiedad color son más cortos que lo normal. #03c es una versión abreviada de #0033cc (puedes aplicar este valor abreviado a cualquier valor de color como este)

5. Utiliza propiedades CSS abreviadas

Puedes utilizar las siguientes propiedades abreviadas para el comando margin:

Usa: En lugar de:
`margin: 2px 1px 3px 4px` (top, right, bottom, left) `margin-top: 2px; margin-right: 1px; margin-bottom: 3px; margin-left: 4px; `
`margin: 5em 1em 3em ` (top, right y left, bottom) `margin-top: 5em; margin-right: 1em; margin-bottom: 3em; margin-left: 1em; `
`margin: 5% 1% ` (top y bottom, right y left) `margin-top: 5%; margin-right: 1%; margin-bottom: 5%; margin-left: 1%; `
`margin: 0 ` (top, bottom, right y left) `margin-top: 2px; margin-right: 1px; margin-bottom: 3px; margin-left: 4px; `

Estas reglas pueden aplicarse a margin, border y padding.

6. Minimizar el espacio en blanco, los saltos de línea y las etiquetas de comentario

Cada letra o espacio del HTML pesa un byte. No parece mucho, pero todo suma. Hemos comprobado que al eliminar espacios en blanco innecesarios y comentarios, puedes recortar hasta el el 10% del tamaño del archivo (si tu HTML es realmente ineficaz).

7. Usa direcciones relativas

Trata de evitar las direcciones absolutas, porque pesan más. Un ejemplo de una dirección absoluta es &lt;a href=&quot;http://www.URL.com/filename.htm&quot;&gt;. Sería mucho mejor &lt;a href=&quot;filename.htm&quot;&gt;.

8. Elimina etiquetas META innecesarias y contenido META

La mayoría de las etiquetas META son innecesarias y no aportan mucho. Las etiquetas más importantes para el posicionamiento en buscadores son las palabras clave y las etiquetas descriptivas, aunque debido al abuso masivo han perdido mucha importancia en los últimos tiempos. Cuando uses estas etiquetas META trata de que el contenido ocupe menos de 200 caracteres. Las etiquetas META demasiado largas no son buenas para los motores de búsqueda porque diluyen tus palabras clave.

9. Pon el CSS y el JavaScript en documentos externos

Para colocar el CSS en un documento externo usa:
&lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;filename.css&quot;
/&gt;

Para colocar JavaScript en un documento externo usa:
&lt;script language=&quot;JavaScript&quot; src=&quot;filename.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;

Cualquier archivo externo es llamado una sola vez y almacenado en el caché del ordenador del usuario. En lugar de repetir el JavaScript o el CSS una y otra vez en los archivos HTML, escríbelo una sola vez en un documento externo.

Y no lo olvides, no hay límite al número de documentos externos que puedes usar. Por ejemplo, en lugar de hacer un gran documento CSS, puedes tener uno principal y otros específicos para ciertas áreas de tu sitio.

10. Utiliza / al final al enlazar un directorio

No hagas esto:
&lt;a href=&quot;http://www.URL.com/directoryname&quot;&gt;&lt;/a&gt;
En su lugar, haz esto:
&lt;a href=&quot;http://www.URL.com/directoryname/&quot;&gt;&lt;/a&gt;

¿Por qué? Si no hay una barra al final de la URL, el servidor no sabe si el enlace apunta a un archivo o a un directorio. Incluyendo la barra, el servidor sabrá instantáneamente que la URL apunta a un directorio y no necesita gastar tiempo en intentar averiguarlo.

Traducción libre de Ten ways to speed up the download time of your web pages, artículo escrito por Trenton Moss para Webcredible.co.uk