Entendiendo el rendimiento

1

Todo lo que aprenderás sobre optimización web

2

¿Vale el esfuerzo optimizar un sitio web?

3

¿Cuándo realmente un sitio es rápido o lento?

Antes de optimizar...

4

Aprendiendo a medir

5

User Performance Metrics

6

Nuestro proyecto

Crítical Rendering Path

7

Etapas de render del navegador

8

Network waterfall y recursos que bloquean el navegador

9

Priorización de recursos

10

Preloading y prefetching de recursos

11

Fases Paint y Layout del Critical Render Path

CSS

12

Detectando Paints costosos y optimizando animaciones

13

Bloqueos y complejidad en selectores

WebFonts

14

WebFonts y su impacto en rendimiento

Imágenes, Iconos y SVG

15

Imágenes, formato y compresión

16

Imágenes y compresión

17

¿WebFont, Imagen o SVG?

18

Técnicas avanzadas con Lazy Loading

19

Técnicas avanzadas con Responsive Loading

Aplicaciones JavaScript

20

JavaScript y aplicaciones modernas y Utilizando un servidor de producción

21

Analizando el bundle de la aplicación

22

Reduciendo el tamaño del bundle

23

Code Splitting

24

Lazy Module Loading

25

Llevando los listeners a otro nivel

26

Instalando Modal video

27

Lazy loading del modal

28

Moviendo la carga de rendering hacia el servidor: Server Side Rendering

29

Aplicando SSR

30

Pre-renderizando el contenido: Static Generation

Caché

31

Cómo funciona el Caché de recursos y CDN

32

Deploy en Netlify y automatización de contenido en GitHub Actions

33

Aplicando Github Actions

34

Interceptando los requests del navegador con Service Workers

Performance Budget

35

Performance budget y auditorias automatizadas

36

Automatizando una auditoría con Lighthouse CI

37

Medidas reales y monitoreo constante

Conclusiones

38

Conclusiones

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

JavaScript y aplicaciones modernas y Utilizando un servidor de producción

20/38
Recursos

¿Qué papel juega JavaScript en la web moderna?

El JavaScript ha transformado la web moderna, siendo la base de tecnologías como React, Sville, Angular y Vue. Cada vez es más sencillo integrar funcionalidades avanzadas gracias a paquetes que están al alcance de un simple npm install. Sin embargo, esta facilidad puede llevarnos a sobrecargar nuestras páginas con numerosas dependencias innecesarias.

¿Por qué es importante optimizar las dependencias de JavaScript?

A pesar de los avances en herramientas y técnicas, el costo de un mal uso del JavaScript puede ser alto para la experiencia del usuario. Según un informe de 2018, el tamaño promedio de las páginas web alcanza los 350 kilobytes, y el tiempo de espera para que una aplicación sea interactiva puede superar los 15 segundos. Esto genera frustración y una mala experiencia para quienes visitan nuestras páginas.

¿Cómo preparar un proyecto JavaScript para producción?

Al optimizar para producción, debemos asegurarnos de ajustar nuestro entorno y herramientas correctamente. A continuación, vamos a ver cómo hacer esto utilizando Webpack y un servidor adecuado.

¿Qué pasos seguir para compilar Webpack para producción?

  1. Uso de scripts de compilación:

    • Dentro del archivo package.json, es necesario establecer un script de build. Este script se encarga de compilar Webpack.
    • Incluye parámetros adicionales para ejecutar en modo producción, como configurar node_env a production.
  2. Activar optimizaciones de Webpack:

    • Webpack tiene una opción -p que realiza dos acciones cruciales:
      1. Establece la variable de entorno para producción.
      2. Activa un modo de producción, donde Webpack optimiza el código para reducir su tamaño y mejorar su rendimiento.
{
  "scripts": {
    "build": "webpack -p"
  }
}

Al aplicar estas configuraciones, el tamaño del bundle puede reducirse significativamente, como de 1.5 megabytes a un más manejable 340 kilobytes.

