• Nosotros
    • Lo que hacemos
    • ¿Por qué Braintive?
    • UCS 2.0
    • Blog
    • Contacto
← 10 reglas heurísticas de usabilidad de Jakob Nielsen
Daño colateral – La Guerra de los Browsers. →

10 tips para chipear tu sitio web

Publicado el 5 de julio, 2011 por Fernando Finelli

La optimización de las páginas web es un tema que viene desde hace muchos años dando vueltas y no es nada novedoso, la obsesión por hacer que el sitio cargue cada vez más rápido va a traer un retorno tarde o temprano llamado “visitas” y “posicionamiento” en los buscadores.

La lentitud de la carga de la página web está básicamente relacionada con el peso o tamaño del html, imágenes, javascript y los diferentes objetos que se carguen, la idea principal es optimizarlo lo más que se pueda y disminuir la cantidad de peticiones que se hacen desde el navegador hacia el servidor, así como también el peso general de todo el contenido.

Existen muchas herramientas que ayudan a medir los tiempos y dan diferentes recomendaciones para poder mejorarlos eficientemente, un ejemplo es el Page Speed creado por Google que tiene una serie de extensiones para FireFox y Chrome, también posee una versión online.

Algunas cosas que deben tomarse en cuenta para optimizar las páginas son:

1. Implementar CSS Sprites, que consiste en generar una única imagen a partir de varias imágenes que se visualizan en una página y luego por medio de estilos mover parte de la imagen que se desea mostrar. Con esta técnica se reduce la cantidad de peticiones que se realiza hacia el servidor ya que únicamente se necesita una sola imagen.

2. Especificar las dimensiones de cada imagen, por medio de los atributos width y height de la etiqueta IMG.

3. Disminuir el tamaño de las imágenes lo más que se puede, tratando de no perder mucha calidad. Existen aplicaciones que optimizan las imágenes para que sean visualizadas via web.

3. Habilitar compresión gzip sobre el contenido estático, imágenes, archivo de estilos css, js, etc. El ahorro del tamaño de cada archivo es muy grande, se comprime alrededor de un 70%, dependiendo las configuraciones que se establezcan dentro del web server.

4. Utilizar paralización en la carga de imágenes, si todas las imágenes se encuentran en un único dominio, el browser va a ir encolando cada petición hasta cargar todas, en cambio sí se utilizan varios dominios el browser las solicita de forma paralela desde cada dominio img1.sitio.com, img2.sitio.com, etc. Se puede utilizar servicios externos para alojar las imágenes, por ejemplo Akamai.

5. Reducir el tamaño del archivo de estilos css y los archivos JavaScript, eliminar el código que no sea utilizado. Eliminar espacios, tabulaciones, comentarios, tamaño de variables, enters, etc., para que el archivo pese lo menos posible. Existen aplicaciones que ayudan a comprimir el contenido.

6. Habilitar el cache dentro de los dominios que sirven contenido estático (imágenes, css, javascript, etc).

7. Brindar el contenido estático desde dominios con cookies deshabilitadas, para reducir el tamaño de cada solicitud al servidor.

8. Verificar el html, primero que nada debe cumplir con las validaciones de la W3C, todo el código debe ser estandard. No abusar del uso de etiquetas que puedan ser reemplazadas por otras o por un manejo dentro de los estilos, evitar utilizar tabulaciones, contenido en mayúscula, tratar de poner todo en una sola línea. Todo lo que pueda sumar para reducir el tamaño general del html.

9. No abusar de la utilización de librerías de jQuery, no incluir archivos js que no son utilizados o únicamente se utilizan pocas funcionalidad, a veces es mejor desarrollar nuestras propias funciones y no incluir un GRAN archivo que contiene demasiadas cosas que  no son utilizadas.

10. Poner la inclusión de los archivos javascript al final?, esto es algo que realmente me genera ruido, aunque es una sugerencia que ya anda dando vueltas hace bastante, la idea es evitar el bloqueo de las solicitudes, al colocarlo al final se puede descomprimir un poco la carga. También se esta hablando mucho de “Deferred Javascript”, la carga diferida permite descargar scripts después que la página se ha cargado, lo que reduce las solicitudes de vuelta en la red con el servidor, para esto les dejo un link para que se entretengan un poco.

Un dato importante es que el tiempo promedio de carga en la web es de aproximadamente 2.5 segundos, siempre intentemos estar por debajo de ese número.

      Dejar un comentario o suscribirte al feed.
  • Imprimir
  • Correo electrónico

