Mini guía para optimizar la velocidad de tu web

La velocidad de carga de nuestras webs es una de las cosas que más debemos cuidar. Un tiempo de carga bajo garantiza una navegación agradable y fluida. Los usuarios somos muy impacientes, y queremos que todo vaya lo más deprisa posible. Si tarda mucho en cargar, me voy a otra página. Si va a saltos, me voy a otra página. Además mejorará nuestro posicionamiento en buscadores y aumentará el tráfico de nuestro sitios. Por este motivo voy aquí os dejo una mini guía para ayudaros a optimizar la velocidad de carga de vuestra web de forma sencilla y rápida:

1- Optimizad el tamaño de las imágenes.

Usad thumbnails para crear miniaturas de imágenes grandes si es necesario. Elegid el formato de imagen adecuado (no todo es jpg) y con la calidad adecuada (adecuada para el ojo humano). Las imágenes son normalmente los elementos de más peso de la web. Siempre que podáis, sustituidlas por estilos.

2- Usad la caché adecuadamente.

Marcad la caché para cada tipo de archivo. Las imágenes pueden tener un par de semanas de caché (normalmente cambian poco en la web). Los archivos php, html y similares 1 día. A cada tipo podéis ponerle el que necesite. En post anterior he puesto un pequeño ejemplo sobre cómo optimizar la cache de tu web con .htaccess

3- Evitad llamadas a recursos externos.

Normalmente tirar de recursos externos a nuestro servidor ralentiza la carga. Si podéis, mejor tener las imágenes, vídeos, archivos de descarga o lo que sea en nuestro propio servidor.

4- Utilizad un hosting adecuado.

Tu web puede estar muy optimizada, pero si el alojamiento no es bueno de poco servirá tu esfuerzo. Si se lo puede permitir uno es mejor tener un servidor dedicado para garantizar la velocidad de la web. Un Servidor virtual o servidor cloud es suficiente para comenzar, y desde mi punto de vista merece mucho la pena. Además de los servicios que necesitas, aseguraos de que el servidor tiene los mínimos saltos posibles al hacerle un tracert (10 como máximo) y que el tiempo de respuesta al ping es bueno (por debajo de 60). Os pongo una imagen con el tracert y el ping a mi blog para aquellos que no sepan cómo hacerlos. Se puede ver que hay 8 saltos en el tracert y un tiempo de respuesta entre 33 y 38 milisegundos con una media de 35 milisegundos.

5- Instalar speed page en firefox o en chrome. Con esta extensión podrás obtener un reporte de tus wes con consejos sobre cómo mejorar la velocidad de las mismas.

Existen muchos otros recursos para lograr una web rápida y optimizada, pero con estos 5 consejos lograréis una notable mejora del tiempo de carga de forma rápida y con poco esfuerzo.

Mejora la velocidad de tu página web usando la caché

Algo que mucha, pero muchas webs ignoran es el tratamiento de la caché. Cuando se carga una web se descargan archivos. Y esos archivos descargados el navegador los visualiza para nosotros. Los archivos descargados pueden guardarse en la caché, evitando que el navegador los recargue de nuevo al volver a visitar esa página. Lo ideal es decirle al navegador cómo usar la caché, es decir, decirle qué archivos recargar y qué archivos dejar igual. Las imágenes, por ejemplo, podemos dejarlas en caché durante 1 semana. El contenido (archivos .html, .php y similares) podemos recargarlos, por ejemplo, cada minuto. Depende de la frecuencia de actualización y del tipo de web que queramos gestionar configuraremos la caché con una u otra frecuencia.

Se puede usar php para indicar tratamientos de caché, pero yo prefiero usar .htaccess y que toda la web siga el mismo tratamiento. Si alguna página necesita un cacheado especial se lo indico y listo. Os dejo un ejemplo de configuración básico de caché de un archivo .htaccess

Apache .htaccess caching code

# 1 YEAR
< ".(ico|pdf|flv)$">
Header set Cache-Control "max-age=29030400, public"
</>
# 1 WEEK
< ".(jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=604800, public"
</>
# 2 DAYS
< ".(xml|txt|css|js)$">
Header set Cache-Control "max-age=172800, proxy-revalidate"
</>
# 1 MIN
< ".(html|htm|php)$">
Header set Cache-Control "max-age=60, private, proxy-revalidate"
</>

Para más información os recomiendo visitar esta página, de donde he copiado la configuración anterior y donde tenéis mucha más información sobre cómo usar apache para configurar la caché.

Firefox o Chrome, difícil elección

Como desarrollador me afecta de forma muy directa el navegador a utilizar para ciertas tareas de mi trabajo. Hasta hace poco usaba siempre Firefox, pero la velocidad de actualización del mismo está dejando atrás muchas extensiones y haciéndolas incompatibles con las nuevas versiones. Y visto el calendario de versiones que tienen, este problema parece que va a ir a más. Y ahora para mayor duda, tenemos a Chrome. Chrome siempre ha sido el más rápido, pero las extensiones no eran ni de lejos como las de firefox. Pero poco a poco he ido encontrando casi todas las extensiones que necesito, y salvo un par de ellas (como firebug, cómo me gustaría tener el mismo que tiene Firefox en Chrome) la verdad es que me va bastante bien. Y la gestión independiente de procesos por pestañas que evita cuelgues del navegador completo por fallos en una pestaña es una gozada.

