#performance

Hi folks, in this Talk we learn about React and Chrome DevTools. We explore the new AI Assistant panel in DevTools that helps with UI tweaking. React DevTools now supports Gemini AI model for error fixing. Extensibility is important and React DevTools has features like highlight updates and server components. We also learn about server logging in the browser console and toggling suspense fallbacks. Browser DevTools allow experimenting with local overrides and improving color contrast. Advanced features include overriding headers, network panel customization, and performance tooling. We also discuss Core Web Vitals, optimizing pages, and debugging UI with DevTools. There are fun tips for enhancing animations and logging workflow. The Talk ends with Q&A and sharing/removing features based on user feedback.

We asked co-sponsors to present React, an essential framework for web and mobile developers. TypeScript improves the development experience. Let's talk about the neglected topic of JavaScript leaks and how Chrome handles them. Leaks are easy to create, even for good developers. We crashed browsers due to memory leaks. Solution: fully reload the page after soft navigations. Today we have tools to fix leaks. The first step is admitting you have a problem. Use the reporting API to collect data on memory leaks. If you have a problem, it's not just a single leak. Debug and take memory snapshots. Load the page, perform an action, go back. Compare snapshots to find leaks. Use Memlab by Facebook to identify leaked objects. Memlab tells us memory is used, leaks are everywhere. Chrome extension helps with exporting actions to scenario.js file. 50 users already. Fixing memory leaks involves finding and nullifying unused objects. Spot the leak in a simple React component that adds event listeners. Removing the component leaves the listeners behind. In session two, adding a set interval creates additional listeners. Debugging with Memlab and using non-minified code and named functions helps identify the leaks. Solution: add a component. In React, frameworks provide ways to clean up after components are removed. Spotting a leak in uppercase spelling of mount. Hooks offer use effect to handle cleanup. A use effect allows you to return a function for cleanup. Spot the weird memory leak caused by console logs. Try the reporting API, check your framework, use null, and find your first leak. Memory leaks may be more significant on a mobile browser due to limited available memory. Differentiating between leaked memory and growing global state can be determined by the app's architecture. Checking for memory leaks on mobile can be done using dev tools and manual inspection or by using Puppeteer and the developer tools protocol for emulation. The lack of naming and bindings for anonymous functions in a codemark plugin is a potential area for improvement. Neglect and the excessive amount of JavaScript are common culprits for poor web performance. Facebook's experience with redesigning their website highlighted the need for tools to address the performance bottleneck caused by JavaScript. Throttling the CPU can be effective. Developers should set objects to null when they are no longer needed, allowing the garbage collector to clean up. Chrome DevTools provides options for detecting console log memory objects. WeakRefs and WeakMaps can be useful for cleaning up memory leaks. Integration with tools like MemLab can help regression test releases for memory leaks. We are still early in memory leaks tooling. Raising awareness about the problem is important. Lighthouse scores are not the sole indicator of a fast website. Additional testing and familiarity with Core Web Vitals are recommended.

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!

The Talk discusses the NextPaint metric, a new performance metric introduced by Google that measures the speed of clicks or keyboard input on a page. It explores how React rendering can impact the NextPaint metric and offers optimization techniques such as using the useTransition hook in React 18. The Talk also covers the changes introduced in React 18's rendering process, the impact of wrapping with suspense, and the replacement of the First Input Delay metric with the interaction to the next page. The limitations of useTransition and general React performance optimization strategies are also discussed.

This Talk on web performance and React explores various metrics such as time to first bite, largest contentful paint, cumulative layout shift, and first input delay. It highlights the challenges of JavaScript in impacting total blocking time and user experience. Mobile usage and device performance are discussed, along with the importance of measuring and improving page performance. The speaker also mentions the abundance of technologies in today's web and emphasizes the need to prioritize user experience over sending excessive JavaScript.

This Talk discusses various strategies to improve React performance, including lazy loading iframes, analyzing and optimizing bundles, fixing barrel exports and tree shaking, removing dead code, and caching expensive computations. The speaker shares their experience in identifying and addressing performance issues in a real-world application. They also highlight the importance of regularly auditing webpack and bundle analyzers, using tools like Knip to find unused code, and contributing improvements to open source libraries.

The Talk discusses ways to boost the performance of WebGL Unity games, including issues with bundle size, memory usage, and runtime performance. It suggests using Brotli for compression and non-exception support for better performance. Choosing the appropriate texture compression format and experimenting with separate builds can also help. The Talk also covers optimizing textures, models, audio, and assets by reducing build size, using compression, disabling unnecessary models, and optimizing audio quality. Unity's optimization tools and profilers are recommended for analyzing performance and memory issues.

This Talk introduces server components in React, which provide an intermediate format for rendering and offer advantages for both client-side and server-side rendering. Server components reduce bundle size on the client and improve search engine optimization. They abstract the rendering process, allowing for faster rendering and flexibility in choosing where to render components. While server components are still in the experimental stage, Next.js is a good starting point to try them out.

This Talk discusses digital sustainability and the role of JavaScript in web sustainability. It highlights the impact of electricity carbon intensity and page weight on carbon footprints. The Talk also examines JavaScript's contribution to the carbon footprint on mobile devices and emphasizes the importance of reducing unnecessary requests. The introduction of the carbon control tool, which provides performance data and estimates carbon footprints, is also mentioned.

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.

The Talk discusses cases where common optimizations can make the app slower instead of faster, highlighting the impact of a CDN implementation on performance. The delay in the CDN connection process caused the first contentful paint to be delayed. Code splitting, while reducing bundle size, resulted in delayed rendering and worsened performance. Lazy loading images can cause performance issues, and image optimization needs to be carefully managed. Link, pre-connect, and pre-load headers can help with connection and loading cascades, but only if files are loaded later.

