Imprimir

Optimiza tu Website

Posteado en Contenido: HTML

Uno de los factores que más influye en el éxito de nuestro Website es el tiempo de carga de las páginas que lo componen. Un tiempo de carga excesivo, aparte de producir una mala experiencia de usuario, puede hacer que nuestros visitantes se aburran mientras esperan que se renderice la página. ver "tienes 5 segundos".

Usa páginas de tamaños medianos

Un máximo de 500 KB en total es una buena opción (si no lo consigues procura que no pase de 1 MB) de esta forma evitas que tarde mucho en descargarse. A veces es mejor dividir el contenido en varias páginas, de forma que el tamaño de cada una sea menor y cargen de forma más rápida. >>> Test de velocidad de carga

Utiliza hojas de estilo CSS externas

En lugar de incrustar los estilos dentro del código HTML enlaza en <header> las hojas de estilos. De esta forma los estilos no se descargan en cada visualización de página, la página pesa menos y se aprovecha la caché del navegador.

Evita usar @import en los archivos CSS. Es preferible que utilices varios enlaces “link” desde el código de la página (descarga en paralelo), que importar hojas de estilo desde otras hojas de estilo (descarga en serie).

Utiliza archivos con funciones javascript externos

No uses javascript dentro del código. Agrupa y coloca el código javascript en un archivo y enlázalo. Así el visitante descarga el archivo .js en la primera visualización, y para las siguientes ya tiene ese código descargado.

Si es posible, enlaza los archivos javascript antes de </body>. Los archivos .js se descargan en serie (uno detrás de otro). Si los enlazamos en el <header>, el navegador no puede empezar a renderizar la página hasta que no ha descargado todos los archivos. Aunque el tiempo de carga de la página es el mismo, la sensación de velocidad es mayor (evidentemente esto sólo se puede hacer siempre que no usemos funciones javascript necesarias durante la carga de la página).

Minimiza el número de peticiones HTTP

Después del tamaño de los archivos descargados, el número de peticiones realizadas al servidor es el factor que más penaliza el rendimiento en la descarga de páginas web.

Procura que el número de peticiones de archivos externos se la menor posible. Si puedes, agrupa todos los archivos .css o los archivos .js en uno sólo.

Usa sprites para imágenes comunes a todo el Website o que se repitan en muchas páginas. Utiliza CSS para asignar al elemento HTML el fragmento de imagen que queremos mostrar.

Usa el formato gráfico adecuado

Si utilizas el formato gráfico correcto en tus imágenes la velocidad aumentará. Usa jpg para imágenes con mucha gama de colores (fotos), gif para imágenes con pocos colores o animaciones (planos, gif animados,...) y png para aquellas que necesiten transparencias, degradados o imágenes de alta calidad.

Reduce tamaños de archivos

No uses redimensionado de imágenes dentro del código. No tiene sentido, además de ineficiente, hacer que el navegador descargue una imagen más grande de la que luego vas a mostrar. Utiliza imágenes del tamaño real que vas a mostrar.

Evita contenido sobrante dentro del código. Puedes compactar tus archivos CSS y JS con herramientas como CSS Compressor o CSS Formatter and Optimiser para compactar tus CSS, o Yahoo! UI Library: YUI Compressor y Online Javascript compressor para los archivos javascript. No olvides guardar copias no compactadas de éstos por si más tarde tienes que modificarlos.

Enlaza lo necesario y en el lugar correcto

Evita enlazar contenido de otros dominios. Incluir información de otros lugares implica que la carga de nuestra página dependerá del estado del servidor enlazado. Si no tienes otra opción, coloca los enlaces en el sidebar, footer,... pero no en el contenido principal de la página.

Buenas costumbres

  • Nunca uses frames, es un método obsoleto.
  • Evita utilizar iframe directamente en la página. Si éstos cargan páginas externas o .pdf's hará que la velocidad baje mucho.
  • Procura respetar lo más posible las reglas de accesibilidad.
  • Asegúrate de que todo lo que has hecho funcione.
  • Procura cumplir las especificaciones y estándares de la W3C.

Aula Virtual / Foro

aula virtualforo

Utilidades...

imprescindibles Chrome Safari Opera IE9 Adobe Reader 7zip Flash Java Filehippo Ninite

Visitas...

Hoy0
Ayer2
Mes89
TOTAL59074

En línea...

Tenemos 12 visitantes y ningun miembro en Línea