¡No ahuyentes a los usuarios de tu web (ni a Google)!
Cuántas veces nos habrá pasado como intentar entrar en un sitio web desde un celular y retirarnos, frustrados, a los pocos segundos al ver que las imágenes no cargaban. En este post te mostraremos cuáles son los factores más influyentes en la carga de un sitio web, y cuáles son los puntos más importantes a la hora de optimizar estos tiempos de carga.
Con la aparición de los dispositivos móviles actuales, el mundo digital ha tenido que adaptarse y someterse a un cambio constante con el fin de no perder competitividad y calidad. Además de desarrollar sitios web responsive para que se vean en adecuadamente en un móvil, es imperativo mejorar los tiempos de carga y reducir el peso de la web al mínimo posible, sin que nada pierda calidad.
¿Por qué es importante la velocidad de carga en un sitio?
La velocidad de carga es una prioridad para la experiencia del usuario, de modo que si un usuario tarda más de 5 segundos en cargar un sitio web, seguramente abandone el intento de acceder, afectando entre otras cosas al Posicionamiento SEO. ¿Y sabes qué? ¡Google se entera de esto y te manda al rincón de los muertos vivos, la segunda página de su buscador o peor aún la tercera!
¿Cómo identificar los puntos a optimizar?
Para encontrar los puntos en los que la página puede ser mejorada en factores de tiempos de carga, se pueden utilizar diversas plataformas como Google PageSpeed Insights o GTmetrix, que harán un “scan” de nuestra página y nos dirán lo que debemos mejorar si queremos alcanzar un nivel de velocidad de carga ideal.
A continuación se detallarán los objetivos más comunes e importantes a tener en cuenta, ¡No te preocupes! Esto puede parecer complicado, pero nosotros te explicaremos en unos simples pasos como optimizar tu sitio web y dejar de ser un muerto vivo:
Paso #1 ¡Escoge las imágenes indicadas!
Para optimizar imágenes y que carguen más rápido hay que tener en cuenta dos cosas importantes:
• Por un lado es necesario comprimir todas las imágenes de nuestro sitio web utilizando herramientas como Compressor.io, TinyPNG o TinyJPG. Estas herramientas no tienen costo y pueden reducir el tamaño de tus estas más de un 80% sin disminuir su calidad.
• Por otro lado sus dimensiones no deberían ser más grandes de lo necesario. Si queremos subir una de 150*150 px en nuestro sitio web, esta debería tener ese tamaño exacto dado que de otra manera ocuparía espacio innecesario y ralentizaría el loading time de la página.
Paso #2 Programadores: ¡Atentos, no descuiden el código!
Los programadores suelen dejar espacios, o incluso líneas en blanco con el objetivo de hacer más legible el código. Esto ocasiona un peso innecesario para nuestro web y es un problema para que los navegadores interpreten el código del sitio.
Paso #3 ¡No te olvides del cache del navegador!
La primera vez que un usuario entra a un sitio web, el navegador deberá descargar el sitio web completo y este queda almacenado en el cache. Especificando por cuánto tiempo se guarda en el contenido de tu sitio web en este, podremos optimizar el tiempo de carga. Lo ideal es que el caché permanezca guardado por meses, o hasta un año.
Paso #4 ¡Cuidado, no bloquees tu contenido!
Si un archivo de JavaScript o CSS bloquea la visualización, significa que la página carga estos archivos antes de cargar el contenido principal. Por lo tanto, hay que especificar que estos archivos se carguen después de cargar el contenido del sitio web.
¿Cómo sabemos cuándo sucede esto? ¡No hay nada que temer! Google PageSpeed Insights nos da la respuesta cuando hacemos el scan de nuestra página web. Muchas veces esto es ocasionado por archivos que se utilizan para hacer animaciones.
Entonces los programadores deben mantener un ojo abierto al ordenar el código, en el caso de que haya bloqueo en la visualización, tienen que asegurarse que el contenido principal cargue siempre en primer lugar.
Paso #5 No debemos olvidarnos de la compresión de nuestro contenido:
La implementación de la compresión del contenido de tu sitio web puede hacerse simplemente en la configuración del servidor y es tan simple como activar la compresión GZIP.
Paso #6 ¿Qué hacemos para mejorar el tiempo de carga en mobile?
Actualmente es muy importante adaptar tu web para todos los tipos de resoluciones de pantalla; asegurarse de que todo encaje en su lugar, usar tipos de fuente apropiados para la lectura en pantallas pequeñas, y tener un práctico sistema de navegación. Así que recuerda, si sigues estos pasos tu sitio web podría alcanzar un alto puntaje en el PageSpeed Insights de Google y podrás brindarle a los usuarios de tu sitio web la mejor experiencia al navegar.
Nota escrita por: Paulo Arnedo y Felix Augenstein