Nuxt is a web framework with many features including server-side rendering, client-side rendering, static site generation, edge site rendering, and more. The Edge is a limited environment running on CDN nodes, such as Cloudflare network. Database options on the Edge include Postgre with Neon, Versel on Neon, Superbase, MySQL with plan scale, HyperDB, and KV with redis and Cloudflare storage. The speaker demonstrates creating a demo with a votes table, handling API requests, adding authentication, saving votes, and displaying results. The roadmap to a full stack Nuxt 3 with an edge-first experience is in progress. Copilot is a helpful tool for developers. Integrating SSO with GitHub and improving the developer experience are important considerations for Nuxt 3.

BUN is a modern all-in-one JavaScript runtime environment that achieves new levels of performance. It includes BUN dev, a fast front-end dev server, BUN install, a speedy package manager, and BUN run, a fast package runner. BUN supports JSX, has optimized React server-side rendering, and offers hot module reloading on the server. The priorities for BUN include stability, node compatibility, documentation improvement, missing features in BUN install, AST plugin API, native Windows support, Bundler and Minifier optimization, and easier deployment to production. BUN's AST plugin API allows for bundle-time JavaScript execution and embedding code, potentially inspiring new frameworks.

The Talk discusses the importance of effective communication and collaboration in cross-cultural teams. It emphasizes the impact of culture on communication and performance evaluation. The speaker highlights the differences between low-context and high-context communication styles and the need to understand cultural nuances. It also explores the challenges of giving feedback in multicultural teams and suggests ways to improve communication and create a feedback culture. The influence of language on communication and the importance of transparency and honesty in feedback are also discussed.

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.

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.

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.

Hello, everyone. Today I'll talk about boosting React Native app performance. We'll explore optimization techniques, practical strategies, tools, and examples. Performance is crucial for mobile apps. Slow apps lead to frustration, abandonment, and revenue loss. We need to maintain 60 frames per second and overcome performance challenges. Let's understand the React Native architecture, legacy model, and the new architecture with JSI, fabric renderer, and turbo modules. Performance issues in React Native arise due to the single-threaded nature of JavaScript. The React Native bridge can be overwhelmed by large payloads, so using JSI for direct native communication is a more efficient solution. Profiling tools like Flipper, Chrome dev tools, React dev tools, Xcode instruments, and Android profiler help identify bottlenecks. Offloading heavy computations to web workers or JSI can improve JavaScript performance. Enable Hermes engine for improved performance. Optimize flatlist usage, delay non-urgent tasks, and prevent memory leaks for better app performance. Use initial numToRender and maxToRenderPerBatch props, memoize render item, and clean up side effects for optimized rendering. Preload and cache images, delegate gesture processing to the native thread, and continuously test the app under real-world conditions for smooth rendering and fluid UI.

Our story is about a super tool that reduces bundle size without changing code. It removes input statements, improves performance, and reduces bundle size. ASTs are used to optimize constant files by removing references and replacing with values. Bubble is a tool for code manipulation using ASTs. Manipulating code with Bubble paths allows for removing unnecessary variable declarations. Careful handling and testing are necessary when using AST tools. Guarding assumptions and writing exec tests are key practices. Completing the AST development lifecycle ensures correct code updates. ASTs are a powerful tool for software development.

Today we're going to talk about utilizing caching to optimize our web application performance. We will discuss caching data and resources outside of our React application, how to control and avoid caching problems, and the benefits of caching for improving web application loading times and reducing server load. We can cache static resources like images, media files, scripts, and CSS, as well as application data like the list of articles or posts. However, we need to be cautious with caching data that may become outdated. The service worker and browser cache can intercept network requests and load responses from their caches. Additionally, headers such as cache control and eTag can be used to control caching behavior. The CDN, a content delivery network, maintains cached resources globally and aims to deliver content efficiently. Different caching points store various types of content, improving performance and enabling offline functionality.

Today's Talk focused on performance optimization in React apps, specifically in handling and rendering enormous amounts of data. The speaker discussed various techniques and tools to achieve better performance, such as optimizing data relay, rendering, data processing, memory usage, and denormalization. They also highlighted the importance of optimizing network performance, payload size, and request handling. The Talk emphasized the need to measure before optimizing, focus on bottlenecks, and make small improvements that actually benefit users. Overall, the Talk provided valuable insights and recommendations for improving performance in React apps.

Hello, everyone. I'm Hina from Expedia Group. This talk is about making Expedia flights faster. We will focus on performance initiatives on the Flight Search page, including prefetching and preemptive search. Monitoring is crucial with custom metrics like page usable time and non-supply overhead. Prefetching fetches JS bundles beforehand for faster CDN path retrieval, while preemptive search predicts Flight Search responses before the user lands on the page. The page performance improved up to 50% on both web and native. Preemptive search and microqueries were implemented to improve path and performance. Async loading and loaded query optimization resulted in an 8% improvement. Micro-front-end architecture improved bundle size and component reusability, leading to significant performance gains.

Hi everyone! I'm Rohit, a founding engineer at Tria. We are working on bringing the world to Web3 using names. My talk is about gaining performance and taking runtime to build time. There is an upward trend in libraries towards build time optimization, especially in React. Build time optimization improves performance, reduces bundle size, and provides more predictable software. Babel is a free and open source JavaScript transpiler that allows leveraging latest JavaScript features and moving computationally heavy logic from runtime to build time. Building a Babel plugin involves checking for a style prop inside an HTML tag and searching for aliases or token values. The visitor pattern is used to define the JSX type of node and access its path and attributes. The plugin can be customized for different utilities by defining aliases and tokens in a config file. Helpful resources for understanding and building custom Babel plugins include the Babel handbook, Babel docs, astexplorer.net, and the speaker's Twitter account.

