General

State of Web Performance Recap

Published Mar 3, 2022

Updated Feb 13, 2023

2 min read

This article was written over 18 months ago and may contain information that is out of date. Some content may be relevant but please refer to the relevant official documentation or available resources for the latest information.

We recently wrapped up our State of Web Perf event host by Rob @robocell and Jae @dulcedejae. There were many great topics proposed and questions asked. In this article, I'm going to give you a quick rundown of the event. However, I would strongly encourage you to watch State of Web Perf on Youtube.

What is State of Web Perf

"State of Web Performance" is an event hosted by This Dot Labs where you'll hear from a panel of various web performance experts.

Key points

Even though there are a lot of tools, libraries, frameworks, and methodologies, a continued focus on web performance means that things will continue to get better. An increased focus on reducing Javascript bundle sizes means the web will continue to prioritize web performance, although as developers, we should always be keeping performance and speed in mind.

Javascript bundle sizes

One of the stumbling blocks with measuring web performance is getting an idea of how big of a stumbling block bundle sizes actually are. With the availability of fast network speeds, are Javascript bundle sizes something to keep close to heart?

Most would argue yes. Not only does it help your site load faster in all aspects, even those who may not have high-speed internet or a reliable data connection, can still experience your site.

This does go without saying that bundle sizes aren't the only thing we need to worry about in web performance.

Web builder performance issues

More often than not, website builders struggle in the web performance department. If you've used one, you know. Mostly recently companies such as Shopify have been creating dedicated web performance departments focused on creating the most performant product.

It's always a great idea to address web performance from the beginning that way you stay ahead of the game and won't struggle to fix performance issues later down the road.

Things to consider

👉 Always be aware of the trade-offs when it comes to your webpage! 👉 Keep in mind the number of #npm packages, fonts, or images for example! 👉 Make good use of devtools to measure the web performance impact. 👉 The less JavaScript you have to render in the browser, the better your web performance will be! 👉 Lots of frameworks and libraries are working hard to address this issue 👉 Testing and user metrics are key components to measuring we performance

Image handling

Images are complicated. JPG and PNG used to be the most popular format for photos, but when it comes to photos on the web, it could be better. Web performance is a fast growing format that is great for the web. Following close behind is WebP. Definitely check them out if you'd like to improve photos on your website.

This wraps up our State of Web Perf recap!

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

About the author(s)

Tyrel Chambers
Software Engineer passionate about developing cool ideas and pizza
@imtyrelchambers @tyrelchambers

Understanding Vue.js's <Suspense> and Async Components

