Consejos para reducir los tiempos de carga y mejorar el SEO

Existen numerosas herramientas de medición de los tiempos de carga de contenido web. Un diseño adaptado al consumo en móviles junto a los tiempos de carga son dos de los elementos básicos en un proyecto digital.

Hace 10 años, el éxito de una página web y, en especial, los elementos que influían en un buen o mal posicionamiento en búsquedas dependían de una serie de métricas que hoy en día han cambiado en gran medida. Un elemento que ahora se ha convertido en una de las métricas del éxito evidente es el tiempo de carga de página. Un diseño adaptado al consumo en dispositivos móviles, especialmente el teléfono inteligente, y los tiempos de carga son dos de los elementos básicos en cualquier lista de tareas por hacer cuando uno piensa en un proyecto digital.

Si ese proyecto no es nuevo, el primer paso sería evaluar con qué velocidad carga el contenido en una página web. A día de hoy han proliferado numerosas herramientas que permiten medir esa velocidad, y de paso, establecer si un sitio web está o no adaptado y en qué medida a los dispositivos móviles. Las herramientas más utilizadas por los desarrolladores o expertos en SEO (Search Engine Optimization) están vinculadas a Google, por motivos evidentes.

• PageSpeed Insights: la herramienta permite copiar y pegar una url cualquier en un campo abierto e iniciar un análisis rápido del site. La plataforma facilita a los usuarios dos tipos de informes: uno centrado en el rendimiento de una página web en escritorio, y otro enfocado a dispositivos móviles. Esos informes se basan en una puntuación de 0 a 100 y, a nivel visual, en un semáforo que va del verde al rojo pasando por el amarillo anaranjado. Los análisis no sólo aportan una puntuación, sino que establecen elementos concreto que el desarrollador debe corregir, algunos otros que podrían plantearse mejorar y algunas otras reglas que son correctas. Algunos elementos que suelen generar problemas de adaptación: – Reducir el tiempo de respuesta del servidor: un elemento que suele provocar que los tiempos de carga sean algo lento.

– Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página: el JavaScript es un elementos interesante para introducir animaciones o transiciones en una página web, pero también ejerce un poder negativo para los tiempos de carga.

– Minificar JavaScript y CSS: compactar el código JavaScript puede ahorrar una gran cantidad de bytes de datos y acelerar los tiempos de descarga.

– Optimización de imágenes: las fotos pesadas son un terrible estorbo.

– Elementos de usabilidad: es indispensable que todo el contenido visible de la página web se adapte a la perfección a la pantalla visible del dispositivo.

• Google Search Console: esta es la herramienta por excelencia para cualquier profesional del SEO o desarrollador cuando quiere medir cómo su página web se relaciona con todos los elementos en los que Google pone sus ojos. Con esta herramienta el profesional puede revisar sin problemas el rendimiento de las páginas AMP con su contenido indexadas por Google. También consultar el estado de usabilidad móvil de su sitio web. Cuánto menos errores de ese tipo contenga la página, mejores tiempos de carga.
• Google Analytics: esta es una de las mejores herramientas de medición online del mercado. El número de informes que facilitan de forma gratuita y sus características de personalización son tan elevadas en su versión gratuita, que casi no tiene rival. Es cierto que en el mercado existen otras muy buena herramientas de analítica, pero la gran mayoría usa Google Analytics. En cuanto a los tiempos de carga, GA dispone de varios informes en su pestaña de ‘Comportamiento/Velocidad del sitio’. En cuanto al informe de ‘Tiempos de página’, el usuario encuentra información sobre métricas de interacción básicas como el número de páginas vistas y tasa de rebote, métricas de red y servidor, contenedores de tiempo en distintas métricas e, incluso, datos geográficos. Desde ahí también se tiene acceso a un informe de sugerencias de mejora de los tiempos de carga, que es el mismo análisis al que un desarrollador tiene acceso con el informe de PageSpeed Insights.

Tiempos de carga: cómo mejorar el rendimiento

Existen algunos consejos prácticos que permiten que cualquier usuario medio, experto en SEO o desarrollador pueda mejorar los condicionantes que tienen influencia directa en una rápida carga de contenido en una página web concreta:

• Tener controlado todo el código JavaScript y hojas de estilo CSS: cuando una página web tiene JavaScript y CSS, hoy en día casi todas lo tienen, una buena práctica es colocar todo ese código, que deberá ser ejecutado por el navegador, en archivos externos. Y además, colocar CSS y scripts en archivos separados. Esto es lo que facilita que los encabezados en el <head> estén minificados y por tanto los tiempos de carga sean menores. No es necesario que el navegador renderice una gran cantidad de código por cada página. Eso provoca a su vez dos grandes ventajas: un mejor posicionamiento y un mantenimiento mucho más accesible para el equipo de desarrollo. Estos serían dos ejemplos de código JavaScript y CSS en archivos externos:

–  JavaScript: <script src=”script.js” language=”javascript” type=”text/javascript”></script>

–  CSS: <link rel=stylesheet type=”text/css” href=”hoja_de_estilos.css”>

• Optimización del peso de las imágenes: hoy en día existen numerosas herramientas de optimización o compresión rápida de imágenes. Uno de los programas más utilizados en edición de imágenes es Photoshop, que dispone de una función específica de guardado de fotos para web. Esto permite tener una imagen al tamaño que necesitamos con un peso comedido. Además, existen herramientas como RIOT, Image Optim, Image Optimizer o Kraken que facilitan la compresión en masa para hacer una sustitución en cascada de todos los elementos de una página web. Es un condicionante clave a la hora de conseguir un gran posicionamiento.
• Cuidado con los cortes automáticos de CMS como WordPress: los cortes automáticos de WordPress son una bendición cuando queremos renderizar un sitio web adaptado al ancho de pantallas más pequeñas como una tableta o un teléfono inteligente, pero eso no quiere decir que todo sea ideal. El navegador está obligado a cargar la imagen original, calcular los requisitos de espacio, buscar la imagen perfecta para esos requisitos y renderizarla. Ese espacio de tiempo para realizar esas acciones también ralentizan la carga final del contenido de las páginas de una sitio web.
• Almacenamiento en caché: la caché siempre es una gran amiga porque evita que el navegador tenga que cargar todo el contenido de nuevo cada vez que hacemos una petición al servidor. Eso aumenta mucho los tiempos de carga del contenido porque, en cierta forma, ya está precargado.
•  No usar en exceso el redireccionamiento 301: evitar errores 404 con redirecciones 301 es una práctica recomendable para el buen funcionamiento de un sitio web a todo los niveles, pero un número excesivo de redirecciones 301 también pueden ralentizar los tiempos de carga. Es evidente que el navegador tiene que hacer un doble paso para cargar ese contenido: llega a la dirección antigua, se percata de la redirección nueva y después carga el contenido que se encuentra en esa nueva URL. Ese doble camino provoca que los tiempos de carga sean más lentos de lo habitual. Sobre todo cuando tenemos páginas web con gran recorrido, donde existen redirecciones 301 en cadena o en bucle, con direcciones nuevas precedidas de varias direcciones antiguas con su consiguiente redirección 301. Forma parte de la labor del SEO limpiar todos estos problemáticos enjambres 301. 

¿Te interesan las APIs financieras? Descubre todas las que te ofrece BBVA?