Performance on Commentary of Takao

Speeding Up assets Loading using DNS-Prefetch and Preconnect

Wed, 15 Apr 2026 00:00:00 +0900

Introduction

Every external resource — fonts, scripts, images, API endpoints — requires a network connection. The overhead of DNS resolution, TCP handshake, and TLS negotiation can add hundreds of milliseconds to page load time. Resource hints like dns-prefetch and preconnect let you tell the browser to perform these steps in advance, before the resource is actually needed.

The Cost of Connection

Establishing an HTTPS connection involves multiple round trips:

Step	Latency (approx.)
DNS lookup	20-120 ms
TCP handshake	1 RTT
TLS negotiation	2 RTT
Total	3+ RTT

On a 3G connection (300ms RTT), that’s nearly 1 second of overhead before any data is transferred. Resource hints eliminate most of this.

Optimizing Web Font Loading: Preventing FOUT and FOIT

Sun, 15 Mar 2026 00:00:00 +0900

Introduction

Web fonts enhance design but come at a cost. While a custom font loads, browsers must decide: show invisible text (FOIT — Flash of Invisible Text) or show a fallback font (FOUT — Flash of Unstyled Text). Either choice impacts CLS (Cumulative Layout Shift) and user experience. This article covers strategies to load fonts reliably while minimizing layout shifts.

The font-display Descriptor

The font-display property in @font-face controls how a font is displayed during loading:

Optimizing Browser Rendering Pipelines (Critical Path)

Sat, 20 Dec 2025 00:00:00 +0900

Introduction

The Critical Rendering Path (CRP) is the sequence of steps the browser performs to convert HTML, CSS, and JavaScript into visible pixels on the screen. Optimizing this pipeline directly impacts First Contentful Paint (FCP) and Largest Contentful Paint (LCP). This article breaks down each CRP stage — DOM construction, CSSOM construction, render tree, layout, paint, and composite — and provides actionable optimization strategies.

Stage 1: DOM Construction

When the browser receives HTML bytes, it:

Executing Non-Blocking Scripts with requestIdleCallback

Fri, 25 Jul 2025 00:00:00 +0900

Introduction

When building complex web applications, maintaining smooth animations and responsive user inputs (ideally matching 60+ FPS frame rates) is essential for a good user experience.

However, modern applications often require executing low-priority background operations—such as sending analytics data, syncing caches, parsing telemetry logs, or pre-fetching assets.

Executing these non-urgent tasks as standard async promises or immediate timers can block the main thread mid-frame, causing interface jank or increasing your Interaction to Next Paint (INP) score.

Boosting Initial Page Speeds with Lazy-Loaded Frames and Images

Sun, 20 Jul 2025 00:00:00 +0900

Introduction

An effective but frequently overlooked strategy for optimizing web page speeds is deferring off-screen asset loading.

By default, when a user loads a web page, the browser immediately requests all images and <iframe> elements (like YouTube embeds, interactive maps, social widgets, or advertising scripts) on the page, even if they are located far below the fold. This concurrent downloading blocks the main thread and slows down your page’s First Contentful Paint (FCP) time.

Optimizing Images: WebP vs. AVIF and Responsive Sizes

Tue, 15 Jul 2025 00:00:00 +0900

Introduction

Optimizing image assets is one of the most effective ways to improve web performance metrics like Lighthouse scores and LCP (Largest Contentful Paint).

In many web applications, images make up more than half of the total payload size. Slow image loading times directly degrade user experience.

Replacing legacy formats like JPEG and PNG with next-generation formats like WebP and AVIF has become standard practice in modern web development. This article compares these two formats and explains how to configure responsive, optimized image delivery.

Approaches to Improving Interaction to Next Paint (INP)

Sat, 15 Mar 2025 00:00:00 +0900

Introduction

In Google’s Core Web Vitals metrics, which measure the user experience of web pages, FID (First Input Delay) has officially been replaced by INP (Interaction to Next Paint).

