Desde 1995 el peso medio de una página y los objetos de los que se compone han aumentado más de 30 veces. La velocidad de carga depende de muchas variables pasando por la optimización del servidor web o incluso de los iconos en las css.

La siguiente infografía de Strangeloop varios datos de interés sobre la velocidad de carga:

Descargar la imagen en alta calidad

Aprovechando el inicio de este nuevo año y continuado el post sobre  tendencias del comercio electrónico en el 2010 del año pasado, expondré las tendencias del comercio electrónico para el año 2011. En este año continuarán las estrategias iniciadas en los últimos años, pero también nuevas apuestas innovadoras.

Personalización dinámica

La experiencia personalizada en el comercio electrónico va a ser clave este año. La personalización, teniendo en cuenta un amplio espectro de factores y conductas, puede ofrecer una experiencia individual para cada usuario. Algunos de estos factores, tales como el origen de un visitante, la navegación, la página de salida, qué productos compró unido a reglas de negocio específicas, pueden mostrar la combinación de productos adecuada a la persona adecuada en el momento adecuado. Además, la personalización puede potenciar la segmentación y los contenidos de las campañas de email marketing.

Mobile Commerce

El crecimiento del uso de smartphones seguirá este año y en consecuencia el Mobile Commerce. Pero la estrategia debe pasar por optimizar las aplicaciones y los sitios específicos. Los usuarios de móviles tienen necesidades y expectativas distintas de interacción, por ejemplo en un estudio reciente el 18% de los encuestados estaban descontentos con la experiencia de Mobile Commerce, al consumir demasiado tiempo y ser complicada.

Web Analytics

Los días de gloria del tráfico online rápido y crecimiento de las ventas están en declive. Ahora es necesario un modelo de negocio más pragmático con en el que la  perspicacia comercial es cada vez más importante y va a ser crítico verificar de una manera más inteligente el control de retorno de la inversión (ROI). Por ello, los datos analíticos son cada vez más importantes, pero ya no son simples estadísticas sobre el número de visitas. Mediante los datos analíticos se pueden tomar decisiones objetivas para optimizar el diseño del sitio, crear reglas de negocio para personalizar la información, optimizar los Indicadores Clave de Desempeño (KPI)…

Location Based Services

Con la proliferación de móviles con GPS seguirá aumentado el uso de los servicios basados en la localización. Aunque los Social Gaming Apps son muy recientes, su potencial en las promociones multi-canal es innegable. Grandes empresas como Starbucks han realizado promociones basadas en Foursquare para premiar a los clientes fieles y la evolución de estas aplicaciones posibilitarán nuevos tipos de promoción.

Layout flexible y minimalista

Las tendencias en el diseño de la estructura tienden cada vez más a destacar el producto y menos la navegación. El usuario está interesado en el producto, por lo que el ratio óptimo puede estar en un 25% para la navegación y un 75% para el producto.

Otro punto a tener en cuenta es la flexibilidad del diseño a diferentes resoluciones, en parte por la aparición de los tablets. En este caso, AJAX cada vez es más importantes, ya que permite mejorar la interacción y modificar la estructura dinámicamente. Por ejemplo, los usuarios tienden a usar el botón de ver “todos los productos” en una misma página (aunque haya un scroll muy grande) para evitar navegar por un listado dividido en varias páginas.

Globalización

En el 2010, los grandes comercios online han realizado un gran esfuerzo para vender sus productos a nivel mundial: Gap ha comenzado a realizar envíos a otros mercados internacionales además de crear tiendas personalizadas para Reino Unido y China; Amazon lanzó su primera tienda online localizada en seis años, Zara inauguro su tienda online en seis mercados europeos.

En el 2011, cada vez más empresas llegarán a sus clientes globales por medio del envío internacional y crearán infraestructuras en los mercados en el caso de disponer de una masa amplia de compradores. Un ejemplo de este modelo de crecimiento es la empresa británica Boden que no invirtió en un almacén y centro de atención al cliente en EEUU hasta que un tercio de los ingresos provenían del mercado americano.

Social Media

Las redes sociales ya no son un factor nuevo en el comercio electrónico pero los imperativos sociales en las compras están en constante evolución. El nivel más básico puede ser la integración del botón share de Facebook y Twitter. Otro nivel pasa por integrar las redes sociales en los sistemas de recomendaciones, como ya ha hecho Amazon. La importancia de las recomendaciones positivas va a ser muy importante al potenciar el boca a boca, pero también afecta a los resultados en Google, ya que su motor de búsquedas de productos incluye las recomendaciones como un factor de posicionamiento. Relacionado con esto, la atención al cliente unido a los Social Media va a ser cada vez más importante. En España un ejemplo del exito de la atención al cliente mediante redes sociales ha sido la crisis de los controladores, donde las lineas áreas usaron Twitter como vía de información preferente a los clientes.