Hi, my name is Julian and I am super excited to be speaking at React Summit this year. Today, I will be talking about Suspense on the server and its importance in React server components. React server components allow us to differentiate between static and dynamic components, improving performance and user experience. Suspense improves performance by introducing streaming and out-of-order streaming. We can implement suspense on the server by creating a suspended object to store the suspended children and swapping out the loading state for the actual content using custom elements. Multiple suspense boundaries can be used to render individual loading states for different sections, improving the user experience.

Hi, everyone! My name is Yash Varma, and I'm a software engineer and computer researcher. I'm an open telemetry enthusiast, working on creating a vendor-neutral observability framework. Today's talk is titled as Observability Matters, this time for frontend. We'll cover the evolution of ZEP, the understanding of observability, current state of front-end monitoring tools, core essence of front-end observability, and front-end observability direction. Observability is about understanding what's happening inside the system based on its internal behavior or output. Front-end developers often lack observability compared to back end developers. Synthetic monitoring and real user monitoring are two common tools used by frontend developers. Front-end observability allows us to understand application performance for different users and situations, connecting the dots and gaining insight into core web vitals and user sessions. It's time to adopt observability as a culture and break down silos between front-end and back-end to better understand the entire user experience.

In this talk, the speaker introduces web workers and discusses how they can handle large processing on the client side. Examples, benchmarks, and tradeoffs are provided. The benefits of using web workers are discussed, and a demo project using VanillaJS and the live server extension of VS Code is showcased. The speaker demonstrates how to use web workers to prevent the main thread from getting blocked during large operations. The process of creating a web worker file and moving functions to it is explained. The speaker also shows how to handle messages and perform operations with web workers. The final remarks include contact information and an invitation to check out the speaker's YouTube channel for React courses and articles.

In this talk, we explore advanced mathematics and data analysis with JavaScript, comparing its speed with Python and R. We discuss the role of WebAssembly and cases where plain JavaScript falls short. We introduce Standard Lib, a fundamental library for numerical computation on the web, similar to NumPy or SciPy in Python. We delve into the speed and performance of JavaScript, highlighting its performance compared to Python and R for different array sizes. We also discuss the performance of WebAssembly and native add-ons. Finally, we discuss the features of Standard Lib, including fancy indexing, blast operations, and its integration with Google Sheets.

Using front-end features can be challenging. Model federation is an approach to implement micro frontends. Micro frontends can be built-in or use runtimes. Two micro frontends need to update together to ensure consistency. Other techniques for micro frontends include web components, system.js, iframes, and monorepos. Model federation in Webpack 5 decouples runtime from build tools, allowing flexibility in model loading. High availability and error boundaries are important for Model Federation. Full-federated sites enable fast development cycles and easy testing. Importing components from a federated model requires dynamic imports, dependency sharing, and performance considerations. Debugging tools like Medusa and the Model Federation plugin for Chrome help identify and resolve issues. Consistent styling can be achieved by using the same UI kit. Routing can be handled by a shell application or frameworks like Single SPA. Decoupling components using specific federated models and considering tradeoffs when designing application growth strategies. Determine if Microfrontends are necessary based on the need for independent modular components in a growing product.

Hello, JS Nation. I'm here to tell you about some interesting stuff I've been working on using SolidJS. SolidJS introduced fine-grain reactivity and signals six years ago, while other frameworks are now recognizing the value and incorporating similar concepts. Recently, server-side rendering and meta frameworks have gained attention, and SolidJS also has its own meta framework called Solid Start. In this talk, I'll discuss Solid Start and its role in shaping future frameworks. A meta-framework is important because it enables faster time to production, improved code quality, and other benefits. Solid Start is a non-opinionated way to start applications, allowing developers to choose their own path. It took three years to develop, going through two beta phases and major API rewrites. Solid Start is powered by Solid Router, Seroval, Solid, and Vinci. The application allows users to catch Pokemons, and the code uses Solid Router and File Routing for lazy loading components. Preloading data for components helps optimize fetching by eliminating network waterfalls. SOLIDSTART gives you the freedom to choose your path and is the shape of frameworks to come.

Hello, my name is Gabriel. I work at auction.com and I'm going to be talking about how we improved the performance of GraphQL resolvers for our GraphQL service. We had a problem with our subscription deployment, where we were experiencing a high number of restarts due to memory allocation failures. This prompted us to investigate and optimize the memory consumption of our resolvers. To assess the performance, we set up a local environment with Kafka, Graph, and a client that connected 4000 WebSockets to Graph. After running the test, we found that we were only able to process and distribute 16 messages to our clients. Yay. The memory consumption graph showed peaks and valleys as messages were delivered. Three distinct phases were observed: idle, Sockets connected with no messages, and messages being processed. We decided to optimize the context, which contains request-specific information and backend details. Since subscriptions primarily involve sending Kafka messages, we realized that the message itself often has all the necessary information. Therefore, we only create backends when a call is made to them. We optimized our backend creation process using the proxy object, which allows us to create backends lazily only when they are accessed. This resulted in less memory consumption without changing the code or the schema. The less memory consumption is evident in the second phase of the recording, where the plateau formed from having multiple contexts is significantly lower. Most of the savings were achieved by reducing temporary objects and using native iterators instead of Lodash calls for converting key names to Snakecase. All of a sudden, the performance increased by 18%, resulting in increased memory consumption. Upgrading to newer versions of GraphQL Redis subscriptions did not have a significant impact on memory usage. However, optimizing the conversion of key names to snake case by using memoization improved computational efficiency. Our performance significantly improved after implementing snake case. However, memory consumption remained high. To address the memory leak, we introduced auto-scaling and restarted the service every night. Additionally, we optimized the code generation process to improve memory consumption. We explored using heap snapshots in Google Dev tools to analyze and reduce memory consumption. By identifying unnecessary objects and removing them, we were able to free up memory and improve performance. We patched the location object to improve performance and reduce memory consumption. We also optimized data loaders to avoid N+1 queries and improve efficiency.

