28
Mar 2013

Optimizar nuestros
sitios web

 

En el desarrollo web, además de cuidar que las páginas que creamos se vean bien en la mayoría de los dispositivos y que la interfaz sea agradable y fácil de explorar para los visitantes, también se debe tener en cuenta el tiempo que toma cargar todos los elementos de nuesto sitio. Anteriormente hemos mencionado que es importante optimizar el rendimiento de las páginas que creamos, ahora toca turno de explorar algunas técnicas y consejos para hacer esto posible, esperando que les sea útil.

optimizar

¿Por qué es importante preocuparse por el rendimiento?

El tiempo y el beneficio son los factores a considerar, un sitio lento causara que la persona que nos visite se frustre o canse de esperar, si el tiempo de espera es demasiado largo es posible que opte por abandonar el sitio e ir a otra fuente para obtener la información o el servicio que buscaba. Nadie quiere esperer mucho por obtener algo en Internet, se buscan respuestas y soluciones rápidas.

En el caso del beneficio, podemos mencionar el posicionamiento de nuestro sitio entre uno de ellos. Actualmente los motores de búsqueda (Bing, Google, Yahoo!, etc. ) toman en cuenta la velocidad de carga de un sitio para ordenar los sitios por relevancia, mientras mejor sea el rendimiento, más posibilidades tienes de estar entre los primeros resultados.

Otro beneficio es el ahorro en el consumo de ancho de banda, tanto para tus visitantes como para ti como prestador del servicio. Por ejemplo, si posees un plan de hosting donde tienes cierta cantidad de transferencia permitida al mes, una página de menor tamaño te permitirá un mayor número de visitas. Si estas razones no son suficientes para convencerte, mejor veamos cuáles son algunas maneras de mejorar el rendimiento y su sencillez quizás te ayude a reconsiderarlo.

Imágenes

Son nuestro principal apoyo visual en el contenido, al utilizarlas debemos mantener un balance entre su peso y calidad.

Optimizar imágenes: los archivos de imagen contienen información que no es útil para los navegadores, por lo tanto está de más tenerlos ya que no se les dará ningún uso (fecha, modelo de camara, información de colores, thumbnails). Existen herramientas que nos permiten extraer esa información  y dejar solo lo útil de la imagen, como Kraken y TynyPNG.

DATA URI: si tenemos imágenes sencillas que serán usadas una o dos veces dentro del sitio, podemos incluirlas dentro del HTML o CSS en forma de texto codificandolas en base64, esto nos permite ahorrar peticiones al servidor.  Normalmente agregamos una imagen de la siguiente manera:

.perfil{ background-image: url ('fondo-oscuro.jpg'); }

Aplicando DATA URI quedaría de forma siguiente:

.perfil{ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII%3D');
}

El inconveniente con este método es que no puede usarse con imágenes muy grandes o con contenido complejo, ya que eso incrementa el tamaño de los caracteres para representarla, lo cual aumenta el tamaño de nuestro documento, en ocasiones resultando con un tamaño mayor que el de la imagen original. Una herramienta para hacer la conversión a base64 puede encontrarse aquí.

Uso de sprites: en un post anterior (Sprites con CSS) se mencionó cómo implementar CSS y un mosaico de imagenes para reducir el número de peticiones a nuestro servidor.

No escalar imágenes: a pesar de que podemos modificar el tamaño de una imagen por sus propiedades width y heigth, no es recomendable hacerlo ya que solo cambiamos sus dimensiones, pero la información de la misma sigue intacta. Por lo cual una imagen de 900 x 800, escalada a 450 x 400 para verla en móviles, resultará en hacer una petición desde un móvil igual a la que se haría desde una computadora de escritorio, cuando podríamos tener dos versiones de la imagen con diferentes dimensiones y tamaño de archivo y ahorrar un 50% de ancho de banda en móviles.

CSS

Dependiendo del tamaño y elementos en nuestro sitio, nuestras hojas de estilo pueden resultar en archivos ligeros como también pueden resultar en una serie de archivos realmente grandes. Algunas recomendaciones:

Minificar archivos: consiste en remover todos los espacios, comentarios y demás elementos que le dan legibilidad a el código.

.centro{width:960px;magin:0 auto;}.inicio{margin:100px;position:relative}//Minificado
.centro{

width:960px;

magin:0 auto;

}

