Anlisis de rendimiento de la Pagina TuDescuenton.com.

Realizado por: Mariano Ramrez. Pgina: http://www.tudescuenton.com

Este es un resumen de http://www.tudescuenton.com.

todas

las

medidas

consejos

para

la

pgina

Ya es sabido que la velocidad de carga de la web es sper importante porque adems de mejorar la experiencia del usuario y tambin ayuda en posicionamiento en los buscadores. Voy a presentar algunas medidas para mejorar la pagina tudescuenton.com, con el fin de que logren una velocidad y una calidad ptima, todas las medidas son importantes pero no significa que hay que seguirlas todas para estar en un rango ptimo.

Especificar cache de navegador.

Los navegadores tienen la posibilidad de almacenar los recursos estticos en la computadora del cliente, para poder especificar la cache del navegador se requiere pasar una cabecera al navegador con un tiempo valido de vida, esta cabecera se puede usar con archivos como imgenes, hojas de estilo o scripts en javascript (Tambin se puede especificar para archivos flash). El navegador al recibir esta cabecera con el tiempo valido de un archivo lo almacena de manera local y para la siguiente vez que ingrese a la pgina si no a pasado el tiempo valido especificado en la cabecera pues no necesitara volver a descargar el recurso. La utilidad de esto no se ve en usuarios nuevos que entran en nuestra pgina, sino en usuarios recurrentes que entran varias veces o varios das seguidos a nuestra pgina ya que no van a tener que volver a descargar los contenidos estticos que se repitan, lo recomendable es especificar una cache de 7 das. Esto se puede hacer de dos formas, una por php y otra por apache. La ms sencilla es por apache, la cual si en el servidor est instalado mod_expires pues con pocas lneas en el .htaccess ya lo tendremos listo. Una gua completa sobre como especificar una cache con el servidor apache:
HTTP ://HTTPD.APACHE .ORG/ DOCS/2.2/ CACHING.HTML

Utilizar dominios libre de Cookies

En la pgina tudescuenton.com, las urls que hacen referencia a los contenidos estticos tienen el mismo servidor que el servidor donde se guardan las cookies, es decir, son de esta manera: HTTP://WWW.TUDESCUENTON.COM/INDEX.PHP HTTP://WWW.TUDESCUENTON.COM/STATIC/JS/MANAGE .JS Cuando guardamos cookies, estas no solo se envan a los archivos php sino tambin se envan a los contenidos estticos, por eso es que se recomienda utilizar dos direcciones diferentes para que se reduzca el tamao de la cabecera de solicitud. Aqu le dejo un ejemplo de dos url diferentes: HTTP://STATIC.TUDESCUENTON.COM/STATIC/JS/MANAGE .JS HTTP://WWW.TUDESCUENTON.COM/STATIC/JS/MANAGE .JS

Optimizar imgenes
Reducir el tamao La Optimizacin de las imgenes es un factor fundamental a la hora de reducir el tiempo de carga de una pgina, y principalmente la de tudescuenton.com, ya que ninguna haba sido optimizada y tranquilamente podran estar sumando entre todas unos 100 o 200kb ms al peso de la pagina, para dar un ejemplo: fondo_azul.jpg, pesaba 250kb, optimizado pesa 200kb. La gente de Powerdot optimizo la mayora de las imgenes lo cual redujo bastante el peso de la pagina, yo optimice algunas cuantas que hacan falta por optimizar, como fondo_azul.jpg, pero de todas maneras ustedes cada nueva oferta suben imgenes al servidor, algunas optimizadas y otras no, sera bueno estar pendiente ya que cada una puede subir el peso de la pagina en 20kb o ms. Una de las mejores herramientas para esta tarea es Photoshop, pero por los costes, y lo pesado yo recomiendo ms dos herramientas muy buenas para optimizar imgenes que son optipng y jpegoptim, que atreves de lnea de comandos optimizan una imagen igual o mejor que Photoshop. Forma de uso:
JPEGOPTIM STRIP -ALL <NOMBRE DEL ARCHIVO > OPTIPNG -O 7 <NOMBRE DEL ARCHIVO >

Ofrecer imgenes a escala.

Hasta donde pude ver la mayora de las imgenes estn a escala, las nicas que no estn son las imgenes en el popupsuscribe.php de las ofertas, las cuales si se ajustan a escala se podra reducir un aprox. 63,5kb. Otra imagen aparte sobre la que hay que prestar atencin es fondo_azul.jpg, ya que posee unas dimensiones de 1.449px 1.849px y pues, ya que se mueve con el contenido es muy alta para lo que se necesita. Si se ajusta a un tamao menor se podrian ahorrar hasta 100kb ms, que es decir bastante. Uso de Sprites

Todas las imgenes dentro de una pgina, son tratadas por el navegador como recursos, por ende cada imagen, cada archivo js, cada css, es una solicitud nueva que hay que hacer al servidor, al igual que se juntan todos los css y los js, para reducir el nmero de peticiones, tambin se juntan las imgenes para reducir el nmero de peticiones, y despus se muestran con el css, una por una donde las queramos, esto es algo muy til que utilizan muchos sitios, ya que adems de reducir el nmero de peticiones tambin se hace una pequea reduccin de peso. Un ejemplo de esto lo vemos en los siguientes enlaces, donde se ven los sprites usados por google, yahoo y facebook.
HTTP ://WWW.GOOGLE .CO .VE/ IMAGES/ EXPERIMENTS / NAV _LOGO 78.PNG HTTP :// STATIC .AK.FBCDN. NET / RSRC .PHP / V1/ ZP/ R/-DIO 0 U9UIL C.PNG HTTP ://L 1.YIMG.COM / A/ I/ WW / MET/ PA_ICONS_18/20101213/ SPR _APPS_VE .PNG