While FID only measured the response speed of the very first user interaction, INP evaluates the responsiveness of all clicks, taps, and keyboard inputs across the entire lifecycle of the page visit. It logs the delay between an interaction and the subsequent visual update (the “Next Paint”).

CDN Caching Strategies: Maximize Performance and Freshness

Mon, 30 Dec 2024 00:00:00 +0900

Introduction

Content Delivery Networks (CDNs) are the backbone of modern web performance. By caching content at edge nodes distributed globally, CDNs dramatically reduce latency and offload traffic from origin servers. However, effective caching is not simply a matter of enabling a CDN and forgetting about it. Striking the right balance between performance — high cache hit rates and low latency — and freshness — minimal staleness and fast invalidation — requires deliberate strategy.

Mobile Web Performance Optimization: 2024 Techniques

Thu, 26 Dec 2024 00:00:00 +0900

Introduction

Mobile web performance is no longer a secondary concern. With mobile traffic accounting for over 60% of global web traffic and growing rapidly in emerging markets, the performance characteristics of your site on mobile devices directly impact user retention, conversion, and search rankings. Users expect fast, fluid experiences — 53% abandon sites that take longer than 3 seconds to load. This article covers the key techniques for optimizing mobile web performance in 2024, from network-aware loading to touch event optimization and Core Web Vitals.

Third-Party Script Optimization: Taming Page Bloat

Tue, 19 Nov 2024 00:00:00 +0900

Introduction

Third-party scripts are the hidden tax of modern web development. The average page loads 15–25 third-party requests, accounting for 60–80% of total page weight. Data from the HTTP Archive confirms that third-party JavaScript is growing faster than first-party code. Each external script adds network latency, parse and compile time, main-thread contention, and potential security risks. The good news: you can optimize third-party scripts without removing their functionality. The goal is to minimize performance impact while preserving business value.

JavaScript Bundle Size Optimization: From Analysis to Action

Tue, 22 Oct 2024 00:00:00 +0900

JavaScript bundle size directly impacts user experience. Larger bundles mean longer download times, slower parsing and compilation, and worse Core Web Vitals. A 100KB increase in JavaScript reduces conversion rates by 2 to 3 percent. Bundle optimization is an ongoing investment, not a one-time fix, and follows a cycle of analysis, identification, optimization, and monitoring.

Bundle Analysis Tools

Understanding what is in your bundle is the first step. webpack-bundle-analyzer provides an interactive treemap visualization that highlights large dependencies and duplicate modules. Vite users can leverage rollup-plugin-visualizer with sunburst and network graphs, while esbuild offers the –metafile flag for detailed output analysis. source-map-explorer maps compiled code back to source files.

Image Optimization Strategies 2024: AVIF, WebP, and Beyond

Tue, 02 Jul 2024 00:00:00 +0900

Introduction

Images account for over half of the typical webpage’s total weight. As web applications grow more visual, optimizing image delivery has become critical for performance, user experience, and Core Web Vitals scores. This article explores modern image optimization strategies, from next-generation formats to responsive delivery techniques.

Image Formats in 2024

The image format landscape has shifted dramatically. Three modern formats now compete for dominance alongside legacy JPEG and PNG.

Core Web Vitals Optimization: Complete 2024 Guide

Mon, 15 Jan 2024 00:00:00 +0900

Core Web Vitals (CWV) are the set of user-centric performance metrics that Google uses to measure real-world experience on the web. In March 2024, Google replaced First Input Delay (FID) with Interaction to Next Paint (INP), making it critical to understand all three metrics: Largest Contentful Paint (LCP), INP, and Cumulative Layout Shift (CLS). This guide covers every aspect of optimizing your site for good CWV scores.

Understanding Core Web Vitals in 2024

The three CWV metrics measure distinct aspects of user experience. LCP tracks loading performance — how quickly the main content appears. INP measures interactivity — how responsive the page feels when users click, tap, or type. CLS quantifies visual stability — how much the layout shifts unexpectedly during load.