Como mejorar el rendimiento de nuestro sitio web

website-speed

Son muchos los factores que determinan el rendimiento de nuestro sitio web y es algo que debemos cuidar día a día. Debemos llegar a un punto en el cual la cantidad de información que se encuentra en nuestro web sea mostrado en un tiempo relacionado y que no se tenga a un visitante esperando varios segundos hasta ver la información que necesita y que él sabe que tu la muestras en tus paginas.

Según Steve Souders, reconocido por mejorar el rendimiento del sitio principal de Yahoo, creador de Firebug, encargado de reducir el tiempo de carga de GMail y ahora en el buscador Google, nos indica que existen 14 pasos que debemos tomar en cuenta para mejorar el rendimiento de nuestro sitio web, hay que aclarar que no todos son aplicables pero si logramos aplicar la mayor cantidad posible vamos a ver una mejora considerable.

Al hablar de tiempo de carga de un sitio web estamos considerando que vamos a ver rangos de milisegundos, y que cada uno de ellos son costos que a la final los tenemos que pagar, si reducimos el tiempo de carga, el número de conexiones estamos reduciendo el tiempo que nuestro server se encuentra trabajando y por ende cargando valores a nuestra cuenta con el proveedor que trabajemos.

14 pasos para mejorar el rendimiento de nuestro sitio web:

  • Hacer menos peticiones http
  • Utilizar una CDN
  • Agregar cabeceras con vencimiento
  • Utilizar Gzip
  • Colocar los CSS en la parte superior
  • Colocar los JS en la parte inferior
  • Evitar  expresiones CSS
  • Colocar en un archivo externo JS y CSS
  • Reducir los DNS Lookups
  • Minificar los JS
  • Evitar redireccionamiento
  • Remover los scripts duplicados
  • Configurar ETags
  • Configurar cache para Ajax

Estos pasos en la actualidad se convierten en una norma que debemos considerarla.

Guía práctica de HTML y CSS

Esta Guía práctica de HTML & CSS tiene un único objetivo el cual es enseñar como construir llamativos e intuitivos websites por medio de lecciones claras y organizadas. La guía cubre una variedad de temas en el áre de diseño y desarrollo web, con niveles básicos hasta avanzados. Creado por Shay Howe.

guide-html-css

La guía se divide en 10 temas con Nivel Básico para quien se encuentre iniciando en este tema y cubre:

  • Terminología, Sintaxis e Introducción
  • Elementos & Semántica
  • Box Model & Posicionamiento
  • Tipografía
  • Background & Gradientes
  • Listas ordenadas & sin ordenadas
  • Imagenes, audio & video
  • Construcción de formularios
  • Organizar información a través de tablas
  • Recursos adicionales

Además cuenta con un nivel avanzado y cubre:

  • Desempeño y Organización
  • Posicionamiento detallado
  • Selectores
  • Diseño web responsive
  • Pre – procesadores
  • jQuery
  • Transformaciones
  • Transiciones & Animaciones
  • Polyfills
  • Semántica extendida

Visto en: Punto Geek

10 principios fundamentales de los maestros del CSS – Desarrollo Web

Nettuts nos trae 10 reglas o principios a seguir, para el trabajo con CSS, contiene tópicos muy importantes para todos quienes trabajan desarrollando sitios web.

  • Elabora CSS simplePeter-Paul Koch.  La recomendación extrema de Koch es que el todo código CSS tiene que ser lo más simple posible, aunque la simplicidad no es una tarea fácil de conseguir. Existen muchos “tips” o trucos en CSS con los que es posible obtener resultados espectaculares, sin embargo, la utilización de dichos trucos se ve mermada con las constantes actualizaciones de los navegadores. Utiliza código CSS simple que todo navegador (incluídas sus actualizaciones) pueda soportar.
  • Las declaraciones CSS deben realizarse en una sola línea,Jonathan Snook. Veámoslo con un ejemplo:Declaración 1:
    h2 {font-size:18px; border:1px solid blue; color:#000;}

    Declaración 2:

    h2 {
    font-size:18px;
    border:1px solid blue;
    color:#000;
    background-color:#FFF;
    }

    Aunque el segundo puede parecer más bonito, en efectos de búsqueda de información, es menos eficiente. Tener todas las declaraciones en una sola línea facilita la búsqueda de elementos CSS en un documento.

  • Utiliza las abreviaturas de CSSRoger Johansson. Las abreviaturas son un aspecto a tener en cuenta a la hora de organizar nuestro código CSS. Por ejemplo, para especificar los diferentes márgenes de todas las partes de una caja o bloque se podría utilizar esto:
    margin-top:1em; margin-right:0; margin-bottom:2em; margin-left:0.5em

    Sin embargo, el siguiente ejemplo sería más eficiente:

    margin:1em 0 2em 0.5em

    Las abreviaturas no sólo reducen considerablemente el volumen de las hojas de estilo, sino que también ayudan a mantener el código organizado y simple.

  • Utiliza elementos de bloque para llenar el espacio orgánicamente,Jonathan Snook. Esta regla se basa fundamentalmente en la creación de elementos de bloque como primera instancia y luego definir los parámetros asociados a dicho bloque, como puede ser el margen y el relleno. Trabajar con el modelo de caja puede llevarte muchos dolores de cabeza, especialmente si se está tratando con porcentajes, pero a la larga resulta más eficiente.
  • Establece la propiedad “float” para eliminar otro “float”Trevor Davis. Saber cómo reflotar elementos es una tarea muy importante para utilizar código CSS, pero saber cómo limpiar dicho flotamiento no deja de ser menos importante. Aquí tienes un ejemplo de este principio realizado directamente por Trevor.
  • Utiliza márgenes negativosDan Cederholm. El uso de márgenes negativos en los elementos es, a veces, más fácil que tener que cambiar todos los demás aspectos del diseño para que se alineen todos los elementos. Mira el ejemplo que se expone en su página.
  • Utiliza código CSS para centrar las capas (layouts)Dan Cederholm. El método utilizado por Dan para conseguir este efecto se centra en la siguiente declaración:
    #contenedor  { margin: 0 auto; width: xxxpx; text-align: left; }
  • Realiza código XHTML y CSS válidoJeffrey Zeldman. Rígete a los estándares para que tu código sea válido y no tenga problemas con los navegadores.
  • Centra elementos utilizando CSSWolfgang Bartelme. Puedes echar un vistazo al tutorial realizado por Wolfgang, en el que se explica detalladamente cómo centrar elementos de forma correcta.
  • Utiliza la propiedad “text-transform”Trenton Moss. Lo mejor que un diseñador web puede hacer es planificar el futuro para asegurarse de que, en lugar de tener que cambiar manualmente el modo de texto que se muestra, utilizar el CSS para cambiar la apariencia del texto. Para ello es aconsejable la utilización de la propiedad text-transform.

Visto en: bitelemental