Optimizar un sitio o aplicación web
Optimizar un sitio o aplicación web, pasos a seguir.
Es bien sabido que optimizar un sitio o aplicación web es fundamental por varias razones:
- Reduce el costo del servidor al hacer menos y mas ligeras peticiones
- Ayuda a mejorar nuestro posicionamiento en buscadores
- Hace que la visibilidad de nuestro sitio se mas eficiente, permitiendo a los usuarios ver algo en menos tiempo
- El código queda mejor estructurado reduciendo posibles cuellos de botella y errores al cargar cosas innecesarias
- Entre otras cosas.
Medir es el primer paso.
Algo que no es medido, difícilmente podrá ser mejorado. Para ello podemos echar mano de la herramienta Google Page Speed Insights, que nos mide muchos parámetros y sugiere algunos cambios para mejorar nuestro puntaje.
Acá dejaremos una serie de artículos haciendo sugerencias de cómo cumplir con las recomendaciones de optimización.
Analizar:
Primero tendremos que introducir la URL de nuestro sitio y dar click en ANALYZE, para esto es necesario que esté disponible públicamente en internet.
Calificación:
Esto nos arroja dos calificaciones, una para móvil y otra para escritorio, ya que ambas versiones tienen diferentes requerimientos.
Parámetros:
De aquí podemos identificar 6 parámetros interesantes:
First Contentful Paint: Tiempo que pasa para que aparezca el primer elemento visual, sea texto o imagen después de la carga de los elementos esenciales de la página. Aquí es importante priorizar qué se cargará primero y qué después, para evitar que la carga excesiva de archivos retrase la visualización de nuestro sitio. Un valor aceptable es menor a 2 segundos.
Speed Index: Tiempo en que se cargan todos los elementos de nuestro sitio. Para mejorar este tiempo, es importante reducir la cantidad de peticiones al servidor, optimizar nuestras librerías (minified) y optimizar imágenes. Un tiempo aceptable es menor a 4.3 segundos.
Largest Contenful Paint: Tiempo que tarda en cargarse el elemento más pesado de nuestro sitio, usualmente es una imagen, video o animación. Tiempo aceptable es menor a 2.5 segundos.
Time to Interactive: Tiempo necesario para que el usuario pueda interactuar con nuestro sitio. Tiempo aceptable es menor a 3.8 segundos.
Time Blocking Time: Es la suma de tiempo adicional al permitido (50 ms) que una tarea toma para ejecutarse. Digamos, si una función o rutina toma 85 mili segundos en ejecutarse, el tiempo de bloqueo es 35 ms. Para mejorar este tiempo hay que crear rutinas más eficientes. Tiempo aceptable es menor a 300 mili segundos.
Cumulative Layout Shift: Es una puntuación que evalúa qué tantos cambios de elementos hay una vez que se ha cargado la página. Nos ha pasado que vemos un botón y al querer darle click, de repente aparece otro elemento. Esta puntuación es determinada por una fórmula, ver más. Una puntuación aceptable es menor a .1
Qué optimizar de manera general.
Priorizar la carga de librerías
No todas las librerías o archivos son necesarios desde el inicio de la carga del sitio. Por ejemplo, si tenemos un video de YouTube en alguna parte de nuestra página, independientemente de que lo veamos o no, este cargará todo lo necesario en cuanto llegue su turno. Una forma de diferir la carga de una librería es usando los atributos async y defer, que nos permiten cargar las librerías de manera asíncrona, evitando que bloqueen la carga principal del sitio.
Usar archivos optimizados (minified)
Generalmente las librerías y hojas de estilos de otros proveedores ofrecen dos versiones una para desarrollo (legible, con espacios y comentarios) y otra para producción (sitio en vivo que es difícil de leer, no tiene comentarios y generalmente se reduce a una sola línea).
Por ejemplo, jQuery ofrece estas dos versiones, misma funcionalidad, pero contenido comprimido:
- https://code.jquery.com/jquery-3.5.1.js (84.6 kb)
- https://code.jquery.com/jquery-3.5.1.min.js (31 kb)
Para librerías y hojas de estilo propias, hay herramientas de la línea de comandos que nos permiten crear este tipo de archivos optimizados. También existen sitios donde puedes comprimir tus librerías en línea, por ejemplo:
Usa imágenes optimizadas
Utiliza archivos SVG en la medida de lo posible, estos puede pesar hasta 10 veces menos que un PNG transparente. Es posible exportar este tipo de formatos desde Ilustrador o Photoshop.
Si requieres usar PNG o JPG, considera pasarlo por un compresor primero. Existen varios en línea que pueden ayudarte bastante a reducir hasta en un 90% el peso de una imagen sin perder calidad
Crea rutinas eficientes
Cuando crees funciones, siempre evalúalas y mídelas en papel usando el Big O Notation. Una rutina poco eficiente puede bloquear la interacción del usuario con tu sitio, haciendo una mala experiencia de usuario. Un ejemplo con jQuery al hace un loop con los elementos que nos regresará un selector:
En breve publicaremos otro artículo donde haremos referencia a las Dev Tools del navegador para poder identificar los cuellos de botella y saber dónde hay oportunidades para mejorar.
Tag:optimizacion