.inicio{

margin:100px;

position:relative

}

Quizás como desarrollador sea más sencillo trabajar sobre el segundo ejemplo, pero para los navegadores ambas versiones son iguales, con la diferencia de que la segunda tiene mayor tamaño debido a los espacios en blanco que contenga.

Uso de preprocesadores:  son herramientas que nos permiten trabajar dos archivos simultáneamente, una versión extendida, comentada y legible de la cual se deriva nuestro archivo minificado para tener en el servidor. Aunque requieren de utilizar otros lenguajes para utilizarlas, como SASS y LESS, estos son relativamente sencillos de aprender, si ya se esta familiarizado con CSS y un poco de programación solo tomará minutos entenderlo y aplicarlo. Compass es un preprocesador recomendable, requiere usar la línea de comando, pero si no se es muy hábil ahí, puedes utilizar Scout el cual es una aplicación gráfica que nos permite usar Compass con tan solo un par de clics.

Combinar hojas de estilo: recuerden, lo importante es reducir el número de peticiones que hacemos al servidor. Si se tienen varios archivos para dar estilo a nuestro sitio, combinenlos en uno solo. Si por alguna razón no es posible hacerlo, tengan en cuenta lo siguiente.

Evitar el uso de “@import”: podemos agregar una hoja de estilo desde nuestro archivo HTML con la etiqueta “<link>” o bien desde nuestra hoja de estilo hacer referencia a otra por medio del comando “@import”, pero al hacer esto se bloquea el archivo desde donde se este invocando hasta que el archivo importado sea cargado completamente. Este pequeño bloqueo puede dar la sensación de que el sitio se carga lentamente.

Javascript

Javascript nos permite obtener mucha información de la estructura y elementos del sitio, además de manipular algunas propiedades de los objetos para hacer una página más dinámica. Las recomendaciones aquí son principalmente de lógica.

Minificar archivos: al igual que CSS es recomendable minificar los scripts por las mismas razones.

Cargar scripts de manera asíncrona: los scripts de terceros que generalmente se usan para cargar ciertas funciones para nuestras páginas y agregar botones de redes sociales, causan un bloqueo en la carga del contenido por lo cual los demás elementos no se despliegan hasta tener listo el script. Esto se puede evitar forzando a todos los scripts a cargar en segundo plano con el siguiente código:

(function() {
var script,
scripts = document.getElementsByTagName('script')[0];
function load(url) {
script = document.createElement('script');
script.async = true;
script.src = url;
scripts.parentNode.insertBefore(script, scripts);
}
load('//apis.google.com/js/plusone.js');
load('//platform.twitter.com/widgets.js');
load('//s.widgetsite.com/widget.js');
}());

En la función “load” podemos indicar los scripts que queremos se carguen de manera asíncrona.
Almacenar valores del DOM en variables: siempre que trabajemos con propiedades de los elementos de nuestro sitio, debemos almacenarlos en variables y usar estas para realizar las operaciones que tengamos en mente.

var arr = new Array(100),
long, i;

for (i = 0; i &lt; arr.length; i++) {
// Aquí se calcula la longitude del array en cada iteración
}

for (i = 0, long = arr.length; i &lt; long; i++) {
// Almacenamos la longitude en una variable, solo se calcula una vez
}

Se debe ser cuidadoso al manipular el DOM ya que pequeños detalles como este ejemplo pueden hacer que nuestro navegador trabaje de más.

Usar JQuery solo cuando sea necesario: a pesar de ser una librería que nos permite acceder y manipular elementos de manera sencilla, en ocasiones no es la mejor opción aplicarlo para trabajar la lógica de funciones. Para estos casos es mejor utilizar las propiedades que nos da Javascript nativamente ya que son más rápidas que JQuery.

Usa las librerías más recientes: así se trate de JQuery u otra, lo mejor es utilizar la versión mas actual, quizás una versión anterior sirva para el mismo fin, pero las más recientes siempre estan optimizadas para mejorar el rendimiento.

HTML

