Versión en EspañolES

Medios más rápidos = sitios web más rápidos

3 authors

Recording and certification are available to Multipass and Full ticket holders only

Please login if you have one.

Get Multipass

Bookmark

A medida que el comercio electrónico en todo el mundo se ha trasladado a una plataforma predominantemente en línea, la necesidad de proporcionar un sitio web de alto rendimiento a sus usuarios ha aumentado significativamente. Y además de eso, Google ha anunciado que a partir de mayo de 2021, los Core Web Vitals tendrán un impacto directo en el ranking de páginas y en el SEO, lo que hace que el rendimiento web sea aún más importante. Ven y aprende los conceptos básicos del rendimiento web y cómo se relaciona con los medios. Utilizando una sencilla aplicación de comercio electrónico basada en React en conjunto con un producto de optimización de medios, podrás aprender cómo entregar el formato y la fidelidad óptimos, mejorando potencialmente el ranking de tus páginas.

This workshop has been presented at React Summit Remote Edition 2021, check out the latest edition of this React Conference.

FAQ

Cloudinary es una empresa que ofrece soluciones de optimización de medios a través de la nube, ayudando a los desarrolladores y empresas a manejar más eficientemente sus recursos multimedia. Ofrece servicios como redimensionamiento y formato de imágenes, manipulación y transcodificación de videos, creación de imágenes responsivas, y optimización automática de formatos y calidad.

Los Elementos Vitales Principales de la Web son un conjunto de métricas definidas por Google que son cruciales para asegurar una buena experiencia de usuario en la web. Estas métricas incluyen la carga, la interactividad y la estabilidad visual de las páginas, y son factores determinantes en el ranking de las páginas en los resultados de búsqueda de Google.

Cloudinary ofrece herramientas que permiten optimizar el rendimiento de los sitios web mediante la automatización de la optimización de imágenes y videos, la entrega a través de CDN, y la utilización de formatos modernos de archivos que reducen el tamaño sin perder calidad visual, lo que resulta en tiempos de carga más rápidos y una mejor experiencia de usuario.

Cloudinary menciona herramientas como Google Lighthouse y WebPagetest, que permiten realizar auditorías de rendimiento y accesibilidad de las páginas web, proporcionando reportes detallados y recomendaciones para mejorar el rendimiento basado en las métricas de los Elementos Vitales Principales de la Web.

Un CDN, o Red de Entrega de Contenidos, es una red de servidores que ayudan a distribuir el contenido de un sitio web de manera más eficiente geográficamente. El uso de un CDN puede mejorar significativamente los tiempos de carga de las páginas, reducir la latencia, aumentar la seguridad y disminuir los costos de ancho de banda, mejorando la experiencia del usuario final.

Google Lighthouse es una herramienta automatizada y de código abierto que se usa para mejorar la calidad de las páginas web. Realiza auditorías en diversas áreas como rendimiento, accesibilidad, aplicaciones web progresivas y SEO. Lighthouse genera un reporte que evalúa la página y ofrece indicadores y consejos para optimizarla según las métricas de los Elementos Vitales Principales de la Web.

performance e-commerce

Marissa Masangcay

Pramod Shenoy

Akshay Ranganath

90 min

10 Jun, 2021

Comments

Video Summary and Transcription

Bienvenido al masterclass sobre medios más rápidos y sitios web más rápidos. Cubriremos los Core Web Vitals, herramientas de medición y las mejores prácticas de rendimiento web. La optimización de la entrega de activos, la utilización de CDNs y el redimensionamiento de activos al tamaño exacto son consideraciones clave. Cloudinary ofrece técnicas de optimización de medios, trata los medios como código y utiliza URLs de entrega con transformaciones. También se discute la optimización de imágenes para pantallas retina y casos de uso comerciales.

Available in English: Faster media = faster websites

Video transcription and chapters available for users with access.

Available in other languages:

Watch more workshops on topic

Masterclass de Depuración de Rendimiento de React

React Summit 2023

170 min

Masterclass de Depuración de Rendimiento de React

Top Content

Featured WorkshopFree

