Desde el cambio de algoritmo Mobile First Index, el tiempo de carga de una página web pasó a ser un factor SEO importante en cualquier estrategia de posicionamiento.
Si queremos disponer de una página cuyo tiempo de carga sea rápido y que nos permita mejorar posicionamiento, captación y conversión, estos son los puntos que deberíamos de trabajar.
1. Hosting
El hosting afecta al SEO por lo que el servidor donde tengamos alojada nuestra página web es el primer aspecto que debemos trabajar. Un servidor profesional nos ofrecerá buenos tiempos de conexión por lo que antes de contratarlo conviene conocer qué valor de Time to First Byte (TTFB) ofrece.
Web server perfomance test nos ayudará a validar el tiempo de carga asociado a un hosting.
Si tarda mucho en servir nuestra página web, el resto de carga se verá afectado por lo que garantizar un rápido envío del primer byte es crucial para un correcto tiempo de carga.
Si nuestro servidor web no los permite, podemos instalar el módulo PageSpeed de Google que automáticamente configurará una serie de parámetros para optimizar el sitio web.
2. Elementos multimedia
Tanto imágenes como vídeos pueden provocar que nuestra página sea más lenta de lo necesario. A este respecto hay varias cosas que podemos hacer:
- Carga selectiva (lazy load) en base a lo que se va mostrando en pantalla. En lugar de cargar todas las imágenes o vídeos de golpe, únicamente cargamos aquellas que entran en el campo de visión del usuario. A medida que hace scroll, vamos cargando las siguientes.
- Hacer uso de los nuevos formatos de imágenes como webp para mejorar la velocidad.
- Comprimir las imágenes para que ocupen menos espacio. Podemos hacer uso de ImageOptim, Squossh o Compressor.io
- Usar imágenes con las dimensiones adecuadas. No tiene sentido poner una imagen grande si la vamos a mostrar en pequeño. Para páginas multidispositivo es importante aprender a utilizar las imágenes adaptativas.
También es importante optimizar las imágenes para que aporten valor a la estrategia SEO.
Por último, podemos hacer uso de una red de distribución de contenidos (CDN) como Cloudflare que nos permitirá cachear y servir los ficheros estáticos de forma más rápida y eficiente, mejorando sustancialmente la carga de nuestro web
3. Comprimir los recursos
Hay ciertos recursos que creamos una vez y no volvemos a utilizar. Por ello se recomiendo comprimirlos al máximo (quitando espacios, comentarios o saltos de línea) para que ocupen el menor tamaño posible.
- Comprimir el código CSS. Recomiendo CSSnano o CSSO.
- Comprimir el código Javascript. Podemos usar UglifyJS.
- Comprimir el código HTML
Mucho ojo con bloquear el acceso de los buscadores a los ficheros CSS y JS puesto que podría afectar a nuestra estrategia SEO.
4. Eliminar aquello que no utilizamos
La forma más efectiva de aligerar nuestra web es eliminando aquello que no utilizamos. Es práctica habitual hacer un desarrollo y replicarlo a lo largo de todo el sitio web pero muchas veces, ciertas partes del mismo, son usadas de forma puntual; aún asi, las cargamos de forma transversal.
Por ejemplo, si en la home tenemos un banner y en el resto del sitio no, deberíamos tener un CSS/JS común a toda la página que no incluyera nada relacionado con el banner y, únicamente en la home, añadir ese código extra.
Podemos hacer uso de Chrome Dev Tools para identificar el código CSS que no utilizamos en una página, de esa forma con retirarlo ajustaremos al máximo el tamaño de este fichero. Una aplicación online muy cómoda es PurifyCSS.
También disponemos de extensiones para el navegador como UnusedCSS o PurgeCSS que nos facilitarán la tarea.
Adicional a todo esto, existe un punto avanzado que también podemos trabajar. Se trata del camino crítico para generar nuestra web. Si conseguimos identificar y separar la estructura crítica de lo demás -para que sea lo primero que cargue- conseguiremos una página realmente rápida.
Herramientas para validar el tiempo de carga
Podemos hacer uso de aplicaciones como Web.dev (basada en Google Lighthouse) o GTMetrix para conocer qué puntos debemos otimizar en nuestra web.