Dentro de nuestro archivo HTML es importante como organizar la estructura para optimizar la carga de elementos.
Evita definir estilos y scripts dentro del HTML: podemos agregarlos dentro de etiquetas “style” o “script”, o incluso dentro de las propiedades de otras etiquetas, pero esto incrementa el peso del archivo HTML y además darle mantenimiento se volverá tedioso con el crecimiento o un futuro rediseño, lo cual en ocasiones no compensa el hecho de ahorrar peticiones al servidor.Lo mejor es agregar los estilos y scripts desde un medio externo.

Colocar estilos al inicio y scripts al final: colocar los estilos en el head de la estructura del documento permite que nuestro sitio cargue de manera progresiva, es decir, primero cargara los estilos y seguidamente los elementos del sitio, por lo cual los segundos ya contaran con el diseño que estemos aplicando.

Los scripts por el contrario, deben ir hasta el fondo del documento, antes de cerrar la etiqueta “body”, de esa manera no bloquearan la carga de otros elementos.

&lt;!doctype html&gt;

<meta charset="UTF-8" />

    <link href="estilo.css" rel="stylesheet" />

<!--Estilo al inicio-->
<script type="text/javascript" src="script.js" async=""></script><!--Script al final-->

Si notaron, al agregar el script, se utiliza la palabra “async” dentro de la etiqueta, esto permite que el navegador no espere la carga del archivo ayudando a que el sitio se despliegue de manera rápida.

Nuestro servidor

Para que todo nuestro esfuerzo por reducir los tamaños de archivos sea aún mejor, agregar algunas configuraciones a nuestro servidor nos permite incrementar la optimización .

Habilita el cache: la mejor manera de ahorrar peticiones al servidor, es no solicitar archivos, si permitimos que los visitantes almacenen contenido de nuestro sitio en sus equipos de manera local, en cada visita ya no será necesario volver a pedir nuestras imágenes, hojas de estilo o scripts nuevamente porque ya se poseen en el dispositivo. Una forma de habilitar esta opción muy comun es por medio de un archivo llamado “.htaccess”, el cual colocamos en la carpeta raíz de nuestro sitio y colocamos lo siguiente:

ExpiresActive on

# Perhaps better to whitelist expires rules? Perhaps.
ExpiresDefault "access plus 1 month"

# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
ExpiresByType text/cache-manifest "access plus 0 seconds"

# Your document html
ExpiresByType text/html "access plus 0 seconds"

# Data
ExpiresByType text/xml "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType application/json "access plus 0 seconds"

# Feed
ExpiresByType application/rss+xml "access plus 1 hour"
ExpiresByType application/atom+xml "access plus 1 hour"

# Favicon (cannot be renamed)
ExpiresByType image/x-icon "access plus 1 week"

# Media: images, video, audio
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"

# HTC files (css3pie)
ExpiresByType text/x-component "access plus 1 month"

# Webfonts
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"

# CSS and JavaScript
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"

En lo anterior podemos definir el tiempo que serán validos los archivos,después de ese tiempo serán descargados del servidor nuevamente.

Habilitar compresión: dentro de nuestro archivo “.htaccess” también podemos indicarle a nuestro servidor que al enviar archivos al navegador, se compriman, de esa forma se reduce su tamaño y la información a descargar es menor. Los navegadoras automaticamente hacen el proceso de descompresión al recibirlos. El siguiente código habilita la compresión con gzip:

# ----------------------------------------------------------------------
# Gzip compression
# ----------------------------------------------------------------------

&nbsp;

# Force deflate for mangled headers developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/

SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)s*,?s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
# Compress all output labeled with one of the following MIME-types

AddOutputFilterByType DEFLATE application/atom+xml
application/javascript
application/json
application/rss+xml
application/vnd.ms-fontobject
application/x-font-ttf
application/xhtml+xml
application/xml
font/opentype
image/svg+xml
image/x-icon
text/css
text/html
text/plain
text/x-component
text/xml

Los anteriores métodos son en servidores Apache, y afortunadamente la mayoría de ellos funcionan sobre esta plataforma.

Los dejamos con estas recomendaciones para que en caso de no conocer algunas se den un tiempo para probarlas, especialmente recomiendo los preprocesadores ya que permiten agilizar el flujo de trabajo y organizar mejor nuestro código, y habilitar el cache y compresión en el servidor. ¿Conocen otras técnicas o herramientas? Si es así, diganos en los comentarios para anexarlas a la lista.

Por: Arturo Tadeo / Diseño web

Comments are closed.

DOTTO