Mejora el rendimiento de tu web: optimizar imágenes y caché del navegador (mini tutorial)

Si quieres mejorar el rendimiento de tu página web, uno de los puntos más importantes es optimizar las imágenes. En este mini tutorial vamos a trabajar dos cosas: la optimización de la propia imagen para que pese lo menos posible, y la optimización de la entrega de esta imagen en una web, de modo que no suponga un lastre para la velocidad de carga del sitio.

[toc]

Notas previas

A día de hoy todavía hay mochos sitios web que siguen sin optimizar imágenes. Es curioso porque, de algún modo, todos sabemos que las imágenes deben pesar lo mínimo posible. Tener una imagen pesada no solo es molesto para el usuario, aumentando el tiempo de carga, sino que supone un importante lastre al posicionamiento. Me explico.

Una página web con unas imágenes muy pesadas cuesta más dinero. Así de simple. Actualmente, un enorme volumen de búsquedas y consultas se realizan desde dispositivos móviles, eso significa que muchos usuarios usan sus tarifas de datos para navegar. Tarifas que, por lo menos en España, están limitadas a cierta cantidad de MB o GB de transferencia mensuales. Una web que tiene unos recursos pesados, consume más KB de tarifa y, por lo tanto, cuesta más dinero al usuario. Google siempre apoya al usuario y, por lo tanto, penalizará los sitios web que consumen muchos recursos de forma innecesaria.

Desde hace algunos años, Google penaliza de forma automática todas las webs que no están optimizadas. De modo que los sitios web con poco rendimiento aparecerán al final de la lista de resultados de búsqueda, por muy buenos que sean sus contenidos. Personalmente, me parece genial.

Vamos al lío

Optimizar imágenes pera mejorar rendimiento web

Personalmente, tengo dos maneras de hacerlo. La primera es la más común: al procesar una imagen con Photohop, guárdala con la opción “guardar para web y dispositivos». Con esta herramienta podemos ajustar el peso de la imagen y previsualizar la calidad de la imagen optimizada. También se puede modificar el tamaño final. No hace falta cargar una imagen de 3000px cuando la vamos a ver una pantalla pequeña.

optimizrar imagenes 1

optimizrar imagenes 2

La otra opción es pasar por la página web que deseamos optimizar por un test de rendimiento de Google: PageSpeed Insights. Google detectará las imágenes que pueden ser mejoradas, y te ofrecerá la opción de descargar la imagen optimizada. Una vez descargues el paquete, debes substituir las imágenes optimizadas por las que tienes subidas en tu servidor. Esta opción es la más sencilla, pero implica un trabajo de optimización posterior. Siempre es mejor lanzar un sitio web optimizado desde el principio.

pagespeed1

La optimización de la entrega de estos recursos: caché de imágenes

Si tus usuarios acuden a tu web de forma reiterada, una buena opción es permitir que las imágenes se guarden en la caché del navegador. De este modo, para los usuarios que regresan, la visita es mucho más ligera y rápida.

Para permitir que los navegadores conserven las imágenes en caché, debemos crear una regla que así lo indique. A mi me gusta indicar esto en el archivo .htaccess del sitio web. Para la caducidad de la caché de las imágenes uso unas líneas como estas.


ExpiresActive On
ExpiresDefault A3600

ExpiresDefault "access plus 7 day"

Lo que hacen estas líneas, es indicar al cliente (el navegador) la duración o persistencia de un recurso. Cuando se supera el tiempo indicado, el recurso expira y, en la próxima consulta a la web, volverá a pedir la imagen.

Prueba de rendimiento

Os dejo unas pruebas de rendimiento hechos con PageSpeed de Google y con PingdomTools.

Sin optimizar

imagen-optimizada-3

imagen-optimizada-4

Optimizada

imagen-optimizada-1

imagen-optimizada-3

Como podéis observar, en mi caso no ha supuesto una diferencia “brutal», pero es un pequeño paso más para tener una página ligera y optimizada.

Los anuncios intersticiales van a penalizar en 2017

Ejemplos de intesticiales

A menudo, esto de hacer SEO se limita a estar atento. Es tan simple como leer los foros, blogs y seguir las fuentes adecuadas. En ellas hay suficiente información como para anticiparse y evitar la catástrofe.

El pasado 23 de agosto, Google publicó que los banners publicitarios (o de cualquier otra índole) que sean intrusivos, van a penalizar en los resultados de búsqueda para móvil. Ojo, que esto no es nuevo. Ya en 2015 Google anunció que los banners a pantalla completa y la publicidad en general sería un factor del algoritmo de posicionamiento.

