comparte el articulo 

Consejos para mejorar el rendimiento de tu sitio

Actualizado el 22/03/2013 < > 1 Comentario

Resumen: Explicamos algunas de las técnicas más utilizadas para optimizar el rendimiento de un sitio web

Estamos en un momento donde el tiempo de respuesta de los sitios se ha convertido en algo fundamental para obtener y conservar usuarios. Las personas que ingresan a una página web esperan una respuesta casi inmediata, y de obtener lo contrario, el abandono se convierte en una acción inminente.

Este fenómeno se vuelve más común día con día, y es que en la actualidad el usuario es una persona más voluble, cuyo tiempo de espera es muy limitado, ya que esta acostumbrado a trabajar con grandes velocidades de Internet. Atrás quedaron los días, donde las personas que navegaban podían esperar minutos con tal de poder ver correctamente el contenido de un sitio.

Aunado a esto, el hecho de que los dispositivos móviles sean tan importantes en estos días, hace que la velocidad de los sitios web sea un factor determinante para el éxito o fracaso de un sitio. Un sitio que tenga un buen rendimiento, mantendrá a los usuarios conformes. Es por esto, que en este artículo destacaremos las principales formas en que se puede mejorar el rendimiento de un sitio.

Reducir las peticiones HTTP

Uno de los aspectos básicos que debemos tomar en cuenta para mejorar el rendimiento del sitio, es llevar un control de las peticiones que se realizan al servidor de nuestro sitio. Si queremos que las páginas carguen de manera rápida, debemos mantener una cuota baja de viajes entre el navegador y el servidor.

Todos los archivos que utilizamos para que nuestro sitio funcione, necesitan ser descargados por parte del navegador para que el usuario pueda observar correctamente el contenido. Es decir, todos los css, javascript e imágenes que incluimos serán pedidas por el navegador al servidor, para guardarlas temporalmente en el ordenador del usuario.

Si reducimos estas peticiones, reduciremos el tiempo de respuesta en gran manera. Para lograrlo, podemos incluir todas las llamadas a hojas de estilos en un solo documento, igual con los javascripts y otros recursos.

La forma en que realizamos los llamados también influye, por ejemplo, el tiempo de respuesta es mucho mayor si utilizamos “@import” para incluir un CSS en vez de utilizar la etiqueta nativa “link”.

Minimización de archivos

Otra opción relacionada a los recursos es la minimización de archivos. Comúnmente cuando estamos trabajando con el código de un sitio, agregamos varios espacios entre sentencias y saltos de líneas entre elementos, para distinguir cada parte y que nos resulte más sencillo trabajar, esto es totalmente correcto.

Sin embargo, entre más espacios existan, más pesará el archivo y por lo tanto más tardará en ser descargado. Para evitar esto, se puede optar por crear versiones minimizadas de los archivos utilizados para definir los estilos CSS o los scripts de la página.

Si bien estas versiones serán las que llamaremos desde las vistas de nuestras páginas, es recomendable mantener una version con espacios, para poder seguir llevando a cabo el desarrollo de manera fluida y entendible.

Compresión de imágenes

Si bien reducir la cantidad de texto que guardamos en nuestros archivos es de gran ayuda, si queremos realizar un cambio que sea aún más notable en los tiempos de respuesta, debemos optimizar las imágenes que utilizamos en nuestro sitio.

Muchas imágenes que son tomadas con cámaras profesionales o que son editadas con programas de diseño, tienden a guardar muchísima información que no es necesaria para el usuario, pero que sin embargo se incluye en la petición de descarga. Para poder mejorar el rendimiento es necesario remover dicha información y empezar a trabajar con imágenes más ligeras.

Muchas personas se niegan a realizar una compresión de imágenes, porque piensan que esto significa una reducción en la calidad de la imagen en sí, pero la mayor parte del tiempo esto es incorrecto. Las imágenes se pueden comprimir en cierta forma que no afecte la calidad, removiendo perfiles de color innecesarios y comentarios.

Para poder realizar esta tarea se pueden utilizar herramientas como ImageOptim o PNGGauntlet.

Uso de sprites

Otra forma de poder optimizar el uso de imágenes en tu sitio, es utilizando sprites. Un sprite consiste básicamente en una imagen grande donde pongas todos los iconos, botones, banners, entre otras gráficas, y a partir de ahí uses un conjunto de coordenadas para desplegar cada una de estas imágenes en el sitio que le corresponde.

Con esta técnica se hace sólo una petición a servidor, haciendo que las imágenes carguen más rápido y el navegador no tenga que descagar tantos archivos. El lado negativo del manejo de sprites, es que puede ser muy difícil para nosotros crear este tipo de imágenes, pero afortunamente existen una gran variedad de herramientas que nos ayudan a crearlas.

Manejo de caché

Más de la mitad de los usuarios que ingresan a tu sitio lo hacen con el cache vacío, por lo que ofrecer una respuesta rápida es fundamental para mejorar su experiencia.

Tanto el navegador como el servidor permiten el almacenamiento de caché, esto significa que puedan guardar peticiones anteriores. Esto significa que todas imágenes, archivos CSS o JavaScript que se pidieron a servidor, fueron guardadas y como tal se presentan ante el usuario, haciendo que el rendimiento sea mejor.

La aplicación de caché se hace sobre archivos que normalmente no cambian, o que lo hacen cada cierto período. Para manejar este segundo tiepo de archivos, se puede programar un borrado de caché después de que transcurra cierto tiempo.

En el lado servidor, existen varias herramientas que nos permiten llevar un control de caché, entre ellas encontramos a Varnish y Memcache.

Publicado el 12/03/2013, última actualización 22/03/2013.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

Añadir Comentario (Subir al texto)

1 Comentario

  1. Mariano

    Los consejos para mejorar el rendimiento están muy buenos. Pero te olvidaste mencionar la importancia del contenido. Como dices ahora los usuarios buscan respuestas más rápidas por eso para mejorar el contenido se recomienda usar títulos atractivos, dividir el texto en párrafos pequeños y cada uno con un subtitulo.

    Miércoles, 13 de marzo 2013

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras