Todos los días lo experimentas como usuario: haces click en un website y si todo marcha bien; es decir, rápido e interesante, allí te quedarás consumiendo un contenido tras otro. Frustrante es, por ejemplo, el caso de los sitios web de algunos medios de comunicación que van lento. Desde los 60 se está hablando de “La sociedad de la información”, así que te imaginarás que en pleno 2015 no es menos que pertinente que un usuario de la web tenga un rápido acceso a la noticia. Pero aún hoy pasa que haces click en el sitio web de algún periódico y el home page tarda 30 segundos o más en cargarse, algo totalmente inútil si tenemos a la mano las noticias en 140 caracteres de Twitter.

Así como pasa con los medios, pasa también con una página web de cualquier tipo de contenido. La velocidad es fundamental para optimizar tu página web; de hecho, la velocidad de carga de contenidos esperada por el usuario promedio es de dos segundos o menos. ¿No me crees? Te lo cuento en cifras. Recientes estudios indican que una página web “lenta” genera:

11% menos de Page Views. Los Page Views o páginas vistas son las páginas que visita el usuario dentro de tu website, indican el “recorrido” que hizo en tu sitio. Si conviertes el camino en una carretera rocosa, el usuario de turno seguramente tomará la autopista. Sí ya sé, muy mala la metáfora, pero la entendiste, ¿no?

16% de insatisfacción en tus clientes. Obviamente, si estás en una tienda por departamentos y los vendedores tardan una eternidad en decirte qué productos tienen y cuánto cuestan pronto cruzarás a la acera del frente, a ver si algún otro establecimiento tiene lo que estás  buscando. En la web es exactamente lo mismo: si un una página tarda en cargar su oferta de productos y –peor aún- si hace lenta tus transacciones al momento en el que finalmente decides comprar algo, es difícil que regreses.

7% menos de conversiones. No del partido republicano al demócrata (esas pueden tomar más tiempo). Las conversiones en la web no son más que el proceso de transformación de datos informáticos, de una representación concreta a otra (dicho por Wikipedia). Esto es: el momento “mágico” en el que haces click y un link te lleva a otro contenido mientras navegas en la web. Pues bien, el hechizo se rompe si tal conversión tarda más que la de Bruce Jenner en Caitlyn Jenner.

47% de los usuarios espera que una página web se tarde dos segundos o menos en cargarse. Ya te lo habíamos comentado. Esta cifra específica proviene de un estudio de la corporación Akamai, que también arrojó lo siguiente:

40% de los usuarios abandonará una página web si tarda más de tres segundos en cargar sus contenidos. De los mismos creadores de “Nos iremos a otro website si el tuyo no carga en dos segundos”. Es la evidencia de la expectativa promedio.

52% de los compradores en la web consideran que la rápida carga de una página es un atributo fundamental para convertirlos en fieles clientes. O lo que es lo mismo: rapidez garantiza lealtad.

22% ha aumentado la velocidad de carga web este año, según lo informado por la empresa Radware.

Con todas estas cifras en mano, paso ahora a explicarte cómo puedes optimizar tu página web, mejorando tu velocidad de carga. Y no te quitaré mucho tiempo, lo haré en 10 tips.

1. Pon tu HTTP a dieta. El HTTP es como ese vecino al que ves todos los días en el ascensor, lo saludas, le preguntas por su perro, su abuelita, su esposa e hijos, pero seguramente no sabes cómo se llama realmente. Ciertamente, al HTTP te lo topas todos los días en la web, más específicamente en la barra superior, así que hazle un cariñito, pero, claro está, primero conócelo. Su nombre de nacimiento es Hypertext Transfer Protocol (Protocolo de Transferencia de Hipertexto). Este protocolo, entendido en lenguaje web, es el conjunto de reglas a seguir para publicar páginas web o HTML (HyperText Markup Language o Lenguaje de Marcado de Hipertexto), el lenguaje más básico de la programación web. El HTTP es la solicitud que tendrá que hacer tu usuario a la web para ver tu página. ¿Qué es lo ideal para optimizar tu página web en términos de velocidad? Que reduzcas tu HTTP a su mínima expresión. ¿En qué se traduce esto?

  1. Raciona el número de elementos de tu página web (tanto gráficos como de texto. No sobrecargues o “el vuelo” del usuario no podrá despegar).
  2. Usa CSS en lugar de imágenes. Las CSS son Cascading Style Sheets u Hojas de Estilo en Cascada, las cuales –aparte de trasladarte con su nombre a un paisaje selvático- marcan la estructura de un documento que será mostrado en tu página web y lo optimizan. Sobre todo si combinas múltiples estilos de CSS en una sola hoja.
  3. Reduce los scripts o archivos que contienen textos y procura siempre ubicarlos en la parte superior de tu página web. Recuerda que a la mayoría de los usuarios no les gusta encontrarse con grandes bloques de texto en la web, así que esta medida les hará la visita más amable y a ti te ayudará a optimizar tu página web.
  4. Haz que tu página web fluya “ligera”, como una concursante del Miss Universo (recuerda cómo les baja la popularidad a las reinas que se ponen “pesadas”). Reducir tu número de componentes por página hará que tu HTTP esté en la línea o en todo caso, que avance rápido en línea.

2.¡Haz que tu servidor sirva! Esto es: reduce el tiempo de respuesta de tu servidor; es decir, que entre la solicitud de tu usuario y la conversión haya menos de 200 milisegundos. Esto por supuesto, no lo harás solo. Google te ofrece herramientas como: Yslow, para evaluar la velocidad de tu sitio web y mejorar tu presentación y la PageSpeedTools, que tiene, básicamente, la misma función.

3. ¡Comprímelo todo! Aunque suene a una petición de tu profesora de yoga, este tip se refiere a que comprimas tus contenidos en orden de optimizar tu página web en materia de velocidad. Un ejemplo sencillo es cuando intentas enviar unas fotos de muy alta resolución y se te rebotan a tu cuenta porque “pesan” mucho. En ese caso, habrás notado que muchos envían las fotos en un ZIP que las despliega en tu máquina o dispositivo sin necesidad de que esperes una eternidad. Sin mencionar programas de fácil uso como el neerlandés We Transfer o el estadounidense Dropbox. Pues bien, para que los usuarios de tu página no “reboten”, usa la técnica de Compresión (Compression). La Compresión reduce el ancho de banda de tu página (lo que miden tu data), lo cual reduce el tiempo de respuesta de tu HTTP. Nuevamente, tienes la opción de recurrir a una herramienta: GZip, que reduce el tiempo de descarga de tus contenidos en un 70%, de acuerdo a estudios de Yahoo!

4. Ten mucho caché. La elegancia podría estar asociada en este caso al hecho de que habilites el almacenamiento en cache del navegador. Un ejemplo cotidiano: si vas a casa de tus suegros la primera vez, aparte de nervios sentirás un poco de desorientación al no saber dónde quedan la cocina y el baño y también inseguridad sobre si disfrutan los chistes subidos de tono o las reflexiones políticas que estás improvisando. A la tercera visita ya sabes dónde queda todo y si a tu suegra le gustan las flores o es alérgica al polen; no tienes que volver a romper el hielo diciendo que “hace mucho calor”. Trasladado a la web, la memoria cache es el almacenamiento temporal de la data de tu página en la computadora o dispositivo de tu usuario. De manera que, al activar el almacenamiento cache evitas a tu usuario tener que hacer una y otra vez la misma visita, que no es otra cosa que la misma solicitud HTTP, que tomará los mismos segundos que la primera vez. Si lo haces mejoras la velocidad de tu página web y la optimizas. Y tus suegros contentos.

5. ¡Minifica! No es minimiza ni magnifica. La palabra no existe en español, y seguramente tampoco en inglés que se escribe Minify. Minify en el lenguaje web es Comprimir las CSS (¿recuerdas las Hojas de Estilo en Cascada del tip 1?). Minify es comprimir los códigos de las CSS con la finalidad de eliminar caracteres innecesarios, lo cual mejorará la velocidad y optimizará tu página web. Saca de nuevo tu caja de herramientas: Para minificar o minify tu HTML puedes usar PageSpeddChromeExtension; para minificar CSS intenta con YUICompressor y Cssmin.js: y para minificar el lenguaje de programación Java Script, prueba ClosureCompiler, Cssmin.js o el YUICompressor.