Today's Talk focuses on implementing virtual scrolling to improve performance and flexibility of lists. The process involves computing the height of the viewport, scroll position, and individual list item height. By rendering only the elements within the viewport, the initial page load and scrolling performance are enhanced. Various optimization techniques are discussed, including memoization, binary search, and delayed rendering. These techniques significantly improve scrolling performance and provide a better user experience. Additional techniques such as using skeletons, element pooling, and functional purity can further optimize rendering. Advanced techniques, like moving elements within the pool and using content visibility, yield substantial performance improvements. However, content visibility is better suited for large pages with few large sections. Overall, the Talk offers valuable insights into virtual scrolling and its limitations.

Today's Talk discussed the performance impact of generated JavaScript and the importance of bundle size in relation to page load speed and user experience. The use of a build process, minification, and avoiding unnecessary polyfills were highlighted as strategies to reduce bundle size. API design considerations, such as avoiding deeply nested object lookups and using functions and objects instead of classes, were discussed in relation to minification. The concepts of down-compilation and transpilation were explained, with a focus on the challenges and benefits they present. The Talk also emphasized the need to avoid using TypeScript enums and instead use string constants, as well as the importance of compressing code and tracking bundle size changes. Bundle analyzers were recommended for visualizing bundle contents and component connections.

Hi, I'm Jerdot, a technical lead at AWS Safegate. Today, I'll discuss event-driven architecture and the potentials of real-time event-driven systems in JavaScript. We'll explore JavaScript runtimes, the event loop, and the queues involved. Event-driven architecture involves producing, detecting, consuming, and reacting to events. It is used in microservices, IoT systems, and real-time data processing. Tools like event emitters and WebSockets are used to simplify building event-driven applications. Connection management is crucial, and RabbitMQ and MQTT are popular message brokers. Performance optimization can be achieved by using high-performing message brokers, deploying producers and brokers close together, and considering fault tolerance. Message processing should include storing messages until successfully processed, handling events multiple times with unintended side effects, and using automatic retries and dead letter queues for transient failures.

In this talk, the speaker explores how auto-complete can be implemented in different ways across various frameworks and libraries such as React, Vue, Angular, preact, Svelte, solid, and HTMX. The speaker discusses the different approaches to handling state and updating it in each framework. They also cover topics like debouncing user input, making API calls, and list rendering. The talk concludes with considerations for choosing a front-end framework and the speaker's personal preference for Svelte and Vue. They also mention the benefits of using web components to reduce boilerplate code. Overall, the talk aims to showcase alternative ways of developing applications beyond just React and encourage developers to explore and experiment with different frameworks.

Today's talk focused on the use of REST in JavaScript and the challenges and benefits it presents. The presenter discussed benchmarking the performance of different parsers, with TypeScript consistently outperforming others. Understanding the benchmark results involved analyzing parse time, serialization, and deserialization time. JavaScript parsers had slower performance with concurrent parsing due to JavaScript's single-thread nature. The talk also touched on performance optimization techniques, such as avoiding serialization and utilizing multiple CPU cores. The event-based model with a tree sync was suggested as a way to optimize FFI. Overall, the talk provided valuable insights into the use and optimization of REST in JavaScript.

Today's Talk focused on the importance of optimizing web vitals and performance for both user experience and the environment. The Internet's carbon footprint is significant, with page weight being a key factor. By reducing page weight and improving core web vital scores, developers can contribute to reducing CO2 emissions. The Talk highlighted how optimizing web vitals improved the loading performance, interactivity, and visual stability of a web application. It also discussed the importance of NextPaint interaction and profiling to enhance the NextPaint score. The Talk emphasized the connection between performance optimization and reducing the carbon footprint of web applications. Various tools and practices were recommended to measure and reduce the carbon footprint, including asset optimization, green hosting providers, and content delivery networks. The Talk also mentioned the need for AI regulations and the role of corporations in prioritizing sustainability. Overall, the Talk provided valuable insights into the intersection of performance and sustainability in software development.

Hello, everybody. Today, I'm going to talk about how I solved actual challenges in React using only CSS. One of the main packages I maintain is EmojiPicker React, with hundreds of thousands of weekly downloads. It has all the features you'd expect from an EmojiPicker, but the search capability was slow. I managed to fix it using CSS. Let me show you how. The search functionality relies on global state and requires updating each emoji individually, resulting in excessive DOM work. Virtualization or virtual scrolling is not a viable solution due to the non-uniform emoji list. By examining the DOM, I discovered that each emoji had an area label with search-related information. This led me to investigate further and implement a solution from scratch. We create a new component called CSS search, which takes a value as a string. If the value is empty, we return null. We remove all emojis from the emoji list if there are search results. Emojis that match the search term are displayed. Performance is instantaneous. Empty categories are removed using the CSS has attribute. The CSS not and has selectors are used to remove empty categories. A counter is used to display the count of emojis found. By using flexbox and order, we can position the after element at the beginning of the list. CSS nesting allows us to nest everything under the emoji list, simplifying the structure. The performance of the search is still very fast. I created the flareup package, a CSS in JS library specifically for NPM packages. Flareup solves compatibility issues and works on SSR and CSR. Emoji-picker-react uses flareup to render emojis without JavaScript. Flareup places a style element on the DOM, making it easy to use.