Parece mentira, pero todavía tengo que andar explicando hasta que punto un banner puede llegar a ser un problema para el usuario, y más aún si el usuario nos visita desde un dispositivo de pantalla pequeña.

Lo busco ahora, lo quiero ahora

La lógica de Google siempre se centra en hacer feliz al usuario. Puede que tu sitio web tenga la respuesta más adecuada para lo que está buscando, puede que tu sitio web esté muy bien posicionado, pero ¿de qué sirve eso si en cuanto el usuario accede le plantamos un pop-up o banner que le impide ver el contenido? ¿Por qué lo obligas a ver 10 segundos de publicidad? ¿Por qué consumes su tiempo y sus recursos? ¿Por qué no le das lo que quiere?

La respuesta es simple: dinero. Para ti, un banner publicitario, intersticial, ese vídeo de 10 segundos obligatorios, son ingresos publicitarios. Para el usuario, es una molestia. Lo más probable es que cierre tu página y acabe consultando otro resultado de búsqueda más amigable. ¡Ping! Acabas de sumar un pequeño porcentaje a tu tasa de rebote 🙂

Tu pierdes, el usuario gana y, en consecuencia, Google gana.

Lo que va a ocurrir, a partir del próximo enero del 2017, es que Google empezará a penalizar si los intersticiales y los banners son intrusivos, privando al usuario de obtener la información que busca de una forma rápida y eficaz. Vas a poder seguir usando banners, y pop-ups, pero deberán ser más pequeños, más amigables y no podrán ocultar el contenido. Aquellas webs que tengan intersticiales del tipo “aviso de cookies”, o pantallas de login/registro, parece que no se van a ver afectadas.

Ante la más que previsible alud de solicitudes de ayuda por caídas en el tráfico orgánico que se va a producir en enero de 2017, yo solo me limitaré a decir una cosa: ¡os lo dije! Podemos hacer dos cosas: esperar la llegada del apocalipsis, o actuar. Aún recuerdo cuando Google decidió cambiar el sentido del linkbuilding. Las trompetas del fin del mundo sonaron durante meses, pero muchos decidieron seguir invirtiendo su dinero en la compra de enlaces. Ahora, en pleno 2016, aún hay quien está pagando importantes sumas por retirar las referencias.

Sinceramente, ya era hora.

fuente imagen: Google Webmaster Central blog

Google lanza una nueva herramienta para testear la versión móvil y el rendimiento de páginas web

Think wight google

«¿Sabías que nueve de cada diez personas abandonará un sitio web para móviles si no puede encontrar lo que busca de inmediato?» Con esta pregunta abrió Google su post del pasado 2 de junio, donde anunció el lanzamiento de una nueva herramienta para la medición del rendimiento de páginas web en sus distintas versiones (escritorio y móvil).

El objetivo de Google es hacer la vida más fácil a los pequeños negocios, y con esta herramienta busca simplificar y hacer más visual la necesidad de esmerarse en lograr un sitio web adaptativo y con buen rendimiento.

Por funcionalidades y estética, parece ser una versión renovada de Google PageSpeed, pensada para que los webamsters menos formados tomen conciencia de la importancia de mejorar el rendimiento móvil de sus sitios web. Una necesidad que se hace imperiosa ahora que Google va a introducir la velocidad de carga de las páginas como factor para el posicionamiento en los resultados de búsqueda en móvil. «The world’s gone mobile. Now, it’s your turn.» reza Google al pie de página.

¿Tu puntuación en velocidad de carga es pobre?

Esto es algo que ya ocurría con Google PageSpeed. Google es extremadamente exigente con la velocidad de carga, y llegados a cierto punto, es casi imposible optimizar más el rendimiento de nuestros sitios web. Dado que el usuario paga por cada MB descargado desde su móvil, Google desea que las páginas web sean cuanto más ligeras mejor. Este es, quizás, el apartado más difícil de cumplir.

test-elpais

Por supuesto, si buscas, encontrarás un sitio web capaz de cumplir todos los requisitos de Google. ¿Adivinas cuál?

google-point

Informes de rendimiento

Además de la presentación visual de los resultados, en la nueva herramienta de Google puedes solicitar un informe detallado del análisis realizado. En un margen de 24 horas recibirás en tu correo electrónico un informe con todos los datos y consejos para mejorar la presencia de tu sitio web en el buscador. Esto no es algo nuevo, y se asemeja a los informes programados de Google PageSpeed. Recuerda: existe una limitación de 3 informes diarios.

En cuanto a los consejos de optimización, nada nuevo: minificar html, minificación de css, evitar la ocultación de contenidos mediante JavaScript y activar la compresión. Consejos que venimos escuchando desde hace tiempo en Google PageSpeed, y nada que un buen SEO no sepa.

Consejos de mejora del sitio web