Best of Performance — June 2024

1. 1
   Article

   DEV·2y

   REST API Design Rules

   Importance of clean REST API designs for usability, maintainability, security, performance, development time, scalability, reusability, and documentation. URI rules include plural collections, singular/singletons, no trailing forward slashes, hyphen use, lowercase letters, no file extensions, and avoiding CRUD function names. HTTP method rules for creating, reading, updating, deleting, and patching resources. Versioning for maintaining backward compatibility and consistent API design.

   1.3K

   32
2. 2
   Article

   Community Picks·2y

   Get the Best Performance on Your Next.js App

   Learn how to optimize performance on your Next.js app with tips like loading only the necessary JavaScript and CSS, lazy loading dependencies, using the Next.js Image component for image optimization, preferring CSS over JavaScript, avoiding loaders at the beginning, utilizing font optimization, optimizing scripts, removing unused packages, checking bundle size, and using server components for improved rendering and caching.

   572

   18
3. 3
   Article

   Community Picks·2y

   Reviewing Zed: An IDE of the Future

   Zed is a new, open-source IDE that is faster than Sublime Text and provides powerful features out of the box. It is currently in beta and supports Mac devices, with support for Windows and Linux coming soon. Zed aims to compete with VSCode as the king of code editors.

   556

   50
4. 4
   Article

   Community Picks·2y

   Free Image Optimization Toolkit

   Easily optimize and compress up to 20 images (up to 10 MB each) for free to improve performance using imgto.xyz, leveraging Cloudinary's Image API. Convert images to modern, efficient formats for reduced file sizes.

   544

   35
5. 5
   Article

   Community Picks·2y

   The Dark Side of 'Foreach()' : Why You Should Think Twice Before Using It

   Learn about the limitations of forEach() function in JavaScript, including performance issues, inability to escape the loop, and incompatibility with async functions. Discover better options for working with arrays, such as map(), reduce(), and filter().

   455

   44
6. 6
   Article

   Community Picks·2y

   How to reduce unused JavaScript in your code?

   Reducing unused JavaScript is crucial for optimizing modern websites. This guide covers techniques like code splitting, tree shaking, minifying JavaScript, loading scripts asynchronously, dynamic imports, and lazy loading to help improve web performance by cutting down on unnecessary code.

   366

   15
7. 7
   Article

   ITNEXT·2y

   Optimizing Web Backends

   The post discusses common techniques for optimizing web backend performance, focusing on issues related to high response times. It categorizes optimization strategies into three main layers: Application, Database, and Infrastructure. Key methods include optimizing algorithms, using asynchronous functions, leveraging concurrency, indexing databases, scaling databases, data compression, using CDNs, upgrading to HTTP/2 or HTTP/3, and replicating infrastructure. Continuous measurement and testing are emphasized to ensure effectiveness.

   345

   5
8. 8
   Article

   DEV·2y

   Understanding Debouncing in JavaScript

   Debouncing in JavaScript is a technique to limit the rate at which a function is executed. It helps optimize performance, enhance user experience, and reduce unnecessary network requests. Learn how to implement debouncing in JavaScript for better control of event triggers.

   286

   18
9. 9
   Article

   Community Picks·2y

   Understanding React Compiler

   React's core architecture of calling functions repeatedly can lead to performance issues, especially with expensive functions. The React Compiler automates performance tuning by rewriting code to include memoization and caching. Transpilers, compilers, and optimizers are tools that analyze and transform code into a functionally equivalent form. The Fiber tree in React manages state and dependencies, with the React Compiler enhancing performance by automatically caching results. While this saves processing power, it increases memory usage and can complicate debugging due to additional abstraction layers.

   248

   4
10. 10
    Article

    Community Picks·2y

    React: You are Using useEffect() Wrong, Do This Instead

    Learn about the usage of the useEffect() hook in React and how to optimize its usage for better performance.

    239

    10
11. 11
    Article

    Awesome Go·2y

    Avoiding Beginner Mistakes Hampering You to Scale Backend⚡️

    The post outlines techniques for dramatically scaling backend performance from 50K to 1M requests on minimal resources. Key strategies include building an observability pipeline, performing stress tests, connection pooling, enforcing resource constraints, disabling implicit transactions, adding indexes, handling transaction locks, and increasing file descriptor limits. The backend, developed in Golang with a monolithic architecture using GIN and GORM, underwent significant optimizations to achieve improved efficiency and scalability.

    207

    3
12. 12
    Article

    Community Picks·2y

    Worker Threads : Multitasking in NodeJS

    Learn about worker threads in Node.js, including the difference between concurrency and parallelism, how worker threads work, and the benefits of using them.

    201

    5
13. 13
    Article

    Community Picks·2y

    Build a Caching Layer in Node.js With Redis

    Learn how to build a caching layer in Node.js using Redis to improve the performance of your backend and increase the number of concurrent users. Redis is an in-memory data repository that provides extreme performance and efficiency for caching. By encapsulating caching logic in a middleware function, you can choose which routes to apply caching to, reducing code duplication and improving maintainability. This step-by-step tutorial shows you how to set up a Redis caching layer in an Express application and provides extra tips on compressing data for better memory utilization.

    194

    4