Welcome to my talk on long frames and INP, understanding the post-load performance. The rail model introduced in 2015 provides recommendations for responsiveness and organizing JavaScript work around user input. Metrics like FCP, FMP, and LCP measure visual completeness, while metrics like first interactive and CPU idle assess CPU idleness. Total blocking time measures the impact of long tasks on page responsiveness, and TTI assesses when the browser can respond to interactions reliably. INP is a user-centric responsiveness metric that encompasses all potential causes of slow interactions. The long animation frame API improves attribution and helps pinpoint performance problems. Tools like Vercel toolbar and trace viewer on PerfLab can visualize interaction to next paint. INP and long animation frames provide valuable insights for improving web experiences.

I'm Gil, a performance architect at Wix. Today, I'll explain how we use code splitting to improve website performance. Code splitting breaks down JavaScript into smaller chunks or React components, loading them only when needed. This reduces JavaScript size and improves user experience. We measure performance using Core Web Vitals, focusing on INP scores, which evaluate interactivity. Reducing JavaScript improves INP. Our INP scores have significantly improved, thanks to our code splitting techniques. Let's dive into the code splitting strategies we use, starting with dynamic import and React Lazy. Let's move on to a more advanced example: conditionally loading components on page load, not on user interactions. We fetch the comments data and render the comment section only if there are any comments. This method is supported in React 18 and works for server-side rendering (SSR). React components can be loaded dynamically on scroll or hover interactions with suspense. If the components are already rendered with SSR, we just need to download and hydrate them. This is only possible with the new suspense in server-side rendering (SSR). We use react-lazy with dynamic imports to render the component when it enters the viewport. I created a download on viewport wrapper that creates a ref and uses the intersection observer to resolve a promise when the component enters the viewport. I use the viewport and a wrapper that calls a function called use, which is implemented using the suspense API from React. This function is used to manage the promise and render the components only after it's resolved. The suspense component handles this promise. We moved props calculation to the server side and fetched them in the React component. This approach simplifies the process and can be implemented using the dynamic API in Next.js. By conditionally rendering components and calculating props on the server side, we can significantly reduce the amount of JavaScript code loaded in the client side, resulting in improved performance.

This talk focuses on building a fast and accessible website for all users, highlighting the importance of performance and user experience optimization. It emphasizes the need for adaptive implementation to cater to different devices and user conditions. The talk also discusses the factors beyond the developer's control, such as screen size, browsers, devices, internet connection, and sitting position. It highlights the significance of optimizing image components for various devices and the role of browser support and rendering engines. The speaker discusses the use of future APIs and the challenges of browser compatibility, as well as optimizing image formats and bundler compatibility. The talk provides insights on controlling bundler and device compatibility, optimizing CPU usage, internet connection, and JavaScript form submission. It concludes with a proposal to respond with save data instead of effective type for limited internet connections and recommends using React with adaptive hooks for better user experiences. Overall, the talk covers essential aspects of building a fast and accessible website.

I'm going to be speaking about concurrency within React and how you can use it to improve performance within your applications. Concurrency is crucial for optimizing responsiveness and ensuring a good user experience in complex applications. React breaks up the rendering process into render and commit phases, allowing interruption of the render phase for prioritizing user interactions. React's task scheduler handles tasks in small chunks, ensuring a fluid user experience and responsiveness. High-priority tasks include user interactions, while lower priority tasks involve fetching data or rendering long lists. React introduced new hooks, useTransition and useDeferredValue, for handling state update priorities. The deferred value hook allows for deferring the updates of non-critical UI values, while Suspense for Data Fetching improves the performance of data fetching in React applications. Concurrency is useful for handling real-time search inputs, seamless tab or component switching, rendering large lists, and animating transitions. However, there are drawbacks to concurrency, such as potential delays in non-urgent updates and limited benefits for expensive components. Concurrency may add CPU strain and requires an understanding of React's background behavior for effective debugging. Use suspense on parent level components for data fetching. Performance profiling can help test the effectiveness of transition hooks.

Today's Talk explores modern front-end frameworks React, SolidJS, and Quick. React's popularity is attributed to its component-based architecture and extensive ecosystem. SolidJS distinguishes itself with fine-grained reactivity, efficient memory usage, and developer-friendly API. Quick (QUIC) stands out for its fast load times, resumability, server-side rendering, and prioritization of developer experience. QUIC's on-demand loading feature improves initial page load time by deferring non-critical code execution.

This Talk introduces the concept of being a 'React bad boy' by ignoring best practices and optimizing React rendering. It explains how to avoid unnecessary rerenders using React.memo and React DevTools. It also covers advanced techniques like isolating state changes and lazy loading hooks. The Talk explores reducing component rerenders using Svelte stores and optimizing with swap stores in Redux. These techniques improve React performance without the need for major refactors or rewrites.

Today's Talk explores the blurring boundaries of infrastructure design, driven by user involvement and evolving technology. User technical literacy and changing technology are reshaping the design landscape, blurring the lines between interface and infrastructure design. Privacy and user needs now play a crucial role in infrastructure design decisions. React's experimental APIs and common UX tools aid in designing infrastructure with user needs in mind. Identifying concerns and security vulnerabilities and collaborating with cross-functional partners are essential for robust infrastructure design.

Today's Talk covers native features in browsers, including upcoming ones and the Interop Project. Native features offer speed, compatibility, and improved debugging. Notable examples include dynamic viewport units, flexbox/grid gap, container queries, and motion path. The Interop Project ensures consistent web platform features across different browsers. Upcoming features like native CSS nesting and entry/exit animations are on the horizon.

Today's Talk discussed web performance and internet penetration in Africa, highlighting the challenges of limited data plans and less powerful devices. The importance of considering internet accessibility when developing websites was emphasized, as slow-loading websites can result in negative reviews and lost customers. The concept of resumability, which delivers only necessary JavaScript for improved performance, was explored, along with the implementation of the QUIC framework to achieve this. QUIC framework was also discussed in terms of lazy execution and its ability to improve website performance and resource consumption.

Swift responsiveness is essential, and LLRT is a new JavaScript runtime optimized for serverless environments that offers improved performance and cost savings compared to other runtimes. LLRT achieves fast performance by removing complexities, leveraging Rust, and optimizing the AWS SDK for Lambda. It starts almost six times faster than Node.js and provides a cost saving of 2.9 times and a time saving of 3.7 times compared to Node.js.

The Talk discusses how the engineering team at Expedia improved the performance of customer flight search by using various metrics and techniques. These include prefetching resources during browser idle time, preemptive search to predict responses, and optimizing performance through micro queries and a micro front-end architecture. The team also focused on improving build and package size limits for better code analysis. Performance monitoring and automation were implemented for ongoing performance improvements.

JavaScript became successful due to its association with the browser as the only runtime. WebAssembly (WASM) is a virtual machine that can run anywhere and has a different computation model. WebAssembly code can be analyzed and converted into a more readable format. It can be used to accelerate code and enhance performance. Check out Austin Theroux's repository for examples.

The Talk discusses the JavaScript oxidation compiler (OXC) project and the impact of performance engineering. The OXC project consists of JavaScript tools written in Rust, including a parser, linter, and resolver, that are significantly faster than existing alternatives. Testimonials highlight the progress of the OXC project and the speed and effectiveness of the OXLint tool. The emphasis on performance in OXLint is demonstrated through cross-file linting and parallel processing. Performance improvements in the OXC project are achieved through benchmarking and can drive innovation in JavaScript infrastructure. The talk also discusses the need for faster website loading and the goal of creating a new minifier for better compression and performance in OXC.

The AmazingRFCs initiative was created to improve deliveries and collaboration at Quintana Roo. Two key actions were forming the RFCs Advisors group and optimizing the design and review process. By including interested and key people in discussions and implementing daily training initiatives, the density of capable decision makers increased, resulting in more high-quality RFCs and improved solutions in production.

Efficiency and productivity are buzzwords in the tech industry, but they have been misused and misunderstood. Leadership roles in tech are evolving, and understanding engineering productivity is crucial. Effectiveness is about achieving goals and customer adoption, while efficiency is about doing things right with fewer resources. Prioritizing effectiveness, productivity, and efficiency can help businesses achieve their goals. Understanding company goals, aligning strategies, and involving the team in defining success metrics are key to driving productivity and improving team performance.

An overview of the top 3 approaches you can apply to boost the rendering performance of HTML Canvas in your React application, based on the lessons we learned during the development of AG Charts.

React's improvements in performance, such as the introduction of useEffect, have gone unnoticed. useEffect simplifies synchronizing logic and improves performance by eliminating forced layout calculations. Update batching optimizes rendering by combining multiple set-state calls into a single render. React 18 introduces batched set-state calls for faster performance. React Suspense and selective hydration improve user experience and debugging performance issues is best done practically. Server components, recommended debugging tools, and framework choices are also discussed.

This is a background jobs one-on-one talk focusing on the challenges and benefits of using background jobs in software development. It explores the complexity of software development and the impact of distributed applications. The talk highlights the use of Ingest as a reliable solution for executing functions in the background and building drip campaigns. It emphasizes the importance of reliability and architectural choices in software development and discusses the features and capabilities of Ingest, including local development, handling failures, and data retrieval.

Threads.js, a Vue custom renderer for creating declarative 3D scenes, has gained popularity with over 1,700 GitHub stars, 9K monthly NPM downloads, and a strong developer community. Version 4 introduces performance improvements, on-demand rendering, typing support, and memory management. Event bubbling and primitive creation are key features, along with enhanced memory management and scene inspection capabilities. The roadmap includes translated documentation, a new cookbook, and the launch of post-processing and XR VR packages. Performance enhancements, a new 3D course, and updates to Tres Leches UI library are also in the works.

Shed CN Vue is a component library that allows for easy customization of components and styling. It is built on top of RedixView, which enables the use of primitives and element customization. Tailwind CSS is used for easy customization of layout, styling, animations, classes, and icons. The documentation provides more details on how to leverage these features.

Handling security in front-end development is crucial, and the OWASP Top 10 is a valuable resource for secure coding. The list of security risks is constantly evolving, and the Nuxt security module provides features like security headers, rate limiting, and cross-site request forgery protection. Frontend developers should prioritize security to avoid information leaks and mitigate risks. Understanding the difference between public and private tokens is important for secure token handling.