Antes Firefox era mi primera opción. Ahora uso más Chrome y abro firefox para revisar vistas de navegador y usar algún plugin que otro muy especial. Y trabajando con muchas pestañas abiertas no hay duda de que Chrome se las arregla mucho mejor (aunque tampoco es un virtuoso del bajo consumo de recursos). De momento parece que va a ganar el navegador de Google, para la batalla y el de Mozilla para los casos complicados. ¿Seré el único que tiene este tipo de dudas?

Extensión de Firefox para medir píxeles MeasureIt

Hace un tiempo que uso esta extensión para Firefox, y la verdad es que me parece tremendamente útil, simple y sencilla. Se llama MeasureIt y nos permite marcar en la pantalla del navegador una zona y medirla en píxeles.

Esta extensión me ahorra mucho tiempo cuando tengo que maquetar algo, o necesito una imagen a un tamaño determinado. basta con pulsar sobre el icono de la regla amarilla de la parte inferior derecha del navegador y se activará la extensión. Una vez activada con el ratón creamos la zona en la pantalla y nos irán saliendo automáticamente las medidas de la misma. Además podremos mover la selección por la pantalla para trasladar la medida. Realmente útil para desarrollo web. Debería ir integrado con Firebug, pero tal vez sería pedir demasiado.

Fuente: https://addons.mozilla.org/es-es/firefox/addon/measureit/

Directorio de tiendas, un directorio para tienda virtuales

Hace poco os comenté el relanzamiento de un directorio de empresas que teníamos abandonado. Ahora hemos retomado el tema de los directorios y lanzamos un nuevo directorio de tiendas virtuales. Me gustaría que éste fuese un directorio exclusivo para tiendas virtuales, aunque cualquier proyecto de ecommerce tiene en principio cabida en el mismo.

Espero ayudar así un poco a los que queráis dar a conocer vuestra tiendas virtuales. Un link nunca viene mal a nadie, y si es sin recíproco mejor que mejor 😉

Nueva tienda virtual de bicicletas, recambios y accesorios de ciclismo ciclosquinto.com

Siguiendo un poco con la racha de ayer hoy voy a presentaros otra tienda virtual que hemos terminado hace poquito. Se trata de ciclosquinto.com una plataforma de ecommerce especializada en el mundo de la bicicleta. En ciclosquinto.com puedes obtener las mejores bicicletas y los mejores componentes, accesorios y recambios al mejor precio.

Como siempre, se agradecen comentarios sobre la tienda virtual. Vuestro feedback es importante para seguir mejorando.

Nueva tienda virtual Los utensilios del chef

Hace ya tiempo que no posteo sobre una tienda nueva de las que vamos desarrollando en mi empresa. ¡Y son muchas! Así voy a volver a recuperar la costumbre y a ir mostrando algunas de ellas. La que os traigo hoy es Los utensilios del Chef, una tienda virtual dedicada a los suministros de cocina y repostería.

Un diseño simple y bonito (aunque hemos mantenido la cabecera antigua a petición del cliente) y muy usable. Espero que le echéis un vistazo y que, como siempre, me comentéis cualquier detalle o duda que os surja.

Google Evolution, cambiar antes de la adaptación

La evolución es cambio y adaptación. En internet la evolución es una constante, y el que no evoluciona muere más temprano que tarde. Y así es como estoy viendo yo a Google últimamente. Cambia a un ritmo frenético. No para de “mejorar” sus servicios y de lanzar nuevos. Si no fijaos en dos de los últimos: bloqueo de sites personalizado y vista previa de vídeos en las SERP. Y en la misma semanalanzó ambos. Añade eso al bloqueo masivo de sites que está llevando a cabo con las “mejoras” en sus algoritmos y algunas perlas más que está introduciendo en los resultados “instant”. Vaya lío :)

Parece que no nos da tiempo de adaptarnos a un cambio cuando llega la siguiente evolución. Y lo que antes funcionaba a nivel SEO ya no va tan bien. Los cambios se suceden a velocidad de vértigo, y puede que tanta velocidad no sea buena para el mercado. Si pretenden potenciar el SEM de Adwords desde luego que lo están logrando. El SEO bien trabajado sin duda seguirá funcionando, pero da la sensación de que cada vez se tiene menos control (si alguna vez se tuvo) sobre el sitio que ocuparás en las SERP de Google.

Con estos cambios creo que el propio Google está facilitando al Social Media el tener cada día un mayor ROI, ya que todos preferimos trabajar en un entorno sobre el que tenemos algo de control (o al menos que el total control no lo tenga una sola empresa), y que no todas las visitas sean a costa de CPC. Si en SEO se usa mucho el ensayo->error, al menos que Google nos de tiempo para probar las cosas.

Enlaza tu empresa, directorio de enlaces para tu web

Por fin vamos poco a poco retomando proyectos que tuvimos que abandonar en su momento por falta de tiempo. Y uno de ellos es el que os presento hoy. Se trata de Enlaza tu Empresa, un directorio de enlaces.

Directorio web enlaza tu empresa

En Enlaza tu Empresa puedes insertar gratis un link para tu página web. Inicialmente está pensado para ser un directorio de webs de empresas, pero admitiremos cualquier enlace de webs orientadas al comercio electrónico. Espero que os guste y me ayudéis a darlo a conocer un poco.