¿Qué servidor es adecuado para producción?

Para enviar nuestro bundle optimizado a los usuarios, es crucial utilizar un servidor adecuado. Aquí es donde el paquete serve entra en acción.

  1. Instalación de Serve:

    • Se puede instalar via npm install serve y añadirse a las dependencias de desarrollo.
  2. Configuración del script:

    • Crea un script de serve en package.json para ejecutar el paquete serve y servir el contenido desde el directorio actual.
{
  "scripts": {
    "serve": "serve ."
  }
}

¿Cómo verificar la eficacia de la optimización?

Una vez implementados estos cambios, es recomendable ejecutar herramientas de auditoría como Lighthouse para analizar la mejora en el rendimiento de la web. Esto ayudará a verificar que los tiempos de carga sean óptimos y que la experiencia del usuario esté mejorando.

¿Qué más se puede hacer para mejorar el rendimiento?

Si bien la optimización inicial puede ser notable, como mostrar una reducción de kilobytes del bundle, aún existen oportunidades para seguir afinando el rendimiento. Analizar las cargas no esenciales y modularizar correctamente el código son los próximos pasos cruciales para lograr una experiencia de usuario excelente. ¡Manos a la obra y a seguir optimizando!

Aportes 11

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

💖 JavaScript y aplicaciones modernas y Utilizando un servidor de producción

<h4>Recursos</h4>

The cost of JavaScript in 2019

<h4>Apuntes</h4>
  • Web moderna está basada en JavaScript
  • Muchas veces no somos conscientes al momento de instalar muchas dependencias, estamos creando una mala experiencia para los usuarios
  • En el 2018 se estimó que el tamaño medio de los sitios web esta alrededor de 350kB [Tamaño moderadamente aceptable]
    • El tiempo de espera para que una aplicación sea interactiva tarda más de 15 segundos

Si el JavaScript de lado del cliente no está beneficiando a la experiencia de usuario, pregúntate a ti mismo, si realmente es necesario

  • Webpack en modo de desarrollo no realiza ninguna optimización de código
  • lo que haremos sera:
    1. Compilar webpack en producción
    2. Utilizar un servidor listo para producción
  • Si ponemos -p en webpack hace dos cosas
    • Pone NODE_ENV=production a node
    • Pasa el parámetro mode=production a webpack

RESUMEN: Es importante tomar en cuenta el modo de producción para analizar si vamos bien con nuestro JavaScript a nivel de performance

Para confirmar, lo que se está haciendo es:

1- Construyendo un build.js más liviano con el script “npm run build”-
2- Creando un servidor, usando “npm run serve”, que lea el proyecto de la raíz que incluye el build.js, que acaba de construirse con “npm run build”

es correcto?

🤓 Buenísima la charla de Addy Osmani -"The cost of JavaScript in 2019 🔥🔥

Estoy tomando el curso en Noviembre del 2022 y no me funcionó el flag “-p”. me salía este error:

> [email protected] build
> webpack -p

[webpack-cli] Error: Unknown option '-p'
[webpack-cli] Run 'webpack --help' to see available commands and options

Busqué soluciones y me funcionó con esto:

"build": "webpack --mode production --env production"

Para que no tengan que copiar la url que les da el serve solo deben dar ctrl + click y listo se abrira la url en el navegador

package.json

  1. Compilar Webpack produccion
    "build": "webpack -p"
  2. Utilizar un servidor para produccion
    "serve" : " serve ."
Webpack webpack tan antiguo como Internet Explorer 6 :v
Nuevamente, si les sale el error al hacer *npm start* esta es la solucion *npm i webpack@latest webpack-cli@latest webpack-dev-server@latest* Ahora en el archivo webpack.config.js en vez de contentBase, poner ```js devServer: { //contentBase: '.', static: './', }, ```

Este curso es una joya!

para usar npm run build en laravel usamos vite

https://laravel.com/docs/9.x/vite 

👌