Análisis

Para analizar fácilmente la velocidad de carga de nuestro sitio disponemos básicamente de dos extensiones para Firefox/Firebug:

1. Yslow, creada por Yahoo!
2. Pagespeed, creada por Google

Estos complementos analizan múltiples factores y nos dan sugerencias para optimizar la página analizada. Las dos extensiones son muy parecidas tanto en las pruebas que ejecutan y las sugerencias que indican, pero en Yslow destaca la integración de Smush.it™, un optimizador de imágenes. En cambio en Pagespeed, es muy destacable la opción de disponer, en caso de sugerencia, de las alternativas minified u optimizadas de las css y los js, como también analizar e indicar los selectores css poco eficientes.

Optimización

Dependiendo de cada servidor y aplicaciones instaladas tendremos que optimizar diferentes factores, pero a modo de ejemplo, en el servidor de este blog era necesario optimizar los Cache-Control Header y la compresión gzip. Tras buscar en Google y leer varios post realice los siguientes pasos para optimizar el servidor:

1. Compresión gzip con mod_deflate

Primero hay que activar mod_deflate desde la linea de comando

a2enmod deflate

Luego editar el archivo deflate.conf que se encuentra en /etc/apache2/mods-available/deflate.conf

        AddOutputFilterByType DEFLATE text/plain
        AddOutputFilterByType DEFLATE text/html
        AddOutputFilterByType DEFLATE text/xml
        AddOutputFilterByType DEFLATE text/css
        AddOutputFilterByType DEFLATE text/javascript
        AddOutputFilterByType DEFLATE image/svg+xml
        AddOutputFilterByType DEFLATE image/x-icon
        AddOutputFilterByType DEFLATE application/xml
        AddOutputFilterByType DEFLATE application/xhtml+xml
        AddOutputFilterByType DEFLATE application/rss+xml
        AddOutputFilterByType DEFLATE application/javascript
        AddOutputFilterByType DEFLATE application/x-javascript
 
        AddOutputFilterByType DEFLATE application/x-httpd-php
        AddOutputFilterByType DEFLATE application/x-httpd-fastphp
        AddOutputFilterByType DEFLATE application/x-httpd-eruby
 
        DeflateCompressionLevel 9
 
# Netscape 4.X tiene ciertas limitaciones
        BrowserMatch ^Mozilla/4 gzip-only-text/html
 
# Netscape 4.06-4.08 tiene limitaciones
        BrowserMatch ^Mozilla/4\.0[678] no-gzip
 
# MSIE enmascarado como Netscape
        BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
 
# Las siguientes lineas sirven para probar que la configuración funciona, en producción hay que comentarlas
 DeflateFilterNote Input instream
 DeflateFilterNote Output outstream
 DeflateFilterNote Ratio ratio
 LogFormat '"%r" %{outstream}n/%{instream}n (%{ratio}n%%)' deflate
 CustomLog /var/log/apache2/deflate_log deflate

2. Expires headers mediante mod_expires

Primero activamos el modulo

a2enmod expires

Luego editamos o creamos el archivo expires.conf en el directorio /etc/apache2/mods-available/expires.conf

#        ExpiresDefault "access plus 2 months"
 
        ExpiresByType image/x-icon "access plus 1 month"
        ExpiresByType image/png "access plus 1 month"
        ExpiresByType image/jpg "access plus 1 month"
        ExpiresByType image/gif "access plus 1 month"
        ExpiresByType image/jpeg "access plus 1 month"
        ExpiresByType application/pdf "access plus 1 month"
        ExpiresByType audio/x-wav "access plus 1 month"
        ExpiresByType audio/mpeg "access plus 1 month"
        ExpiresByType video/mpeg "access plus 1 month"
        ExpiresByType video/mp4 "access plus 1 month"
        ExpiresByType video/quicktime "access plus 1 month"
        ExpiresByType video/x-ms-wmv "access plus 1 month"
        ExpiresByType application/x-shockwave-flash "access 1 month"
 
        ExpiresByType text/css "access plus 1 hour"
        ExpiresByType text/javascript "access plus 1 hour"

3. Desactivar ETags

Añadir las siguientes lienas al archivo /etc/apache2/apache2.conf

Header unset ETag
FileETag None

4. Reiniciar Apache para activar los cambios

/etc/init.d/apache2 restart

Ya solo queda volver a comprobar la página con las extensiones de Firebug y comparar los resultados.

Enlaces de interes

• Recomendaciones sobre rendimiento web de Google
• Recomendaciones de Yahoo!
• Tutorial sobre Apache2, mod_deflate, mod_expires y ETag
• Tutorial sobre ETag (Esta web tiene otros posts relacionados con optimización de Apache)