Entendiendo el rendimiento

1

Optimización Web Avanzada con JavaScript y CSS

2

Optimización de Velocidad en Páginas Web: Impacto y Conversión

3

Optimización del Rendimiento Web con RAIL de Google

Antes de optimizar...

4

Medición de Performance Web con Chrome DevTools y RAIL

5

Métricas Web: LCP, FID y CLS para Mejorar Experiencia Usuario

6

Clonación y configuración de proyectos en Git y npm

Crítical Rendering Path

7

Proceso de Critical Rendering Path en Navegadores Web

8

Optimización de Carga de JavaScript y su Impacto en el Rendimiento

9

Priorización de Recursos CSS para Mejora de Carga en Navegadores

10

Optimización Web: Uso de Preload, Prefetch y Preconnect

11

Renderizado Eficiente: Optimización de CSS y JavaScript

CSS

12

Optimización de Animaciones CSS para Mejorar el Rendimiento

13

Optimización de Selectores CSS y Carga de Imágenes en Proyectos Web

WebFonts

14

Optimización de WebFonts para Mejorar el Rendimiento Web

Imágenes, Iconos y SVG

15

Optimización de Imágenes para Web: Formatos y Herramientas Avanzadas

16

Optimización de Imágenes para Web: Formatos y Resoluciones

17

Vectorización de Imágenes: Comparación entre SVG y WebFonts

18

Lazy Loading: Técnicas y Estrategias Aplicadas

19

Carga de Imágenes Responsivas con Gatsby y Picture Element

Aplicaciones JavaScript

20

Optimización de JavaScript para Producción en Webpack

21

Análisis y Optimización de Bundles con Webpack

22

Optimización de Bundles en JavaScript con Tree Shaking

23

Estrategias de Code Splitting con Webpack

24

Carga Diferida de JavaScript para Modales Interactivos

25

Técnicas de Propagación de Eventos en JavaScript

26

Integración de librería Modal Video con Webpack y CSS

27

Lazy Loading y Optimización en Webpack

28

Diferencias entre Client-Side y Server-Side Rendering

29

Optimización de Server Side Rendering con Node.js

30

Optimización de Sitios Web con Static Site Generation

Caché

31

Funcionamiento del Caché y CDNs en la Optimización Web

32

Alojamiento de Sitios Web Estáticos con Netlify y GitHub

33

Automatización de despliegues con GitHub Actions y Netlify

34

Implementación de Service Workers para Caché Avanzado

Performance Budget

35

Auditoría de Performance Web con Lighthouse y GitHub Actions

36

Automatización de Auditorías con Github Actions y LighthouseCI

37

Optimización de Sitios Web con Datos de Usuarios Reales

Conclusiones

38

Optimización de Imágenes y CSS para Mejorar la Velocidad Web

No tienes acceso a esta clase

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

Optimización de Sitios Web con Static Site Generation

30/38
Recursos

¿Qué es el server-side rendering y cómo afecta el rendimiento web?

El Server-Side Rendering (SSR) es un proceso en el que el servidor genera todas las páginas web para cada solicitud del usuario. Cada vez que un usuario se conecta, el servidor procesa la solicitud y obtiene la información de una API. Esto significa que por cada nueva conexión, se realiza un llamado a las API que estamos utilizando. Si dos usuarios se conectan, se hacen dos solicitudes; si son cien conexiones, se realizan cien solicitudes. Este modelo plantea un desafío potencial de escalabilidad y eficiencia en proyectos donde la información no cambia tan frecuentemente, como una lista de animes más populares.

¿Cuándo utilizar static site generation?

El Static Site Generation (SSG) se presenta como una alternativa eficiente al SSR cuando la información de un sitio no cambia frecuentemente. En lugar de regenerar las páginas con cada solicitud, el SSG procesa todo una sola vez durante la etapa de construcción del proyecto, almacenando el contenido en el servidor para luego distribuir la misma respuesta a todas las conexiones. Esto reduce la carga del servidor y las solicitudes a la API.

¿Cómo implementar static site generation en tu proyecto?

Pasar de SSR a SSG en un proyecto implica ciertos cambios clave en la estructura y el flujo del proceso. A continuación, algunos pasos básicos para implementar SSG:

  1. Identificar el contenido estático: Determina qué partes de tu sitio no requieren ser actualizadas constantemente.
  2. Generar el contenido durante la construcción: Utiliza herramientas para obtener el contenido API durante la build del proyecto y almacénalo estáticamente.
  3. Configurar el servidor para contenidos estáticos: Modifica el servidor para que sirva la versión pre-renderizada del HTML, CSS y JavaScript.

Refinando el SSG con herramientas y librerías

En el ejemplo del curso, se hace uso de la librería HyperScript para ayudar en la generación del HTML estático. Además, el script export.js facilita la creación del archivo index.html con todos los componentes renderizados. El uso de JavaScript junto con las APIs nos permite estructurar nuestro sitio bajo el popular enfoque JAMStack, que privilegia los rendimientos y la escala.

