Komoloves

Una vez que hemos analizado el sitio web podemos comenzar a optimizar el código de la página web.

Optimización del CSS

En nuestro caso hemos recorrido el .css (de arriba a abajo) revisando todas las etiquetas que existen en el fichero, siguiendo estas pautas

• Eliminar espacios y comentarios innecesarios (hay que llegar a un equilibrio entre un fichero óptimo y que ocupe lo menos posible, con un fichero que sea entendible).

  Por Ejemplo este código

  .Header {
        padding: 0px;
        margin: 0px;
        background-color: #ffffff;
        /*background-color: #ffaacc;*/
        text-align: left;
  }
  

  por este otro

  .Header {
  padding: 0px;
  margin: 0px;
  background-color: #ffffff;
  text-align: left;
  }
  

• Eliminar etiquetas obsoletas o que ya no se utilicen
• Eliminar referencias a imágenes obsoletas o que ya no se utilizan

Estructura de la página

Después tenemos que revisar la página por partes, cabecera, cuerpo, barra lateral y pie

• Eliminando todo comentario obsoleto (recordad que hay que llegar a un equilibrio).
• Revisando el uso de plugins instalados y verificar si se usan o si son realmente necesarios.
• Analizar si se necesitan todas las imágenes que se están utilizando.
• Minimizar el uso de consultas a base de datos. Un Truco “rudimentario” para Wordpress que se puede utilizar es el siguiente: En el Header.php suelen existir llamadas tipo bloginfo(‘url’); bloginfo(‘name’); o bloginfo(‘description’); al principio del fichero, justo debajo del tag <header.
  

  $blogdescription = ‘nuestra descripción’;
  $blogurl = ‘http://dominio.com’; //Ej. http://www.komoloves.com //bloginfo(‘url’);
  $blogname = ‘NombrePágina’; //Ej. Komoloves //bloginfo(‘name’);

  y sustituir las llamadas de la siguiente forma, por ejemplo en lugar de bloginfo(‘description’); ponemos lo siguiente

  <meta name=”description” content=”<?php echo $blogdescription; ?>” >

Trucos de Optimización

Algunos trucos que he aprendido en el transcurso de este camino

• Es mejor una imagen de 100kb que 4 imágenes de 25kb por separado. ¿Que quiere decir esto?. Por cada imagen se realiza una petición al servidor para servir la imagen al cliente. 4 Imágenes son 4 peticiones, en cambio si se juntan las 4 imágenes en una sola se realiza una sola petición.
• Optimizar las imágenes que se utilicen, ya sea en el CSS o en el sitio web en general
• Siguiendo el punto anterior, se puede aplicar la Técnica CSS Sprites. Esta técnica se basa en el uso de las propiedades Left, Top y Background-position. Existen generadores automáticos en Internet, pero os vamos poner un ejemplo para que se entienda mejor.
  
  Esta imagen es la que se utiliza en los botónes del sidebar (podría optimizarse aún más)
  El CSS sería algo parecido a:

  #mediamenu
  {
  position: relative;
  margin: 10px auto;
  width: 190px;
  height: 204px;
  }
  #mediamenu li
  {
  width: 112px;
  height: 107px;
  position: absolute;
  top: 2px;
  background: url(images/socialmedia.png) 0 0 no-repeat;
  display: block;
  list-style: none;
  }
  #mediamenu a
  {
  width: 90px;
  height: 90px;
  display: block;
  border: solid 1px #fff;
  }
  #mediamenu a:hover {border: solid 1px #fff;}

  #mediamenu #btnmedia1 {left: 2px; background-position: -30px -30px;}
  #mediamenu #btnmedia2 {left: 96px; background-position: -148px -30px;}
  #mediamenu #btnmedia3 {left: 2px; background-position: -265px -30px; top: 96px;}
  #mediamenu #btnmedia4 {left: 96px; background-position: -385px -30px; top: 96px;}

  #mediamenu #btnmedia1 a:hover {background: url(images/socialmedia.png) -29px -155px no-repeat;}
  #mediamenu #btnmedia2 a:hover {background: url(images/socialmedia.png) -147px -155px no-repeat;}
  #mediamenu #btnmedia3 a:hover {background: url(images/socialmedia.png) -264px -155px no-repeat;}
  #mediamenu #btnmedia4 a:hover {background: url(images/socialmedia.png) -384px -155px no-repeat;}

  La técnica se basa en poseer una imagen con todas las imágenes que queremos. Posicionar un recuadro donde queramos, como si fuera una ventana, y por detrás la imagen de fondo que la posicionamos hasta que quede bien. (Esta parte se podría explicar mucho mejor, si queréis profundizamos en otro artículo referente a esto.)

Conclusión

La optimización de la página requiere de paciencia y de ir poco a poco y paso a paso. Quedan puntos pendientes como la compresión y unificación de ficheros, etc, etc, que iremos viendo en posteriores artículos. De momento hemos visto que hay que repasar el archivo css, las imágenes que usamos y utilizar algún truco o técnica para reducir la velocidad de carga de la web. En este punto habremos reducido algún segundo en la velocidad de carga de nuestra web ¿Que opináis? ¿Alguna aportación más? (Creo que se me olvida algo )