#performance

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.

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.

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! ⚡️

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, 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

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 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

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.

Learn how to build a Vue application deployed to the edge to bring a blazing fast experience to your end users.

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

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.

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

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.

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.

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.

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.

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.

Most developers closely follow the framework wars. So busy with these games, that we forget to check what new features HTML, CSS, and JavaScript offer us. Native modals, dynamic viewport units, and optional chaining are just some of the features you should use already! If you stopped following Web Platform development in 2015, it's time to refresh your knowledge. I will teach you to build applications tailored to 2024 and prepare you for the new Web Platform features that will appear in the coming years.

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.

Discover AWS's experimental JavaScript runtime, LLRT (Low Latency Runtime), designed specifically to address the growing demand for fast and efficient Serverless applications.

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. 

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 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.

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.

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.

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.

Did you know introducing useEffect solved a whole class of performance issues? Did you know <Suspense> was designed to make hydration several times smoother without you even noticing anything? 
React has changed a lot. Many of these changes were driven by a desire for better architecture. But under the hood, each of these changes also pushed us to write faster apps – often, without us even noticing that.
In this talk, let’s look at some rarely known React performance details almost nobody knows about:
- useEffect, and how it’s faster than componentDidMount- Batching, and how it improved from version 0.4 to 0.12 to 18- Suspense, and some of the less obvious effects of using it- and possibly even more

This talk offers a gentle introduction to a new paradigm of durable workflows by walking the audience through a common use case: user onboarding email campaign. I’ll show how the DIY approaches tend to be slow and unreliable — or require significant investment of resources. Instead, by embracing background jobs you can deliver a great User Experience and stress-free ops. More and more companies favor short development cycles and lean approach to headcount. Being able to own entire business workflows end-to-end turns (formerly) front-end teams into empowered product teams.

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.

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.

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!

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.

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.

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.

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.

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.

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.

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.

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!

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

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.

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.

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.

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.

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?)

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.

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.

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.

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.

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.

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.

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.

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!

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.

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 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!

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!

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.

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.

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.

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.

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.

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.

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!

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.

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.

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.

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.

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.

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.

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.

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.

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.

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!

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.

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.

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!)

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.

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.

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