Tips para optimizar el desempeño de tu website

Aquí les propongo 8 tips para optimizar tu sitio web o de tus clientes. Esto, por que hoy día, veo como cada vez más dependemos de los IDE para la creación de sitios web y nos hemos olvidado de lo básico, conocer el lenguaje. No solo pasa con HTML y CSS, pasa con cualquier lenguaje informático. En nuestro caso, la web, es muy frecuente ver sitio web muy bien desarrollados visualemnte; pero con un desempeño muy pobre y ni hablar del código; un deshorden total.

Google Page Speed, Woorank y grader.com te pueden ayudar a identificar el desempeño de tu sitio web

1) Optimiza las imágenes para la web

Hoy día la incidencia de “Retina Display” afecta la forma que en preparamos las imágenes que utilizamos en nuestras webs. Sin embargo, es importante saber cuando utilizar “Retina images” o no.

Sin importar la profundidad de la imágen la web todavía renderiza a 72 dpi (72 puntos por pulgada cuadrada). Una manera de optimizar tus imagenes es con Adobe Photoshop® – la versión CSS2 es gratuita y disponible para descarga desde la web de Adobe – u otra herramienta de edición de fotos o algún sitio web de muchos que existen para los fines, ej. JPEGmini, Yahoo Smush.it, ImageOptim, etc.

Optimizar las imágenes no solo aumenta la velocida de carga, sino que también elimina la meta-data innecesaria de las imágenes como la fecha de creacióm, el model ode la cámara, etc.

2) Utilizar compresión Gzip

Con el mero hecho de activar el módulo de compresión Gzip en el servidor puede aumentar la velocidad de carga en 50%, es decir, la mitad de tiempo de carga que si no la tienes activada.

Cada servidor tiene su propio método de activar la compresión Gzip, estos links pueden ayudarte según tu servidor web (IIS, Apache, Nginx, etc): Google es Simple, Activar Gzip para wordpress

3) Reducir o compactar tus archivos

HTML, Javascript y CSS pueden ser compactados a su mínima expresión, es decir eliminar saltos de línea, espacios innecesarios, etc. Por lo general durante la face de sesarrollo de un sitio web debemos mantener nuestros archivos claros para programar; pero una vez en producción es recomendable compactar los archivos para reducir el tiempo de carga.

Existen herramientas que pueden ayudar a comprimir tus archivos, estos son algunos disponibles en la web: http://www.minifyjavascript.com/, http://gpbmike.github.io/refresh-sf/

4) Unificar archivos externos

Cuando desarrollamos utilizamos plugins, librerias externas entre otras cosas junto con nuestro propio código. Unificar todo este código en no más de tres archivos, dos preferiblemente (librerias e implementación), puede ayudar a optimizar la carga de tu website de 25% a 33%. Gulp o Grunt pueden ayudarte con este proceso.

5) Sriptes, Sprites, Sprites

CSS juega hoy un papel muy importante en la experiencia del usuario gracias a CSS3. Podemos hacer transiciones, effectos, eventos, incluso calcular: “calc(33% -20px)” – para calcular el 33% de tu viewport menos 20px de padding o margin aplicado. Sin embargo, cuando se trata de iconos recurrentes, botones, etc y no aprovechamos la capacidad de implementar sprites con css.

Los sprites son una única imágen que contiene todos lo elementos recurrentes visuales de nuestro sitio, de esta forma reducimos la cantidad de llamados a archivos por cada elemento definido a un solo llamado y con la ayuda de CSS identificamos las coordenadas que queremos utilizar.

SpriteCow es unservicio que genera el código css de nuestro sprite de forma sencilla. Agilizando el proceso para programadores con experiencia y una herramienta de bolsillo para no programadores.

6) Utilizar CDN (Content Delivery Network)

Github, Bootstrap, JQuery y muchas otras librerias y componentes permiten la carga o llamado directo desde el sitio web del autor, esto una especie de CDN que podemos utilizar en nuestros proyectos en lugar de hostearlos en el mismo server de nuestro proyecto o página web. Esto reduce los llmados al mismo host por ende reduce el tiemp de carga ya que se pueden cargar recursos de diferentes host al mismo tiempo, a diferencia del un sólo, pues los archivos con cargados en secuencia.

Una alternativa que utilizo con algunos proyectos es crear mi propio CDN virtual. Esto se hace creando varios subdominios (cdn1.dominio.com, cdn2.dominio.com, cdn3.dominio.com) que apunten el mismo folder o carpeta(/root/img) del server donde estarán los recursos como imágenes y archivos .js o .css. Y con ayuda de programación podemos definir este CDN vía htaccess, vía php o el lenguaje que utilices.

7) Usar Caché

El empleo de meta expire headers es muy subestimada, es recomendable hacerlo, ahora, para elementos que no cambian y que vamos a utilizar durante toda la vida de nuestra web como elementos visuales botones, icons, etc. ¿Por qué cargarlos una y otra vez?

Con la ayuda de .htaccess podemos definir Cache-Control para ciertos elementos en apache u cualqueir web server que soporte instrucciones de cabecera vía .htaccess, por ejemplo:

<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>

8) SEO (Search Engine Optimization)

La optimización para buscadores no solo, es buena para marketing, ayuda a que nuestro sitio sea renderizado más facilmente vía el DOM por los navegadores al reconocer una estructura ordenada. Por ejemplo, usar solo una etiqueta H1 por fichero, emplear listas, minimizar el uso de tablas, organizar correctamente las etiquetas, entre otras técnicas SEO ayudan a que tu sitio sea más fácil de interpretar por los navegadores por lo que de esta forma reduce el tiempo de carga lógico.