Browser Diet, pon a dieta tu página web

  • Por
Consejos para mejorar la carga de la página web, reduciendo el peso en bytes del sitio, mejorando la configuración del servidor y el rendimiento front-end.
05/12/2013 - Esta semana hemos publicado un interesante artículo sobre qué podemos hacer para mejorar la experiencia de usuario en sitios Responsive Web Design, para evitar el efecto indeseable de las "páginas obesas".

El artículo se titulaba Mejorar la experiencia de usuario en sitios Responsive y centraba sus consejos en relación a las webs "Responsive" (adaptables a todos los tipos de usuarios y sistemas, tanto de escritorio como dispositivos), pero lo cierto es que los consejos de optimización son siempre útiles para cualquier tipo de sitio que podamos crear.

Uno de los motivos por los que es fundamental la optimización es porque Google posiciona mejor a las webs más rápidas en cargar, pero es que además se afirma que aproximadamente el 60% de tus usuarios abandonarán tu página si tarda más de 5 segundos en cargar.

Hoy queremos compartir un sitio web llamado Browser Diet http://browserdiet.com/es/ que es uno de los recursos que más nos gusta cuando queremos obtener consejos prácticos sobre cómo mejorar el rendimiento de una web. Se trata de un compendio de recomendaciones sobre diferentes asuntos, recogido por una serie de expertos que trabajan en algunas las empresas más relevantes de Internet.

La página está perfectamente traducida al español y es muy fácil de entender. Algunos de los consejos son más fáciles de entender, otros menos, así como de implementar, pero en general so siempre recomendaciones altamente relevantes que pueden hacer siempre beneficio a nuestros sitios.

Como podréis encontrar, los items que destacan en esta guía están clasificados en diversos apartados como son HTML, CSS, Javascript, imágenes, y hasta algunos en librerías populares que a día de hoy se han vuelto prácticamente un estándar en el mundo Web, como jQuery. También nos ofrecen algunas recomendaciones sobre cómo configurar mejor los servidores, de modo que se aprovechen algunas de las características que hacen que se ahorre ancho de banda al transferir la página a los clientes.

Por poner algunos ejemplos rápidos, nos recomendarán evitar el código en línea, de tanto scripts como CSS, colocar los elementos de la página en los lugares correctos, evitar repetir los estilos, combinar varios archivos en uno, usar sprites css con imágenes del sitio, cargar asíncronamente contenidos de terceros, cómo evitar Javascripts pesados que ocupen más tiempo de procesamiento, minimizar archivos, combinarlos para reducir el número de solicitudes al servidor, aprovechar las cachés de los navegadores, usar imágenes optimizadas por diversos medios y ajustadas a las necesidades de cada cliente, gzipear, usar herramientas para diagnosticar posibles problemas de tu sitio, etc, etc.

Lo bueno es que no se limitan a enumerar los consejos, sino que también nos ofrecen ejemplos y referencias donde podemos aprender a implementar en nuestra web estas buenas prácticas. Merece la pena un estudio detallado.

Tanto si tienes una web que quieres mejorar un poco, como si tienes nuevos proyectos que deseas que salgan mejor que los anteriores, te interesa ponerte manos a la obra para intentar aplicar algunas de estas ideas que Browser Diet http://browserdiet.com/es/ nos ha puesto a la disposición de todos nosotros.