--- title: Best Performance posts of 2021 | daily.dev description: The most upvoted Performance posts of 2021, curated by the daily.dev community. canonical: https://daily.dev/tags/performance/best-of/2021 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/tags/performance/best-of/2021 og:type: website og:site_name: daily.dev og:title: Best Performance posts of 2021 | daily.dev og:description: The most upvoted Performance posts of 2021, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of Performance — 2021 1. 1 [](/posts/http-3-is-fast-chh2lo3d1 "HTTP/3 is Fast") Article Hacker News · 5y HTTP/3 is Fast HTTP/3 is a new version of the HTTP protocol. It uses a new protocol called QUIC. QUIC is meant to address the head-of-line blocking issues with HTTP/2\. The benchmarks show that the new protocol is much faster than the old one. 202 13 2. 2 [](/posts/9-best-practices-for-optimizing-frontend-performance-7qg2-k1px "9 Best Practices for Optimizing Frontend Performance") Article Bits and Pieces · 5y 9 Best Practices for Optimizing Frontend Performance Most of the websites fail to deliver a satisfactory user experience due to poorly optimized frontends. Minification of HTML, CSS, and JavaScript will speeds up the frontend load times as it reduces the amount of code that needs to be requested from the server. Using CSS Sprites is one of the easiest ways to reduce the number of server calls. 102 2 3. 3 [](/posts/5-react-performance-optimization-techniques-q1jjjf9kd "5 React performance optimization techniques") Article LogRocket · 5y 5 React performance optimization techniques React uses the concept of a virtual DOM to minimize the performance cost of rerendering a webpage because the actual DOM is expensive to manipulate. This concept can also slow down a complex app if it’s not managed very well. We will discuss five important ways to optimize the performance of a React application. These include:Keeping component state local where necessary to prevent unnecessary rerenders.Code-splitting in React using dynamic import().Windowing or list virtualization in React.Lazy loading images in React 78 4 4. 4 [](/posts/javascript-loading-techniques-performance-qbksxlumz "JavaScript loading techniques & Performance") Article DEV · 5y JavaScript loading techniques & Performance In this blog post, we will go through the techniques to include external script files to your HTML and look at how this can affect the performance. We will compare which technique is preferable and efficient over others in varying situations. This blog post assumes you are familiar with basic HTML, CSS and JavaScript syntax. 37 1 5. 5 [](/posts/real-life-use-cases-for-usecallback-and-usememo-react-hooks-oke90gpzz "Real-Life Use-Cases for useCallback and useMemo React Hooks") Article JavaScript in Plain English · 5y Real-Life Use-Cases for useCallback and useMemo React Hooks Bytecode Pandit explains when and how to use useCallback and useMemo in React. He also solves some real-life use-cases in a very simplified way. Let’s play with some hooks and see how they work in the real world. You can find the source code for this post here. 33 2 6. 6 [](/posts/optimize-node-js-performance-with-clustering-tbmoaktkl "Optimize Node.js performance with clustering") Article DEV · 5y Optimize Node.js performance with clustering The Node.js cluster module acts as a load balancer to distribute the load to the child processes running simultaneously on a shared port. The master process listens to a socket and sends the work to interested workers. The workers then process the incoming requests. This is the power of the cluster module where workers share the load. 33 2 7. 7 [](/posts/a-beginner-s-guide-to-lighthouse-cxmrkhnxj "A Beginner's Guide to Lighthouse") Article SitePoint · 5y A Beginner's Guide to Lighthouse Lighthouse is an open-source tool created by Google. It provides tools that let you understand how to improve your web page’s performance, accessibility, SEO and more. Using these scores to enhance your website will ultimately lead to attracting more users. We’ll also look at how to use WebPageTest, another powerful tool for assessing site performance. 30 8. 8 [](/posts/common-react-performance-mistakes--ewyexqmf0 "Common React performance mistakes 💣") Article DEV · 5y Common React performance mistakes 💣 React.memo is mainly used to memoize the whole component. Don't use it in a component that props is frequently changing. In-line functions shouldn't be called without arrow functions. Use the same set of rules that can be applied to useMemo too. 28 9. 9 [](/posts/how-to-write-clean-javascript-code-with-functional-programming-ojyfjnj2i "How to Write Clean JavaScript Code with Functional Programming") Article JavaScript in Plain English · 5y How to Write Clean JavaScript Code with Functional Programming Refactor your imperative code into functional code to improve readability and performance. Immutable variables make it much easier to understand what a variable contains. Smaller Scopes make it Easier to Break Code into Sub-Functions. A failure of a particular test will narrow down the problem and cause a regression. 27 10. 10 [](/posts/lessons-learned-rebuilding-a-large-e-commerce-website-with-next-js-case-study-smashing-magazine-jeqwmnont "Lessons Learned Rebuilding A Large E-Commerce Website With Next.js (Case Study) — Smashing Magazine") Article Smashing Magazine · 5y Lessons Learned Rebuilding A Large E-Commerce Website With Next.js (Case Study) — Smashing Magazine We made the switch from a more traditional integrated e-commerce platform to a headless platform with Next.js. Here are the most important lessons learned while rebuilding a large e- commerce site with next.js, including how to build a site from the ground up. 27 2 11. 11 [](/posts/best-practices-for-software-architecture-testing-adbg0azhs "Best practices for software architecture testing") Article The Software House · 5y Best practices for software architecture testing Architecture testing can be a daunting task – especially for devs who aren’t in the habit of testing architecture from the very beginning and continuing to do so as their deadline approaches. We’re here to tell you that it’s really worth the effort and save you a ton of time and tears in your next project. 26 12. 12 [](/posts/nextjs-performance-checklist-ehkhpw9gh "NextJS Performance Checklist") Article DEV · 5y NextJS Performance Checklist React applications with NextJS can be slow. Here's a list of things you might be able to do to improve the performance of your application. I've geared this towards NextJS for a few specifics I wanted to include, but this list can be applied more generally too. 26 1 13. 13 [](/posts/front-end-monitoring-with-sentry-io-and-react-irxu6-1ex "Front-end monitoring with Sentry.io and React") Article asayer · 5y Front-end monitoring with Sentry.io and React 22 1 14. 14 [](/posts/announcing-net-6-the-fastest-net-yet-loo6qrgik "Announcing .NET 6 — The Fastest .NET Yet") Article DevBlogs · 5y Announcing .NET 6 — The Fastest .NET Yet C# 10 and F# 6 deliver language improvements that make your code simpler and better. .NET 6 is the first release that natively supports Apple Silicon (Arm64) and has also been improved for Windows Arm64\. Hot Reload enables you to skip rebuilding and restarting your app to view a new change. 20 15. 15 [](/posts/nodejs-performance-optimization-with-clustering-773v7uv-p "NodeJS Performance Optimization with Clustering") Article Bits and Pieces · 5y NodeJS Performance Optimization with Clustering NodeJS runs in a single thread by default. Cluster module creates several child processes that operate parallelly sharing the same server port. Advantages: The use of all the available cores for application execution improves scalability. Disadvantages: Session management isn’t possible; instead, a developer must handle the alternatives, which adds to the complexity. 20 16. 16 [](/posts/react-18---what-s-new-and-how-it-will-benefit-developers-c-trgmfh2 "React 18 - What's New and How it Will Benefit Developers") Article asayer · 5y React 18 - What's New and How it Will Benefit Developers React18 is the latest iteration of the framework, and it is geared at reducing the amount of code you need to write. In this release, it is moving to a functional paradigm where data is immutable. This will require some changes for developers but it should improve the performance and functionality of your applications. 19 17. 17 [](/posts/break-stuff-until-it-works-optimizing-performance-in-nextjs-tesovetrz "Break Stuff Until it Works — Optimizing performance in NextJS") Article Medium · 5y Break Stuff Until it Works — Optimizing performance in NextJS Performance optimizing isn’t easy, but with these steps you will be guaranteed to be much closer to a fast solution. The strategy is a method of “Breaking Stuff Until It Works’ Understanding NextJS’es lifecycle is the first step to optimizing your app. 19 2 18. 18 [](/posts/optimizing-the-performance-of-your-vue-apps-using-web-workers-qv3rkbp2h "Optimizing the Performance of Your Vue Apps Using Web Workers") Article asayer · 5y Optimizing the Performance of Your Vue Apps Using Web Workers 19 19. 19 [](/posts/how-i-made-google-s-data-grid-scroll-10x-faster-with-one-line-of-css-xy0rgxrh8 "How I made Google’s data grid scroll 10x faster with one line of CSS") Article Hacker News · 5y How I made Google’s data grid scroll 10x faster with one line of CSS Google’s “Top linking sites” data grid has major scroll lag. This happens when choosing to display a larger dataset (500 rows) Instead of the default 10 results, the data grid produces 16,000+ DOM elements to display just 500 rows. The DOM is not very performant when containing many elements. And laying out that many elements is costly. 18 20. 20 [](/posts/optimizing-react-app-performance-iety9oqkw "Optimizing React App Performance") Article DEV · 5y Optimizing React App Performance React is a great library that allows you to write applications declaratively. It abstracts away all the functional and internal details on how the library achieves a specific UI state. This is achieved by keeping a Virtual DOM and the process of reconciliation. React relies on the Virtual DOM to efficiently render only the components that have been updated. 18 1 21. 21 [](/posts/blog---next-js-11-1-icaara3-r "Blog - Next.js 11.1") Article Next.js · 5y Blog - Next.js 11.1 Next.js 11.1 includes security and performance updates. The security update addresses an open redirect that could allow for phishing attacks by redirecting to an attacker's domain from a trusted domain. We're working on integrating SWC, a super-fast JavaScript and TypeScript compiler written in Rust, that will replace two toolchains used in Next.js. 18 3 22. 22 [](/posts/what-is-webassembly-and-why-do-you-need-it-the-new-stack-uuav9l2ii "What Is WebAssembly and Why Do You Need It? – The New Stack") Article The New Stack · 5y What Is WebAssembly and Why Do You Need It? – The New Stack WebAssembly (also known as WASM) was launched in 2017 as a binary instruction format for a stack-based virtual machine. It is not designed to be used as a language itself, but rather as an effective compilation target for languages like C, C++, and Rust. WebAssembly is a low-level, assembly-like language with a compact binary format. This makes it possible for WebAssembly to deliver near-native performance. 18 23. 23 [](/posts/what-s-new-in-flutter-2-8-qkbbnqlb3 "What’s New in Flutter 2.8") Article Flutter · 5y What’s New in Flutter 2.8 Flutter 2.8 is the final stable release of the year. It includes significant performance improvements in both the engine and in Flutter DevTools. There are also new Firebase features and improvements, WebView 3.0, a new batch of Flutter Favorite packages and a raft of updates to desktop. 16 24. 24 [](/posts/db-lens---explore-data-execute-sql-metrics-disk-usage-more-isl28ztil "DB Lens - Explore data, execute SQL, metrics, disk usage & more") Article Product Hunt · 5y DB Lens - Explore data, execute SQL, metrics, disk usage & more DB Lens is an opensource database client for Mac, Linux & Windows. It helps developers to explore, observe & understand the database in a better way. DB Lens is available in English, French, German, Italian, Spanish, Portuguese, Italian and Spanish. It is available as a free download or as a paid version. 16 25. 25 [](/posts/nuxt-3-is-coming-here-s-what-you-need-to-know-hlf--ff-b "Nuxt 3 is coming! Here's What You Need to Know") Article asayer · 5y Nuxt 3 is coming! Here's What You Need to Know 16 [See all Performance archives](/tags/performance/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/tags/performance/best-of/2021#page","url":"https://daily.dev/tags/performance/best-of/2021","name":"Best Performance Posts of 2021","description":"The most upvoted Performance posts of 2021, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/tags/performance/best-of/2021#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/http-3-is-fast-chh2lo3d1","name":"HTTP/3 is Fast"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/9-best-practices-for-optimizing-frontend-performance-7qg2-k1px","name":"9 Best Practices for Optimizing Frontend Performance"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/5-react-performance-optimization-techniques-q1jjjf9kd","name":"5 React performance optimization techniques"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/javascript-loading-techniques-performance-qbksxlumz","name":"JavaScript loading techniques & Performance"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/real-life-use-cases-for-usecallback-and-usememo-react-hooks-oke90gpzz","name":"Real-Life Use-Cases for useCallback and useMemo React Hooks"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/optimize-node-js-performance-with-clustering-tbmoaktkl","name":"Optimize Node.js performance with clustering"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/a-beginner-s-guide-to-lighthouse-cxmrkhnxj","name":"A Beginner's Guide to Lighthouse"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/common-react-performance-mistakes--ewyexqmf0","name":"Common React performance mistakes 💣"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/how-to-write-clean-javascript-code-with-functional-programming-ojyfjnj2i","name":"How to Write Clean JavaScript Code with Functional Programming"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/lessons-learned-rebuilding-a-large-e-commerce-website-with-next-js-case-study-smashing-magazine-jeqwmnont","name":"Lessons Learned Rebuilding A Large E-Commerce Website With Next.js (Case Study) — Smashing Magazine"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/best-practices-for-software-architecture-testing-adbg0azhs","name":"Best practices for software architecture testing"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/nextjs-performance-checklist-ehkhpw9gh","name":"NextJS Performance Checklist"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/front-end-monitoring-with-sentry-io-and-react-irxu6-1ex","name":"Front-end monitoring with Sentry.io and React"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/announcing-net-6-the-fastest-net-yet-loo6qrgik","name":"Announcing .NET 6 — The Fastest .NET Yet"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/nodejs-performance-optimization-with-clustering-773v7uv-p","name":"NodeJS Performance Optimization with Clustering"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/react-18---what-s-new-and-how-it-will-benefit-developers-c-trgmfh2","name":"React 18 - What's New and How it Will Benefit Developers"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/break-stuff-until-it-works-optimizing-performance-in-nextjs-tesovetrz","name":"Break Stuff Until it Works — Optimizing performance in NextJS"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/optimizing-the-performance-of-your-vue-apps-using-web-workers-qv3rkbp2h","name":"Optimizing the Performance of Your Vue Apps Using Web Workers"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/how-i-made-google-s-data-grid-scroll-10x-faster-with-one-line-of-css-xy0rgxrh8","name":"How I made Google’s data grid scroll 10x faster with one line of CSS"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/optimizing-react-app-performance-iety9oqkw","name":"Optimizing React App Performance"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/blog---next-js-11-1-icaara3-r","name":"Blog - Next.js 11.1"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/what-is-webassembly-and-why-do-you-need-it-the-new-stack-uuav9l2ii","name":"What Is WebAssembly and Why Do You Need It? – The New Stack"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/what-s-new-in-flutter-2-8-qkbbnqlb3","name":"What’s New in Flutter 2.8"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/db-lens---explore-data-execute-sql-metrics-disk-usage-more-isl28ztil","name":"DB Lens - Explore data, execute SQL, metrics, disk usage & more"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/nuxt-3-is-coming-here-s-what-you-need-to-know-hlf--ff-b","name":"Nuxt 3 is coming! Here's What You Need to Know"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Tags","item":"https://daily.dev/tags"},{"@type":"ListItem","position":3,"name":"Performance","item":"https://daily.dev/tags/performance"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/tags/performance/best-of"},{"@type":"ListItem","position":5,"name":"2021"}]}]} ```