#performance

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 place
2. What are server components and what benefits did they bring like 0 javascript bundle size
3. Demo of a simple app using client-side rendering, SSR, and server components and analyzing the performance gains and understanding when to use what
4. 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.

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

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.

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.

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.

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.

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.

In the post Moore’s Law era, due to limitations of the hardware, we need to squeeze more performance from the existing hardware. That means that the native code provides the best performance. However, the prevalence of native code on the server-side presents challenges to application safety and manageability. The rise and advent of Rust and WebAssembly offers new ways for developers to write high performance yet safe Node.js applications.
In this talk, I will cover the basics of Rust and WebAssembly, as well showcase how to go about their integration with Node.js. You will learn how and when to design a hybrid web application. How can you code the high performance functions in Rust in a Web Assembly virtual machine and finally how to tie everything together in a Node.js JavaScript application.

Today it is fairly easy to integrate GraphQL on a client and server-side and get it all up and running quickly with any cloud service of your choice like e.g. Netlify or Vercel. With this setup, how can we monitor the performance, and how observe all parts together to find any root cause in case of problems?

GraphQL abstracts the downstream API calls from the frontend and all that frontend has to do is request fields in a query that are required for the rendering of the component. The frontend is not aware that a corresponding field might result in an API call or heavy computations on the backend side. This abstraction hits the performance when the GraphQL schema is not structured properly. Let's take an example to understand more:
Here's the query to get available rooms for a hotel:
hotel (id: $hotelId) { id rooms { id type name } }
The frontend doesn't know that the
rooms
field inside the query
hotel
will fire another API call even
type
field would be fetched from another API endpoint. These nested API calls worsen the performance if there are more rooms. We can effectively solve this structuring the schema well and using data loaders.

Performance testing expertise that is developed for a long time. In order to measure your server performance you need a tool that can efficiently simulate a lot of abilities and give you good measurements according your analysing criteria.
Autocannon NPM library gave me exactly that - that library is super easy to install and has a very simple API to work with. Within a really short amount of time you can start do performance testing to your application and get good measurements in development environment and in your performance labs, and generate complicated testing scenarios.
In this talk I will introduce Autocannon, explain how to efficiently analyse your server performance with it, and show how it helped me to understand complicated performance issues in my Node.js servers. At the end of this lecture, developers will be able to have the ability to integrate a fast and easy tool in order to measure your server performance.

In this lightning talk, you will see:
The lack of visibility on React applications
How to install the Sentry React SDK
How Sentry can help you identify errors and slowdowns within your React App so you can see faster, solve quicker and continuously learn from your applications

C
ommon myths about Micro-Frontends hold that they are bad for performance or that developers implementing this architectural style don’t care about the performance implications because they are focusing on fixing the developer experience and organizational issues rather than focusing on the user experience, however, the reality is altogether different. Micro-Frontends are not inheritably bad for performance and, as is often the case in software development, making best use of the technology depends on correct implementation. This talk will demonstrate how Micro-Frontends can make your applications faster and more resilient while keeping the benefits of independent deployments.

There is generally a good understanding on how to render large (say, 100K items) datasets using virtual lists, …if they remain largely static. But what if new entries are being added or updated at a rate of hundreds per second? And what if the user should be able to filter and sort them freely? How can we stay responsive in such scenarios? In this talk we discuss how Flipper introduced map-reduce inspired FSRW transformations to handle such scenarios gracefully. By applying the techniques introduced in this talk Flipper frame rates increased at least 10-fold and we hope to open-source this approach soon.

Most of the people in our industry know what Lighthouse or Page Speed Insights are and use them regularly. Unfortunately, most of them have no idea how they work which leads to terrible misconceptions and misunderstandings, especially for non-tech business owners. In this talk, I want to help everyone make better use of these tools explaining how they work, what's their goal, and how to interpret the data to come to the right conclusions.

A demo and deep dive into GraphCDN, the edge caching GraphQL CDN.

