Insights
Cómo mejorar el tiempo de carga de tus webs
Velocidad. Esa es la palabra clave. Vivimos en la era de la inmediatez: lo queremos todo y lo queremos ya. Por eso, para que los usuarios que acceden a tu web tengan una buena experiencia y fidelicen mejor con tu producto, es necesario que tu site se cargue rápido. Si no lo consigues, pocos de tus visitantes esperarán más de 2 segundos a ver qué les tienes que contar, aumentando tu tasa de rebote hasta límites sonrojantes.
Pero la velocidad de carga de un sitio web no solo es una cuestión de experiencia de uso. Los principales motores de búsqueda —Google, Bing, Yahoo!…— tienen en cuenta la rapidez con la que carga un contenido para determinar su calidad y premian a los sitios web más rápidos con una mejor clasificación en sus páginas de resultados, por lo que dicho de otro modo, el tiempo de carga de tu site repercutirá notablemente en el SEO (Search Engine Optimization). Y el SEO es muy importante para cualquier negocio.
Por eso, en este artículo, vamos a darte algunas recomendaciones para que tu sitio web cargue mucho más rápido. ¡Empezamos!
Escoge un buen servidor
A la hora de escoger el servidor en el que se va a alojar tu site encontrarás que existen múltiples de planes de hosting y normalmente se suelen dar grandes diferencias de precio entre unos y otros. Aunque no siempre es así, lo cierto es que estas diferencias generalmente se traducen en servidores de mayor calidad que, además de ofrecer mejores condiciones de seguridad y fiabilidad, también suelen ser mucho más rápidos a la hora de ‘enviar’ tu web a tus usuarios. Así que es importante escoger un buen servidor.
Por otro lado, la distancia geográfica entre tu site y tus usuarios genera algo de retardo. Si la mayor parte de tu público potencial se localiza por ejemplo en España, lo ideal es que tu servidor también lo esté, ya que no es lo mismo mandarles un contenido desde Madrid que desde Wichita. Si tu público está geográficamente más disperso entonces puedes recurrir a un CDN (de Content Delivery Network o Red de Distribución de Contenidos), que básicamente consiste en replicar tu site en varios servidores ubicados en diferentes puntos de forma que cada uno de tus visitantes descargue tus contenidos desde el servidor más próximo. Amazon Cloud, Google CDN, Cloudflare o Incapsula son algunos proveedores de este tipo de servicio.
Mejora tus imágenes
Toma nota de este punto porque a la hora de reducir el tiempo de carga de tu site probablemente nada tendrá tanta repercusión como disminuir el tamaño de tus imágenes. Las imágenes suponen la mayor parte del tamaño final de una página web, por lo que redimensionarlas, optimizarlas y modernizarlas resulta clave.
-
Redimensionar: Una imagen de por ejemplo
3.000 píxeles de ancho por2.000 píxeles de alto a300 ppp (píxeles por pulgada) la podemos mostrar en página a600 x 400 píxeles gracias a CSS, pero seguirá siendo una imagen de3.000 x 2.000. A mayor tamaño y resolución, las imágenes son también más pesadas, por lo que siempre hay que subir las fotos al servidor con el mayor tamaño al que se vayan a mostrar y a72 ppp de resolución. En el primer caso de nuestro ejemplo, la imagen pesa2,92 MB mientras que ajustada a600 x 400 píxeles pesa252 KB (un 90 % más ligera). -
Optimizar: La mejor forma de optimizar las imágenes pasa por aplicarles una compresión con pérdida. La compresión con pérdida —o lossy— consiste en eliminar algunos de los datos de la imagen, reduciendo su calidad aunque de forma que sea prácticamente inapreciable para el ojo humano. Volviendo al ejemplo del punto anterior, una imagen en .JPG de
600 x 400 píxeles puede reducir su peso hasta un 60 %, pasando de252 KB a solo44 KB . Herramientas como Photoshop o aplicaciones web como Compressor.io permiten reducir significativamente los kilobytes de tus imágenes. También hay módulos de Node.js —como Imagemin— que optimizan automáticamente todas tus imágenes. -
Modernizar: También es importante sustituir los ficheros tradicionales de imagen —.JPG, .PNG y .GIF— por otros ficheros que han aparecido en los últimos años y que ofrecen tamaños mucho más ligeros sin pérdida de calidad, como .SVG, .WebP y .AVIF. Por ejemplo, nuestra imagen .JPG de
44 KB se puede reducir a32 KB si se pasa a .AVIF. Si necesitas más información sobre los formatos de imagen .WebP y .AVIF y cómo pueden ayudarte a aligerar el peso de tu web, te recomendamos leer el artículo que ya escribimos sobre ellos en este blog.
‘Minifica’ tus recursos
En comparación con tus imágenes, los ficheros de código de tu site —archivos HTML, hojas de estilo CSS, scripts, bases de datos en JSON…— son como auténticas plumas. Sin embargo, todos estos ficheros suelen editarse con espaciados, comentarios, tabulaciones y saltos de línea que, aunque son muy útiles para los equipos de desarrollo no se vuelvan locos a la hora de crear el site, para los navegadores resultan totalmente inútiles, ya que los obvian a la hora de renderizar el código de la web. Por eso es muy recomendable eliminar todo este contenido de tus archivos de código antes de subirlos al servidor del site. Esto es lo que se conoce como ‘minificar’.
El peso entre un archivo ‘minificado’ y su equivalente ‘formateado’ suele ser aproximadamente entre un 25% o 30% más ligero. El ahorro en kilobytes puede parecer insignificante teniendo en cuenta lo poco que pesan este tipo de ficheros, pero lo cierto es que los motores de búsqueda sí verifican que todos tus ficheros de código estén minificados a la hora de ‘puntuar’ mejor tu site. Existen multitud de servicios en línea que ‘minifican’ código de cualquier tipo, aunque lo más cómodo evidentemente es recurrir a módulos de Node.js que generan versiones ‘minificadas’ de todos tus ficheros automáticamente.
También puedes exprimir algunos bytes más de tus archivos de código activando la compresión GZIP, Deflate o Brotli.
Reduce las llamadas al servidor
Cada archivo que se usa en tus páginas requiere de una solicitud al servidor que implica tiempo, por lo que la velocidad de carga final puede acelerarse significativamente si reduces las solicitudes al servidor. Para conseguir esto lo obvio puede parecer usar menos recursos, pero también puedes lograr el mismo resultado agrupando varios de ellos en uno solo. Por ejemplo, una buena práctica de desarrollo web es que todas tus hojas de estilo se concatenen en un mismo fichero .CSS. Lo mismo es aplacable a tus scripts.
Otra forma de reducir las solicitudes al servidor es utilizando la memoria de los navegadores web. Chrome, Firefox, Safari, Opera o Edge almacenan en caché gran parte de los recursos que descargan de un site: hojas de estilo, imágenes, fuentes o scripts se guardan para que, si un usuario vuelve a acceder a una misma web, pueda reutilizarlos sin necesidad de volver a descargarlos del servidor. Para esto es necesario que todos tus recursos incluyan una duración en caché (Expires HTTP Header), algo así como una fecha de caducidad que sirva para que el navegador sepa si debe solicitar un recurso al servidor o si, por el contrario, lo puede obtener de la caché. Aplicar fechas de caducidad largas en aquellos recursos que se modifican con poca frecuencia puede acelerar significativamente el tiempo de carga de tu web.
Elimina los recursos que bloqueen el renderizado
Como sabrás, cada vez que uno de tus visitantes aterriza en tu site, su navegador web comienza a renderizar el código de la página de arriba a abajo en un proceso que solo se detiene cada vez que se encuentra con un fichero .CSS o JavaScript que tiene que solicitar al servidor. En estos casos, el navegador tiene que dejar de renderizar mientras espera a que le llegue el archivo en cuestión. Por eso es muy importante que los recursos de bloqueo se sitúen lo más al final del código posible, permitiendo así que el navegador componga la página rápidamente —en especial la parte que es visible nada más aterriza en la página, conocida como above the fold—, algo a lo que Google da muchísima importancia.
Existen otras formas para evitar que tus archivos CSS y JavaScript bloqueen el renderizado de tus páginas, como la descarga asíncrona (que permite al navegador descargar un fichero del servidor en paralelo, sin detener el renderizado del HTML) o la descarga en diferido (que pospone la descarga del fichero hasta que el renderizado del HTML se haya completado).
Utiliza Page Speed de Google
¿Crees que tus páginas cargan lo suficientemente rápido? ¿Puedes hacer algo más para mejorarlas? Descubre la respuesta con Page Speed Insights.
Para usar esta herramienta gratuita de Google solo hay que introducir la URL de tu site y automáticamente obtendrás una puntuación referida a la velocidad de carga —tanto para dispositivos móviles como sobremesa— y un completo listado de sugerencias para hacer que tu sitio web funcione como una flecha. Por lo general, toda web que obtenga una puntuación superior a 80 se puede sentir bastante satisfecha.
Mejorar los problemas de velocidad de carga de tu site es sin duda una de las tareas más complicadas pero a la vez más beneficiosas para la web de tu negocio. Los sitios web que cargan rápido y funcionan fluidamente ofrecen una experiencia de uso mejor a sus usuarios que generalmente se traduce en mayor fidelización, más conversiones y mejor posicionamiento orgánico en buscadores.
Los usuarios cada vez son más exigentes con la velocidad de carga de las webs, y lo que era un tiempo razonable hace unos años hoy ya no lo es. Además, las visitas desde dispositivos móviles cada vez suponen una parte mayor del total de accesos a un site —en España alrededor del 55%— y en estos entornos, donde las conexiones y los procesadores no son tan potentes y la necesidad de inmediatez suele ser mayor, cada centésima de segundo importa.
¿Te ha parecido interesante? ¡Compártelo!
Seguro que a tus contactos le gusta leerlo.