Ivan Akulov

Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Vería una interacción lenta, intentaría una optimización aleatoria, vería que no ayudaba, y seguiría intentando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Haría una grabación en Chrome DevTools o React Profiler, la examinaría, intentaría hacer clic en cosas aleatorias, y luego la cerraría frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos a analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, estaremos cubriendo el rendimiento de la interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)

advanced react performance react debugger react performance react profiler best practices debug

Construyendo aplicaciones web que iluminan Internet con QwikCity

JSNation 2023

170 min

Construyendo aplicaciones web que iluminan Internet con QwikCity

Featured WorkshopFree

Miško Hevery

Construir aplicaciones web instantáneas a gran escala ha sido elusivo. Los sitios del mundo real necesitan seguimiento, análisis y interfaces y interacciones de usuario complejas. Siempre comenzamos con las mejores intenciones pero terminamos con un sitio menos que ideal.
QwikCity es un nuevo meta-framework que te permite construir aplicaciones a gran escala con un rendimiento de inicio constante. Veremos cómo construir una aplicación QwikCity y qué la hace única. El masterclass te mostrará cómo configurar un proyecto QwikCity. Cómo funciona el enrutamiento con el diseño. La aplicación de demostración obtendrá datos y los presentará al usuario en un formulario editable. Y finalmente, cómo se puede utilizar la autenticación. Todas las partes básicas para cualquier aplicación a gran escala.
En el camino, también veremos qué hace que Qwik sea único y cómo la capacidad de reanudación permite un rendimiento de inicio constante sin importar la complejidad de la aplicación.

performance frameworks qwik

Next.js 13: Estrategias de Obtención de Datos

React Day Berlin 2022

53 min

Next.js 13: Estrategias de Obtención de Datos

Top Content

WorkshopFree

Alice De Mauro

- Introducción- Prerrequisitos para la masterclass- Estrategias de obtención: fundamentos- Estrategias de obtención – práctica: API de obtención, caché (estática VS dinámica), revalidar, suspense (obtención de datos en paralelo)- Prueba tu construcción y sírvela en Vercel- Futuro: Componentes de servidor VS Componentes de cliente- Huevo de pascua de la masterclass (no relacionado con el tema, destacando la accesibilidad)- Conclusión

performance react server components next.js best practices

Construyendo una Aplicación de Shopify con React & Node

React Summit Remote Edition 2021

87 min

Construyendo una Aplicación de Shopify con React & Node

Top Content

WorkshopFree

2 authors

Los comerciantes de Shopify tienen un conjunto diverso de necesidades, y los desarrolladores tienen una oportunidad única para satisfacer esas necesidades construyendo aplicaciones. Construir una aplicación puede ser un trabajo duro, pero Shopify ha creado un conjunto de herramientas y recursos para ayudarte a construir una experiencia de aplicación sin problemas lo más rápido posible. Obtén experiencia práctica construyendo una aplicación integrada de Shopify utilizando el CLI de la aplicación Shopify, Polaris y Shopify App Bridge.Te mostraremos cómo crear una aplicación que acceda a la información de una tienda de desarrollo y pueda ejecutarse en tu entorno local.

shopify with react e-commerce shopify case study

Crea un sitio web editable visualmente con Next.js utilizando React Bricks, con blog y comercio electrónico

React Summit 2023

139 min

Crea un sitio web editable visualmente con Next.js utilizando React Bricks, con blog y comercio electrónico

Top Content

WorkshopFree

Matteo Frana

- React Bricks: por qué lo construimos, qué es y cómo funciona- Crea una cuenta gratuita- Crea un nuevo proyecto con Next.js y Tailwind- Explora la estructura del directorio- Anatomía de un Brick- Crea un nuevo Brick (Texto-Imagen)- Añade un título y descripción con edición visual RichText- Añade una imagen con edición visual- Añade controles de barra lateral para editar props (relleno y lado de la imagen)- Anidación de Bricks utilizando el componente Repeater- Crea un brick de galería de imágenes- Publica en Netlify o Vercel- Tipos de página y campos personalizados- Acceso a los valores meta de la página- Internacionalización- Cómo reutilizar contenido en varias páginas: Historias y incrustaciones- Cómo crear un comercio electrónico con datos de productos de una base de datos externa y páginas de aterrizaje creadas visualmente en React Bricks- Características empresariales avanzadas: permisos flexibles, estructura bloqueada, componentes visuales personalizados

