Best of Performance — 2021
- 1
- 2
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.
- 3
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
- 4
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.
- 5
JavaScript in Plain English·4y
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.
- 6
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.
- 7
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.
- 8
- 9
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.
- 10
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.
- 11
The Software House·4y
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.
- 12
- 13
- 14
DevBlogs·4y
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.
- 15
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.
- 16
asayer·4y
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.
- 17
Medium·4y
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.
- 18
- 19
Hacker News·4y
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.
- 20
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.
- 21
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.
- 22
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.
- 23
Flutter·4y
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.
- 24
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.
- 25