Acerca de Fernando Finelli

Fernando es un profesional y fanático de la tecnología, con más de 15 años de carrera en IT, basó la misma en el desarrollo de aplicaciones sobre Internet. Lideró proyectos tecnológicos en empresas que marcaron el rumbo de internet en Latinoamérica, pasando por famosos portales de internet como ElSitio.com donde conoció a Alfredo y también sitios líderes de Ecommerce de Argentina. Toda su experiencia, compromiso y fanatismo por la tecnología ha decidido volcarla al emprender junto a Alfredo en Braintive.
Ver todas las entradas de Fernando Finelli →
Esta entrada fue publicada en Diseño web, SEO, Sin categoría y etiquetada como optimización, performance, SEO. Guarda el enlace permanente.
← 10 reglas heurísticas de usabilidad de Jakob Nielsen
Daño colateral – La Guerra de los Browsers. →

6 respuestas a 10 tips para chipear tu sitio web

  1. Nicolas Trillo dice:
    24 de julio, 2011 a las 11:36

    Excelente nota, Ademas de que una pagina mas rápida, genera que perdamos menos usuarios, a los ojos de google una pagina mas rápida es mas relevante que una mas lenta. Por eso Optimizar la velocidad es fundamental.

    Responder
  2. Covi dice:
    15 de febrero, 2012 a las 01:14

    6. Deshabilitar el cache dentro de los dominios que únicamente sirven contenido estático (imágenes, css, javascript, etc).

    oO?, al contrario, no?

    Responder
    • Fernando dice:
      24 de febrero, 2012 a las 11:14

      Gracias Covi, si fué un error al redactar. Efectivamente se debe habilitar el cache en el contenido estático, ya que si no cambia habitualmente nos beneficia que sea cacheado por el browser. Hay que recordar colocar una fecha de expiración, por las dudas.

      Responder

Deja un comentario Cancelar respuesta

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

*

*


+ ocho = 17

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Notificarme los nuevos comentarios por correo electrónico. Tambien puedes suscribirte sin comentar.

  • Buscar en este blog

  • Notas recientes

    • Facebook Challenge Buenos Aires, unite al desafío
    • Social Commerce con CM Commerce
    • Landing page
    • ¡Expusimos como finalistas en OpenApp!
    • ¡Nueva versión de CM Commerce!
  • Etiquetas

    accesibilidad analytics bluetooth buscadores caso de éxito CEP cmcommerce dispositivos ebook experimento facebook infraestructura ipad kindle linux mobile optimización performance qr seguridad SEO social commerce social media tienda social tips ucs 2.0 usabilidad valor agregado web 2.0
  • Categorías

    • Casos de éxito (7)
    • Diseño web (8)
    • Linux (1)
    • Negocios (3)
    • Programación (3)
    • Seguridad (1)
    • SEO (6)
    • Sin categoría (6)
    • Social (4)
    • Telefonía IP (2)
    • Tutoriales (1)
  • Comentarios recientes

    • friv100 en 10 reglas heurísticas de usabilidad de Jakob Nielsen
    • Mejorar las conversiones en un sitio web con Google WO | Braintive en Conversiones en formularios de registración
    • Campañas de contacto masivo: ¿teléfono, sms o email? | Braintive en Caso de éxito: Numeral8
    • Tu tienda social en Facebook (CMCommerce) | Braintive en ¿Debería una empresa tener presencia en Facebook?
    • Alfredo Fabretti en ¡Nueva versión de CM Commerce!
  • Sitios de interés

    • Braintive
    • Braintive en Facebook
    • Elianna
    • Veemvox
  • RSS Suscribite al Blog por RSS

Seguinos en Twitter y suscribiendote a nuestro weblog's feed.
Nosotros
Lo que hacemos
Razones
UCS 2.0
Contacto
Prensa
Elianna
Clientes
Blog
Historia
Fotos
Envia tu CV
Terminos
Sitemap
Get Connected   
All text and design is copyright ©2010 Braintive. All rights reserved.
loading Cancelar
El artículo no se ha enviado - ¡comprueba tu dirección de correo!
Error en la comprobación de email. Por favor, vuelve a intentarlo
Lo sentimos, tu blog no puede compartir entradas por correo electrónico.
loading Cancelar
El artículo no se ha enviado - ¡comprueba tu dirección de correo!
Error en la comprobación de email. Por favor, vuelve a intentarlo
Lo sentimos, tu blog no puede compartir entradas por correo electrónico.