Tips para optimizar el desempeño de tu website (Parte 2)

Continuando con el artículo anterior, he traído la segunda parte de los tips que pueden ayudar a un mejor desempeño de tu website personal o corporativo. En esta segunda parte veremos los aspectos un poco más ténicos, por lo que para esto, es requerido cierto conocimiento de html y css; y de algún editor de imágenes.

9. No escalar imagenes

Las imágenes si no se balancean a 72dpi de profundidad, las mismas tienden a tener un peso (tamaño de archivo) por encima de lo necesario para la web. La mayoría de las fotos de galerías y tomadas desde cámaras o celulares tienen un dpi de 150 a 300. esto hace que la foto pese mucho más. Bajando el dpi (dots per inch) de la foto por medio de un editor de imagenes o algun software similar, incluso existen webs que hacen el trabajo online.

10. Evita declarar tag de imágenes con fuente en blanco (<img src=”>)

HTML: <img src=””> o Javascript: var img = new Image(); img.src = “”;

Ambas formas tienen el mismo efecto: el navergador realiza un llamado al server:

En Internet Explorer: hace un llamado al directorio donde se localiza la página desplegada
En Safari, Chrome y en Firefox <= 3.0: hace un llamado a la misma página que contiene la declaración
En Opera no se realiza ningan acción por parte del navegador

11. Evita los Filtros en CSS

Los filtros en CSS son funciones que se ejecutan directamente en el stylesheet. Muchos navegadores aún no interpretan estas funciones por lo que tienden a cargar las páginas, y más aun, cuando el mismo CSS es cargado por varias páginas.

12. Evita usar @import para CSS

Importar archivos css puede parecer útil is lo vemos desde le punto de vista de escalamiento. Sin embargo, a pesar de que la propiedad existe, te recomiento no usarlo. Emplea link para conectar tus archivos de estilo o css a tus ficheros. Recuerda que mientras menos css independientes mejor; tambien recuerda en producción simplificar tus archivos css (sin espacios ni lineas sueltas por ahí) para que tu web sea más rápida al momento de carga.

13. Utiliza clases y no ids para aplicar estilos (CSS)

La propiedad id de los nodos o elementos puede ser muy bueno para categorizar y para AJAX. Sin embargo, para asignar atributos CSS no te lo recomiendo, trata siempre de usar clases para asignar stilos.

14. Minimiza el uso de Iframes

Pros:
Ayuda con el contenido de terceros si estos son lentos
Funcionan como trampa de arena (sandbox) de seguridad
Permite la carga en paralelo (propio + tercero a la misma vez)

Cons:
Alto consumno de memoria y procesamiento aunque esten en blanco o error de fuente
Bloquea el evento page onload

15. Utiliza JavaScript y CSS de forma externa

Siempre que no sea necesario, utiliza los javascript y css desde archivos externos enlazados por referencia en tu fichero html. Es decir, evita el inline style y el javascript embedido. Esta facilita el escalamiento de tus proyectos, el mantenimiento,  entre otras cosas.

16. Coloca el llamado a Javascript al final del fichero

Es costumbre llamar los archivos esternos de javascript en la cabecera de los ficheros html. Esta práctica tiende a simular mucho peso de tu fichero y para visualizar el contenido el navegador no solo necesita cargar el fichero en sí, sino que tiene que esperar que cargue tus archivos externos para desplegar el contenido. Esto puede hacer tu sitio lento y que tus visitantes no alcancen la barrera de los 6 segundos y cancelen la carga de la página o bien salgan de ella. Coloca tus llamadas a archivos esternos javascript justo antes del cierre del tag </body>, asi ayudas a optimizar tu sitio.

17. Coloca los Stylesheets (CSS) al principio (cabecera) del fichero

A diferencia de los ficheros javascript externos, los archivos CSS deben ir al principio de tu fichero html. Esto permite que tu sitio web no se vea diferente mientras carga y luego de cargado. Claro, considerando que tu fichero CSS esta optimizado (sin lineas en blanco, ni espacios innecsarios) de forma que cargue lo más rápido posible. Y recuerdo no incluir filtros en el CSS a no ser extraordinariamente necesario.

18. Evita hacer redirects 301 (perm) ó 302 (temp)

Los redirects pueden ser una solución efectiva cuando cambias un contenido por cambio de estructura de tu sitio o por cambio de diseño. Evita los redirects via html meta. Cuando planifiques una actualización de tu sitio, ten en cuenta los cambios de url y utiliza ficheros .htaccess (apache) y web.config en IIS para los redirects. de esta forma le servidor controla los redirects sin necesidad de cargar un fichero y luego otro para ver el conenido. Esto es malo para SEO.