Optimizar la velocidad de carga de tu sitio web

Optimizar la velocidad de carga de tu sitio web es fundamental para lograr un buen funcionamiento, mejorar el posicionamiento en buscador, evitar penalizaciones de Google y captar la mayor cantidad de posibles visitas en tu sitio web.

1 – Optimiza tus imágenes: Las imágenes grandes ocasionan que el sitio web demore en cargar y por lo tanto funcione lento. Se estima que aproximadamente un 20% del contenido de un sitio web son imágenes (y va en aumento). El tener o no tener optimizadas las imágenes afecta notoriamente a la velocidad de carga de tu sitio web.

Este paso es uno de los más fáciles de implementar y nos brinda varios beneficios, es por eso que no podemos dejarlo pasar por alto y es de las primeros detalles a tener en cuenta antes de publicar tu sitio. Algunas ventajas son:

Tu sitio web cargará más rápido y posicionará mejor, Google odio los sitios que cargan lento y por lo tanto los penaliza en el posicionamiento SEO.

Si las imágenes son pequeñas, cada visitante de tu sitio necesitará menos ancho de banda para acceder a tu sitio y consumirá menos tráfico de tu hosting.

Tus copias de seguridad se harán más rápido y serán mas livianas.

Necesitarás contratar menos espacio de alojamiento, especialmente si tu sitio es un ecommerce donde las galerías de imágenes crecen y crecen.

Hay varias herramientas online como compressjpg que te permiten comprimir el tamaño de tus imágenes sin perder calidad antes de utilizarlas en tu sitio web.

También existen plugins como imagify para wordpress que fácilmente te brindan la opción de comprimir tus imágenes, aún cuando ya las tienes cargadas en el sitio web.

2 – Aloja los videos externamente: La mayor parte de contenido multimedia hoy se centra en el vídeo. Es la herramienta por excelencia para compartir contenido, manuales, instructivos, cursos online, tips, etc. Esto hace que muchos incluyan vídeo en sus sitios web y no está mal, todo lo contrario. El problema es que si no lo haces de la forma correcta puede perjudicarte más de lo que te beneficia.

Algunos consejos:

Carga los vídeos en tu propio canal de Youtube o Vimeo, esto evitará que el vídeo ocupe espacio en tu sitio web y generará tráfico menor.

Inserta el vídeo con las herramientas que tu canal te brinda, allí podrás configurar tamaño, tiempo, funciones y otras variables.

De ser posible, evita utilizar plugins u otros recursos innecesarios, esto también enlentece el funcionamiento de tu sitio.

3 – A esta tarea normalmente se le conoce como minificación, y consiste en eliminar datos innecesarios o redundantes de tus recursos CSS, Html y/o Javascript, sin afectar la carga de estos en los navegadores. Esto genera que tus sitios web sean más pequeños y más rápidos.

Hay algunas herramientas que facilitan este trabajo. Por ejemplo si tu proveedor de Hosting utiliza servidores Apache o Nginx puede instalar el módulo PageSpeed, claro que si no lo tiene instalado debes solicitarlo y esperar si lo aceptan.

Para los sitios WordPress por ejemplo existen plugins como WP Super Minify que brindan opciones fáciles para configurarlo.

O también tenemos el sitio web minifier.org que nos brinda la información sobre como utilizar su minificador.

4 – El Web Caché permite almacenar copia de los documento que pasan por él. Esto quiere decir que el caché guarda páginas, imágenes, estilos y los almacena permitiendo que en las siguientes peticiones no tenga que cargar todo desde cero, sirviéndolo el propio caché para reducir el consumo de ancho de banda y la velocidad de respuesta a la petición. En sitios web con muchas páginas y contenido, es fundamental tener activo un sistema de caché.

Para optimizar la velocidad de carga tu sitio web WordPress hay varios plugins gratuitos que puedes utilizar como: WP Super Caché o W3 Total Caché; o también puedes optar por uno de pago con muchas más opciones configurables como WP Rocket.

5 – AMP Accelerated Mobile Pages: es una iniciativa de Google de código abierto que permite acelerar la navegación de sitios web móviles.

Existen dos ideas clave que definen AMP:

Las páginas web desarrolladas según AMP se pueden visualizar en todos los navegadores actuales. Es decir, utilizan las actuales tecnologías y no necesitan en los navegadores nada adicional.

El objetivo de conseguir tiempos de carga muy pequeños está basado en aplicar restricciones en la creación de las páginas web.

Las restricciones más importantes son:

El único ‘javascript’ permitido es el propio de AMP.

No se permiten elementos de entrada de formularios (‘input’, ‘textarea’, ‘checkbox’, etc.).

Los únicos estilos CSS que se permiten deben estar en una etiqueta de la cabecera de la página (elemento ‘head’) y no deben exceder los 50 KB.

AMP define los componentes que se deben utilizar a través de nuevas etiquetas HTML. Por ejemplo: ‘amp-img’ reemplaza a la etiqueta estándar ‘img’. Otras nuevas etiquetas se crean. Por ejemplo, ‘amp-youtube’ permite insertar un vídeo de YouTube.

Es una de las opciones más extremas, pero va creciendo el proyecto amp y cada vez hay más sitios que lo comienzan a utilizar. WordPress por ejemplo, ya tiene disponible el plugin amp el cual puedes instalar para optimizar la velocidad de carga de tu sitio web móvil.