// Ejemplo básico de cómo usar JavaScript para generar HTML estático
// Se reutiliza la función render previamente utilizada en SSR

const render = require('./render');

const createStaticSite = () => {
  const htmlContent = render();  // Obtener el contenido completo con render
  saveToFile('index.html', htmlContent);  // Guardar el HTML generado en un archivo
};

const saveToFile = (filename, content) => {
  // Función para escribir el contenido en un archivo
  fs.writeFileSync(filename, content);
};

createStaticSite();  // Ejecutar la creación del sitio estático

Beneficios del static site generation

El SSG trae consigo numerosos beneficios, especialmente en términos de rendimiento:

  • Eficiencia en cargas: Las páginas estáticas cargan más rápido ya que no dependen de cálculos dinámicos con cada solicitud del usuario.
  • Apoyo de servidores universales: Los sitios generados estáticamente pueden subirse a cualquier servidor convencional, ya que solo necesitan soportar HTML, CSS y JavaScript.
  • Seguridad mejorada: Menos solicitudes al servidor significa menos exposición a vulnerabilidades directas o ataques potenciales.

Estos beneficios facilitan que los desarrolladores creen sitios altamente optimizados, aunque no todas las aplicaciones son adecuadas para el SSG. Entornos como dashboards de datos en tiempo real o analíticas dependen de información dinámica actualizada constantemente y no son candidatos ideales para prerenderización.

Desafíos finales y consideración de optimización

Aunque el static site generation puede llevar una página al máximo nivel de optimización, siempre debe evaluarse la naturaleza y las necesidades del proyecto. Los desarrolladores deben analizar qué partes del sitio pueden beneficiarse de esta metodología y cuáles requieren permanecer dinámicas. Además, en futuras clases, se estudiarán aspectos como la implementación de cachés y redes de entrega de contenido (CDN) para mejorar aún más la eficiencia y rendimiento del sitio.

Aportes 10

Preguntas 1

Ordenar por:

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

Qué buen curso hasta el momento 👏. Me ha encantado esta sección de JavaScript sobre todo la explicación del code splitting, SSR, y prerendering. Creo que explicas muy bien y me gustaría que hicieras un curso más a fondo con esos temas! 😍🚀

🏛️ Pre-renderizando el contenido: Static Generation

<h4>Recursos</h4>

Static Site Generators - Top Open Source SSGs | Jamstack

<h4>Apuntes</h4>
  • Actualmente en el server side rendering on demand, Cada vez que nuestro usuario haga un request, el servidor traerá la información de la API
    • Si se conectan dos usuarios, se harán dos request a las Apis que estamos utilizando
  • Esto depende del proyecto, existen proyectos los cuales no es tan necesario que cada vez en un intervalo corto de tiempo el servidor tenga que ir hasta la API, porque es probable que la información sea exactamente la misma
  • En estos casos podemos usar Static Site Generation
  • Consiste en hacer que en el tiempo de construcción del proyecto traiga todo el contenido y que genere una respuesta para enviar a todas las conexiones

RESUMEN: Static Site Generation nos renderiza y busca los datos una sola vez, pero nos da la ventaja de tener todo listo, pero solo se debe usar cuando los datos no cambien en tiempo real

JAMStack

J -> Javascript = interacción del sitio web
A -> Api’s = interfaz de aplicaciones para consultar información que ya es abstraida y ha realizado un proceso en un servidor
M -> Markup = plantilla construida en tiempo de compilación

Encontré este recurso que podría añadir un mejor entendimiento de SSR y SSG

Buenísima explicación.

Me basé en esta url para traspasar los cambios a mis avances:
https://github.com/jonalvarezz/platzi-optimizacion-web/compare/5-with-ssr...7-with-ssg

Luego
npm run build
npm run serve

Fui a localhost:5000 y funcionó impeque

Static Site Generation

  • Se trata de pre-renderizar el contenido
  • Ensenia al servido que en el tiempo de construccion del proyecto, traiga todo el contenido de la API’s de una vez, lo guarda y esa unica respuesta generada se la envia a todas las conexiones
  • Lo podemos subir a cualquier servidor en Internet
  • No aplica para metricas y datos que se necesitan visualizar en tiempo real

Segun veo pre-renderizas el contenido, y esta bien. Pero cuando payload de la respuesta de la API cambia, como haces para actualizar el contenido para mostrar el nuevo contenido?

Esta bien que lo conozcas, ¡pero no lo uses en producción! me recordó el refrán "Solo funciona en mi equipo"

Cada vez que un usuario se conecta, hace una petición al servidor, esa petición va a traer la información de la API.

Server Side Rendering on Demand: Cada vez que hay una nueva conexión vamos a ir a las API a traer información.

👌