Can we have themeable CSS-in-TypeScript without the runtime cost? In this talk we'll have a quick look at how this can be achieved with vanilla-extract.

An introduction to SolidJS UI Library. Explore an example to show the similarity and differences between Hook + Virtual DOM versus Reactivity + DOM.

Off late GraphQL workloads see wide adoption in enterprise workloads as GraphQL provides a consistent and flexible way for UI to consume data from the APIs. For API developers like me, seeing GraphQL servers abstracting away the data filtering and the access patterns associated with backend APIs is a complete paradigm shift. Traditional API design tasks, like data modeling, access patterns required to implement high-performance Data APIs, are still relevant when implementing GraphQL applications?
This talk will walk you through the learnings as a backend API developer building a hello world GraphQL application to implement a globally distributed GraphQL API for a real-world e-commerce application. We will look into scaling and resiliency required for building high-performance GraphQL APIs. Also, look into how database capabilities play an essential role in implementing a successful GraphQL application.

Our web app is finally ready to go live but which deployment tool should we use? With the rise of JAMstack, we have a multitude of options from Vercel, Netlify, to Firebase. Certainly, performance is key for us so we want to know which one is the fastest. In this talk, we will do a real-world benchmark comparing the most known JAMstack deployment options and discuss pros and cons.

Over the last few years, the JS web app community has seen a growing awareness and focus on performance
&
scalability. The days when prominent production sites serve entirely-blank pages waiting on monolithic bundles of megates of JavaScript are (mostly!) behind us.
A big part of that has been deeper integration with CDNs, after all, round-trip latency is one of the primary determiners of performance for a global audience. But frameworks, and the companies that support them, have different approaches to how they can be used, and the operational complexities their strategies introduce have real consequences.
But what if, instead of a dynamic origin sending instructions to a static CDN, you could run your application directly on the edge? As it turns out, that doesn't just improve performance, it also vastly simplifies our deployment and maintenance lives too.

Nodejs runs big systems today. Sometimes, you can improve user experience and save on cloud expanses optimizing your nodejs scripts. In this talk I will share tips from production on how to improve nodejs runtime performance.

There are many ways to measure web performance, but the most important thing is to measure what actually matters to users. This talk is about how to measure, analyze and fix slow running JavaScript code using browser APIs.

As you add more components to your React application, you'll start to notice performance issues. Maybe data isn't loading as fast or you notice that things are happening out of order. There are tools and techniques you can use to handle these kind of issue at a large scale. In this talk, attendees will learn how to analyze their React apps for solvable issues and learn some state management and async handling techniques.

The main thread, on the web, has a lot of responsibilities. At the same time, web apps are getting more sophisticated every day. Therefore, the main thread gets too busy that will disappoint our user showing janky frames! The off-main-thread architecture ensures apps run smoothly on every device for everyone.
In this talk, we will go through the possibilities in browsers such as WebWorker, Worklet, and WebAssembly introducing practical tools that allow us to boost our user experiences.

Performance can make or break a website, but how can you quantify that? In this session we will look at the Core Web Vitals as a way to measure performance on the web. Specifically, we'll go through the history of web performance measurements, where the new metrics come from and how they are measured.

In this talk we will learn how to solve performance issues. We will learn how the JS engine works, see use cases from production and come out with practical tips that can help you to boost your app's performance 90%!

Landing a top spot on Google can have a multi-million dollar impact on your business. Starting in May 2021, the performance of your site (determined Core Web Vitals) will be critical to your search ranking. Learn how Next.js can help you optimize your site’s performance, user experience, and SEO.

Service workers bring amazing new capabilities to the web. They make fully offline web apps possible, improve performance, and bring more resilience and stability to any site. In this talk, you'll learn how these man-in-the-middle attacks on your own site work, different approaches you can use, and how they might replace many of our current best practices.

In this talk we’ll explore a variety of techniques one can employ to ensure that their apps are running at peak performance. With a couple of small tweaks, you can make perf a built-in.