14. 14
    Article

    Community Picks·2y

    10 Spring Boot Performance Best Practices

    Spring Boot, a popular framework in the Java ecosystem, simplifies application development but sometimes needs optimization for performance. Key practices to enhance performance include using the latest versions of Spring Boot and JVM, enabling virtual threads, leveraging Spring AOT with GraalVM Native Image for faster startup times and reduced memory usage, and employing JVM features like Checkpoint Restore and Class Data Sharing. Configuring threads efficiently for both MVC and database access layers, using effective caching strategies, adopting resiliency patterns like circuit breakers, and incorporating thorough monitoring and profiling are also critical. Tools like Digma can further help by providing performance insights during development.

    190

    2
15. 15
    Article

    Tiger's Place·2y

    Optimizing React Context and Re-renders

    Learn how to optimize React Context to minimize re-renders. The post covers evaluating the causes of re-renders, splitting context into multiple contexts, using the useMemo hook for memoizing context values, and leveraging React.memo for state from higher components. Practical code examples are provided to demonstrate these optimization techniques.

    158

    4
16. 16
    Article

    Faun·2y

    Understanding when to cache your APIs

    Learn about caching techniques, including client-side and server-side caching, cache hit ratio, and when to cache APIs.

    130

    4
17. 17
    Article

    Community Picks·2y

    Profiling and Optimizing Node.js Application Performance

    Learn how to identify and fix performance bottlenecks in your Node.js application. Discover optimization strategies to streamline CPU-intensive tasks, reduce memory footprint, and enhance I/O efficiency.

    120
18. 18
    Article

    ByteByteGo·2y

    EP117: What makes HTTP2 faster than HTTP1?

    HTTP2 introduces several key features that improve performance over HTTP1, including a binary framing layer, multiplexing of messages, stream prioritization, server push capabilities, and HPACK header compression. These enhancements allow more efficient processing, customization of request weights, simultaneous response delivery, and bandwidth savings, though developers must still optimize to fully benefit from HTTP2.

    100

    2
19. 19
    Article

    Machine Learning News·2y

    Meet Million Lint: A VSCode Extension that Identifies Slow Code and Suggests Fixes

    Million Lint is a VSCode extension designed to detect slow code in React applications and suggest optimizations. It identifies components that are re-rendering unnecessarily and provides actionable insights to enhance performance. Installation is straightforward via the VSCode marketplace, and it helps developers of all levels maintain efficient code easily.

    99

    5
20. 20
    Article

    Medium·2y

    I tried React Compiler today, and guess what… 😉

    The article explores the use of React Compiler, a tool developed by the React core team, to solve the problem of unnecessary re-renders in React components. It discusses the installation process, provides examples of using React Compiler, and evaluates its effectiveness in real-world scenarios. The author concludes that while React Compiler can improve performance in some cases, manual memoization techniques such as React.memo, useMemo, and useCallback are still necessary to optimize component rendering.

    85

    5
21. 21
    Article

    Astro·2y

    Server Islands

    Astro introduces Server Islands, a new island architecture primitive that allows developers to deliver static, CDN-cached HTML page shells with injected dynamic content. It combines the benefits of performance and personalization. By using server islands, developers can achieve an instant, static page shell of HTML cached in a global CDN, while still having dynamic content injected anywhere on the page.

    80

    2
22. 22
    Article

    Community Picks·2y

    Optimizing User Experience: The Lazy Loading Approach in React"

    Lazy loading in React is a powerful technique to optimize web application performance by delaying the loading of non-essential components until they are needed. It improves initial load time, reduces resource consumption, and aligns with best practices in modern web development. Implementing lazy loading in a React app involves using the lazy function and Suspense component.

    72

    3
23. 23
    Article

    Lobsters·2y

    Time to Say Goodbye to Google Fonts: Cache Performance

    Self-hosting fonts can improve performance compared to using Google Fonts due to cache partitioning in browsers.

    70

    3
24. 24
    Article

    Tiger's Place·2y

    How I made our React app more performant (includes INP)

    The author shares steps to optimize a React app by reducing unnecessary re-renders, especially in a chat layout. Techniques include using React DevTools for profiling, moving state into the appropriate components, and understanding the browser's rendering process through Interaction to Next Paint (INP). Key advice involves colocating state, measuring performance before optimizing, and understanding the rendering process for effective optimization.

    61

    2
25. 25
    Article

    Milan Jovanović·2y

    Caching in ASP.NET Core: Improving Application Performance

    Learn how caching can improve application performance in ASP.NET Core. Explore different types of caches, caching abstractions, and caching strategies like the cache-aside pattern. Discover the benefits and limitations of in-memory caching and distributed caching with Redis.

    47