6. Practica el minimalismo con tus imágenes

Si vives en un apartamento de 30 metros cuadrados, ¿de verdad necesitas un piano de cola en medio de la sala? A lo mejor das grandes conciertos, pero se te dificultará caminar dentro de tu propio espacio y con suerte te quedará espacio para dormir, a menos que duermas dentro del piano. Esto trasladado a tu website significa: para optimizar tu página web reduce el tamaño de tus imágenes tanto como puedas. Si el ancho de tu página es de 570 píxeles, por favor no optes por una imagen que mida 2000px, ya que, nuevamente, el tiempo de descarga será mayor y la navegación al usuario se dificultará tanto como en tu pequeño apartamento con el piano de cola. Otros ajustes: reduce la profundidad del color de las imágenes tanto como te sea posible, y usa programas como JPG (el mejor para optimizar tu página web en términos de imágenes), PNG (aunque no es apto para navegadores antiguos) y GIF para imágenes de 10×10 píxeles o imágenes animadas. Por favor no uses TIFFs que “pesa” mucho más (puede registrar hasta 16 millones de colores) y es más idóneo para imágenes que van a ser impresas. Otro dato: asegúrate de que el código de la imagen es el correcto. SRC (set redundancy compression) es uno de los métodos de compresión de datos más usados, verifica que no haya códigos vacíos ocupando espacio. Generalmente, el código de una imagen lleva este encabezado: img src=””. Otra herramienta que te ayudará a comprimir imágenes: WPSmush.itplugin.

7. Vigila la caída de las “cascadas” de las CSS

Tal y como te contamos en el tip número uno, las CSS son las son Cascading Style Sheets u Hojas de Estilo en Cascada, las cuales marcan la estructura de un documento que será mostrado en tu página web. Para optimizar tu página web en términos de las CSS debes procurar que ambas “cascadas” fluyan, porque las CSS se despliegan en dos archivos: uno externo que se carga en la parte superior o encabezado de tu página web y otro en línea que se inserta automáticamente en la página web. Para verificar su correcto despliegue te ayudará la CSS Delivery Tool.

8. La importancia de la primera descarga

Teniendo en cuenta el correcto despliegue de las CSS externas y on line para optimizar tu página web, existe la manera de que la parte superior de tu página web –donde debería haber la mayor cantidad de scripts- se descargue mucho más rápido y el resto de la página pueda cargarse apenas unos segundos después. A veces, lo primero que se dice es lo que realmente cuenta. Y ni hablar de aquello de “la primera impresión”. De manera que lúcete con tus primeras palabras.  

9. ¡Que los complementos no sean incompletos!

Si vas a un almuerzo y te sirven un buen plato de risotto y además de los cubiertos tradicionales te traen unos palillos para comer sushi, ¿crees que puedas usarlos todos al mismo tiempo? Dependerá de tu creatividad, pero es probable que te basten los cubiertos tradicionales. En la web abundan los plugins o “complementos” de los programas o aplicaciones; es decir una función adicional de un mismo programa. Algunos son de uso fácil y rápido, otros causan problemas técnicos. Elimina los plugins innecesarios para optimizar tu página web y permite que los usuarios –asiáticos, europeos o latinos- siempre tengan buen apetito por tus contenidos.

10. Redirecciona, pero no tanto

Bien que te gusten los Links Internos y que hagas un uso apropiado de ellos, así como de los Links Externos, pero… ¡Que no se te vaya la mano con el número de redirecciones! Esto porque hacen más lenta la experiencia tu usuario y evitan la optimización de tu página web. Y recuerda que para ello también cuentas con herramientas. El HTTP Redirect es una de ellas. ¡Úsala! Y no pierdas el rumbo en eso de optimizar tu página web.

¡Tu página web a toda velocidad!

Tu página web más rápida y tú más contento

Leave a Reply

Your email address will not be published. Required fields are marked *

Eres Humano? *