Especificar atributos height y width.

Cuando el buscador renderizar una pgina, es recomendable colocar los atributos height y width, ya que de manera contraria el sistema tiene que esperar a finalizar la carga de la imagen, para saber que ancho y alta posee, y as saber cmo va a ubicar el resto de los elementos que le siguen. Adems cabe destacar que si se especifica el atributo alt, es algo positivo para el SEO ya que el buscador no puede saber de que trata una imagen a menos que se le indique.

Css y JS
Cargar siempre los css primero que los js

Los archivos js, tienen algunas limitaciones y a veces deben ser descargados por el navegador de manera separada lo cual hace que se pare la descarga de los dems archivos para empezar a descargar los css, en cambio con los archivos css no tienen ese tipo de limitaciones y pueden ser descargados todos al mismo tiempo.

Por eso es recomendable siempre colocar los archivos css todos juntos, en el head del documento y primero que los js, de esta manera se descargaran todos juntos y no habr problema de demora en la pagina. En tudescuenton.com solo se vea en el archivo html_header.html, pero yo ya lo acomode, solo queda como una recomendacin para el futuro. Aplazar el anlisis de javascript

Otra medida que se puede tomas es para aquellos archivos js, que son necesarios para la pagina, pero que no necesariamente deben cargar al inicio, pues se puede diferir su carga y as permitir que la pagina cargue de manera ms rpida y despus se ejecute el archivo que necesitamos, un ejemplo de esto es lo que hace Google Analytics. Aqu les dejo un ejemplo del cdigo: $(DOCUMENT ).READY (FUNCTION(){ VAR S = DOCUMENT .CREATE ELEMENT ('SCRIPT '); S.TYPE = 'TEXT/ JAVASCRIPT '; S.ASYNC = TRUE ; S.SRC = "${ URL _JS_STATIC ('<ARCHIVO JS>')}"; VAR X = DOCUMENT .GET ELEMENTSBY TAGNAME ('SCRIPT ')[0]; X.PARENT NODE .INSERT BEFORE (S, X); });

Css y js en archivos externos:

Es recomendable tambin que todos script y estilos de una pgina se localicen en archivos externos, por dos razones: Lo primero es que nuestro cdigo se encuentra ms ordenado y fcil de entender para un tercero que tenga que venir despus que nosotros a mejorar el cdigo Segundo al estar los cdigos en un archivo esttico, estos podrn ser guardados por el buscador y no se necesitara volver a ser descargados por el buscador. Cambiar Mapa de google

El mapa de google es una herramienta muy potente y muy til, pero se debe usar cuando se necesite usar, creo que un mapa en la portada de inicio de tudescuenton.com, es un poco innecesario, ya que el sistema debe cargar 200 a 300 kb, y procesarlos, que se podran ahorrar usando la google static map api, la cual nos ofrece las mismas ventaja, pero sin la necesidad de cargar 130kb solo en javascript + las imgenes. Aparte se puede hacer que cuando la gente le de click al mapa, se habr una ventana modal con el mapa en javascript cargado por ajax, con las dems cosas que se le pueden agregar. http://code.google.com/intl/es/apis/maps/documentation/staticmaps/

Eliminar Redireccin al inicio

La redireccin en el inicio hacia el popupsuscribe.php es algo de lo cual se debera analizar con detenimiento, y buscar una mejor forma para hacer lo mismo, ay que con esto se impide que google entre en la pagina, y la indexe, as que es ms difcil que al buscar algo relacionado con la pagina salga esta en el motor de bsqueda. Tiempo de duracin del dominio. El registro del dominio se vence para el 10 de agosto de 2011, por cuestiones de SEO es recomendable que el registro de dominio sea de cinco aos por lo menos.

Seguir el estndar html

Es importante seguir el estndar, sobre esto dejo dos links importantes:
HTTP ://WWW.DANIELCLEMENTE .COM/ HTML / INDEX .HTML

http://www.danielclemente.com/html/estandares.html (Este ES DE LECTURA OBLIGATORIA )

En conclusin, la mejora de la carga de una pgina no depende de un solo factor sino que requiere de muchos factores, que poco a poco hacen que una pgina como tudescuenton.com, pase de ser una pgina pesada a una pgina liviana, ya que tudescuenton.com se encuentra en constante expansin y crecimiento pues yo recomiendo que se tengan en cuentas todas estas cosas y se vayan mejorando en el proyecto a medida que se va desarrollando ya que de esta manera se mejora la calidad de la pagina, sin necesidad de invertir ms dinero del necesario. Otra cosa que me gustara que vieran, para que puedan hacer una comparacin con su competidor ms cercano, sobre el nivel de bsquedas:
HTTP ://WWW.GOOGLE .COM/ INSIGHTS/ SEARCH /? HL =ES#Q=TUDESCUENTON %2CTUDESCUENTO N.COM%2CAPROVECHA %2CAPROVECHA.COM& GEO =VE& DATE =1%2F2011%2012 M& CMPT = Q