Desarrollo web

7 formas sencillas de optimizar una web

mejorar-carga-de-web

¿Quieres saber como optimizar una web en sencillos pasos?

Cada vez creamos sitios web más exigentes, con más activos.

Ahora más que nunca tenemos que hacer que nuestros sitios sean rapidísimos en el escritorio y en el móvil.

Afortunadamente, hay algunos pasos sencillos que podemos dar para conseguirlo…

1) Optimizar las imágenes

Esto puede parecer obvio, pero es sorprendente la cantidad de gente que no optimiza sus imágenes.

Es más, hay una gran diferencia entre utilizar una imagen de tamaño medio, y una imagen totalmente optimizada.

La optimización de imágenes no sólo reduce el tamaño de la imagen, sino que elimina ciertos metadatos extraños, como cuándo se creó la imagen, qué cámara la tomó, etc.

Hay muchas herramientas que pueden hacer esto por ti, como JPEGmini, Yahoo! Smush.it e ImageOptim.

2) Activar la compresión Gzip

Sólo con activar la compresión Gzip puedes ahorrar hasta un 50% en el tiempo de carga. Todos sabemos que cuando comprimimos los archivos en nuestra máquina local estos se hacen más pequeños y eso es exactamente lo que hace Gzip, comprime sus archivos antes de enviarlos al navegador, lo que significa que el navegador tiene menos que cargar y renderizará la página web mucho más rápido que cuando no se utiliza la compresión Gzip.

La mayoría de los sitios web hoy en día tienen esto activado debido a sus grandes archivos y activarlo no es realmente tan difícil.

Primero necesitas encontrar el archivo .htaccess de tu sitio web y asumiendo que tu servidor está corriendo en Apache sólo pega esto en el archivo:

# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

Esta pequeña cantidad de código mejorará en gran medida el rendimiento de su sitio.

3) Minificar tus archivos

Gracias a herramientas como Codekit, Prepos y herramientas CLI como Grunt esto es cada vez más común, pero sigue siendo algo que debes recordar hacer cuando termines tu proyecto.

4) Concatena todo tu CSS y JavaScript

Si estás usando plugins, frameworks o cualquier cosa externa a tu sitio web lo más probable es que tengas más de uno o dos archivos de JavaScript y CSS. Eso significa que el navegador tendrá que obtener esos dos archivos, lo cual es un desperdicio, ya que puedes concatenar todos los archivos CSS en un archivo y todos los archivos JavaScript en otro, de esta manera te aseguras de no desperdiciar peticiones HTTP.

Este proceso es incluso indoloro utilizando herramientas como Gulp o Grunt para hacer todo el trabajo pesado por ti.

5) Utilizar sprites

Una cosa que utiliza un gran número de peticiones HTTP desperdiciadas son las imágenes, a veces tienes docenas de imágenes para una página que resulta en docenas de peticiones HTTP. Podrías simplemente convertirlas en una simple hoja de sprites y sólo cargarla una vez, luego sólo cambiar la posición del fondo CSS en cada elemento para mostrar la imagen correcta.

También hay herramientas que te ayudan a crear estos sprites como CSS Sprite Generator y Stitches

6) Utiliza una red de distribución de contenidos (CDN)

Los principales sitios web siempre tienen sus archivos estáticos, como las imágenes o el texto, en CDNs porque hace que sus sitios web carguen los archivos más rápidamente.

Incluso si su sitio web no es lo suficientemente grande para esto, debería cargar CSS y JavaScript externos desde CDNs siempre que sea posible.

Si, por ejemplo, utiliza Bootstrap o jQuery, puede obtener ambos archivos de CDNs en lugar de alojarlos usted mismo.

7) Utilizar la caché

Si un archivo se ha descargado, ¿por qué volver a descargarlo?

La configuración de la caché es algo similar a la configuración de la compresión Gzip, todo sucede en el archivo .htaccess y todo lo que necesitas es:

<ifModule mod_headers.c>
ExpiresActive On

# Expires after 2 Weeks
<filesMatch ".(gif|png|jpg|jpeg|txt)$">
Header set Cache-Control "max-age=1209600"
</filesMatch>

# Expires after 1 day
<filesMatch ".(css|js)$">
Header set Cache-Control "max-age=86400"
</filesMatch>
</ifModule>

Usando mod_headers puedes establecer el tipo de archivos y el tiempo que quieres que sean utilizables en segundos.

Conclusión

La optimización del sitio web es muy importante y siguiendo estos pasos se asegurará de que su sitio web se entregue lo más rápido posible, ya sea a través de wifi o 4G.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *