#performance

Subscribe
Building swift yet functional apps should be what all developers aspire to. And since you do, we put together a collection of talks and tutorials on application performance and made them available for free. Whether your challenge is on the front-end or the back-end, these talks and workshops will give your great tips and inspire you to try new solutions.
Brace Your React, New Core Web Vitals are Coming
React Day Berlin 2023React Day Berlin 2023
30 min
Brace Your React, New Core Web Vitals are Coming
In a few months, Google will DESTROY your React app......well, kinda. In March, Google is releasing a new Core Web Vital called Interaction to Next Paint (INP). It measures the speed of interactions – and every React site Ivan has seen so far had INP way in red. This is bad for any site that cares about SEO.In this talk, let’s learn how to prepare for the new Core Web Vital: how INP works, and how to improve it – both manually and with new React APIs like useTransition() and React Concurrency.
R3ACT: A Frightening Look At Performance Figures
React Summit US 2023React Summit US 2023
27 min
R3ACT: A Frightening Look At Performance Figures
In the 10 yrs that React has been present, we've seen an unprecedented amount of progress on the web. The browsers have grown in capabilities by leaps and bounds, tooling exploded and frameworks slowly emerged to become quotidian technology. But just as the web changed, so did users of the web AND their needs. Performance engineers have monitored the lavish and liberal use of frameworks, resulting in the disservice to users AND their user experiences. "R3ACT" is talk that will uncover and discuss some performance perils as they appear on the web, with React in mind, supported by lab and rum data.
Power Fixing React Performance Woes
React Advanced Conference 2023React Advanced Conference 2023
22 min
Power Fixing React Performance Woes
Top Content
Next.js and other wrapping React frameworks provide great power in building larger applications. But with great power comes great performance responsibility - and if you don’t pay attention, it’s easy to add multiple seconds of loading penalty on all of your pages. Eek! Let’s walk through a case study of how a few hours of performance debugging improved both load and parse times for the Centered app by several hundred percent each. We’ll learn not just why those performance problems happen, but how to diagnose and fix them. Hooray, performance! ⚡️
Boost the Performance of Your WebGL Unity Games!
JS GameDev Summit 2023JS GameDev Summit 2023
7 min
Boost the Performance of Your WebGL Unity Games!
Unity, when deployed on the web, faces three critical challenges: build size, memory usage, and overall performance. This lecture delves deep into advanced optimization techniques to help you address each of these issues. Attendees will gain insights into:
- Effective strategies for optimizing textures, audio, and models.- A detailed analysis of our ASTC experimentation with Unity, shedding light on the unexpected results despite Unity's claims.- A comprehensive guide to Unity's memory profiling tool and its implications.- An exploration of lesser-known Unity settings that remain underutilized by many developers.
Additionally, we'll introduce our proprietary tool designed specifically for Unity optimization. We will also showcase CrazyGames' developer dashboard, our platform that enables developers to monitor and enhance the performance of their web-based games seamlessly. 
Join us to equip yourself with the latest strategies and tools to elevate your Unity web gaming projects.
Server Components: The Epic Tale of Rendering UX
React Summit 2023React Summit 2023
26 min
Server Components: The Epic Tale of Rendering UX
Server components, introduced in React v18 end these shortcomings, enabling rendering React components fully on the server, into an intermediate abstraction format without needing to add to the JavaScript bundle. This talk aims to cover the following points:1. A fun story of how we needed CSR and how SSR started to take its place2. What are server components and what benefits did they bring like 0 javascript bundle size3. Demo of a simple app using client-side rendering, SSR, and server components and analyzing the performance gains and understanding when to use what4. My take on how rendering UI will change with this approach
DEADScript: The Role Of JavaScript In Web Sustainability
JSNation 2023JSNation 2023
21 min
DEADScript: The Role Of JavaScript In Web Sustainability
In the web performance circles, we tend to closely watch paint times, blocking times, and so many more metric times, which all contribute to analyzing the user experience. In 2023, we have begun to pay more attention to metric tonnes. DEADScript is a presentation highlighting the resources we’re loading in modern development, and JavaScript’s unique role in this disquieting environmental dilemma.
React Concurrency, Explained
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
Top Content
React 18! Concurrent features! You might’ve already tried the new APIs like useTransition, or you might’ve just heard of them. But do you know how React 18 achieves the performance wins it brings with itself? In this talk, let’s peek under the hood of React 18’s performance features: - How React 18 lowers the time your page stays frozen (aka TBT) - What exactly happens in the main thread when you run useTransition() - What’s the catch with the improvements (there’s no free cake!), and why Vue.js and Preact straight refused to ship anything similar
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
Building a Web-App: The Easy Path and the Performant Path. Why Are They Not the Same?
JSNation 2023JSNation 2023
31 min
Building a Web-App: The Easy Path and the Performant Path. Why Are They Not the Same?
We use frameworks to make building our applications easier. Yet as the application scales, its performance suffers. There is no one thing, but rather a death by thousand cuts. Developers are under pressure, and they often choose the easy and quick path to deliver a feature rather than the performant path. The performant path is usually more work. So let's look at these two paths and imagine a world where the performant path is the quick and easy path.
When Optimizations Backfire
JSNation 2023JSNation 2023
26 min
When Optimizations Backfire
Top Content
Ever loaded a font from the Google Fonts CDN? Or added the loading=lazy attribute onto an image? These optimizations are recommended all over the web – but, sometimes, they make your app not faster but slower.
In this talk, Ivan will show when some common performance optimizations backfire – and what we need to do to avoid that.
Nuxt on the Edge
Vue.js London 2023Vue.js London 2023
30 min
Nuxt on the Edge
Learn how to build a Vue application deployed to the edge to bring a blazing fast experience to your end users.
A Saga of Web Rendering Woes
Vue.js London 2023Vue.js London 2023
28 min
A Saga of Web Rendering Woes
This talk will look at the evolution of web rendering modes and what the Jamstack movement is all about. We will build a demo project to show how a static site generator and a Headless CMS can be combined to create dynamic and engaging stories while maintaining a static site's performance and scalability benefits.You will learn about the advantages and limitations of each rendering mode and gain a deeper understanding of how to use Jamstack to build powerful and dynamic storytelling experiences.
How Bun Makes Building React Apps Simpler & Faster
React Day Berlin 2022React Day Berlin 2022
9 min
How Bun Makes Building React Apps Simpler & Faster
Bun’s builtin JSX transpiler, hot reloads on the server, JSX prop punning, macro api, automatic package installs, console.log JSX support, 4x faster serverside rendering and more make Bun the best runtime for building React apps
Building High-Performing Cross-Cultural Teams
React Day Berlin 2022React Day Berlin 2022
25 min
Building High-Performing Cross-Cultural Teams
Everything we do, from the way in which we write our emails, to the method in which we provide negative feedback and evaluate performance, governs the performance of our teams. And understanding how culture impacts our efficacy as a team can drastically improve our day-to-day collaboration. In this session you'll learn: How different cultures communicate, How different cultures evaluate performance and give constructive criticism, How different cultures make decisions, How different cultures trust, How different cultures perceive time.
A Guide to React Rendering Behavior
React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
The Future of Performance Tooling
JSNation 2022JSNation 2022
21 min
The Future of Performance Tooling
Top Content
Our understanding of performance & user-experience has heavily evolved over the years. Web Developer Tooling needs to similarly evolve to make sure it is user-centric, actionable and contextual where modern experiences are concerned. In this talk, Addy will walk you through Chrome and others have been thinking about this problem and what updates they've been making to performance tools to lower the friction for building great experiences on the web.
Optimizing HTML5 Games: 10 Years of Learnings
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimizing HTML5 Games: 10 Years of Learnings
Top Content
The open source PlayCanvas game engine is built specifically for the browser, incorporating 10 years of learnings about optimization. In this talk, you will discover the secret sauce that enables PlayCanvas to generate games with lightning fast load times and rock solid frame rates.
Navigating Modern Frontend Innovations
React Summit 2024React Summit 2024
16 min
Navigating Modern Frontend Innovations
Between SolidJS, Qwik and React, there's been significant innovation in the frontend development landscape. Mrina Sugosh, DevRel Manager @ CK, aims to tie it all together and assist React developers in embracing modern approaches. This talk is designed to offer valuable insights for developers keen on navigating front-end trends and making well-informed technology decisions for their projects.
The Art of Ignoring Best Practices for React Performance
React Summit 2024React Summit 2024
19 min
The Art of Ignoring Best Practices for React Performance
Have you ever wanted to break the rules and be a React troublemaker? I’ll show you how ignoring React’s best practices can improve performance, all without major rewrites to your codebase. To understand how, we’ll learn when React decides to render and how to trick it to render less frequently. We’ll build components that don’t render anything, conditionally call hooks, and even use a piece of Svelte - all to quickly fix real performance problems I encountered at Microsoft.
Next.js: Reshaping Web App Architecture for Performance Excellence
React Summit 2024React Summit 2024
9 min
Next.js: Reshaping Web App Architecture for Performance Excellence
Are you struggling to achieve optimal performance in your web applications? Are you unsure about how to effectively manage your application's routes while ensuring maximum security for your sensitive data? These are the most recent problems we encountered at l’Oréal Tech Accelerator where our users used to wait in front of empty white screens long before getting the needed information. After extensive research and deliberation, we looked at Next.js as a potential solution to our woes. However, adopting Next.js presented us with a new set of challenges. We had to rethink our architecture and determine the best approach for integrating the frontend, backend, and our core backend systems. In this talk we will discuss in more details the obstacles we faced and the innovative solutions we implemented to overcome them.
How Data Privacy Literacy Is Shaping Infrastructure
React Summit 2024React Summit 2024
19 min
How Data Privacy Literacy Is Shaping Infrastructure
Cloud vs. local compute is used to be a purely performance or technical decision. But as our users become more privacy aware, the granularity of data and where it's stored is evolving from a technical performance decision to a human emotional decision. One that is shifting how we should think about compute.
Web Performance: The African Case
JSNation 2024JSNation 2024
22 min
Web Performance: The African Case
We often assume that everyone has a good internet connection and hardware with high specifications. While this might be true in some regions, it is not the case worldwide. I want to draw attention to Africa, where many countries struggle with poor 3G connections that are costly, depending on the amount of data consumed. This is due to the continent's limited infrastructure, leading to a reliance on mobile connections. 
Given these circumstances, efficient data usage with a good web performance becomes a priority. So our session will focus on the challenges faced by African users and developers, and how downloading large amounts of JavaScript is exacerbating data consumption and performance issues. We will explore how existing frameworks tried to solve the problem and how Qwik did with its innovative approach to resumability, presents a transformative solution to these challenges. Unlike traditional SPAs, Qwik's resumability drastically reduces the initial JavaScript payload, enabling applications to become interactive more quickly, even on slow connections.
LLRT JavaScript Runtime: Redefining Serverless Latency
JSNation 2024JSNation 2024
20 min
LLRT JavaScript Runtime: Redefining Serverless Latency
Discover AWS's experimental JavaScript runtime, LLRT (Low Latency Runtime), designed specifically to address the growing demand for fast and efficient Serverless applications.
Search Speed: Making Expedia Flights Faster
JSNation 2024JSNation 2024
10 min
Search Speed: Making Expedia Flights Faster
Performance plays a crucial role in ensuring the responsiveness and functionalities of an application. A deeper knowledge on prefetching, preemptive search, faster caching and frontend optimisations and many other performance initiatives will be learnt. 
Say WAT Now!? Turbocharged JavaScript With Hand Crafted WASM
JSNation 2024JSNation 2024
11 min
Say WAT Now!? Turbocharged JavaScript With Hand Crafted WASM
Breathe a sigh of relief — you don’t need to learn Rust to use WASM! WebAssembly has its own human readable language: Web Assembly Text format (WAT), and it’s surprisingly easy to use. In this talk we’ll discuss using WAT as a first-class language for enhancing JavaScript performance.
The Oxc Project, and the Effect of Performance Engineering
JSNation 2024JSNation 2024
18 min
The Oxc Project, and the Effect of Performance Engineering
The Oxidation Compiler project is creating a collection of high-performance JavaScript and TypeScript tools written in Rust. It offers fundamental components like parsers and resolvers for developers to utilize, along with CLI applications such as linters and formatters. This talk will introduce the project and explore the impact of a strong focus on performance engineering.
From Chaos to Clarity: Leveraging RFCs in High-Performance Environments
TechLead Conference 2024TechLead Conference 2024
10 min
From Chaos to Clarity: Leveraging RFCs in High-Performance Environments
In high-performance environments, the pace is relentless. While it's easy to make quick technical decisions in smaller developer teams, the dynamics shift drastically when dealing with a team of 100 developers. Making significant technical decisions, especially those concerning architecture, without impacting other teams becomes nearly impossible.In this talk, I'll share my experience of structuring an RFCs process at QuintoAndar. We'll delve deep into RFCs, uncovering why they're an indispensable tool for companies aiming to maintain technical excellence, even with a sizable workforce. We'll explore how RFCs facilitate high-level technical decision-making, providing a clear roadmap for changes and empowering everyone to navigate risks with precision.
From Business Buzzwords to Meaningful Change: Measuring and Improving Engineering Productivity
TechLead Conference 2024TechLead Conference 2024
26 min
From Business Buzzwords to Meaningful Change: Measuring and Improving Engineering Productivity
After years of rapid growth, the winds have changed in many tech companies, with strategy changes, budget cuts, restructurings, and layoffs. Productivity and efficiency have become the business buzzwords of the season, and while pressure towards “more engineering productivity” is mounting in many organizations, it can be difficult to apply these abstract concepts to engineering teams and turn them into concrete actions that don’t alienate your team and lead to lasting impact that aligns with your stakeholders’ needs. I’m here to help. In this talk, we’ll go: - Beyond buzzwords: What do productivity, efficiency, and effectiveness mean? - Beyond “implementing DORA metrics”: How can you understand and improve your team's productivity as a technical or people leader?- Beyond your team: How can you manage up effectively to keep your bosses informed and ensure alignment with organizational goals?Having led dozens of teams through times of high change, I know that leading during a tech downturn presents unique challenges. You will take away actionable steps to help you improve on your team, and lead successfully through uncertain times.
Maximizing Your Potential in Tech Interviews: The Three Cs to Success
TechLead Conference 2024TechLead Conference 2024
21 min
Maximizing Your Potential in Tech Interviews: The Three Cs to Success
The economy is terrible, layoffs are everywhere, and interviewing is hard. Job searching is exhausting and stressful, so how do you overcome all of that? All you need is a plan!
Whether it’s overcoming nerves or learning to communicate your technical experience more effectively, we all have our struggles. What you can’t do is let them hold you back! In this talk, learn how to leverage the three C’s (Connections, Communication, and Confidence) to gain a competitive advantage during your interviews. By embracing this strategy, you’ll be prepared to crush your next interview and get that offer!
What's Hot On Tresjs V4
Vue.js Live 2024Vue.js Live 2024
20 min
What's Hot On Tresjs V4
A year has passed since TresJS was open-sourced at this very same conference, so in this talk, we are going to give a full update on what we have been cooking for v4 of the core, including new devtools, translated docs, a cookbook, new features and a lot of bug fixing.
Build Your Own Component Library, With `Shadcn-vue`
Vue.js Live 2024Vue.js Live 2024
7 min
Build Your Own Component Library, With `Shadcn-vue`
In case you are unaware, shadcn (creator of `ui.shadcn`) created a new way for devs to build component libraries. Instead of a usual component library, where you are limited to the component styling, props, or events designed by the author, you now have the capability to modify the components to suit your needs.Quote from the shadcn himself, "It's a collection of re-usable components that you can copy and paste into your apps."
In this talk, I will be showcasing the power of this approach, walking through how to customize it, and why it has gained such a popularity in the recent months.
More Secure Vue & Nuxt Apps - By Default
Vue.js Live 2024Vue.js Live 2024
21 min
More Secure Vue & Nuxt Apps - By Default
As developers we usually have to develop fast and because of that some Software Quality aspects such as Performance, Accessibility or Security can suffer. Configuring web applications to be protected against common threats and hackers is difficult. And that is why, you can use Nuxt Security -> a module for Nuxt that will help you build more secure applications without additional configuration needed! In this talk, I will guide you through the concepts of Security in modern web applications and OWASP to help you build more secure Vue & Nuxt applications!
Optimizing Microservice Architecture for High Performance and Resilience
Node Congress 2024Node Congress 2024
24 min
Optimizing Microservice Architecture for High Performance and Resilience
- Delve into the intricacies of optimizing microservice architecture for achieving high performance and resilience.- Explore the challenges related to performance bottlenecks and resilience in microservices-based systems.- Deep dive into the strategies for enhancing performance, such as efficient communication protocols, asynchronous messaging, and load balancing, while also discussing techniques for building resilience, including circuit breakers, fault tolerance, and chaos engineering.- Explore relevant tooling and technologies, such as service mesh and container orchestration, and offer insightful case studies and lessons learned from real-world implementations.- Emphasize the importance of continuous improvement and adaptation in microservices environments, alongside reflections on the future trajectory of microservices architecture.
AWS Lambda Performance Tuning
Node Congress 2024Node Congress 2024
25 min
AWS Lambda Performance Tuning
Have you ever wonder how to get the best out of your Lambda functions?If so, this talk will reveal the behind the scene one of the most popular serverless service and you will be exposed to a step by step guidance for optimizing your functions.During this session, I will walk you through the mindset to reduce your Lambda functions execution time. In the example presented I was able to reduce the execution time by 95% for warm start and over 50% with cold starts improving also the transactions per seconds served with this API.
The Need for Speed: How AWS New JS Runtime is Redefining Serverless Latency
Node Congress 2024Node Congress 2024
25 min
The Need for Speed: How AWS New JS Runtime is Redefining Serverless Latency
In today’s world of modern applications, swift responsiveness is essential. Users expect seamless interactions where every action triggers an immediate response.Serverless services such as AWS Lambda, allows developers to build modern applications without the need to manage traditional servers or infrastructure. However, Serverless services might introduce additional latency when new execution environments are provisioned and due to (by design) having less resources than traditional servers or containerized environments.To mitigate this problem, AWS have developed an experimental JavaScript runtime, called LLRT, built from the ground up for a Serverless environment. LLRT (Low Latency Runtime) is a lightweight JavaScript runtime designed to address the growing demand for fast and efficient Serverless applications. LLRT offers more than 10x faster startup and up to 2x overall lower cost compared to other JavaScript runtimes running on AWS Lambda.In this session you will discover how it's different from what's already out there, see its performance in action and learn how to apply it to your Serverless functions.
Daily Brush for Website Speed: Embrace the Performance Budget Ritual
React Day Berlin 2023React Day Berlin 2023
13 min
Daily Brush for Website Speed: Embrace the Performance Budget Ritual
In this talk I will use the dental metaphor in order to introduce the performance budgets just like brushing teeth everyday to keep them clean and healthy you should do the same for your website by setting a performance budget and check it in every pull request in your pipelines, the target audience is mid-level to advanced, I will start by the example of the tooth decay and cleaning them then brushing them everyday as the dentist advice, then explain decay as the performance issue and performance budgeting is like the toothpaste and go from here with the different techniques that developers can do in order to prevent any loss in the performance wins they made.
How Much RAM Is Your UseMemo Using? Let’s Profile It!
React Day Berlin 2023React Day Berlin 2023
20 min
How Much RAM Is Your UseMemo Using? Let’s Profile It!
Memoize all the things!, is what most React guides will tell you, explaining how its memory cost is negligible compared to its performance benefits, but has anyone actually ever measured it? What about doing it in a complex React application with several thousands components? Turns out getting that answer is not simple at all, and requires delving into the complex world of Chrome Memory Profiling. This talk will explore the basics of heap profiling, moving on to more advanced tools and techniques for analysing memory usage in your React application, including how to profile it in your CI pipeline and answer your own optimisation questions by writing custom heap analyzers.
Deconstructing Distributed Tracing
React Day Berlin 2023React Day Berlin 2023
8 min
Deconstructing Distributed Tracing
Distributed tracing is a powerful technique that allows you to track the flow and timing of requests as they navigate through a system. By linking operations and requests between multiple services, distributed tracing provides valuable insights into app performance and helps identify bottlenecks. In this talk Lazar will explain the concept of Distributed Tracing by walking you through how monitoring tools build tracing solutions.
We've Rested Long Enough, What's Next?
TestJS Summit 2023TestJS Summit 2023
17 min
We've Rested Long Enough, What's Next?
Many developers are familiar with consuming/designing RESTful APIs, but what about building and consuming GraphQL and gRPC APIs? What about event-driven or asynchronous APIs? What are the benefits and technical limitations of each? Let’s go down the rabbit hole and explore some of these API types as alternatives to REST.
Measure and Improve Frontend Performance by Using Test Automation
TestJS Summit 2023TestJS Summit 2023
22 min
Measure and Improve Frontend Performance by Using Test Automation
Automated performance testing can help detect the harmful effects of code changes on application performance. Learn how to use tools like Lighthouse and Web Core Vitals in your CI and set performance thresholds to maintain optimal frontend performance in this session.
How We Test Storybook Itself
TestJS Summit 2023TestJS Summit 2023
30 min
How We Test Storybook Itself
Storybook is a complex OSS project, integrating with a wide range of stacks, and used in various ways by millions of devs. What's it like maintaining a project like that? How do we ensure it doesn't break?
Virtual DOM: Back in Block
React Summit US 2023React Summit US 2023
9 min
Virtual DOM: Back in Block
The virtual DOM is generally regarded as a necessary evil, a performance tax that we have to pay for the convenience of declarative UIs.Until now.In this talk, we'll take a deep dive into what the block virtual DOM is (an new, innovative approach to VDOM), and how Million.js can help you improve the speed of your React applications. This talk will also provide a helpful overview of how the React virtual DOM works. By the end of this talk, you'll have the knowledge to not only start improving your React apps' performance with Million.js, but understand the underlying internals that make it so fast.
Using the React Ecosystem With the World's First O(1) Javascript Framework?
React Summit US 2023React Summit US 2023
18 min
Using the React Ecosystem With the World's First O(1) Javascript Framework?
What if you can use the fastest JavaScript framework along with React? What if you can build applications that feel fast regardless of application size?Let's see how incredible Qwik is along with React.
Breaking the 'useEffect' Habit
React Summit US 2023React Summit US 2023
22 min
Breaking the 'useEffect' Habit
Do you or a loved one suffer from the all to common practice of 'useEffect'? Have you re-rendered more times than you can count? Are you ready to revolutionize your React code?
Explore how to optimize performance, streamline your code, and reduce errors by challenging the conventional use of 'useEffect'.
Inspired by the React Docs themselves, this talk will guide you through common 'useEffect' scenarios, demonstrating powerful alternatives to enhance your codebase. Embrace simplicity and elevate your React development skills with us!
"You might not need an effect... Removing unnecessary Effects will make your code easier to follow, faster to run, and less error-prone."
Believe it or not, that intro is taken straight from the React Docs!
Beyond First Load Speed with INP
React Summit US 2023React Summit US 2023
8 min
Beyond First Load Speed with INP
In this talk, we will go on a journey in the future of the core web vitals potential member INP, which will help in improving the interactions in all interactions in the session's lifetime, not only the first input delay as in the FID, showing some case studies and a way to optimize your website for INP, you will go away with a bunch of recommendations to do immediately
If You Aren’t First You’re Last
React Summit US 2023React Summit US 2023
27 min
If You Aren’t First You’re Last
In this talk I will be covering various strategies and techniques that you can employ to make your apps fast and keep your apps fast. From tips and tricks around measuring performance, to architectural strategy and dirty rotten tricks.
React Concurrency × Core Web Vitals
React Summit US 2023React Summit US 2023
26 min
React Concurrency × Core Web Vitals
This talk comes with bad news. Google has launched a new metric – INP – which measures how fast page interactions are. This metric becomes a Core Web Vital in Mar 2024 – and pretty much every React app Ivan has seen so far has this metric way in red.
The good news is React 18 shipped new features that help to solve this – notably, useTransition() and Suspense. And in this talk, we’ll look at how exactly these features work, what they do, and how we can use them to make INP green.
Rendering: To Sync or Not to Sync?
React Summit US 2023React Summit US 2023
28 min
Rendering: To Sync or Not to Sync?
Let’s dive deep into React rendering and evaluate the implication of Concurrent Rendering and automated batching on code that previously relied on the synchronous nature of v17. Does it always make things better? With a real world case study, we evaluate useSyncExternalStore and flushSync as tools to restore synchronous rendering to avoid “visual tearing”. Working through the trade-offs of these approaches will give us new insights into React rendering and hints on how we can optimise our applications.
Winning the Performance Race
React Advanced Conference 2023React Advanced Conference 2023
21 min
Winning the Performance Race
Over the past two years, we’ve dramatically improved Wix Website performance, beating all of our competitors in Core Web Vitals. This project was a company-wide effort to finally solve the number one user complaint in the company – live site performance. 
In this talk, I will take a deep dive into the design changes that were implemented to achieve this significant improvement, and explain why and how those solutions could be applied in any web application to achieve similar results.
Flashlight, a Lighthouse for Mobile Apps
React Advanced Conference 2023React Advanced Conference 2023
7 min
Flashlight, a Lighthouse for Mobile Apps
The promise of Lighthouse is pretty cool, right? Visit any website, and with only a few clicks, you can get a performance score for it!Wouldn’t it be grand if we had the same thing for React Native apps? 
Well, you’re in luck! let me present our new open source tool called Flashlight 🔦 (cause you know, a Flashlight is basically a very small “mobile” lighthouse, right?)
How to NOT use useEffect?
React Advanced Conference 2023React Advanced Conference 2023
24 min
How to NOT use useEffect?
Top Content
Are you using React in your project? If so, you must used useEffect! Actually, it’s essential for many use cases, but there are instances where it might not be the best solution, and avoiding it can improve your application's performance.
In this talk, we will learn from experience which is the missing piece of the puzzle to master useEffect. Taking a look at the incorrect cases and trying to improve their performance helps us to have a deeper understanding of it.
Speeding Up Your React App With Less Javascript
React Advanced Conference 2023React Advanced Conference 2023
15 min
Speeding Up Your React App With Less Javascript
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
Patterns for Performance
React Advanced Conference 2023React Advanced Conference 2023
28 min
Patterns for Performance
When working with React it is important that we use the right tool for the right job. If not we will be missing out on the best performance and developer experience. While optimising AG Grid React Table we discovered a number of patterns that made significant improvements to the tables performance.
The Rocky Journey of Data Fetching Libraries in React’s New Streaming SSR
React Advanced Conference 2023React Advanced Conference 2023
28 min
The Rocky Journey of Data Fetching Libraries in React’s New Streaming SSR
If you use the Next.js app directory, you might not even have noticed it, but you are not only using React Server Components, but you are also using the new streaming SSR feature of React.That means that on first page load, your Client Components will now be server-side rendered, suspense boundary by suspense boundary, and constantly streamed to the client, where they are rehydrated piece-by-piece.
If you combine that with suspense for data fetching in your client components, you will suddenly be facing hydration mismatches - as your client components will start fetching data on the server, but the data will not be transported to the client.
In this talk, I will go over the rocky journey that we had to go through to support suspense for data fetching in Streaming SSR with Apollo Client, looking at all the curious timing problems that come up with these technologies, and how we try to solve them as best as we can - always with the best possible user and developer experience in mind.
Leveraging the Event Loop for Blazing-Fast Applications!
React Advanced Conference 2023React Advanced Conference 2023
35 min
Leveraging the Event Loop for Blazing-Fast Applications!
Some weeks ago I made my own implementation of signals, capable of updating 300k times the DOM in circa 600ms. Leveraging the Microtask Queue, I was able to bring that number down to 6ms, effectively improving performances by 100x. I wanna share how the Microtask Queue works and how you can leverage the Event Loop to improve performances.
Building Team Thinking Games At Synthesis
JS GameDev Summit 2023JS GameDev Summit 2023
16 min
Building Team Thinking Games At Synthesis
Synthesis' mission is to create a generation of supercollaborators through games. Learn how we harness the power of open source game dev libraries like Pixi.js and Colyseus to build high quality multiplayer games that kids enjoy.
Why Is Building a Multiplayer Game So Hard and What Can We Do to Fix It for Everyone
JS GameDev Summit 2023JS GameDev Summit 2023
18 min
Why Is Building a Multiplayer Game So Hard and What Can We Do to Fix It for Everyone
Making casual games has become easier than ever but setting up multiplayer still requires you to write network code, deal with websockets, load-balancing servers, co-locating servers and whatnot. I am building Playroom to solve this, a high-performance sync that handles the networking and the room management so you can focus on building your game.
Migration from WebGL to WebGPU
JS GameDev Summit 2023JS GameDev Summit 2023
21 min
Migration from WebGL to WebGPU
In this presentation, I'll explore the transition from WebGL to WebGPU, demonstrating how these changes affect game development. The talk will include practical examples and code snippets to illustrate key differences and their implications on performance and efficiency.
TypeScript Performance: Going Beyond the Surface
TypeScript Congress 2023TypeScript Congress 2023
34 min
TypeScript Performance: Going Beyond the Surface
Do you ever find yourself pondering how to identify and address performance issues in TypeScript to maximize the effectiveness of your code? If so, join us for a talk on the performance of TypeScript and the techniques you can use to get the most out of your code. We'll delve into various ways to debug performance, explore how to leverage the power of the TypeScript compiler to detect potential performance issues and use the profiling tools available to track down the underlying bottlenecks.
Improve Your Website's Speed and Efficiency with Partytown
React Summit 2023React Summit 2023
20 min
Improve Your Website's Speed and Efficiency with Partytown
Unleash the full potential of your website with Partytown! Say goodbye to sluggish pages and low Lighthouse scores caused by clunky third-party scripts. With Partytown, your main thread is dedicated solely to your code, freeing it up to run smoother, faster, and more efficiently than ever before. Empower your website with lightning-fast performance by moving all non-critical scripts to a web worker, where they’ll run seamlessly in the background. Get ready to blast off to the next level of web performance with Partytown!
Overcoming Performance Limitations in React Components for Low-end Devices
React Summit 2023React Summit 2023
9 min
Overcoming Performance Limitations in React Components for Low-end Devices
In this session, I will discuss our experiences in overcoming performance limitations while developing React components for web apps on low-end embedded devices such as Smart TVs. I will share actual application cases from the development of millions of webOS Smart TVs and show how we improved user input response and app launch time. The ideas and techniques shared will be beneficial to developers facing similar challenges.
Responsive Images for Your Website
JSNation 2023JSNation 2023
7 min
Responsive Images for Your Website
Why bother to optimize images? Images often account for most of the downloaded bytes on a web page. As a result, optimizing images can frequently yield of the performance improvements for your website.
HTTP/3 Performance for JS Developers
JSNation 2023JSNation 2023
21 min
HTTP/3 Performance for JS Developers
Top Content
HTTP/3 is the hot new networking protocol, available today! While you get most of its benefits out-of-the-box, there are also quite some things you can and should do to get maximise performance.
In this talk, we look at optimizing JS payloads for the first network round trips, how browsers prioritize JS against other resource types, SPA vs MPA nuances, and how to optimally use the 0-RTT and 103 Early Hints features. We also look at the protocol's integration with fetch() and talk about the upcoming WebTransport!
Comparing JavaScript Frameworks Performance Using Real-World Data
JSNation 2023JSNation 2023
28 min
Comparing JavaScript Frameworks Performance Using Real-World Data
Google collects performance information from all sessions on opted-in Chrome browsers into its Chrome User Experience Report (CrUX) database. It then uses this information as a ranking factor for its search engine, but it also makes this information publicly available for everyone to view. I used this data to analyze and compare the performance of the leading JavaScript frameworks. In particular, I looked at the likelihood that websites built using each framework will have good Core Web Vitals (CWV) scores. Along the way I encountered several surprising results, and solved at least one mystery. See how your favorite framework ranks vs all the rest!
Modern Approaches for Creating Extremely Fast Websites
React Summit 2023React Summit 2023
24 min
Modern Approaches for Creating Extremely Fast Websites
In this talk is focused on performance-optimizations and standards-based approaches to achieving the fastest version of your site that you can have. We'll also talk about modern tooling and frameworks like Remix which help make your site fast with very little effort.
Optimising Images in Web and Native
React Summit 2023React Summit 2023
21 min
Optimising Images in Web and Native
It's safe to say that a lot of websites and apps these days are heavily reliant on images: product images, avatars, social sharing. With continued technological advances, the variety of device sizes you need to support keeps growing. How exactly are we to make the same page look great and feel performant on both a 16'' MacBook Pro with a retina display as well as a small 5 year old Android phone? We will look at some of the modern approaches to tackle just this problem on web and native - as well as what happens if you don't.
Moving on From Runtime Css-In-Js at Scale
React Summit 2023React Summit 2023
29 min
Moving on From Runtime Css-In-Js at Scale
In this talk, Siddharth shares the challenges his team faced with optimising runtime css in js (styled-components) for performance. At GitHub, there are about 4000 React components that contain styles, Siddharth dives into the reasons for rethinking styling architecture, the challenges faced and lessons learned by migrating a big application.
Top Core Web Vitals Recommendations for 2023
JSNation 2023JSNation 2023
29 min
Top Core Web Vitals Recommendations for 2023
The Google Core Web Vitals team understand the amount of web performance recommendations is overwhelming and many don't know where to start. We've been working on identifying the 9 key recommendations (3 per Core Web Vital), which we think will have the most impact and which we recommend sites look at first. This talk will explain what they are, and why they are our top 2023 recommendations.
Prefetch Strategies to Boost the Performance of Your Vue.JS App
Vue.js London 2023Vue.js London 2023
21 min
Prefetch Strategies to Boost the Performance of Your Vue.JS App
This talk will cover the benefits of using prefetching to improve the performance of Vue.js applications. Attendees will learn about different prefetching strategies and best practices for optimising prefetching for different network conditions.
You’re Probably Using Lighthouse Wrong: How We Got Tricked by a Single Magic Number
Vue.js London 2023Vue.js London 2023
29 min
You’re Probably Using Lighthouse Wrong: How We Got Tricked by a Single Magic Number
These days web performance is one of the most important things everyone wants to optimize on their apps, and it's clear to everyone how dramatic the impact of a poorly optimized website is on business. Yet we as an industry completely fail in recognizing its complexity and widely misuse the most common tool to measure it — Google Lighthouse. If you’re one of those people thinking that good performance equals a good Lighthouse score, you’ve also fallen into this trap and this talk is for you.
Image Optimization - Quick Win for Improving Performance in Vue & Nuxt Apps
Vue.js London 2023Vue.js London 2023
31 min
Image Optimization - Quick Win for Improving Performance in Vue & Nuxt Apps
Top Content
Improving Performance of Vue or Nuxt apps is not an easy task. However, there are some quick wins that you can implement easily that will drastically improve the performance of your website. One of such quick win is Image Optimization. In this talk, I will teach you how to optimize images on the fly with Digital Asset Managements services like Cloudinary or Content Management Systems, utilize the concept of Lazy Loading, use compressed format of images like WEBP, and many more!
Measuring the Cost of a GraphQL Query with mercurius-explain
Node Congress 2023Node Congress 2023
7 min
Measuring the Cost of a GraphQL Query with mercurius-explain
The development experience with GraphQL makes for a simple and immediate way to access data. Working on the backend means focusing on how and where the data is obtained from, whereas the frontend focuses on retrieving the data necessary for computation and display. This freedom of action, however, hides some possible performance problems. Fragments let you construct sets of fields, and then include them in queries where they’re needed. Often a client requests unnecessary data in an API call with the assumption that the extra fields are free. Instead, they are the cause of extra queries, sometimes even expensive ones. Not knowing the cost of a query makes it impossible to perform optimisation correctly.
Things I learned while writing high-performance JavaScript applications
Node Congress 2023Node Congress 2023
31 min
Things I learned while writing high-performance JavaScript applications
Top Content
During the past months, I developed Lyra, an incredibly fast full-text search engine entirely written in TypeScript. It was surprising to me to see how it could compete with solutions written in Rust, Java, and Golang, all languages known for being typically "faster than JavaScript"... but is that even true? In this talk, I will share some lessons I learned while developing complex, performance-critical applications in JavaScript.
Wait, React Is Multi-Threaded?
React Day Berlin 2022React Day Berlin 2022
22 min
Wait, React Is Multi-Threaded?
Top Content
We already know, ""if some task takes time, promisify it!"". But some tasks can be computation heavy and can take time to complete, so making them async is of no use since those have to be anyway get picked. Solution? Simple, multithreading! Yeah I know that React and in turn javascript is single-threaded but what if I told you that our life was a lie ever since? Enter web workers! Key takeaways of the talk: 1. An example of a simple product search showing why async js or concurrent mode cannot work. 2. Demystifying web workers. 3. How they make this magic happen under the hood? 4. The Question of life - Aren't they same as concurrent mode? 5. Comparing the same Product list app using web workers, diving deep into the performance. 6. How one can easily misuse web workers and how to avoid it.
Accelerate Innovation
React Day Berlin 2022React Day Berlin 2022
10 min
Accelerate Innovation
Designers and developers work on different timelines—designers look to the future while developers build from what’s already been designed. They speak different languages and follow different processes. How can we bridge these gaps and build a more collaborative development process? This talk will showcase how design systems can improve communication between cross-functional teams—while boosting productivity and innovation.
Remixing a Symfony
Remix Conf Europe 2022Remix Conf Europe 2022
19 min
Remixing a Symfony
In late 2020, I ran a Lighthouse test on a simple content page on Harvie, our farm management platform and Symfony app, and received a performance score of 31/100. The JavaScript bundle, the API requests, the database lookups, even with minimal UI to render, had a baseline score in the thirties! Along with customer feedback, this helped to catalyze a renewed commitment to performance at Harvie. Through numerous discussions, we walked through each step of page load, from networking to rendering, and identified where we could improve. After a year of rewrites and upgrades, our remaining detriment to overall performance was our frontend. We had been converting our Symfony twig templates into React SPA components and fell into the common problem of creating "request waterfalls", while our user had to stare at a loading screen. We needed a change, and for us, that was Remix. In this talk, I'll walk you through our team's journey with performance and how Remix has become a natural progression of that.
A Medley of Frontend and Backend Performance Testing
TestJS Summit 2022TestJS Summit 2022
34 min
A Medley of Frontend and Backend Performance Testing
In this talk, I want to introduce you to both frontend and backend performance testing and why a medley of these testing activities are needed to make sure that your website is performant. I'll also give a quick walkthrough as to how tools such as xk6-browser can help with running both protocol-level (how performance testing is normally run through concurrent interactions at the protocol layer) and browser-level tests (testing with real browsers to provide a more realistic performance test).By the end of this talk, you should be equipped with new knowledge regarding frontend and backend performance testing which you can apply to your work projects.
Zero Bundle Size Server Components
React Advanced Conference 2022React Advanced Conference 2022
17 min
Zero Bundle Size Server Components
Server components is an exciting new feature introduced in React 18. It lets us leverage the fast performance of the server by offloading work behind a component to the server. Why would we want to do that? because server has direct access to data source .so fetching data, making aPI calls would be really fast on the server. The most amazing thing about RSC is that they add 0 kb to the client bundle. So not only RSC reduces the bundle-size but will also improve page load times, eventually providing better user experience. In this talk I will be talking about what react server components are, why do we need them . RSC is often confused with SSR but we will see how they are fundamentally different. We will create a small react application using server components and see the performance benefits. We will also see the challenges we might face when we use RSC in our normal react application. Finally we deep dive into React’s brain and see how things are happening under the hood.
Server-Side Rendering Using WebAssembly
React Advanced Conference 2022React Advanced Conference 2022
12 min
Server-Side Rendering Using WebAssembly
This talk shares how to achieve Server-side rendering using WebAssembly and WASMEdge which is a WebAssembly Runtime. The talk also covers the benefits of using WebAssembly to achieve Server Side Rendering. The talk will also cover a demo on how to launch a React application using the WasmEdge runtime.
Ladle: The Story About Modules and Performance
React Advanced Conference 2022React Advanced Conference 2022
16 min
Ladle: The Story About Modules and Performance
The bigger they are, the slower it gets. I am talking about your applications and the bundling process. Fortunately, there might a be better future - the one without bundlers. This talk will be about JavaScript modules, Vite and how we built Ladle - a speedy tool for your React stories.
Treat your users right with Segmented Rendering
React Advanced Conference 2022React Advanced Conference 2022
21 min
Treat your users right with Segmented Rendering
If you think that static rendering is limited to generic and public content that is the same for every user of your website, this talk is for you. Segmented Rendering is a new pattern for the Jamstack that lets you personalize content, statically, without any sort of client-side rendering or per-request Server-Side Rendering. Get the best possible performances for use cases such as theming, internationalization, A/B testing, multi-tenancy, and start treating your users right!
Automated Performance Regression Testing with Reassure
React Advanced Conference 2022React Advanced Conference 2022
16 min
Automated Performance Regression Testing with Reassure
As developers we love to dive into performance metrics, benchmarks, compare one solution to another. Whether we enjoy it or not, we’re often required to fix performance issues in our React and React Native apps. But this process is not sustainable and prone to regressions, especially as the app and team grow. What’s worse, those issues are often discovered by your users, making their experience miserable. In my talk I’ll introduce you to Reassure—a performance regression testing library for React and React Native— which happens to be a missing piece in our automated testing and performance suites. Spotting problems before they hit production.
Instant websites using Fresh and Deno on the Edge
React Advanced Conference 2022React Advanced Conference 2022
33 min
Instant websites using Fresh and Deno on the Edge
Any interaction faster than 100ms is imperceptible to users - what if all website interactions, including loading were 100ms or less? Let's explore strategies and how Fresh & Deno can help.
Building full-stack applications on the Edge
React Advanced Conference 2022React Advanced Conference 2022
9 min
Building full-stack applications on the Edge
Scaling and maintaining applications can be a pain, especially when thinking of how to build to get the user experience to a level that you are proud of. With all these shifting parts to consider, it is important to abstract parts of your applications to global reliable services. In this talk, we will discuss some of the services that Cloudflare provides, and the role they play in improving the overall developer and user experience.
You don't want to Server-side Render your Next.js App
React Summit 2022React Summit 2022
28 min
You don't want to Server-side Render your Next.js App
Top Content
Next.js is a fantastic framework; it provides many unique features, helping you build any web application effortlessly. But when it comes to choosing the right rendering strategy for your pages, you may face a problem; how should I render them? Should I statically generate them at build time? Should I server-side render them at run-time? Well, the answer is surprising. server-side rendering is rarely the best option, and let's explore why (and how to solve this problem!)
Performance is User Experience: Optimizing the Frontend for the Users
JSNation 2022JSNation 2022
8 min
Performance is User Experience: Optimizing the Frontend for the Users
In most computer systems, definition of performance is straight forward enough: do more work per time with less resources. For a frontend web application, this is rarely the case. Frontend applications not only need to be resource-efficient, but must also ""feel"" efficient to the user. This makes performance on the frontend mostly a user experience issue.
Join me as we take a deep dive into the important performance metrics of a modern frontend app, how to measure them, and how to optimize them for both the machine and the user.
High-Speed Web Applications: Beyond the Basics
JSNation 2022JSNation 2022
30 min
High-Speed Web Applications: Beyond the Basics
Knowing how to run performance tests on your web application properly is one thing, and putting those metrics to good use is another. And both these aspects are crucial to the overall success of your performance optimization efforts. However, it can be quite an endeavor at times for it means you need to have a precise understanding of all the ins and outs of both performance data and performance tooling. This talk will shed light on how to overcome this challenge and walk you through the pitfalls and tricks of the trade of Chrome DevTools, providing you with a complete roadmap for performance analysis and optimization.
Let’s Talk about Re-renders
React Summit 2022React Summit 2022
23 min
Let’s Talk about Re-renders
Top Content
React is a fantastic tool to implement complicated applications fast, we all know it. But are they going to be fast when implemented fast? Let’s talk about re-renders and their danger in react: how easy it is to make a mistake, why some small mistakes can have a huge downstream effect, and how to avoid and prevent them.This is a deep-dive type of talk, that focuses on why React components re-render, what kind of performance impact it can have, and what to do about it
The Only Way to Eat an Elephant - Code Splitting With Server Side Rendering
React Summit 2022React Summit 2022
9 min
The Only Way to Eat an Elephant - Code Splitting With Server Side Rendering
Code splitting is a way to optimize the performance of our app by shipping less code to the end users. The most common form of code splitting is to use dynamic imports after a user interaction. In our case, we’re going to talk about conditionally loading only the parts of the application that we need during server side rendering. We’re going to discuss the problems and the solutions, so you could try it out in your own project.
Engaging Ecommerce with the Visual Web
JSNation 2022JSNation 2022
12 min
Engaging Ecommerce with the Visual Web
Experiences on the web have grown increasingly visual, from displaying product images to interactive NFTs, but not paying attention to how media is delivered can impact Core Web Vitals creating a bad UX with slow loading pages, hurting your store’s conversion and potentially losing sales.How can we effectively leverage media to showcase products creating engaging experiences for our store? We’ll talk about media’s role in ecomm and how we can take advantage of it while optimizing delivery.
Conversion to Play: The Art of Loading
JS GameDev Summit 2022JS GameDev Summit 2022
31 min
Conversion to Play: The Art of Loading
On the web, games are not pre-installed, but downloaded at the moment of play. Therefore the loading experience is a key part of your game’s success. During this talk Poki’s Kasper Mol will introduce you to the Conversion to Play concept, and what methods are available to nail this.
What Can you Do with WebGPU?
JS GameDev Summit 2022JS GameDev Summit 2022
9 min
What Can you Do with WebGPU?
One of the major new features WebGPU introduces is compute shaders. I'll cover the basics of how they work and go through some applications that weren't possible before on the web. Examples include Unreal Engine 5's compute-based rendering techniques, and complex particle simulations.
Detect and Avoid Common Performance and Memory Issues in Unity WebGL Builds
JS GameDev Summit 2022JS GameDev Summit 2022
10 min
Detect and Avoid Common Performance and Memory Issues in Unity WebGL Builds
Top Content
This session explores common performance and memory issues that arise in WebGL builds produced using the Unity game engine. Examine how to identify, troubleshoot and avoid pitfalls that may lead to out-of-memory errors. Learn how to reduce game instability and improve game performance in WebGL builds.