e-commerce next.js react bricks react state management

Depuración del Rendimiento de React

React Advanced 2023

148 min

Depuración del Rendimiento de React

Workshop

Ivan Akulov

Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Veía una interacción lenta, probaba una optimización aleatoria, veía que no ayudaba, y seguía probando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Hacía una grabación en Chrome DevTools o React Profiler, la examinaba, intentaba hacer clic en cosas al azar, y luego la cerraba frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos cómo analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, cubriremos el rendimiento de interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)

performance optimization debug

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Una Guía del Comportamiento de Renderizado de React

React Advanced 2022

25 min

Una Guía del Comportamiento de Renderizado de React

Top Content

Mark Erikson

Replay.io

This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.

react performance react rendering deep dive

Acelerando tu aplicación React con menos JavaScript

React Summit 2023

32 min

Acelerando tu aplicación React con menos JavaScript

Top Content

Miško Hevery

Qwik, Angular & AngularJS creator, Karma co-creator.

Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.

builders and founders performance react less frameworks qwik

Concurrencia en React, Explicada

React Summit 2023

23 min

Concurrencia en React, Explicada

Top Content

Ivan Akulov

Google Developer Expert, Web Performance Consultant, Netherlands

React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.

react react 18 performance react concurrent mode deep dive best practices

El Futuro de las Herramientas de Rendimiento

JSNation 2022

21 min

El Futuro de las Herramientas de Rendimiento

Top Content

Addy Osmani

Engineering Leader Working on Google Chrome

Today's Talk discusses the future of performance tooling, focusing on user-centric, actionable, and contextual approaches. The introduction highlights Adi Osmani's expertise in performance tools and his passion for DevTools features. The Talk explores the integration of user flows into DevTools and Lighthouse, enabling performance measurement and optimization. It also showcases the import/export feature for user flows and the collaboration potential with Lighthouse. The Talk further delves into the use of flows with other tools like web page test and Cypress, offering cross-browser testing capabilities. The actionable aspect emphasizes the importance of metrics like Interaction to Next Paint and Total Blocking Time, as well as the improvements in Lighthouse and performance debugging tools. Lastly, the Talk emphasizes the iterative nature of performance improvement and the user-centric, actionable, and contextual future of performance tooling.

devtools performance tooling

Optimización de juegos HTML5: 10 años de aprendizaje

JS GameDev Summit 2022

33 min

Optimización de juegos HTML5: 10 años de aprendizaje

Top Content

Will Eastcott

CEO & co-founder of PlayCanvas

PlayCanvas is an open-source game engine used by game developers worldwide. Optimization is crucial for HTML5 games, focusing on load times and frame rate. Texture and mesh optimization can significantly reduce download sizes. GLTF and GLB formats offer smaller file sizes and faster parsing times. Compressing game resources and using efficient file formats can improve load times. Framerate optimization and resolution scaling are important for better performance. Managing draw calls and using batching techniques can optimize performance. Browser DevTools, such as Chrome and Firefox, are useful for debugging and profiling. Detecting device performance and optimizing based on specific devices can improve game performance. Apple is making progress with WebGPU implementation. HTML5 games can be shipped to the App Store using Cordova.

game development performance game engine

How React Compiler Performs on Real Code

React Advanced 2024

31 min

How React Compiler Performs on Real Code

Top Content

Nadia Makarevich

Coder, writer, author of Advanced React book

I'm Nadia, a developer experienced in performance, re-renders, and React. The React team released the React compiler, which eliminates the need for memoization. The compiler optimizes code by automatically memoizing components, props, and hook dependencies. It shows promise in managing changing references and improving performance. Real app testing and synthetic examples have been used to evaluate its effectiveness. The impact on initial load performance is minimal, but further investigation is needed for interactions performance. The React query library simplifies data fetching and caching. The compiler has limitations and may not catch every re-render, especially with external libraries. Enabling the compiler can improve performance but manual memorization is still necessary for optimal results. There are risks of overreliance and messy code, but the compiler can be used file by file or folder by folder with thorough testing. Practice makes incredible cats. Thank you, Nadia!

performance