¿Por qué los usuarios abandonan el proceso de compra en las tiendas online?

¿Qué podemos hacer para evitar que los usuarios abandonen el proceso de compra? Según ha publicado la revista Emprendedores en su número de febrero de 2012 `página 106), basándose en un estudio de la consultora Multiplica, primero deberemos entender a diferenciar dos métricas:

• Ratio de abandono del carrito de la compra: Porcentaje de usuarios que, pese haber introducido productos en el carrito de la compra, no inician el
  proceso de check-out.
• Ratio de abandono del proceso de check-out: Porcentaje de usuarios que, a pesar de haber iniciado el proceso de check-out, no terminan materializando el pedido.

Entender y medir estos ratios es significativo pues nos describen realidades distintas: El ratio de abandono del carrito nos habla de usuarios que no han decidido todavía realizar una compra, mientras que el ratio de abandono del proceso de check-out nos habla de usuarios que, a pesar de haber tomado la decisión, no la materializan.

El segundo ratio “Ratio de abandono del proceso de check-out“ es el que debería acercarse a 0.

•  ¿Los motivos? Son múltiples si hacemos caso al estudio realizado hace un par de años por Forrester Research. Entre ellos destacan: en un 57% no querer pagar los gastos de envío, en un 48%, que el coste total asciende a más dinero del que se creía inicialmente y en un 41%, que el uso del carro de compra era sólo para informarse y comparar. Otros motivos que se mencionan son: preferir comprar offline, buscar un cupón de descuento, no haber encontrado la forma de pago preferida, producto no disponible o mala percepción de seguridad.

¿Qué podemos hacer para mejorar el proceso de chek-out? Multiplica nos da 40 ideas, de las cuales hemos escogido las que consideramos las más importantes. Podéis acceder al informe completo y detallado de Multiplica aquí:

1. El proceso de check-out empieza siempre antes del mismo proceso en sí, cuando el usuario incluye un primer producto en la cesta de la compra. ¿Cuántas veces le hemos dado al botón “Añadir al carro” y hemos tenido la sensación de que no haya pasado nada?
2. Debe ser percibido como ágil, líneal y fluido reduciendo al máximo el número de pasos y no permitir en ningún caso que superen los 4 pasos.
3. Debe optimizar los tiempos de velocidad de descarga de estas páginas y de sus transiciones en menos de 2 segundos.
4. Debe indicar el momento del proceso en el que estamos, permitirnos editar cualquier paso del proceso, así como mostrar el paso siguiente que vamos a dar, para transmitir la sensación de absoluto control y libertad.
5. Debe quedar claro el producto que se está comprando y permitir su visualización en todo momento incluyendo fotografías de los productos que estoy pensando comprar.  Aunque parece algo trivial, no hacerlo puede reducir un 10% nuestros ratios de conversión.
6. Debe proponernos un formulario que se parezca más a una conversación que estrictamente un frío formulario.
7. Debe quedar claro el coste total incluido el transporte, información del horario de entrega (si aplica), así como la disponibilidad del producto.
8. Debe mostrar claramente nuestra preocupación por la seguridad y la privacidad de los datos de nuestros clientes.
9. Debe gestionar con sumo cuidado la introducción de códigos promociones o cupones pues generará en el usuario la sensación de que vale la pena buscar por internet donde encontrar tales cupones y, por tanto, conseguirán desviar la atención.

Os recomendamos a todos que os descargéis el informe completo, ya que da 31 consejos más. No obstante, esperamos que con estos 9 que son los que nosotros consideramos más importantes tengáis ideas de como optimizar vuestras tiendas online. Déjarnos comentarios si hemos olvidado algún consejo importante.

Si está información te ha parecido interesante, mira también:

1. Fourquare supera los 10.000.000 de usuarios
2. Más de 100 millones de usuarios activos de Twitter
3. Tipos de usuarios en Redes Sociales

Os resumimos aquí los puntos más importantes a la hora de crear una página de aterrizaje / landing page:

• Tenemos que estar seguros de que vamos a cumplir con las expectativas de los usuarios que aterricen en ella. Si no atraemos su atención se volverán a ir sin haber convertido.
• Hay que incluir una llamada clara a la acción. Es imprescindible decirle claramente al usuario que tiene que hacer y así conseguir que no se nos escape.
• Utilizar encabezados claros que hagan hincapié en el mensaje que se quiere transmitir.
• El contenido de la página debe estar enfocado al contenido descrito en el encabezado. Tiene que haber una clara correlación entre ambos. No debemos olvidar utilizar el texto para generar confianza en el usuario.
• Usar enumeraciones que ayuden al usuario a entender el producto/servicio, el valor que le aportamos y el mensaje.
• Usar imágenes para explicar cosas que en palabras son difíciles de expresar.
• Usar vídeos que todavía explican mejor que las imágenes.
• Incluir la posibilidad de que el usuario comparta el contenido en las redes sociales, eso si, solo en las más importantes (Twitter, Facebook, Google+ y LinkedIn) para no diluir su atención.
• Dar seguridad al usuario para que nos de información personal suya. La seguridad se la podemos dar mediante una marca reconocida, referencias o garantías de algún tipo.

Esto son solo algunos de los puntos más importantes a tener en cuenta a la hora de crear una página de aterrizaje / landing page. Podéis encontrar mucha más información en la entrada del blog 1st webdesigner de Dainis Graveris: “Landing Pages Guide 101: Create Landing Pages that Work“, como por ejemplo: Anatomía de una página de aterrizaje / landing page, Cómo diseñar un botón de llamada a la acción, Cómo diseñar la página que da las gracias si el usuario ha realizado la acción, Cómo escoger la fuente adecuada, Cómo crear tablas con precios de productos/servicios, Consejos de como mejroar las páginas de aterrizaje, etc.

Si está información te ha parecido interesante, mira también:

1. 7 consejos para páginas de aterrizaje que conviertan
2. Cómo crear una galería de fotos creativa en Facebook
3. Como usar las miniaturas de las páginas de Facebook

En su post Maria Jose menciona 30 publicaciones en castellano y 4 en inglés, que tratan de la temática de Marketing en Internet y Social Media. Puedes leer su post aquí: 34 libros, guías y manuales gratuitos sobre marketing y social media. Un año antes ya había publicado otra entrada parecida: 44 libros, guías y manuales gratuitos sobre marketing y medios sociales con 22 publicaciones en castellano, 21 en inglés y 1 en portugués,  que tratan de la temática de Marketing en Internet y Social Media.

Queremos destacar las siguientes publicaciones:

• Buenas prácticas con blogs (Iván Lasso Clemente) más información y descarga
• Guía Community Manager (Maestros del Web) más información y descarga
• Libro Blanco de los Viajes Sociales (Minube) más información y descarga
• Guía de Facebook Insights (Facebook) descarga
• El libro de Twitter (Genes) más información y descarga
• 365 días (y noches) de Marketing 2.0. El inicio de la e-década (Juan Merodio) más información y descarga
• Liderazgo, Marketing Personal y Comunicación (Pablo Adán) más información y descarga
• Aprender Adwords (Polièdric) más información y descarga
• Manual de Desobediencia a la Ley Sinde (Hacktivistas) más información y descarga
• Todo va a cambiar. Tecnología y evolución: adaptarse o desaparecer (Enrique Dans) accede online la versión social
• Gamification 101: An Introduction to the Use of Game Dynamics to Influence Behavior (Bunchball) (DESCARGAR) – inglés.

Hay muchas más publicaciones gratuitas. Déjanos en los comentarios todas aquellas que se nos hayan pasado.

Si está información te ha parecido interesante, mira también:

1. Social Media Crisis Response Guidelines 2/2
2. Social Media Crisis Response Guidelines 1/2
3. Una lección en búsqueda social para Google

Básicamente tenemos dos formas de crear una web optimizada para dispositivos móviles, o bien un diseño que se adapte a los tamaños de las pantallas (por ejemplo con HTML5) o creamos una página específica para los dispositivos móviles (redireccionando a los mismos desde el sitio web principal a este sitio).

Para el segundo caso (página específica para los dispositivos móviles redireccionando a los mismos desde el sitio web principal a este sitio), Google ha presentado un rediseño de su araña Googlebot-Mobile que ahora también rastrea la web como un dispositivo móvil de última generación (smartphone), además de los móviles “normales”/”no inteligentes”.

De esta forma Google podrá ofrecer contenido adaptado a móviles de última generación cuando se realice una búsqueda de unos de estos dispositivos.

Araña de móviles “normales”/”no inteligentes”:

• SAMSUNG-SGH-E250/1.0 Profile/MIDP-2.0 Configuration/CLDC-1.1 UP.Browser/6.2.3.3.c.1.101 (GUI) MMP/2.0 (compatible; Googlebot-Mobile/2.1; +http://www.google.com/bot.html)
• DoCoMo/2.0 N905i(c100;TB;W24H16) (compatible; Googlebot-Mobile/2.1; +http://www.google.com/bot.html)
  Smartphone Googlebot-Mobile:

Araña de móviles de última generación/”smartphones”/”inteligentes”:

• Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_1 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8B117 Safari/6531.22.7 (compatible; Googlebot-Mobile/2.1; +http://www.google.com/bot.html)

La nueva araña descubrirá todos aquellos contenidos que estén optimizados por los smartphones.

Además si Google encuentra que existe una redirección de una web a una optimizada para dispositivos móviles, Google lo mostrará directamente en sus resultados de búsqueda realizadas desde uno de esos dispositivos (reduciendo el tiempo de carga en 0,5-1 segundos).

La araña de Googlebot-Mobile debería tratarse igual que un usuario humano con un smartphone. Hay más información aquí (sigue estando vigente).

Si está información te ha parecido interesante, mira también:

1. La guía de Zappos para diseño web para móviles
2. Evento Google Inside Search
3. Nueva forma de envío de URL y páginas actualizadas a Google

Utilizar el elemento hreflang (especificando el idioma) es interesante cuando tengamos una página web con el mismo contenido traducido a varios idiomas; mientras que la utilización del elemento hreflang (especificando el idioma y el país) es interesante cuando tengamos una página web con el mismo contenido y en el mismo idioma, donde solo cambian por ejemplo los precios de los productos.

De esta forma evitamos contenido duplicado y el Google puede mostrarle a cada usuario la página más adecuada a su búsqueda, al idioma en el que busca y al sitio desde el que busca.

Lo que hacemos con el uso del atributo hreflang es indicar a qué otras páginas en otros idiomas / países se corresponde una determinada página. Estas URL pueden pertenecer al mismo sitio o a otro dominio. Hay que tener en cuenta que para darle consistencia, el atributo hreflang debe utilizarse en cada página de la web.

Valores admitidos del atributo “hreflang”: El valor del atributo hreflang identifica el idioma (en formato ISO 639-1) y, opcionalmente, la región (en formato ISO 3166-1 Alpha 2) de una URL alternativa.

Esto en la práctica se traduce en lo siguiente. Imaginemos que tenemos las siguientes 4 URLs con el mismo contenido, pero dirigidas a distintos países e idiomas:

http://www.example.com/ (URL de la página principal general de un sitio web que está en español),
http://es-es.example.com/ (URL de la versión en español para los usuarios de España),
http://es-mx.example.com/ (URL de la versión en español para los usuarios de México),
http://en.example.com/ (URL de la versión en inglés genérico).

En todas estas páginas, podríamos usar los siguientes marcados para especificar el idioma y, en su caso, la región:

<link rel=”alternate” hreflang=”es” href=”http://www.example.com/” />
<link rel=”alternate” hreflang=”es-ES” href=”http://es-es.example.com/” />
<link rel=”alternate” hreflang=”es-MX” href=”http://es-mx.example.com/” />
<link rel=”alternate” hreflang=”en” href=”http://en.example.com/” />

Hay más información aquí: Acerca del atributo rel=”alternate” hreflang=”x”

Google recomienda utilizar el atributo langhref conjuntamente con el atributo rel=”canonical” para identificar la versión preferida del contenido, es decir, la URL que queremos que Google indexe y muestre a los usuarios de forma predeterminada.

En el ejemplo anterior usaríamos el elemento rel=”canonical” en las tres páginas con contenido en español; no utilizaríamos el atributo rel=”canonical” en la página en inglés, ya que las páginas están en distintos idiomas y, por tanto, son muy diferentes.

Incluiríamos el atributo rel=”canonical” en las páginas con hreflang=”es-ES” y hreflang=”es-MX” para enlazarlas con la página canónica (hreflang=”es”):

<link rel=”canonical” href=”http://www.example.com/” />

Esto a primera vista puede parecer un curro de consideración (que lo es) pero a la larga no permite conseguir que Google indexe correctamente los contenidos por idiomas y en su caso por países. Estamos haciendo varias pruebas de este tema y os iremos informando de como evolucionan.

Si está información te ha parecido interesante, mira también:

1. Cómo realizan los usuarios búsquedas locales en Google

Hay que destacar que la muestra analizada es muy pequeña (12 participantes presenciales y 90 participantes online), pero permite obtener algunas conclusiones. La tarea a completar era encontrar estudios de tatuaje en cuatro ciudaddes de Canadá.

El primer paso fue encontrar un estudio de tatuaje en Hamilton, Ontario. El primer resultado tenía un comentario, pero ninguna imagen. El segundo tenía imagen y el cuarto un comentario con etiquetas de texto. Las personas que buscaban miraron el mapa con siguiendo el triángulo de oro con forma de F.

La mayoría de los clicks fueron sobre el primer resultado, obteniendo el segundo y tercer resultados menos clicks. El cuatro resultado con las etiquetas de texto obtuvo más clicks que el tercero (que no los tenía).

El siguiente paso es más interesante. En la misma búsqueda en London, Ontario, los dos primeros resultados eran muy básicos, solo con información de contacto y la dirección de la web. El tercer resultado además tenía una valoración de tres estrellas (que indican que Google tiene 8 comentarios de ese negocio) y un extracto de texto de uno de los comentarios. Este signo social ayudó para que el tercer resultado obtuviera más atención (casi el mismo que el primer resultado).

En las otras dos ciudades, los resultados fueron similares: Los primeros resultados reciben más atención y clicks. Los resultados que se encuentran más abajo solo reciben más atención si tienen signos sociales (valoración, comentarios y etiquetas de texto).
La conclusión que se puede sacar (siempre teniendo en cuenta el escaso número de participantes) es:

• Si los resultados primeros tienen pocos signos sociales, los siguientes resultados reciben más atención.
• Si el resultado no está en la primera posición y no tiene signos sociales, será ignorado, sobre todo si hay otros resultados que si que los tengan.

Este análisis vuelve a demostrar la importancia de los comentarios en los resultados de los negocios locales.

El estudio completo se puede encontrar aquí (en formato PDF e idioma inglés).

Si está información te ha parecido interesante, mira también:

1. Nuevo estudio eye-tracking: Todos miran los resultados orgánicos
2. Estudio Eye-tracking Google+ contra Facebook
3. Cómo realizan los usuarios búsquedas locales en Google

Una de las preguntas que se plantean habitualmente al trabajar en el posicionamiento de un establecimiento físico es si se debería de prestar más atención a términos genéricos o a términos que incluyan una geolocalización de la búsqueda

Para que Google sepa donde está ubicado un negocio es muy importante incluir los términos de geolocalización en la optimización del contenido de la web y a la hora de crear una estrategia de enlaces.

La pregunta que ha investigado Myles Anderson es como realizan las búsquedas los usuarios: ¿Cómo hacen las búsquedas de establecimientos locales?, ¿Usan términos de geolocalización? y ¿Esperan obtener resultados geolocalizados para búsquedas genéricas sin términos de geolocalización?

Ojo: El estudio se ha realizado en Estados Unidos y algunas conclusiones no serán válidas en España, pero nos ha parecido lo suficientemente interesante para resumir su contenido aquí:

¿Cuántos usuarios usan Google para encontrar un negocio local?

Un 59% de los consumidores usan Google al cabo del mes para encontrar un negocio local.

¿Cómo valoran los usuarios la información de los resultados de búsquedas locales?

El 71% de los usuarios valoran positivamente los resultados de búsqueda y piensan que les ayudan y aportan información. De este porcentaje el 60% prefiere que los resultados de búsquedas locales estén apoyados con fotografías.

Consejo: Para destacar en los resultados, debería usarse una foto llamativa en el perfil de Google Places (por tanto hay que solicitar la propiedad del sitio y customizarlo).

El 97% de los consumidores realiza búsquedas online de empresas locales. Puedes estar ahí cuando te busquen gracias a Google Places for business, que es una plataforma local de Google gratuita.

Haz que tu empresa destaque: Añade fotos, vídeos y ofertas para que los clientes vean por qué deben elegirte. Destaca promociones especiales, publica actualizaciones en tiempo real y responde a los comentarios desde tu cuenta de Places for business.

¿Los usuarios usan el nombre de la población o el código postal al hacer una búsqueda local?

El 54% si que usa términos que geolocalizen la búsqueda; pero un 17% nunca los usa y entre la gente joven sube al 21%,

Consejo: Si el negocio está enfocado a jóvenes se debería de enfocar la optimización a términos más genéricos; si está enfocado a gente más mayor lo contrario (enfocado a términos con geolocalización).

¿Cuántos usuarios añaden el nombre de la ciudad, del pueblo, del barrio o de la calle?

El 60% de los usuarios añaden un nombre de una ciudad, de un pueblo a sus búsquedas. El 42% añade un código postal. Solo el 6% añade el nombre de un barrio. El 13% añade el nombre de una calle: Las búsquedas que incluyen el nombre de la calle normalmente suelen realizarse por personas que ya han sido clientes del establecimiento y buscan sus datos de contacto.

Consejo: Optimizar para el nombre de una ciudad o pueblo traerá más tráfico que por un código postal, pero una campaña completa debería de usar los dos. OJO: Este estudio es de Estados Unidos, aquí en España el uso del código postal en las búsquedas es mucho más reducido, aumentando el número de búsquedas por población.

Consejo: Optimizar por nombre de la calle no va a hacer que se ganen muchos usuarios, pero si que va a hacer más fácil que los usuarios previos vuelvan.

¿Esperas que Google te de resultados de búsqueda en función de donde te encuentras?

El 38% esperan que Google les de resultados en función del lugar desde el cual están haciendo la búsqueda.

Conclusión: La mayoría de los usuarios utilizan términos para geolocalizar la búsqueda. Por esta razón la estrategia óptima de optimización sería asegurar ser encontrados por los que buscan por nombre de población y en menor medida código postal.

Si está información te ha parecido interesante, mira también:

1. Seguimiento de búsquedas en WordPress en Google Analytics
2. Google: La velocidad solo afecta a un 1% de las búsquedas
3. Evento Google Inside Search

Lo primero que menciona es que la velocidad de carga de las páginas web se determina en gran medida por la barra de herramientas de Google, porque lo que quieren es medir la velocidad del usuario real al cargar una página web.

El siguiente punto interesante que menciona en su respuesta es que a 1 de cada 100 búsquedas les afecta el factor de velocidad en los resultados mostrados. Esto es significa que  1 de cada 100 búsquedas en Google se veía afectada por la velocidad de la web de tal forma que su ranking cambie de forma considerable.

Además añade que esto le afecta a 1 de cada 1000 webs. Se puede deducir entonces que solo un 0,1% de los sitios webs tienen problemas de velocidad que afecten a su posición en el ranking de Google.

Aquí está el vídeo de Matt Cutts:

Enlace para dispositivos móviles: http://youtu.be/SO4YuDAkplU

La verdad es que nos hemos quedado sorprendidos de la escasa incidencia que tiene la velocidad de carga de las páginas en los resultados de búsqueda. Por lo que habían dado a entender pensábamos que iba a ser mucho, mucho mayor la incidencia.

No obstante nunca está de más optimizar la velocidad de carga de las páginas web, porque aunque no afecten mucho al ranking, si que afectan a la tasa de conversión de los usuarios. Tenemos más información en nuestras entradas del blog sobre la optimización de la velocidad: Optimización de velocidad de páginas web (1/3), Optimización de velocidad de páginas web (2/3) y Optimización de velocidad de páginas web (3/3).

Si está información te ha parecido interesante, mira también:

1. Optimización de velocidad de páginas web (1/3)
2. Optimización de velocidad de páginas web (2/3)
3. Optimización de velocidad de páginas web (3/3)

Optimizaciones de las páginas (parte 2/2):

9) Las imágenes se pueden agregar, para evitar peticiones HTTP de descarga de las mismas. Esto no tiene mucho sentido para las imágenes que van cambiando frecuentemente, pero si las imágenes estáticas del diseño que no varían. LA herramienta para ello son los CSS Sprites, que combina varias imágenes en una grande. Muchas webs con muchos visitantes los usan (Google, Apple, Amazon), etc. Estas imágenes se pueden generar con CSS Sprites Generator http://csssprites.com.

10) El formato de las imágenes también influye en la velocidad de carga de la páginas web. JPG tiene las mejores tasas de compresión, pero la calidad de imagen sufre. Todas las imágenes que puedan tener una calidad inferior, deberían ser JPG. Si hace falta más calidad hay que utilizar PNG, que comprime sin pérdida de calidad.

11) En las imágenes PNG es muy importante convertirlas en una imagen indexada con una paleta de colores optimizada para web. Solo de esta forma se puede conseguir una buena compresión.

12) Las imágenes siempre deben de estar enlazadas en el tamaño en el que se van a mostrar  y usar los atributos width y height.. No es nada recomendable utilizar el escalado por HTML.

13) Los navegadores pueden almacenar temporalmente contenidos, guardándolos en la caché. Cuando se accede por primera vez a una web el navegador descarga toda la página web completa. Si se vuelve a cargar la misma página posteriormente, aunque haya cambiado parte del contenido, suele haber elementos que no cambian (botones de navegación, diseño del fondo, etc). En cada carga de una página web, el navegador puede enviar recomendaciones a través del encabezado HTTP de cuanto tiempo deben conservarse que elementos en la caché sin actualizarlos. En Apache tiene que estar disponible el módulo mod_expires, además de tener acceso al archivo .htaccess. En el archivo .htaccess es donde se definen los elementos de la página y su caducidad. Para establecer el tiempo de la caché hace falta probar, con un tiempo demasiado corto perdemos optimización, con un tiempo demasiado largo pueden mostrarse contenidos antiguos. La experiencia nos demuestra q ue los archivos Javascript, CSS e imágenes cambian mucho menos que los archivos HTML.

14) Las empresas de gran envergadura emplean en muchos casos Proxies con caché para el acceso a internet de sus empleados. Estos guardan las webs recibidas como copia local, no teniendo que contactarse cada vez al servidor externo. Esta posibilidad se activa mediante el encabezado HTTP (Cache-Control: Public) y el archivo .htaccess junto con el modelo mod_expires.

15) El uso del ETag dentro del encabezado HTTP. Esto es un checksum del contenido de la página web, que el navegador puede comprar con la del contenido archivados en Caché para ver si ha habido cambios. De esta forma el navegador solo carga la página de nuevo si ha cambiado.

16) El uso de Content Delivery Networds (CDN) también pueden influir positivamente en la velocidad de carga de las páginas. Los contenidos siempre se entregan del servidor geográficamente más cercano al usuario. El servicio Amazon S3 hoy en día es asequible a todos los bolsillos. Muy recomendable para páginas estáticas muy visitadas, descargas gratuitas, etc.

17) Por otro lado, Google ofrece la Google Libraries API en su CDN en el cual están alojadas todas las versiones de las bibliotecas Javascript como jQuery, Prototype o Dojo, que pueden enlazarse directamente desde la web.

18) En el caso de blogs para WordPress es recomendable utilizar un plugin para cachear los contenidos y reducir los accesos a las bases de datos. Uno que funciona muy bien es W3 Total Cache y con el cual se puede conseguir un incremento de velocidad en factor 10 si está completamente configurado.

Teniendo en cuenta estos 18 factores, conseguiremos un incremento importante de velocidad. Ahora os toca experimentar.

Si está información te ha parecido interesante, mira también:

1. Optimización de velocidad de páginas web (2/3)
2. Optimización de velocidad de páginas web (1/3)
3. Google: La velocidad solo afecta a un 1% de las búsquedas

Una forma sencilla es mediante un servicio de monitorización que vaya midiendo regularmente la velocidad de carga. Keynote Systems ofrece gratuitamente (para uso privado) el software Kite. Una monitorización de varios días puede darnos una idea muy buena de la velocidad de carga de la web y de si hay fluctuaciones durante el día. Si hubiese muchas fluctuaciones, sería recomendable contactar con el proveedor del alojamiento para buscar alternativas (cambio de la web de servidor, incremento del paquete contratado, etc).

Una vez tenemos una presencia online estable, ya podemos pasar a analizar la velocidad de carga de las páginas en si. Para ello hay varias herramientas, destacar los add-ons YSlow y Google Page Speed que están disponibles para varios navegadores, que analizan la páginas web y dan consejos de optimización de la misma.

Google incluso ofrece desde hace algunos días un servicio para realizar esa optimización en sus servidores. Este servicio funciona redireccionando los contenidos de la web a los servidores de Google, donde el servicio Google Page Speed Online incrementa la velocidad de carga. De momento es gratuito, pero en el futuro habrá que pagar por este servicio. Otro punto negativo es que se depende de Google, por lo que mejor optimizar las páginas web en los servidores de uno mismo.

Optimizaciones de las páginas:

1) Reducir el número de componentes de una página web. En vez de usar varios archivos Javascript o CSS externos, habría que intentar reducirlos al máximo. Cada archivo externo que se carga necesita peticiones de DNS y HTTP, respuestas del servidor y finalmente el tiempo de descarga de los archivos.

2) Enlazar siempre el archivo CSS antes de los archivos Javascript. Los navegadores no ejecutan el código Javascript hasta que no están completamente cargados los archivos CSS. Este funcionamiento es debido a que el Javascript puede necesitar información de estilos.

3) Vigilar las dependencias de bibliotecas como jQuery, jQUery UI, etc. En este caso jQUery UI solo funciona correctamente si se enlaza después de jQuery.

4) De todas las bibliotecas Javascript hay versiones minimizadas para los servidores productivos. Siempre se deberían de utilizar estas versiones. En el caso de jQuery el archivo ocupa 232 KB y la versión minimizada 92 KB.

5) Todas las funciones Javascript personalizadas también deberían comprimirse. Hay distintas herramientas como Closure Compiler, JSMin y YUI Compressor.

6) La optimización del código propio Javascript también es muy relevante, pudiendo alcanzarse fácilmente incrementos de velocidad al doble. Para detectar el potencial de optimización se puede usar la extensión de FIrefox Firebug. Si se hace click sobre “Medición de tiempo”, Firebug mide los tiempos de ejecución de los scripts de Javascript y da los resultados en ms.

7) El funcionamiento normal de Javascript también tiene influencia directa sobre la velocidad. La página web no se muestra hasta que el código Javascript no se ha cargado completamente. Esto se puede evitar incluyendo el código al final de la página.

Al igual que los archivos Javascript, los archivos CSS también se pueden comprimir. Existen herramientas como Minify CSS o Google Minify (que también existe como plugin de WordPress).

Y continuará mañana con los 9 factores que faltan en la lista.

Si está información te ha parecido interesante, mira también:

1. Optimización de velocidad de páginas web (3/3)
2. Optimización de velocidad de páginas web (1/3)
3. Google: La velocidad solo afecta a un 1% de las búsquedas