This Talk covers various optimization techniques for Lambda functions, including parameter fetching, code minification and bundling, observability with Power Tools and X-Ray, baseline testing with load testing tools, caching with Elastic Cache and Redis, and optimizing code size and memory usage. The importance of library choices, power tuning for cost and performance, leveraging subprocesses and sandboxes, and adjusting concurrency limits are also discussed. Overall, these techniques can significantly improve Lambda function performance.

Serverless services like AWS Lambda allow developers to build modern applications without provisioning servers or additional infrastructure. LLRT is a low latency runtime designed specifically for serverless environments and JavaScript applications. LLRT uses a lightweight JavaScript engine called Quick.js, achieving fast execution and performance with minimal memory consumption. LLRT is ideal for latency-critical applications, high-volume functions, and integration with AWS services. It significantly improves performance, reducing cold starts and providing consistent warm start times. Users are encouraged to test LLRT and contribute to its development.

This Talk provides an introduction to web performance and emphasizes the importance of setting performance goals and budgets. It explains the steps for creating and applying a performance budget and suggests various tools for performance budgeting. The Talk also highlights the need to make the performance budget concrete and meaningful, connect it to business goals, and integrate it into the development pipeline. It concludes by emphasizing the importance of maintaining performance and connecting with the speaker for more information.

Memory usage is often overlooked in web applications, but excessive memory usage impacts performance and user experience. It's important to analyze memory usage and optimize it, considering concepts like count versus size and shallow versus retain memory. The Chrome Memory Profiler and Memlab are useful tools for analyzing memory usage. By optimizing React components and using tools like Memlab, memory usage can be reduced significantly. React hooks can be expensive for large-scale projects, and memory analysis is a challenging task.

Distributed tracing is a powerful technique for tracking requests and operations in a system, especially in full stack and microservice applications. The reinvention of distributed tracing introduces the concept of a trace and spans to capture debugging data. Enhancements include tags and a status field for better analysis, and the distribution of traces using a trace context for continued tracing.

The Talk focuses on the importance of testing and gathering information for building good applications. It highlights the use of test automation for performance monitoring and logging for performance measurement. The Talk also discusses the impact of performance on user engagement and search engine rankings. It emphasizes the use of Cypress plugins for monitoring performance metrics and setting thresholds for tests. Overall, the Talk emphasizes the value of test automation tools in providing valuable information at a low cost.

Hi, I'm Annembae, the author of MillionJS, a fast virtual DOM replacement for React. The virtual DOM can be slow depending on the components it powers. The block virtual DOM introduces an O(1) optimization to the traditional virtual DOM, resulting in faster updates with fewer DOM manipulations. MillionJS and the Block Virtual DOM offer a faster alternative to existing virtual-dom libraries like React. It has the potential to revolutionize the way we write React applications.

Mike North discusses breaking the use-effect habit in React and explores alternative approaches to improve maintainability, flexibility, and code simplicity.

The Talk discusses the Core of Vitals and IMP, which are metrics used to measure user experience in browsers. IMP measures multiple actions such as tab, click, and key press until the next screen updates. It also addresses the issue of rage clicks and their impact on user experience. The Talk emphasizes the importance of optimizing for IMB by avoiding blocking the main thread and suggests using multiple tasks and yield to main thread for optimization. Additionally, it mentions the use of navigatorScheduling.isInputPending to handle user input, with a caveat that support may vary across browsers.

Performance is a puzzle that requires different approaches for different problems and sites. User feedback is crucial in evaluating performance, rather than relying solely on metrics like Lighthouse scores. Measuring performance and identifying issues can be done through tools like the performance tab and user timings. Understanding the main thread and using tools like React Profiler and Chrome Tracing can provide insights into performance problems. Optimizing performance involves doing less work, avoiding main thread blocking, and considering options like virtualization and Canvas. Communicating the impact of optimization to leadership and exploring different uses of Canvas are also important topics discussed in the Talk.

The Talk discusses the InteractionToNextPaint metric, which measures the speed of clicks or keyboard inputs on a page. It explores the impact of slow interactions and slow React renders on user experience. The Talk also covers optimization techniques for React rendering, including the use of concurrent features and the StartTransition function. React 18 introduces changes to the rendering process that improve interaction speed. Concurrent rendering and suspense boundaries are highlighted as features that can enhance the performance of React apps.

This Talk discusses rendering and synchronization in React 18. It addresses issues such as flashing rows and wiping out when scrolling. The use of usync-externalstore for concurrent reads and the potential misuse of APIs are explored. Debugging techniques using React Profiler and flush-sync are discussed. The talk also covers performance considerations for different machines and the importance of testing and considering alternative solutions.

Today's Talk focuses on improving the performance of Wix websites through an architecture change that reduced JavaScript size and improved Core Web Vitals metrics. The implementation of a feature with saved data required rewriting components and calculating view data on a separate frontend server. This approach led to a smaller and faster client application and allowed for caching in the CDN. The key takeaways include reducing JavaScript download, using feature-specific components, and caching server responses.

Today's Talk introduces Flashlight, a tool for measuring mobile app performance. Flashlight provides a performance report that highlights issues like high CPU usage on low-end devices. To fix these issues, the Shopify component Flashlist can be used. Flashlight can also be used locally to measure performance changes in React Native apps, with the ability to see the score rapidly changing and improved performance after implementing fixes. More information can be found in the documentation and an article comparing scrolling performance in React Native.

Welcome to how not to use UseEffect. UseEffect is a hook introduced in React 16.8 as a replacement for component dismount and update in class components. It runs your callback once when the component mounts and when there are changes in dependencies. UseEffect allows performing side effects such as fetching data. UseEffect executes its callback asynchronously to allow the browser to render and show something to the user without blocking the main thread. Setting a state in a useEffect without a dependency array can cause nasty loops. Sometimes you are using use effects to take care of calling parent events. Nasty Fetch. Sometimes, when fetching articles, loading and race conditions need to be considered.

This Talk discusses patterns for performance in React development, including addressing slow resizing in custom cell renderers. It explores optimizing React render performance by reducing excessive re-rendering and using direct style updates. The use of layout effect and callback refs is also highlighted as techniques to improve performance. Additionally, the Talk mentions the AG Grid and TanStack Table libraries, as well as upcoming features like grid state restoration.

This Talk discusses the journey of data fetching libraries in React's new streaming SSL, focusing on the use of suspense for data fetching. It covers the backstory of suspense and data fetching, the plan and green light for its implementation, challenges with Next.js app router and SSR, data transport and flushing timing, the importance of timing and data transport, delayed rehydration and stream closure, the need for remaining data and required functionalities, challenges faced by vanilla React users, and audience questions about React server components.

Today's Talk is about building team thinking games at Synthesis, an enrichment program aiming to build a generation of super collaborators. The key insight is that design is the main constraint, not graphics or AI. Synthesis uses open-source software and develops its own tools for game design and networking. The architecture of Synthesis games involves a server-native approach and a client-authoritative model for movement. The modular approach allows for quick iteration and flexibility in game development, and investing in content pipeline tools enables the creation of fresh content every week.

Asad Nehman discusses the challenges of making multiplayer games and suggests ways to simplify the process. He highlights the need for a backend, such as a Node.js server with Socket.io, to handle player connections. Rooms are introduced to connect players and their friends, allowing communication within each room. Hosting options like AWS EC2, Vercel, and Netlify can help scale the game globally. Playroom framework eliminates the need for server code, lobby systems, and managing player profiles.

This talk explores the differences between WebGL and WebGPU, with a focus on transitioning from WebGL to WebGPU. It discusses the initialization process and shader programs in both APIs, as well as the creation of pipelines in WebGPU. The comparison of uniforms highlights the use of uniform buffers for improved performance. The talk also covers the differences in conventions between WebGL and WebGPU, including textures, viewport and clip spaces. Lastly, it mentions the differences in depth range and projection matrix between the two APIs.

Today's Talk provides an overview of TypeScript performance and tools to address performance issues. It covers the compiler process, including the parser, binder, checker, and transformers steps. The Talk emphasizes the importance of keeping TypeScript up to date for better performance. It also discusses strategies for optimizing TypeScript compilation and debugging, analyzing build performance using trace files, and improving performance by simplifying types and avoiding overloading union types.

Today's Talk discusses improving site speed and efficiency using PartyTown, a tool that runs third-party scripts from a web worker, minimizing their impact on the main UI thread. The inclusion of third-party scripts in webpages should be carefully considered due to their potential impact on performance. Real-world testing is crucial to identify performance issues that may not surface during development. PartyTown offers features like white-listing script capabilities and supports various frameworks for easy integration. It was built by the team at builder.io to ensure websites can scale without sacrificing performance.

This Talk discusses overcoming performance limitations in React components for low-end devices, focusing on app launch time and scrolling performance. The speaker shares techniques for improving app launch and scrolling performance, such as pre-rendering, generating HTML at build time, and using the Virtual List component. The Virtual List component recycles dominoes and uses Translate3D function for improved performance. Delegating scrolling to the browser in NativeMode and supporting scrolling via remote control keys are also mentioned. Overall, the Talk highlights the importance of optimizing performance for low-end devices and provides practical solutions for achieving better performance in React components.

The Talk discusses various aspects of serving images on websites, including where to store images, image transformation options, and image formats. It also explores different approaches for handling image versions and sizes, such as preparing them in advance or using a proxy server. The speaker highlights the importance of optimizing images for performance and mentions the progress made in adopting new image formats. Overall, the Talk provides insights into best practices for managing and serving responsive dynamic images.

HTTP 3, also known as H3, is the latest version of the HTTP protocol with new performance-related features. Enabling HTTP 3 requires minimal effort and provides significant benefits, but limits fine-grained control over performance features. Zero RTT has limitations due to security reasons and restrictions on allowed requests. Resource loading and prioritization in HTTP 3 have some problems, as browsers may not agree on resource importance. Fetch priority allows fine-grained control over resource loading order, and resource discovery can be improved with 103 Early Hints. Web transport provides low-level access to QUIC and HTTP3 features for real-time use cases.

The choice of framework impacts website performance. Lab tests and field data are used to measure performance. Core Web Vitals are important metrics for performance evaluation. New frameworks that prioritize speed are emerging. MetaFrameworks like QUIC, SolidStart, Astro, and Nuxt show promise in improving performance. React frameworks like Gatsby and Remix perform well. Wix has a significant impact on React's performance. Framework choice significantly impacts the probability of building a fast website. Improvement is needed in framework performance.

The Talk discusses performance optimization in software development and engineering. It covers topics such as optimizing requests, anticipating future needs, and comparing single-page apps to multiple-page apps. It also explores the advantages of single-page apps and the use of Remix for building pages. The Talk emphasizes code splitting, optimizing data fetching, and solving client-side state. It concludes with a discussion on pre-rendering, Remix adoption, and prerendering with React.

This Talk focuses on optimizing images for mobile and web. It emphasizes the importance of image dimensions in optimizing images and shares a story about crashes encountered in a mobile app due to heavy image content. The Talk discusses image rendering and sizing, using dimensions and pixel density, optimizing images for different devices and screen sizes, and the importance of image size and format optimization. It recommends tools like Cloudinary for image optimization.