In this blog post, we will delve into how and async components work, their benefits, and practical implementation strategies to make your Vue.js applications more efficient and user-friendly. Without further ado, let’s get started! Suspense Let's kick off by explaining what Suspense components are. They are a new component that helps manage how your application handles components that need to await for some async resource to resolve, like fetching data from a server, waiting for images to load, or any other task that might take some time to complete before they can be properly rendered. Imagine you're building a web page that needs to load data from a server, and you have 2 components that fetch the data you need as they will show different things. Typically, you might see a loading spinner or a skeleton while the data is being fetched. Suspense components make it easier to handle these scenarios. Instead of manually managing loading states and error messages for each component that needs to fetch data, Suspense components let you wrap all these components together. Inside this wrapper, you can define: 1. What to show while the data is loading (like a loading spinner). 2. The actual content that should be displayed once the data is successfully fetched. This way, Vue Suspense simplifies the process of handling asynchronous operations (like data fetching) and improves the user (and the developer) experience by providing a more seamless and integrated way to show loading states and handle errors. There are two types of async dependencies that can wait on: - Components with an async setup() hook. This includes components using with top-level await expressions. *Note: These can only be used within a component.* - Async Components. Async components Vue's asynchronous components are like a smart loading system for your web app. Imagine your app as a big puzzle. Normally, you'd put together all the pieces at once, which can take time. But what if some pieces aren't needed right away? Asynchronous components help with this. Here's how they work: - Load Only What's Needed: Just like only picking up puzzle pieces you need right now, asynchronous components let your app load only the parts that are immediately necessary. Other parts can be loaded later, as needed. - Faster Start: Your app starts up faster because it doesn't have to load everything at once. It's like quickly starting with the border of a puzzle and filling in the rest later. - Save Resources: It uses your web resources (like internet data) more wisely, only grabbing what’s essential when it's essential. In short, asynchronous components make your app quicker to start and more efficient, improving the overall experience for your users. Example: ` Combining Async Components and Suspense Let's explore how combining asynchronous components with Vue's Suspense feature can enhance your application. When asynchronous components are used with Vue's Suspense, they form a powerful combination. The key point is that async components are "suspensable" by default. This means they can be easily integrated with Suspense to improve how your app handles loading and rendering components. When used together, you can do the following things: - Centralized Loading and Error Handling: With Suspense, you don't have to handle loading and error states individually for each async component. Instead, you can define a single loading indicator or error message within the Suspense component. This unified approach simplifies your code and ensures consistency across different parts of your app. - Flexible and Clean Code Structure: By combining async components with Suspense, your code becomes more organized and easier to maintain. An asynchronous component has the flexibility to operate independently of Suspense's oversight. By setting suspensible: false in its options, the component takes charge of its own loading behavior. This means that instead of relying on Suspense to manage when it appears, the component itself dictates its loading state and presentation. This option is particularly useful for components that have specific loading logic or visuals they need to maintain, separate from the broader Suspense-driven loading strategy in the application. In practice, this combo allows you to create a user interface that feels responsive and cohesive. Users see a well-timed loading indicator while the necessary components are being fetched, and if something goes wrong, a single, well-crafted error message is displayed. It's like ensuring that the entire puzzle is either revealed in its completed form or not at all rather than showing disjointed parts at different times. How it works When a component inside the boundary is waiting for something asynchronous, shows fallback content. This fallback content can be anything you choose, such as a loading spinner or a message indicating that data is being loaded. Example Usage Let’s use a simple example: In the visual example provided, imagine we have two Vue components: one showcasing a selected Pokémon, Eevee, and a carousel showcasing a variety of other Pokémon. Both components are designed to fetch data asynchronously. Without , while the data is being fetched, we would typically see two separate loading indicators: one for the Eevee Pokemon that is selected and another for the carousel. This can make the page look disjointed and be a less-than-ideal user experience. We could display a single, cohesive loading indicator by wrapping both components inside a boundary. This unified loading state would persist until all the data for both components—the single Pokémon display and the carousel—has been fetched and is ready to be rendered. Here's how you might structure the code for such a scenario: ` Here, is the component that's performing asynchronous operations. While loading, the text 'Loading...' is displayed to the user. Great! But what about when things don't go as planned and an error occurs? Currently, Vue's doesn't directly handle errors within its boundary. However, there's a neat workaround. You can use the onErrorCaptured() hook in the parent component of to catch and manage errors. Here's how it works: ` If we run this code, and let’s say that we had an error selecting our Pokemon, this is how it is going to display to the user: The error message is specifically tied to the component where the issue occurred, ensuring that it's the only part of your application that shows an error notification. Meanwhile, the rest of your components will continue to operate and display as intended, maintaining the overall user experience without widespread disruption. This targeted error handling keeps the application's functionality intact while indicating where the problem lies. Conclusion stands out as a formidable feature in Vue.js, transforming the management of asynchronous operations into a more streamlined and user-centric process. It not only elevates the user experience by ensuring smoother interactions during data loading phases but also enhances code maintainability and application performance. I hope you found this blog post enlightening and that it adds value to your Vue.js projects. As always, happy coding and continue to explore the vast possibilities Vue.js offers to make your applications more efficient and engaging!...

Apr 24, 2024

6 mins

VueWeb PerformanceUXJavaScript

State of Web Performance February 2023 Recap

In the most recent State of Web Performance event, our panelists discussed the current trends in web performance, the applicability of SPA architecture, the Performance Inequality Gap, how development teams can get better at testing on more devices, and much more. In this wrap-up, we will take a deeper look into these latest developments and explore what is on the horizon for web performance. You can watch the full State of Web Performance event on the This Dot Media YouTube Channel. Here is a complete list of the host and panelists that participated in this online event. Hosts: - Tracy Lee, CEO, This Dot Labs - Henri Helvetica, Dev. Community Manager, WebPageTest by Catchpoint Panelists: -Alex Russell, Product Manager on Microsoft Edge -Sia Karamalegos, Web Performance at Shopify -Estela Franco, Web Performance Specialist at Schneider Electric -Yoav Weiss, Software Engineer, Google Chrome's Speed Metrics team Updates from Panelists and What They Are Currently Working On The event started off with great conversation by getting updates from our panelists, and what they are currently working on. Our co-host Henri started by talking about how he likes to make sure developers are leveling up in their abilities. He stresses that performance literacy is of utmost importance. Estela continued the conversation by talking about how she is working to improve the web performance culture at her current company, and that she is trying to improve the web performance processes. Yoav talked about how he is excited about measuring soft navigations in SPAs. Sia just finished an internal hackathon at her place of employment. She mostly works with trying to make merchant websites faster. Alex spent about half his time on performance oriented things, and the other half is spent with first party teams at Microsoft trying to improve the state of web apps. After introductions, the conversation pivoted to the talking points for this event. Web Performance Culture Inside a Company Estela talked about working at Schneider Electric, and how she was brought in by management to improve web performance. The company is aware of the impact of web performance for users and customers. It helped her when getting involved with the different dev teams there. Having the management vision to work on that was really helpful. However, there was a struggle to keep different dev teams involved. A lot of the teams were aware of the importance of web performance, but web performance is more than just a performance score, and making sure the teams were aware of all that was involved was difficult at times. The environment overall has been beneficial by being the point of contact for changes made that may affect web performance. Sia saw that changes were more willing to be made on performance when it started to affect SEO. She was happy that it made them want to get on board no matter what the cause was. Innovations with Web Performance Yoav started this off by talking about aligning incentives. He spoke about how core web vitals creates a shared language that enables everyone to talk about the same things. It also aligns the long-term incentives of the platform with the short-term incentives of developers. He also talked about the concept of the "rage click", and how it isn’t a metric that is necessarily measured, but it is something that users can have a frustration with when the web performance affects how they interact with a site. Hardware and Web Performance Alex talked about how web performance doesn’t control the customer’s device, or the user’s hardware. It is also hard to detect software and it is often a poor response when it comes to software that isn’t liked. He explains that the web is the additive errors of a bunch of really hard problems coming together. He focuses on the complexity of what is coming down the wire. Frameworks and Web Performance Yoav talked about how people buy into a framework prematurely without knowing what the consequences would be for web performance. It usually happens that they are two years into using a framework, and then realize that a rewrite they did is a disaster from a performance perspective. He describes how it would be beneficial to protype in different stacks to see performance, but it isn’t being done. Sia added that a lot of this happened before people started really caring about web performance. She thinks that maybe now people may pause and consider the implications of some of the initial decisions being made. Estela agreed that teams don’t try different Frameworks first and pick the proper one because Frameworks are becoming more and more complex. It’s also hard to switch to a different technology in a timely manner. Browsers and Web Performance Alex spoke about his disappointment for the way browsers have behaved. Core vitals is a step up because it indicates that we are closing the circuit between what users actually experience. He talks about how the browser lacks in being the guarantor of solidarity between the decision-making wealthy class, and the people who are going to be excluded from these services. Yoav agreed that we could do a lot to incentivize developer behavior in the browser. Solutions to Support Web Performance Sia spoke about how performance would make you into a multi-million dollar company, but it could change how many extra millions you get. If you’re a Dev shop, there isn’t any prioritization on performance because they’re trying to get the client to pay for that feature. The client is the one who has to care about performance. Senior leadership in a large company has to care as well. Alex talked about HTML over the wire is really great for helping with web performance. He also mentioned SvelteKit, and how they are very responsible when it comes to web performance. Closing The conversation went in depth about the state of web performance, what is being done to help bring more awareness to it, and also how it can be improved. The panelists were very engaged, and brought many ideas to the table. It is always good to continue to have these discussions in order to stay current or talk about what needs to be done to keep things moving forward for the future of web performance. You can watch the full State of Web Performance event on the This Dot Media Youtube Channel....

Mar 3, 2023

5 mins

Web Performance

State of Vue Wrap-up

State of Vue recently wrapped up. Our Vue contributors and library authors gave us insights into some pretty large changes coming to Vue. There's a new state management player where Pinia will be taking over instead of VueX, a new way of writings scripts which seems to be picking up steam, and other changes we think are interesting. In this wrap-up, I'll summarize our State of Vue event with key takeaways and things to look forward to in the future. If you'd like to see the event in full, check it out on Youtube. Pinia replacing VueX 4 Pinia is VueX 4 successor. There won't be a VueX 5 because that's what Pinia is. It has a slightly different API, and works very well with Typescript. There are some arguments around whether useing VueX would be better for larger, complex projects, but Pinia is definitely becoming very popular in its own right. The main point for using Pinia over VueX 4 relates to Typescript users. VueX 4 does not work well with Typescript; Pinia aims to fix that. Keep an eye out for Pinia. There will also be documentation changes in VueX 4 to inform developers of this namechange, and that Pinia will be a VueX 4 upgrade. Volar Volar is being sponsored by Evan You for full-time work. Some of this works includes refactoring the internals of the language service. This refactor will help open the door for contributions in the near future. If you'd like to follow Johnson on Twitter as he works on Volar, you can follow him at @johnsoncodehk. Script Setup vs Composition API Script setup was hoping to became the “new way” of writing, and the community seems to be working in that direction. The State of Vue panelists agree that using script setup is more exciting to write with, and offers greater flexibility. Reactivity transform - Allows props to be destructured (with default values too) while still being reactive - Type-safe - Assignment based reactivity - Docs - Discussions Other interesting points - Vitest - Vitest Discord - swrv...

Mar 25, 2022

2 mins

Vue

Learning Paths for Next.JS Developers with Ankita Kulkarni

In this video, Rob Ocel and co-hosts Tracy Lee, Adam Rackis, and Danny Thompson talk with tech educator Ankita Kulkarni about her journey from engineering leader to full-time educator. Ankita shares insights on teaching Next.js, bridging practical knowledge gaps, and helping developers tackle real-world challenges. They discuss Next.js as a React-based framework, its benefits, and the challenges it presents for beginners. Chapters - Introduction to the Podcast and Guests 00:01 - Meet Ankita Kulkarni, Tech Educator 00:26 - Ankita's Transition to Full-Time Education 01:41 - Teaching Practical Knowledge in Next.js 03:19 - Effective Methods for Teaching Next.js 05:27 - Challenges of Being a Full-Time Educator 07:48 - Balancing Broad and Specific Examples 09:54 - Embracing Mistakes as a Teaching Tool 12:13 - Pair Programming and Mentorship 14:00 - Discussion on Next.js and Framework Adoption 16:48 - Advantages and Challenges of Next.js 18:12 - Choosing the Right Framework for Your Needs 20:35 - Impact of Next.js in React Documentation 22:26 - Learning Paths for New Developers 23:24 - The Rise of Full-Stack Web Development 25:09 - Benefits of Frameworks Abstracting Complexity 26:27 - OpenNext and Deployment Flexibility 28:06 - Ankita's Excitement for New Next.js Features 30:35 - The Future of Next.js Without Vercel 32:16 - Final Thoughts and Where to Find Everyone Online 34:21 Follow Ankita Kulkarni on Social Media Twitter: https://x.com/kulkarniankita9 YouTube: https://www.youtube.com/@kulkarniankita Sponsored by This Dot: thisdot.co...

Nov 12, 2024

2 mins

NextJSJavaScript

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.

State of Web Performance Recap

What is State of Web Perf

Key points

Javascript bundle sizes

Web builder performance issues

Things to consider

Image handling

Tyrel Chambers

You might also like

Understanding Vue.js's <Suspense> and Async Components

State of Web Performance February 2023 Recap

State of Vue Wrap-up

Learning Paths for Next.JS Developers with Ankita Kulkarni

Let's innovate together!

You might also like

Understanding Vue.js's <Suspense> and Async Components

State of Web Performance February 2023 Recap

State of Vue Wrap-up

Learning Paths for Next.JS Developers with Ankita Kulkarni