Inicio / Cómo reducir el tamaño de una página web

Cómo reducir el tamaño de una página web

Si queremos que los usuarios vean nuestras páginas web, debemos reducir al máximo su tamaño. En muchos casos serán visualizadas desde dispositivos móviles, cuya conexión a internet es casi siempre mucho más lenta que desde un pc. Existen páginas preciosas que los usuarios nunca verán debido a que desde dispositivos móviles tardan demasiado en cargar.
Es necesario reducir el tamaño de las páginas al mínimo, para que la velocidad de conexión a Internet no reduzca nuestro número de visitas por una mala satisfacción del usuario.

Algunos consejos:

1. Subir las imágenes con las dimensiones finales: Debemos subir las imágenes con las dimensiones exactas que van a tener en nuestras webs.

¿Cómo conocer el tamaño que van a tener las imágenes en las páginas web?

Las imágenes se redimensionan a menudo utilizando estilos contenidos en archivos css. Por ello a veces es dificil conocer el tamaño final de las imágenes si no está definido explicitamente mediante los atributos width y height. Una forma fácil y rápida es analizar la página una vez creada usando por ejemplo la extensión de firefox Web Developer:

Cómo usar el plugin web developer
Web developer plugin

2. Seleccionar el formato de imágenes adecuado: Los formatos más utilizados son jpeg/jpg, png y gif. Se debe seleccionar el que ocupe menos con una calidad aceptable.

3. Optimizar las imágenes para web: Existen herramientas que optimizan las imágenes de manera automática para la web, reduciendo su tamaño considerablemente. Aquí una con versión gratuíta http://www.optimizesuite.net

Optimización del peso de una web con OptimizeSuite
Herramienta de optimización web OptimizeSuite

4. Reducir el tamaño de nuestros archivos css: No debemos incluir estilos css no utilizados y debemos prestar atención para no incluir estilos css que no cumplan el estandar del w3c http://jigsaw.w3.org/css-validator/. Además, podemos utilizar una herramienta (como la anterior) de minimización de css, que elimine espacios, comentarios, etc.

5. Reducir el tamaño de nuestros archivos js: No debemos incluir funciones o código no utilizado. Además, al igual que css se podrían eliminar espacios, comentarios, saltos de linea, etc.

6. Habilitar compresión en el servidor de aplicaciones: Todos los servidores de aplicaciones tienen mecanismos para comprimir las páginas web y de esta manera disminuir la cantidad de datos que se transfiere por la red. Por ejemplo, para el caso de Apache bastaría con añadir algo así en el fichero .htaccess

          <IfModule mod_deflate.c>
#The following line is enough for .js and .css
AddOutputFilter DEFLATE js css
              #The following line also enables compression by file content type, for the following list of Content-Type:s
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml text/css image/png text/javascript application/javascript
#The following lines are to avoid bugs with some browsers
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>
 

7. Habilitar caché de navegador: En este caso las páginas siguen pesando lo mismo, pero el navegador del usuario sólo descarga los elementos no modificados, por lo que la transferencia de datos disminuye. Para el caso de Apache con mod_headers.c activado:

          #cache 1 semana         
          <IfModule mod_headers.c>
<FilesMatch “\.(ico|gif|jpg|jpeg|png|flv|pdf|flv|swf|css)$”>
Header set Cache-Control “public, max-age=604800”
</FilesMatch>
</IfModule>
 
 

Si te ha gustado este artículo ¡¡Compártelo!!

Si te ha gustado este artículo dale a me gusta!!

 

Subir