# lazy loading Published articles for lazy loading. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## How ORM N+1 Queries Create Hidden Request Latency DevFeed: [How ORM N+1 Queries Create Hidden Request Latency]() Original publisher: [Read original article]() Author: hello@ankit-rana.com Published: 2026-08-02T00:00:00Z Content type: tutorial Language: en Sources: [Ankit Rana | Mechanical Sympathy]() Topics: [Object-relational mapping](), [Latency](), [Monitoring](), [lazy loading](), [Database](), [connection pool]() Tags: [connection-pool](), [database](), [database-performance](), [hibernate](), [latency](), [lazy-loading](), [monitoring](), [n-plus-one](), [observability](), [orm](), [query](), [request]() ### AI overview This article explains how ORM lazy loading can turn a loop over orders into an N+1 query pattern. Individual queries may remain fast and avoid slow-query alerts, while the accumulated network round trips increase request latency and hold connection-pool resources. It recommends monitoring queries per request and asserting query counts in tests. ### Source excerpt N+1 queries hide from monitoring because no individual query is slow. Four hundred queries at 0.4ms each never appear in the slow query log, never move p99 query latency, and still cost the request 300ms because the expense is the round trip rather than the execution. The metric that catches it is queries per request, and the only durable fix is asserting on that count in tests, since the code that causes it looks like a field access rather than I/O. ## How To Use Standard HTML Video & Audio Lazy-Loading on the Web Today DevFeed: [How To Use Standard HTML Video & Audio Lazy-Loading on the Web Today]() Original publisher: [Read original article]() Author: Scott Jehl Published: 2026-04-07T14:30:00Z Content type: tutorial Language: en Sources: [Squarespace](), [Squarespace Engineering Blog]() Topics: [HTML](), [lazy loading](), [web-standards](), [browsers](), [Web Development]() Tags: [audio](), [best-practices](), [browsers](), [gotchas](), [how-to](), [html](), [lazy-loading](), [video]() ### AI overview This tutorial explains how to use standard HTML video and audio lazy loading on websites. It covers recommended practices and common implementation pitfalls, noting that the feature is gaining support in major browsers. ### Source excerpt HTML video and audio lazy loading is now a web standard and quickly gaining support in all major browsers. Given Squarespace's role in proposing and implementing it, we're very excited to see how developers use it on the web. Let's cover some best practices for using video and audio lazy loading in any website, as well as some gotchas to avoid. ## Squarespace & Web Standards: How We Helped Bring HTML Video & Audio Lazy Loading to Today's Browsers DevFeed: [Squarespace & Web Standards: How We Helped Bring HTML Video & Audio Lazy Loading to Today's Browsers]() Original publisher: [Read original article]() Author: Scott Jehl Published: 2026-03-30T21:00:00Z Content type: article Language: en Sources: [Squarespace](), [Squarespace Engineering Blog]() Topics: [web-standards](), [lazy loading](), [HTML](), [Web platform](), [WebKit](), [Chromium](), [Google Chrome](), [Firefox]() Tags: [browsers](), [chrome](), [chromium](), [firefox](), [html](), [lazy-loading](), [standards](), [web-standards]() ### AI overview Squarespace engineers describe how they helped add lazy loading for HTML video and audio to the HTML Standard. They contributed proposed implementations for Firefox and WebKit, worked with Chromium developers on a Google Chrome implementation, and added automated testing. ### Source excerpt At Squarespace, many of our core products are built on web standards, and our engineers are constantly pushing the boundaries of the web's capabilities. Occasionally, those boundaries reveal a limitation: an opportunity for the web's native capabilities to grow. This post is the story of how we found such an opportunity to work with the standards community to improve the web in a way that we - and everyone who uses it - can benefit. ## React Router 7 Lazy Loading DevFeed: [React Router 7 Lazy Loading]() Original publisher: [Read original article]() Author: Robin Wieruch Published: 2025-01-06T05:52:51Z Content type: tutorial Language: en Sources: [Robin Wieruch]() Topics: [React Router](), [Tutorial](), [React](), [Optimization]() Tags: [code-splitting](), [lazy-loading](), [performance](), [react](), [react-router](), [react-router-7](), [react-router-lazy-loading](), [react-router-tutorial](), [tutorial]() ### AI overview This tutorial explains route-level lazy loading with React Router 7. It shows how splitting an application into smaller bundles can load only the code needed for a visited route, and demonstrates React.lazy, React Suspense, and @loadable/component. ### Source excerpt How to: React Router 7 Lazy Loading: code-splitting at route level helps you lazy-load just the things that are needed by the user, which dramatically improves the performance ... ## Announcing Inertia 2.0: Redefining Frontend Development for Laravel DevFeed: [Announcing Inertia 2.0: Redefining Frontend Development for Laravel]() Original publisher: [Read original article]() Author: Joe Tannenbaum Published: 2024-12-13T19:28:00Z Content type: release Language: en Sources: [Laravel Blog]() Topics: [Laravel](), [frontend development](), [Front end](), [Single-page application (SPA)](), [React](), [Svelte](), [Vue.js](), [Object-relational mapping](), [Routing (disambiguation)](), [Core Web Vitals]() Tags: [async](), [core-web-vitals](), [deferred](), [frontend-development](), [laravel](), [lazy-loading](), [orm](), [performance](), [react](), [release](), [routing](), [svelte](), [vue]() ### AI overview Inertia 2.0 is a stable release that adds asynchronous requests, deferred props, prefetching, and polling to Laravel frontend development. These features support more responsive applications while avoiding the complexity of maintaining a separate API. ### Source excerpt Inertia 2.0 brings powerful new features to Laravel frontend development including async requests, deferred props, prefetching, and polling. Learn how these improvements help you build faster, more responsive applications without the complexity of maintaining a separate API. ## Common Chunk and Lazy Loading in Angular DevFeed: [Common Chunk and Lazy Loading in Angular]() Original publisher: [Read original article]() Published: 2021-02-17T00:00:00Z Content type: tutorial Language: en Sources: [Juri Strumpflohner]() Topics: [Angular](), [Angular CLI](), [Webpack](), [configuration](), [modules]() Tags: [angular](), [config](), [lazy-loading](), [performance](), [webpack]() ### AI overview A tutorial explaining Angular lazy loading, the common.js chunk, and the Angular CLI's commonChunk configuration option. It describes how Angular Router and Webpack split JavaScript into on-demand chunks, why shared code is placed in a startup-loaded common chunk, and when disabling that behavior may improve startup speed at the cost of code duplication. ### Source excerpt Lorem ipsum dolor sit amet ## Why I migrated to the Fish Shell DevFeed: [Why I migrated to the Fish Shell]() Original publisher: [Read original article]() Author: Carlos Alexandro Becker Published: 2020-12-07T00:00:00Z Content type: opinion Language: en Sources: [Carlos Becker]() Topics: [friendly interactive shell](), [Shell](), [Zsh](), [Bash](), [dotfiles](), [Command-line interface](), [Environment Variables](), [lazy loading](), [Scripting]() Tags: [aliases](), [bash](), [environment-variables](), [lazy-loading](), [plugins](), [porting](), [prompt](), [scripting](), [shell](), [zsh]() ### AI overview The author explains migrating dotfiles from Zsh to Fish, emphasizing Fish's startup performance, universal variables, lazy loading, and built-in features such as syntax highlighting, autosuggestions, and man-page completions. The article also notes differences from POSIX shells and describes the author's plugin setup. ### Source excerpt Back in June, I started porting my dotfiles from ZSH to Fish. Here's why. ## Talk: Lazy Loading on Steroids with Angular Elements DevFeed: [Talk: Lazy Loading on Steroids with Angular Elements]() Original publisher: [Read original article]() Published: 2019-12-17T00:00:00Z Content type: article Language: en Sources: [Juri Strumpflohner]() Topics: [Angular]() Tags: [angular](), [angular-elements](), [js](), [lazy-loading](), [performance](), [talk](), [video]() ### AI overview A talk about lazy loading in Angular with Angular Elements, accompanied by a recording, slides, and a repository. ### Source excerpt Lorem ipsum dolor sit amet ## Lazy Loading with Angular Elements and ngx-lazy-el DevFeed: [Lazy Loading with Angular Elements and ngx-lazy-el]() Original publisher: [Read original article]() Published: 2019-11-06T00:00:00Z Content type: tutorial Language: en Sources: [Juri Strumpflohner]() Topics: [Angular](), [Angular CLI](), [JavaScript](), [Web Development]() Tags: [angular](), [angular-elements](), [chrome](), [ci](), [cli](), [es2015](), [firefox](), [lazy-loading](), [performance](), [web-performance]() ### AI overview A tutorial on reducing startup time in Angular web applications through lazy loading. It focuses on lazy loading non-routed components with Angular Elements and ngx-lazy-el, and also discusses differential loading, performance budgets, and router-based lazy loading. ### Source excerpt Lorem ipsum dolor sit amet ## Manually Lazy Load an Angular Module with ViewEngine and Ivy DevFeed: [Manually Lazy Load an Angular Module with ViewEngine and Ivy]() Original publisher: [Read original article]() Published: 2019-09-30T00:00:00Z Content type: tutorial Language: en Sources: [Juri Strumpflohner]() Topics: [Angular](), [Command-line interface](), [Webpack]() Tags: [angular](), [code-splitting](), [lazy-loading](), [webpack]() ### AI overview A tutorial on manually lazy-loading an Angular module in a way compatible with ViewEngine and Ivy. It explains Angular's router-based lazy loading, CLI and Webpack code splitting, dynamic loading syntax, and module instantiation. ### Source excerpt Lorem ipsum dolor sit amet ## Angular Performance: Preloading Lazy Routes DevFeed: [Angular Performance: Preloading Lazy Routes]() Original publisher: [Read original article]() Published: 2019-08-27T00:00:00Z Content type: tutorial Language: en Sources: [Juri Strumpflohner]() Topics: [Angular](), [Angular CLI](), [Development]() Tags: [angular](), [code-splitting](), [lazy-loading](), [library](), [modules](), [performance](), [route](), [videos]() ### AI overview A tutorial on preloading lazy routes in Angular. It covers preloading all lazy modules, defining a custom preloading strategy, and using ngx-quicklink to automatically load visible links. ### Source excerpt Lorem ipsum dolor sit amet ## Angular Performance: Route Level Code Splitting DevFeed: [Angular Performance: Route Level Code Splitting]() Original publisher: [Read original article]() Published: 2019-08-26T00:00:00Z Content type: tutorial Language: en Sources: [Juri Strumpflohner]() Topics: [Angular](), [Code](), [Development](), [Web]() Tags: [angular](), [cli](), [code](), [code-splitting](), [generate](), [implement](), [lazy-loading](), [load](), [metric](), [performance](), [route](), [time-to-interactive](), [videos]() ### AI overview This tutorial explains route-level code splitting and lazy loading in Angular. It connects loading only the minimum necessary application code to improving time to interactive, and mentions generating lazy routes with the Angular CLI. ### Source excerpt Lorem ipsum dolor sit amet ## Dynamically Load CSS with the Angular CLI DevFeed: [Dynamically Load CSS with the Angular CLI]() Original publisher: [Read original article]() Published: 2019-08-22T00:00:00Z Content type: tutorial Language: en Sources: [Juri Strumpflohner]() Topics: [Angular](), [Angular CLI](), [CSS](), [how to create smooth CSS transitions](), [modern web development](), [Web Development]() Tags: [angular](), [cli](), [css](), [development](), [lazy-loading](), [themes](), [tooling]() ### AI overview This tutorial explains how to configure the Angular CLI to produce separate CSS or Sass entry points and lazy load them at runtime. It describes using independent styles for themes or clients, preventing all styles from being included together, and adding the selected stylesheet dynamically through a link element. ### Source excerpt Lorem ipsum dolor sit amet ## Angular 8 and the Future - NGConf 2019 Roundup DevFeed: [Angular 8 and the Future - NGConf 2019 Roundup]() Original publisher: [Read original article]() Published: 2019-05-01T00:00:00Z Content type: opinion Language: en Sources: [Juri Strumpflohner]() Topics: [Angular](), [Angular CLI](), [Framework](), [Optimization](), [browsers](), [Chrome]() Tags: [angular](), [chrome](), [cli](), [feature](), [features](), [generators](), [lazy-loading](), [optimization](), [performance](), [techniques](), [videos](), [youtube]() ### AI overview A personal roundup of NGConf 2019 announcements focused on Angular 8, including its positioning as a platform, differential loading, and Angular CLI builders. The article says differential loading creates separate bundles for modern and legacy browsers, potentially reducing bundle size by about 7-20% without server-side infrastructure changes. ### Source excerpt Lorem ipsum dolor sit amet ## Lazy load Angular Components DevFeed: [Lazy load Angular Components]() Original publisher: [Read original article]() Published: 2019-04-29T00:00:00Z Content type: tutorial Language: en Sources: [Juri Strumpflohner]() Topics: [Angular](), [JavaScript](), [Single-page application (SPA)](), [TypeScript](), [Web Development](), [browser]() Tags: [angular](), [browser](), [javascript](), [lazy-loading](), [performance](), [typescript](), [videos]() ### AI overview This tutorial explains lazy loading for Angular components as a way to reduce initial JavaScript bundle size and improve startup performance in single-page applications. It describes deferring rarely used sections, such as a settings area, until they are needed and discusses loading them through separate JavaScript files, including approaches powered by Angular Elements. ### Source excerpt Lorem ipsum dolor sit amet ## How Twitch Addresses Scalability and Authentication DevFeed: [How Twitch Addresses Scalability and Authentication]() Original publisher: [Read original article]() Author: Eugene Pivovarov Published: 2019-03-15T19:13:30Z Content type: article Language: en Sources: [Twitch]() Topics: [Twitch](), [Authentication](), [OAuth 2.0](), [Scalability](), [JSON Web Tokens](), [API]() Tags: [api](), [authentication](), [engineering](), [identity-management](), [jwt](), [latency](), [lazy-loading](), [oauth-2-0](), [scalability](), [tls](), [twitch]() ### AI overview This article explains how Twitch's Identity team addressed authentication scalability and performance. It describes reducing login-form latency through prefetching and lazy loading, and reducing downstream validation workload by exchanging OAuth 2.0 access tokens for short-lived JWTs containing user information, scopes, and a digital signature. ### Source excerpt Curious how Twitch Identity services addresses scalability and performance challenges related to authentication? Last Tuesday, the Twitch Identity team -- which helps Twitch users create and manage their digital identity and owns the services that provide authentication, authorization, and user metadata management -- hosted a Meetup.com event to explain just that. But we're recapping here just for you! First challenge: Login form load The goal of authentication is to verify who the user is. In a typical login flow, the user supplies a password along with a username and the service validates the credentials. Login user interface The Twitch Login form used to load very slowly, as long as 10 seconds in some Asian and Pacific countries. The browser had to make a DNS request for the authentication backend, initiate a TLS connection to authentication service, make a request to load the page, and then make additional requests for more assets. Altogether, there were five round trips and over 150 KB of data transfer. To improve load latency, the team considered a few options: prefetching, connection reuse, inlining, and lazy loading. Ultimately, the solution relies mostly on prefetching by making the login modal part of the main page, but it employs lazy load for fetching heavy assets. As a result, the median load latency dropped as much as 20x from 4.1 sec to 0.2 sec. Second challenge: User session validation At the end of the login flow, the browser obtains a long-lived OAuth 2.0 access token and stores it in a cookie. This token is required for subsequent requests to the Twitch API and the corresponding downstream services. If each service had to validate the OAuth token directly against the token dispensary, the latter would need to handle calls from multiple services for every API request. To reduce the workload, the Identity team implemented an approach that employs self-contained JSON Web Tokens (JWT). Login and request flow In this approach, before forwarding the reque ## Learn Angular Router for Real-World Applications DevFeed: [Learn Angular Router for Real-World Applications]() Original publisher: [Read original article]() Published: 2018-12-05T00:00:00Z Content type: tutorial Language: en Sources: [Juri Strumpflohner]() Topics: [Angular](), [Routing (disambiguation)](), [App]() Tags: [angular](), [guards](), [lazy-loading](), [performance-tuning](), [router](), [rxjs](), [video]() ### AI overview An announcement for a two-part Egghead video course that teaches the Angular router, beginning with an approximately 60-minute introduction. The course covers routing concepts, route configuration, child routes, routing modules, URL segments, RxJS Observables, route guards, and lazy loading. ### Source excerpt Lorem ipsum dolor sit amet ## Lazy Loading with the Element API & VueJS DevFeed: [Lazy Loading with the Element API & VueJS]() Original publisher: [Read original article]() Author: andrew@nystudio107.com (Andrew Welch) Published: 2016-12-17T17:45:00Z Content type: tutorial Language: en Sources: [nystudio107 | Articles on modern web development.]() Topics: [lazy loading](), [Content Management System](), [vuejs](), [API](), [Front end]() Tags: [api](), [cms](), [cms-s](), [content](), [craft](), [display](), [element](), [frontend](), [here-s](), [insights](), [lazy](), [lazy-loading](), [load](), [vuejs]() ### AI overview A tutorial on using Craft CMS's Element API with VueJS to lazy-load additional blog entries and display them on a frontend. It explains how to create an API endpoint that returns paginated blog content, including titles, URLs, summaries, images, categories, and tags. ### Source excerpt Here's how to use Craft CMS's Element API to lazy load content and display it via VueJS on the frontend ## Lazy Angular Modules DevFeed: [Lazy Angular Modules]() Original publisher: [Read original article]() Published: 2014-07-20T00:00:00Z Content type: tutorial Language: en Sources: [Juri Strumpflohner]() Topics: [Angular](), [modules](), [Single-page application (SPA)](), [JavaScript](), [mvc]() Tags: [angular](), [guide](), [javascript](), [lazy-loading](), [modularization](), [modules](), [mvc]() ### AI overview This article examines lazy loading approaches for Angular modules and argues for organizing Angular applications by feature rather than by MVC folders. It discusses startup performance, modularization, maintainability, and examples from the Angular community. ### Source excerpt Lorem ipsum dolor sit amet ## Boot your ajax app: Creating a splash screen with NProgress DevFeed: [Boot your ajax app: Creating a splash screen with NProgress]() Original publisher: [Read original article]() Published: 2013-12-05T00:00:00Z Content type: tutorial Language: en Sources: [Juri Strumpflohner]() Topics: [Single-page application (SPA)](), [JavaScript](), [Ajax](), [Document Object Model (DOM)](), [Caching](), [Web Development]() Tags: [app](), [caching](), [code-splitting](), [javascript](), [lazy-loading](), [screen](), [splash-screen](), [user-experience]() ### AI overview This tutorial explains how to use a splash screen and NProgress while a single-page JavaScript application starts. It describes hiding the app container, showing a progress indicator, loading JavaScript, templates, and backend data, and revealing the application when loading is complete. It also cautions that optimizing startup with code splitting, lazy loading, caching, or server-side rendering is preferable to relying on progress bars. ### Source excerpt Lorem ipsum dolor sit amet ## WPF Explorer TreeView with SelectedPath binding DevFeed: [WPF Explorer TreeView with SelectedPath binding]() Original publisher: [Read original article]() Author: Andrew Khmylov Published: 2010-11-18T00:00:00Z Content type: tutorial Language: en Sources: [Despite the odds]() Topics: [WPF](), [Filesystems](), [lazy loading]() Tags: [build](), [file](), [lazy-loading]() ### AI overview This tutorial describes a custom WPF TreeView control for browsing file systems and exposing a SelectedPath property for two-way binding. It uses lazy loading to populate drives and subfolders, and synchronizes the TreeView selection with the selected path. ### Source excerpt While working on one of my projects, I had to implement a control for displaying file system. I found pretty good articles over the web ("A Simple WPF Explorer Tree" by Sacha Barber and some replies to it), but they were all about displaying folders. It was pretty easy to track currently selected folder, but there were some issues with its dynamic changes. So I decided to build my own control from scratch that will have some property like SelectedPath that will allow you to use TwoWay bindings to get and set selected folder at the tree. When user selects a node from the TreeView, text in the address bar is updated. When user enters address and clicks Update, TreeView selection gets updated. I have started with a simple CustomControl and inherited it from WPF TreeView: public class ExplorerTreeView: TreeView { public const string SelectedPathPropertyName = "SelectedPath"; public static readonly DependencyProperty SelectedPathProperty = DependencyProperty.Register( SelectedPathPropertyName, typeof (String), typeof (ExplorerTreeView)); public String SelectedPath { get { return (String) GetValue(SelectedPathProperty); } set { SetValue(SelectedPathProperty, value); } } } We will use some lazy-loading techniques to fill our TreeView with data. When control is loaded, it will display only drives on the user machine. Let's write a method for creating initial drive nodes: public void InitExplorer() { Items.Clear(); foreach (var drive in DriveInfo.GetDrives()) { Items.Add(GenerateDriveNode(drive)); } } private static TreeViewItem GenerateDriveNode(DriveInfo drive) { var item = new TreeViewItem { Tag = drive, Header = drive.ToString() }; item.Items.Add("*"); return item; } GenerateDriveNode method takes DriveInfo argument and builds TreeViewItem for it. Note that we are adding a dummy child node (the one with 'the star' header text). If we don't do this, then the user will not see a small button for expanding/collapsing for generated tree view item (it may look like '+' charac