Todos queremos tener el "mejor sitio", con muchas funcionalidades y características, pero estas consumen recursos, y si bien las velocidades de internet cada vez son mayores, estas funcionalidades también van creciendo en utilización de recursos. Desde hace un tiempo Google, el principal generador de visitas a la mayoría de los sitios de manera orgánica ha impulsado la optimización y velocidad de carga de los sitios como uno de los puntos a considerar para un mejor posicionamiento en sus resultados y es por eso que al día de hoy es MUY IMPORTANTE que los sitios sean más rápidos y bien trabajados, en este artículo te daré algunos consejos para optimizar al máximo tu sitio.
Algunas de las mejoras no están directamente relacionadas con la optimización del código o elementos en si, como lo es el contar con un buen hosting, pero todos son igual de importantes para el objetivo, reducir el tiempo de carga del sitio y tratar de tenerlo por abajo de los 2 segundos.
Comencemos con los puntos
1. Construye para el móvil primero.
Un alto número de visitantes actuales utilizan dispositivos móviles, algunos con menos recursos y velocidad que un equipo de escritorio, pero igual de importante es considerar, con un mucho menor espacio de visibilidad al contar con una pantalla mucho más pequeña que un equipo de escritorio, entonces el crear tu sitio pensando primero en optimizarlo para este tipo de dispositivos te hará considerar reducir contenido innecesario.
Es aconsejable crear el contenido considerando dispositivos de gama baja, ya que al comportarse bien en un dispositivo así significará un mucho mejor rendimiento en dispositivos más grandes y con más recursos.
2. Adios a carruseles y sliders
Son muy bonitos, pero consumen demasiado recursos, tanto por requerir imágenes grandes, y varias imágenes, además del JS y el CSS.
Pero, ¿Y que pongo?, en lugar de poner un slider de banners, pon solo una imagen bien optimizada y con la información realmente importante, en lugar de poner un slider con 4 o 5 imágenes que lo único que aportan es consumo de recursos.
3. Optimiza tus imágenes
Una imagen dice más que mil palabras, pero una buena imagen no tiene por que pesar demasiado, considera que el tamaño de todas tus imágenes son recursos que el visitante debe descargar entonces es sumamente importante que estas estén optimizadas antes de subirlas al servidor, puedes usar herramientas como Photoshop (No es la mejor compresión) o servicios en línea como tinyjpg.com o shortpixel.com.
Un punto importante a considerar es el formato ideal para tus imágenes, aquí depende del tipo de imagen, si requieres que tenga transparencias como por ejemplo un logo entonces considera usar el formato PNG, que tiene buena calidad y permite tener las transparencias, en caso de que sean fotos sin fondo es mejor utilizar el formato JPG, si tus imágenes están en formato PNG y no requieres transparencias puedes usar servicios como PNG2JPG para hacer la conversión.
Si utilizas Mac, una muy buena opción es utilizar ImageOptim.
Si tienes más conocimientos de programación puedes utilizar herramientas como Gulp o Webpack con algunos plugins para automatizar este proceso.
4. Haz una carga retardada de tus imágenes (Lazy load)
Esto significa que solo cargues las imágenes cuando estas están visibles en el navegador, es decir, que se vayan cargando solo cuando estas deben mostrarse en la vista, esto hará que en la primer carga de recursos solo se cargarán las imágenes a mostrar en esa vista y no todas las de la página.
Esto se hace utilizando herramientas de Javascript, como LazyLoad o yall.js entre otras, o bien, puedes hacerlo utilizando la API de HTML llamada Intersection observer, como en este ejemplo en mi GIST Intersection Observer By JAM.
5. Carga fuentes web usando Swapping
Esto permite cargar una fuente por default del navegador y sustituirla por la fuente deseada una vez que esta fue cargada por el navegador, por ejemplo, si estás usando fuentes de Google Fonts, el visitante cuando entre verá la fuente por default del navegador y una vez que este cargue la fuente completamente la sustituirá por la que indicaste de Google Fonts, para esto debes declarar la propiedad font-display: swap en la declaración de la fuente @font-face o siguiendo con el ejemplo de Google Fonts, solo debes asegurarte que en la url de la fuente, al final esté el valor &display=swap, debiendo quedar algo así:
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel=“stylesheet”>
6. Haz animaciones suaves
Si deseas agregar algunas animaciones hazlas usando CSS, el secreto será utilizar solo las propiedades opacity y transform para no sobrecargar la página, cual será el truco, saber utilizar bien esas propiedades y usar animaciones con @keyframes Si deseas hacer las animaciones con JS puedes usar la API requestAnimationFrame.
7. Minimiza el impacto de terceros
Muchas veces usamos recursos, scripts y demás de terceros, al hacerlo deberás hacerlo considerando la ruta critica de renderizado y haciendo cargas de los recursos de manera asincrona, para que estos vayan siendo mostrados conforme van siendo cargados, esto evitará los cuellos de botella.
Para esto también es sumamente importante utilizar el protocolo HTTP/2 o HTTP/3 que permite mayor flujo de carga de recursos que la versión anterior, para activarlo debes checarlo con tu proveedor de hosting o bien (y mejor) utilizar servicios como Cloudflare, que entre otras muchas mejores incluye el uso de este protocolo mejorado.
8. Preconecta la llave de dominios de terceros
Los navegadores modernos hacen un excelente trabajo al momento de descargar contenido con la intención de hacer la carga del sitio más rápida, uno de esos trabajos mejora de manera considerable si se hace una preconexión a los dominios de terceros, para eso lo único que tenemos que hacer es agregar algo como esto:
<link rel=”preconnect” href=”example.com”>
Si el llamado será a fuentes se debe agregar el atributo crossorigin quedando así:
<link rel=”preconnect” href=”example.com” crossorigin>
Esta simple preconexión puede llegar a hacer mucha diferencia en los tiempo de carga del contenido.
9. Arregla tus aplicaciones
Ya sea que tengas un sitio en Shopify, en Wordpress, Joomla o cualquier otra plataforma es muy importante que no solo esté optimizado lo que está en tus manos sino también las aplicaciones, widgets y/o plugins de terceros, ya que de nada servirá lo que hagas tu en tu propio sitio si tu sitio está lleno de aplicaciones mal optimizadas, desgraciadamente esto solo te será posible si utilizas aplicaciones de empresas o programadores comprometidos y buenos.
En caso de no poder solucionarlo entonces deberás considerar la necesidad de tener una mala aplicación o plugin en tu sitio
10. Monitorea el numero de peticiones por subdominio
Los navegadores se han vuelto más rápidos a pasos agigantados desde que Emily Nakashima, directora de ingeniería de Honeycomb.io, comenzó a escribir código para la web a principios de la década de 2000, pero para aquellos de nosotros que todavía necesitamos admitir http 1.1, una cosa no ha sido cambiado: todavía hay un límite en la cantidad de solicitudes simultáneas que un navegador realizará a cualquier subdominio, generalmente seis.
“El objetivo de este límite es evitar el lanzamiento accidental de un ataque DOS en algún pequeño servidor web agradable en algún lugar cuando intentas cargar una página de catálogo completa de imágenes, u otros recursos, a la vez”, explica Emily. "Pero en la web actual, donde muchos de nosotros usamos servicios en la nube altamente escalables y mostramos nuestras imágenes desde una CDN, el límite puede ralentizar innecesariamente su experiencia".
Para solucionarlo, Emily recomienda una técnica conocida como fragmentación de dominio, que carga un conjunto de recursos de varios dominios o subdominios para aumentar la cantidad de solicitudes simultáneas. Por ejemplo, puede utilizar varios subdominios (cdn1.example.com, cdn2.example.com, etc.) con su misma CDN para poder cargar más imágenes a la vez. Pero el uso de varios dominios conlleva algunos gastos generales; deberá realizar otra solicitud de DNS para cada dominio nuevo antes de poder comenzar a descargar nuestro recurso.
"Cuando observa el seguimiento distribuido del lado del cliente o la cascada de red de su navegador en las herramientas de desarrollo del navegador, observe el patrón de solicitudes", aconseja Emily. “Si la cascada es relativamente estrecha y las solicitudes se realizan en su mayoría al mismo tiempo, es probable que tenga suficientes fragmentos. Si ve bloques secuenciales de solicitudes al mismo dominio en un patrón escalonado, probablemente debería configurar más fragmentos ".