- \n
- Primer contenido pintado (FCP)<\/strong>. Obtener algo en la pantalla r\u00e1pidamente es un indicador importante de progreso. FCP es una medida del tiempo entre la carga inicial y la representaci\u00f3n de una parte del contenido de la p\u00e1gina.<\/li>\n<\/ul>\n\n\n\n
- \n
- Tiempo de interacci\u00f3n (TTI<\/strong>). TTI mide el tiempo entre FCP y la interactividad completa de la p\u00e1gina. Una p\u00e1gina puede parecer completamente cargada, pero puede llevar m\u00e1s tiempo para que los controles sean completamente interactivos. Por lo tanto, TTI es una medida de responsividad.<\/li>\n<\/ul>\n\n\n\n
- \n
- Cambio acumulado de dise\u00f1o (CLS).<\/strong> Esta es una medida del punto en el que el dise\u00f1o de una p\u00e1gina se vuelve estable. El cambio de dise\u00f1o de las p\u00e1ginas mientras se carga es una irritaci\u00f3n com\u00fan para los usuarios, especialmente con elementos interactivos. Por lo tanto, CLS es una m\u00e9trica clave de usabilidad.<\/li>\n<\/ul>\n\n\n\n
Hay otras m\u00e9tricas<\/a> que podemos considerar, pero este tr\u00edo de velocidad, responsividad y usabilidad proporciona un buen punto de partida para considerar la optimizaci\u00f3n. Con estas m\u00e9tricas en mente, consideremos las principales t\u00e9cnicas para mejorar el rendimiento.<\/p>\n\n\n\n
Estrategias para la optimizaci\u00f3n del rendimiento web<\/h2>\n\n\n\n
Separaci\u00f3n de c\u00f3digo (Code Splitting)<\/h3>\n\n\n\n
La separaci\u00f3n de c\u00f3digo consiste en dividir el c\u00f3digo en componentes independientes que se pueden cargar de forma independiente. Las aplicaciones web actuales a menudo tienen una huella significativa en t\u00e9rminos de CSS y JavaScript. Sin embargo, no todos estos recursos son necesarios para la carga inicial de la p\u00e1gina y algunos pueden no ser necesarios en absoluto. Al dividir el c\u00f3digo en paquetes, se puede optimizar con precarga selectiva o carga diferida (lazy loading).<\/p>\n\n\n\n
Los paquetizadores como Webpack <\/a>modularizan el c\u00f3digo y utilizan gr\u00e1ficos de dependencias para determinar cu\u00e1ndo y d\u00f3nde se necesitan los recursos. Esto permite usar importaciones din\u00e1micas, que responden a las llamadas de funciones dentro de los m\u00f3dulos. La separaci\u00f3n de paquetes es un enfoque complementario a la separaci\u00f3n de c\u00f3digo, aunque menos granular. Implica la separaci\u00f3n mediante configuraci\u00f3n en lugar de decisiones de carga en el lado del cliente. Un caso de uso com\u00fan es separar las dependencias de terceros del c\u00f3digo de la aplicaci\u00f3n. De esta manera, cada uno solo se carga cuando hay cambios.<\/p>\n\n\n\n
La separaci\u00f3n de c\u00f3digo tambi\u00e9n permite el “tree shaking” (agitar el \u00e1rbol), que es un an\u00e1lisis realizado en el servidor que elimina el c\u00f3digo no utilizado de su paquete de producci\u00f3n. La mayor\u00eda de los paquetizadores lo hacen por defecto, reduciendo el tama\u00f1o del c\u00f3digo sin cambiar el comportamiento.<\/p>\n\n\n\n
Carga Diferida (Lazy Loading)<\/h3>\n\n\n\n
Las estrategias de lazy loading<\/a> separan los recursos cr\u00edticos de los no cr\u00edticos y solo sirven los \u00faltimos cuando son necesarios. Es una t\u00e9cnica que est\u00e1 estrechamente relacionada con la separaci\u00f3n de c\u00f3digo.<\/p>\n\n\n\n
Claramente, una pregunta central para cualquier estrategia de carga diferida es la determinaci\u00f3n de sus desencadenantes. Esto puede ser tan simple como especificar loading=”lazy”<\/em> en las etiquetas img<\/em>, lo que demorar\u00e1 la carga de im\u00e1genes hasta que sean requeridas. Tambi\u00e9n puedes configurar la carga diferida de otros recursos observando directamente los elementos que entran en la vista. El API Intersection Observer es un ejemplo t\u00edpico. Monitorea de forma as\u00edncrona la intersecci\u00f3n de un elemento espec\u00edfico con la ventana gr\u00e1fica, momento en el cual puedes activar tus solicitudes de recursos.<\/p>\n\n\n\n
Utilizando estas t\u00e9cnicas, la carga diferida se puede aplicar tanto a im\u00e1genes como a recursos multimedia para videoclips y animaciones. Los m\u00f3dulos de JavaScript tambi\u00e9n pueden cargarse de forma as\u00edncrona, al igual que el CSS. Esto no solo ayuda a acelerar el rendimiento de la red, sino que tambi\u00e9n evita que el navegador renderice elementos antes de que sean necesarios.<\/p>\n\n\n\n
Precarga (Preloading)<\/h3>\n\n\n\n
Mientras que la carga diferida pospone las acciones hasta que sean necesarias, la precarga las realiza anticipadamente. Algunos recursos no son necesarios de inmediato al cargar la p\u00e1gina, pero es probable que se necesiten en alg\u00fan momento. En tales casos, puede ser valioso precargarlos. Esto se logra f\u00e1cilmente utilizando el atributo “preload<\/em>“. Por ejemplo, para precargar un m\u00f3dulo de JavaScript:<\/p>\n\n\n\n
<code><link rel=”preload” as=”script” href=”myscript.js><\/span><\/p>\n\n\n\n
<\/code>”><\/span><\/p>\n\n\n\n
Desde HTTP\/2<\/a>, tambi\u00e9n puedes utilizar el “server push” para enviar activos al cliente antes de que sean solicitados directamente. Por supuesto, es necesario tener precauci\u00f3n con estas t\u00e9cnicas para evitar la competencia de ancho de banda con otros recursos. El preloading debe ser utilizado con moderaci\u00f3n, ya que los navegadores modernos ya optimizan el orden de carga de recursos.<\/p>\n\n\n\n
Optimizaci\u00f3n de Im\u00e1genes<\/h3>\n\n\n\n
La optimizaci\u00f3n de im\u00e1genes es una de las formas m\u00e1s conocidas de mejora del rendimiento web. Sin embargo, puede ser f\u00e1cilmente pasada por alto por los dise\u00f1adores que pueden haberse vuelto complacientes con el rendimiento de la red o que saben poco sobre los formatos de im\u00e1genes. Antes que nada, considera si realmente se necesita una imagen. CSS3 ahora ofrece efectos sofisticados como sombras y degradados que los dise\u00f1adores sol\u00edan lograr con GIF o PNG. Para im\u00e1genes vectoriales m\u00e1s complejas, SVG tambi\u00e9n es una buena opci\u00f3n. Estas opciones no solo tienen menos peso en t\u00e9rminos de bytes, sino que tambi\u00e9n suelen ofrecer una mejor calidad al ajustarse a cualquier resoluci\u00f3n requerida.<\/p>\n\n\n\n
Para las im\u00e1genes fotogr\u00e1ficas, el nivel de compresi\u00f3n es clave. Los dise\u00f1adores deben equilibrar la calidad de la imagen con el tama\u00f1o del archivo. Se necesita buen juicio y un ojo cuidadoso, as\u00ed como una comprensi\u00f3n de las variaciones en la presentaci\u00f3n en diferentes dispositivos y resoluciones. Adem\u00e1s, aseg\u00farate de utilizar el mejor formato para el tipo de imagen. El contenido fotogr\u00e1fico tradicionalmente se ha representado como JPEG, pero en la actualidad, WebP y AVIF ofrecen reproducciones de mejor calidad con tama\u00f1os de archivo m\u00e1s peque\u00f1os. Sin embargo, la compatibilidad puede ser un problema; todos los navegadores modernos admiten WebP<\/a>, pero AVIF a\u00fan no est\u00e1 completamente implementado en algunos de ellos.<\/p>\n\n\n\n
![\"SvelteKit,](\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/01\/iStock-974683580-1024x732.jpg\")
Lazy Loading: descubre sus beneficios, mejores pr\u00e1cticas y m\u00e1s.<\/figcaption><\/figure>\n\n\n\n Minificaci\u00f3n y Compresi\u00f3n<\/h3>\n\n\n\n
Adem\u00e1s de la compresi\u00f3n de im\u00e1genes, los activos textuales como CSS y Javascript se pueden minificar y comprimir para mejorar las tasas de transferencia de red. Esto implica una inversi\u00f3n del pensamiento habitual sobre el estilo de c\u00f3digo: al escribir c\u00f3digo, es importante considerar la legibilidad y el mantenimiento<\/strong>. Esto significa nombres de variables significativos, buen uso de espacios en blanco y el uso juicioso de comentarios. Sin embargo, cuando se trata de servir estos activos, debes abandonar la legibilidad a favor del tama\u00f1o.<\/p>\n\n\n\n
La minificaci\u00f3n elimina espacios en blanco excesivos, comentarios y delimitadores de bloques redundantes. Incluso la eliminaci\u00f3n de caracteres de nueva l\u00ednea puede tener un impacto medible en los tiempos de carga. La minificaci\u00f3n es f\u00e1cil de lograr: encontrar\u00e1s una variedad de herramientas de minificaci\u00f3n de l\u00ednea de comandos que puedes incorporar en tu cadena de herramientas, como JSMin <\/a>y UglifyJS<\/a>. UglifyJS tambi\u00e9n puede cambiar cosas como nombres de variables para ahorrar a\u00fan m\u00e1s espacio, as\u00ed como ofuscar el c\u00f3digo para evitar su reutilizaci\u00f3n.<\/p>\n\n\n\n
Otra opci\u00f3n es la compresi\u00f3n gzip para reducir el tama\u00f1o de los activos basados en texto. Normalmente, esto se habilita como parte de la configuraci\u00f3n de tu servidor web. Por ejemplo, con Apache, puedes usar el m\u00f3dulo mod_deflate.<\/a><\/p>\n\n\n\n
Cach\u00e9<\/h3>\n\n\n\n
Por \u00faltimo, no olvidemos la cach\u00e9. La cach\u00e9 puede mejorar el rendimiento web<\/strong> al reducir la carga del servidor y disminuir las cargas de transferencia de red. La cach\u00e9 puede ser tanto del lado del servidor como del navegador. Las cach\u00e9s web del navegador almacenan activos solicitados recientemente para evitar descargarlos nuevamente cada vez que se solicitan. Los elementos en cach\u00e9 se actualizan despu\u00e9s de que hayan caducado, cuando la cabecera de \u00faltima modificaci\u00f3n muestra que est\u00e1n obsoletos o en respuesta a una actualizaci\u00f3n manual del usuario. Recursos que cambian con frecuencia o sensibles tambi\u00e9n se pueden establecer como “sin cach\u00e9” para evitar informaci\u00f3n desactualizada.<\/p>\n\n\n\n
Una innovaci\u00f3n m\u00e1s reciente es el uso de los service workers<\/a>. Estos son activos de Javascript que se sit\u00faan entre los servidores web y los navegadores, actuando como un proxy que permite el acceso sin conexi\u00f3n y mejora el rendimiento de las p\u00e1ginas. Incluyen una interfaz de cach\u00e9 programable, que es completamente independiente de la cach\u00e9 HTTP utilizada directamente por los navegadores. Esto significa que la cach\u00e9 de service worker permite un ajuste m\u00e1s detallado para aplicaciones espec\u00edficas. Los tipos de activos a cachear, as\u00ed como sus estrategias de actualizaci\u00f3n, se pueden configurar para ofrecer una experiencia r\u00e1pida y precisa, as\u00ed como capacidades sin problemas casi sin conexi\u00f3n.<\/p>\n\n\n\n
Conclusi\u00f3n<\/h2>\n\n\n\n
La optimizaci\u00f3n del rendimiento web es vital para cualquier sitio web<\/strong>, aplicaci\u00f3n o servicio. Hay muchos enfoques, configurables para adaptarse a los resultados deseados. Estos incluyen t\u00e9cnicas de larga data y b\u00e1sicas como la compresi\u00f3n de im\u00e1genes y la cach\u00e9 del navegador, as\u00ed como innovaciones m\u00e1s recientes como los service workers de Javascript y la gesti\u00f3n de activos agrupados que permite la optimizaci\u00f3n mediante la separaci\u00f3n de c\u00f3digo, la carga lenta y la precarga. Tambi\u00e9n hemos visto los beneficios que puede aportar incluso una t\u00e9cnica simple como la minificaci\u00f3n.
Aunque hemos cubierto lo b\u00e1sico, la optimizaci\u00f3n no termina aqu\u00ed. Si deseas explorar m\u00e1s sobre el tema, tambi\u00e9n puede que te interese explorar tecnolog\u00edas m\u00e1s orientadas al lado del servidor, como la optimizaci\u00f3n de bases de datos y la configuraci\u00f3n de infraestructura, incluido el uso de CDN para aprovechar t\u00e9cnicas como la cach\u00e9 distribuida.<\/p>\n\n\n\n\u00danete a nuestra comunidad<\/h2>\n\n\n\n
\u00bfTe apasiona la accesibilidad web? \u00bfQuieres cambiar tu trayectoria laboral? En nuestra plataforma de Talent puedes encontrar la forma de llevar tu carrera al siguiente nivel. Entra en nuestra web y encuentra tu trabajo ideal-
\u00c9chale un vistazo.<\/a><\/code><\/p>\n\n\n\nSer parte de la comunidad de Codemotion te permitir\u00e1 potenciar tu experiencia y enfrentar nuevos desaf\u00edos que impulsar\u00e1n tu carrera, aprendiendo nuevas habilidades t\u00e9cnicas y creciendo junto a otros miembros con intereses similares al tuyo mediante el intercambio de opiniones y la creaci\u00f3n de contenido de valor. Tenemos dos comunidades para ti seg\u00fan tu experiencia:<\/p>\n\n\n\n
- \n
- Si eres wanna-be-dev<\/em>, junior-dev <\/em>o early-mid-dev<\/em> nuestra comunidad de Discord <\/strong>es para ti. All\u00ed encontrar\u00e1s recursos, eventos, formaci\u00f3n, muchos compa\u00f1eros de viaje y beneficios exclusivos.
S\u00famate aqu\u00ed.<\/a><\/code><\/a><\/li>\n\n\n\n- Si eres late-mid-dev, senior-dev, Tech Lead o CTO<\/em> nuestra comunidad de Telegram <\/strong>es para ti. All\u00ed encontrar\u00e1s el mejor networking, art\u00edculos high-tech, debates de tendencias tech y beneficios exclusivos.
S\u00famate aqu\u00ed.<\/a><\/code><\/li>\n<\/ol>\n\n\n\n\u00a1Nos vemos en Codemotion!<\/p>\n","protected":false},"excerpt":{"rendered":"
- Si eres late-mid-dev, senior-dev, Tech Lead o CTO<\/em> nuestra comunidad de Telegram <\/strong>es para ti. All\u00ed encontrar\u00e1s el mejor networking, art\u00edculos high-tech, debates de tendencias tech y beneficios exclusivos.
- Si eres wanna-be-dev<\/em>, junior-dev <\/em>o early-mid-dev<\/em> nuestra comunidad de Discord <\/strong>es para ti. All\u00ed encontrar\u00e1s recursos, eventos, formaci\u00f3n, muchos compa\u00f1eros de viaje y beneficios exclusivos.
- Cambio acumulado de dise\u00f1o (CLS).<\/strong> Esta es una medida del punto en el que el dise\u00f1o de una p\u00e1gina se vuelve estable. El cambio de dise\u00f1o de las p\u00e1ginas mientras se carga es una irritaci\u00f3n com\u00fan para los usuarios, especialmente con elementos interactivos. Por lo tanto, CLS es una m\u00e9trica clave de usabilidad.<\/li>\n<\/ul>\n\n\n\n
- Tiempo de interacci\u00f3n (TTI<\/strong>). TTI mide el tiempo entre FCP y la interactividad completa de la p\u00e1gina. Una p\u00e1gina puede parecer completamente cargada, pero puede llevar m\u00e1s tiempo para que los controles sean completamente interactivos. Por lo tanto, TTI es una medida de responsividad.<\/li>\n<\/ul>\n\n\n\n