Efficacy on 技術、遊戲、生活通俗易懂的解釋

Web Performance Monitoring 工具 Compared 2026

Wed, 08 Jul 2026 10:00:00 +0900

Why Lighthouse Is Not Enough

Lighthouse is an excellent diagnostic tool, but it only measures lab data, not real user experience. Standard practice in 2026 combines lab measurements with Real User Monitoring (RUM).

1. Web Vitals — Chrome UX Report and CrUX API

Google’s Chrome UX Report aggregates field data from real Chrome users. You can query it via API to analyze both your own and competitors’ sites.

const response = await fetch(
 'https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=YOUR_KEY',
 {
 method: 'POST',
 body: JSON.stringify({
 origin: 'https://example.com',
 metrics: ['largest_contentful_paint', 'cumulative_layout_shift']
 })
 }
);

2. Sentry Performance

Well-known for error monitoring, Sentry also offers robust performance tracing. It captures transactions end-to-end, from frontend to backend, with automatic instrumentation for React and Next.js. Setup takes minutes.

Isolating Layout Computations via CSS contain 正確的ty

Mon, 15 Jun 2026 00:00:00 +0900

The Rendering Cost of Dynamic Content

Every time the DOM changes, the browser must recompute styles, layout, and paint. For pages with many interactive widgets—chat feeds, stock tickers, infinite-scroll lists—these recalculations can ripple across the entire document, causing jank and dropped frames.

The CSS contain property tells the browser that a subtree is independent from the rest of the page. This enables the engine to skip global recalculations and treat the element as an isolated island.

使用 DNS 預取和預連線加速資產加載

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

介紹

每個外部資源（字體、腳本、映像、API 端點）都需要網路連線。 DNS 解析、TCP 握手和 TLS 協商的開銷可能會導致頁面載入時間增加數百毫秒。 資源提示如 dns-prefetch 和 preconnect 讓您告訴瀏覽器在實際需要資源之前提前執行這些步驟。

連接成本

建立 HTTPS 連線涉及多次往返：

步驟	延遲（大約）
DNS 查找	20-120 毫秒
TCP握手	1 個RTT
TLS 協商	2 即時傳輸時間
總計	3+ RTT

在 3G 連線（300 毫秒 RTT）上，傳輸任何資料之前需要近 1 秒的開銷。資源提示消除了大部分內容。

DNS 預取

dns-prefetch 提前解析網域：

<link rel="dns-prefetch" href="https://fonts.googleapis.com">

這會在瀏覽器仍在解析 HTML 的同時啟動網域的 DNS 查找。當瀏覽器遇到來自該來源的資源時，IP 位址已被快取。

何時使用： 簡單地引用外部網域。它是輕量級的－只有 DNS 解析，沒有開啟連線。

預連接

preconnect 更進一步：它執行 DNS 查找 + TCP 握手 + TLS 協商：

<link rel="preconnect" href="https://api.example.com" crossorigin>

使用 CORS 模式載入的資源（字體、取得請求等）需要 crossorigin 屬性。

Optimizing Web Font Loading: 預防ing 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:

React 編譯器：告別手動記憶

Sat, 10 Jan 2026 00:00:00 +0900

介紹

多年來，React 開發人員一直使用 useMemo、useCallback、React.memo 和各種狀態管理啟發式方法手動優化重新渲染。 React Compiler（以前稱為 React Forget）完全改變了這個範例。它是一個建置時工具，透過在編譯時分析反應依賴關係來自動記憶 React 元件、鉤子和值，從而無需手動最佳化鉤子。

手動記憶的問題

考慮一個典型的過濾列表元件：

function UserList({ users, filter }) {
 const filtered = useMemo(
 () => users.filter(u => u.name.includes(filter)),
 [users, filter]
 );

 const handleClick = useCallback((id) => {
 console.log('Clicked:', id);
 }, []);

 return (
 <ul>
 {filtered.map(user => (
 <UserRow key={user.id} user={user} onClick={handleClick} />
 ))}
 </ul>
 );
}

const UserRow = React.memo(({ user, onClick }) => (
 <li onClick={() => onClick(user.id)}>{user.name}</li>
));

這是可行的，但它很冗長，容易出錯（依賴項數組遺失或不正確），並且很容易忘記。大列表中缺少 useMemo 會導致不必要的重新渲染；不正確的依賴數組會導致陳舊的閉包。

什麼是 React 編譯器？

React Compiler 是一個建置時插件（Babel / SWC），可以自動理解 React 元件的反應性模型。它會自動轉譯您的程式碼以包含記憶邏輯：

優化瀏覽器渲染管道（關鍵路徑）

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

介紹

關鍵渲染路徑 (CRP) 是瀏覽器執行的將 HTML、CSS 和 JavaScript 轉換為螢幕上可見像素的步驟序列。優化此管道直接影響第一內容繪製 (FCP) 和 最大內容繪製 (LCP)。本文詳細介紹了每個 CRP 階段——DOM 構建、CSSOM 構建、渲染樹、佈局、繪製和合成——並提供了可行的最佳化策略。

第一階段：DOM 構建

當瀏覽器接收到 HTML 位元組時，它：

位元組→字元：將原始位元組解碼為字符
標記化：將字元轉換為標記（StartTag、EndTag 等）
Lexing：將令牌轉換為節點
DOM Tree：建立保留父子關係的節點樹

<!-- This HTML produces a DOM tree with html > head + body > h1 + p -->
<!DOCTYPE html>
<html>
<head><title>Page</title></head>
<body>
 <h1>Hello</h1>
 <p>World</p>
</body>
</html>

最佳化：最小化 HTML 大小，透過正確的伺服器配置儘早交付，並使用串流（例如 Transfer-Encoding: chunked）。

第 2 階段：CSSOM 構建

預設情況下，CSS 是渲染阻塞的。瀏覽器在渲染之前必須下載並解析所有CSS。 CSS 位元組與 HTML 經歷相同的轉換管道，產生 CSS 物件模型 (CSSOM)。

預防ing Cumulative Layout Shift with CSS aspect-ratio

Wed, 10 Dec 2025 00:00:00 +0900

Understanding Cumulative Layout Shift

Cumulative Layout Shift (CLS) is one of Google’s Core Web Vitals metrics that measures visual stability. It quantifies how often users experience unexpected layout shifts. A high CLS score harms user experience and SEO rankings. The primary cause? Media elements (images, videos, iframes) loading without reserved space.

How CSS aspect-ratio Works

The aspect-ratio CSS property lets you declare the ratio of width to height for any element. The browser reserves space accordingly, preventing the layout from jumping when content loads.

最大化 Docker Build Cache for Faster Deployment Pipelines

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

Whether you are trying to speed up 本地 iterative container runs or aiming to shave minutes off your CI/CD pipelines, optimizing your Docker image build speeds is a crucial aspect of engineering productivity. Long build wait times disrupt developer focus and drive up cloud computing costs.

One of the most powerful and easiest ways to optimize build speeds is by configuring Docker files to maximize the use of the Docker Build Cache.

使用 requestIdleCallback 執行非阻塞腳本

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

介紹

在建立複雜的 Web 應用程式時，保持流暢的動畫和響應式使用者輸入（理想情況下匹配 60+ FPS 幀速率）對於良好的使用者體驗至關重要。

然而，現代應用程式通常需要執行低優先順序的後台操作，例如發送分析資料、同步快取、解析遙測日誌或預取資產。

作為標準非同步承諾或立即計時器執行這些非緊急任務可能會阻塞主線程中幀，導致介面卡頓或增加下次繪製交互 (INP) 分數。

requestIdleCallback API 解決了這個問題。本文回顧了 API 的工作原理並分享了生產程式碼庫的實際用例。

1.什麼是requestIdleCallback？

requestIdleCallback 是一個本機瀏覽器 API，允許您對低優先權後台任務進行排隊，以便在瀏覽器空閒期間（主執行緒完成渲染更新並等待使用者輸入時的間隙）運行。

瀏覽器渲染週期

通常，瀏覽器會嘗試在單一畫面（大約 16.6 毫秒）內執行下列步驟：

[Single Frame (approx 16.6ms)]
 ├─► 1. Process user inputs (clicks, keypresses)
 ├─► 2. Execute active macro-tasks (setTimeout/setInterval)
 ├─► 3. Run requestAnimationFrame updates
 ├─► 4. Recalculate layout & paint pixels
 └─► 5. 【Browser Idle Period】 ◄── requestIdleCallback runs here!

如果瀏覽器提前完成渲染更新，它將使用剩餘時間來執行 requestIdleCallback 中排隊的任務。如果發生高優先權事件（例如按一下或觸控輸入），瀏覽器會立即將控制權交還給主渲染循環，以保持 UI 回應。

提升ing 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.

優化影像：WebP 與 AVIF 以及響應式尺寸

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

介紹

優化影像資源是提高 Lighthouse 分數和 LCP（最大內容繪製）等 Web 效能指標最有效的方法之一。

在許多 Web 應用程式中，圖像佔總負載大小的一半以上。緩慢的圖像載入時間直接降低了用戶體驗。

以 WebP 和 AVIF 等下一代格式取代 JPEG 和 PNG 等傳統格式已成為現代 Web 開發的標準做法。本文比較了這兩種格式，並解釋如何配置響應式、最佳化的影像傳輸。

1. 比較下一代格式：WebP 與 AVIF

與 JPEG 和 PNG 相比，下一代格式可以更有效地壓縮文件，同時保持視覺品質。

① 網頁版

WebP 由 Google 開發，是一種多功能圖像格式。

特點： 同時支援有損壓縮（替代JPEG）和無損壓縮（替代PNG）。它還支援 Alpha 通道透明度和動畫。
**壓縮：**與同等質量的 JPEG 相比，檔案大小減少 25% 到 30%。
支援： 幾乎所有現代網頁瀏覽器都支援，使其成為網頁圖像的事實上的標準。

② AVIF

AVIF 是一種基於 AV1 視訊編解碼器的開放、免版稅的影像格式。

特點： 提供比 WebP 更高的壓縮比，並支援廣色域和 HDR。它在處理漸變和詳細的攝影影像時表現良好，最大限度地減少了壓縮偽影。
**壓縮：**與同等 JPEG 相比，檔案大小減少 50% 或更多。
支援： Chrome、Firefox 和 Safari 等主流瀏覽器的支持，使其為生產環境做好準備。

2. 使用 HTML 元素進行後備交付

由於並非所有瀏覽器都支援 AVIF，因此建議的方法是提供後備鏈：如果支持，則提供 AVIF，秋季返回 WebP，並使用標準 JPEG 或 PNG 作為最終後備。

停止在 React 中過度使用 useMemo 和 useCallback

Fri, 20 Jun 2025 00:00:00 +0900

介紹

在最佳化 React 應用程式效能時，開發人員通常會使用 useMemo 和 useCallback。

人们很容易将每个对象和函数包装在这些钩子中，假设缓存输出将自动加速应用程序。然而，這是一個常見的誤解。

不必要的記憶不僅會使程式碼更難閱讀，而且還會使程式碼更難閱讀。它增加了淺依賴項比較和垃圾收集記憶體分配的效能開銷。

本文概述了這些鉤子有益的具體場景以及何時應避免它們。

1. 記憶的隱性成本

useMemo 和 useCallback 都不是自由操作。它們在每個渲染週期都會產生運行時成本：

依賴關係比較開銷： 在每次渲染時，React 必須淺比較（使用 Object.is）依賴項數組中的每個值。執行這些陣列檢查會增加 CPU 開銷。
記憶體保留： 保留對先前函數或計算值的參考可以防止它們被垃圾收集，從而增加應用程式的記憶體佔用。
複雜性與錯誤： 錯誤配置的依賴數組可能會導致陳舊的閉包，其中函數引用過時的狀態或道具。

2. useMemo 使用指南

僅在以下兩種情況下使用 useMemo：

場景 A：計算量大的任務

將其用於 CPU 密集型操作，例如對大型數組進行排序、過濾複雜資料集或運行繁重的映射操作。

推薦用例：

 // Memoize search calculations on large lists
 const filteredItems = useMemo(() => {
 return heavySearch(items, query);
 }, [items, query]);

場景 B：保留 React.memo 的物件引用

React 在每次渲染時重新實例化元件內部的物件聲明，更改它們的記憶體位址。

如果一個物件作為 prop 傳遞給使用 React.memo 最佳化的子元件，則子元件無論如何都會重新渲染，因為物件參考發生了變化。使用 useMemo 保持引用穩定。

推薦用例：

 // Stabilize the options object reference
 const options = useMemo(() => ({ color: themeColor }), [themeColor]);

 // Sibling components optimized with React.memo will not re-render unnecessarily
 return <HeavyChildComponent options={options} />;

3. useCallback使用指南

useCallback 的目的不是防止函數重新實例化，而是跨渲染保留函數的記憶體參考。

資料庫索引簡介：解決查詢延遲

Sun, 25 May 2025 00:00:00 +0900

介紹

隨著 Web 應用程式的擴展和資料量的成長，後端系統經常面臨查詢延遲等資料庫瓶頸問題。

在沒有適當索引優化的情況下，在具有數十萬筆記錄的表上執行聯接 (JOIN) 操作或複雜的搜尋查詢可能會導致資料庫 CPU 峰值，從而導致最終用戶的回應時間變慢。

設計資料庫索引是解決這些效能瓶頸的有效方法。本文解釋了資料庫索引的工作原理，詳細介紹了 B 樹結構，並分享了設計有效索引的指南。

1. 為什麼索引可以加快查詢速度？

將資料庫索引視為教科書後面的索引部分。

如果沒有索引，搜尋特定主題需要您掃描從開始到餘韻的每一頁。在資料庫中，這稱為全表掃描（All Table Scan）。隨著資料量的增加，這種線性掃描過程需要更長的時間。

透過在特定列上建立索引，資料庫以排序結構組織資料並記錄對實體行的參考（指標）。這使得查詢引擎可以快速找到目標記錄。

2. B 樹索引的機制

關聯式資料庫（如 MySQL 和 PostgreSQL）通常使用B-Tree（平衡樹）索引結構。

B 樹將鍵組織成由根節點、中間節點和葉節點組成的平衡樹佈局。

 [Root Node]
 / \
 [100] [200]
 / \ / \
 [...] [...] [...] [Leaf Nodes] -> References to physical rows

如何執行搜尋

搜尋查詢從頂級根節點開始。
查詢引擎將目標鍵值與節點值進行比較，以確定要遵循哪個子分支指標。
這個過程向下重複到葉節點，葉節點包含指向磁碟上實體行的指標（如 ROWID），允許引擎取得匹配的記錄。

好處： 無論表格成長多大，搜尋複雜度都會以 O(log N) 對數縮放。這使得查找時間變快，通常在幾毫秒內解析。

3. 設計資料庫索引的三個準則

雖然索引可以提高搜尋速度，但在每一列上建立索引會適得其反。每個寫入作業（INSERT、UPDATE、DELETE）都需要更新對應的索引結構，這會增加開銷，從而降低寫入效能。

使用這三個準則來決定何時建立索引：

準則 1：具有高基數的目標列（選擇性）

基數是指儲存在列中的唯一值的數量。

Approaches to Improving Interaction to Next 疼痛t (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 快取策略：最大化效能和新鮮度

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

介紹

內容交付網路 (CDN) 是現代 Web 效能的支柱。透過在全球分佈的邊緣節點快取內容，CDN 大大減少了延遲並卸載了來源伺服器的流量。然而，有效的快取並不僅僅是啟用 CDN 然後就忘記它的問題。在效能（高快取命中率和低延遲）與新鮮度（最小陳舊性和快速失效）之間取得適當的平衡需要深思熟慮的策略。

本指南探討了 CDN 快取基礎、快取控制指令、代理鍵、失效策略、重新驗證時過時、多層快取和監控，提供您現在可以應用的實用方法。

CDN 快取基礎知識

CDN 快取在邊緣節點儲存回應副本（存在積分或 POP），因此可以在不聯繫來源伺服器的情況下處理對相同資源的後續請求。 快取命中時，回應將在 5-50 毫秒內提供。當快取未命中時，請求將傳輸到來源，從而增加 100-500 毫秒的延遲。

CDN 快取各種內容：靜態資產（圖片、CSS、JavaScript、字型）、API 回應（JSON、GraphQL）、HTML 頁面和串流內容。快取層次結構通常遵循邊緣節點→地方快取→來源屏蔽→來源伺服器。

不同的 CDN 提供者有不同的快取理念和功能：

供應商	快取控制	代理鍵	起源之盾	SWR 支援
雲耀	完整	快取標籤	Argo 分層快取	是的
快點	完整	代理鍵	快速盾	是的
阿卡邁	完整	快取標籤	物業經理	是的
雲前	完整	—	起源之盾	是的

深度快取控制指令

Cache-Control 標頭是指示 CDN 和瀏覽器如何快取回應的主要機制。了解其指令對於微調行為至關重要。

max-age=<seconds> — 指定資源保持新鮮的時間。對於像 app.a1b2c3.js 這樣的版本化資產，請使用 immutable 指令設定 max-age=31536000。
s-maxage=<seconds> — 專門針對共用快取（CDN 和代理程式）覆寫 max-age，讓您可以為 CDN 與瀏覽器設定不同的 TTL。
public 與 private — public 允許透過 CDN 和瀏覽器進行快取； private 僅將快取限制在瀏覽器中，這對於特定於使用者的內容很重要。
no-cache 與 no-store — no-cache 允許緩存，但需要對每個請求重新驗證。 no-store 完全禁止快取。
stale-while-revalidate=<seconds> — 立即提供過時的內容，同時在背景取得新內容。
immutable — 告訴瀏覽器資源在其新鮮生命週期內永遠不會改變，從而消除了條件重新驗證。

以下是針對不同內容類型的實用秘訣：

Mobile Web Performance 優化: 2024 技巧

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.

Node.js 效能監控：重要的指標

Wed, 18 Dec 2024 00:00:00 +0900

Node.js 效能監控需要採用與傳統伺服器環境不同的方法。單線程事件循環、垃圾收集記憶體模型和非同步 I/O 創建了通用 CPU 和記憶體指標無法單獨捕獲的獨特故障模式。本文介紹了保持 Node.js 應用程式在生產環境中平穩運行所需的基本指標和工具。

為什麼 Node.js 效能監控有所不同

與多執行緒伺服器中緩慢的操作僅阻塞一個執行緒不同，Node.js 中的單一 CPU 密集型操作會阻塞整個事件循環，從而停止所有並發請求。垃圾收集暫停可能會導致不可預測的延遲高峰。常見的失敗模式包括事件循環飢餓、未清理的閉包導致的記憶體洩漏、回調抖動以及未處理的承諾拒絕默默吞下錯誤。了解這些特徵是有效監控的第一步。

事件循環滯後

事件循環延遲測量調度計時器回呼與其實際執行之間的延遲。這是 Node.js 進程最重要的健康指標。

const { monitorEventLoopDelay } = require("perf_hooks");
const histogram = monitorEventLoopDelay();
histogram.enable();

// In your health check endpoint:
setInterval(() => {
 const lag = histogram.mean / 1e6; // Convert nanoseconds to milliseconds
 histogram.reset();
 if (lag > 50) logger.warn({ eventLoopLag: lag }, "Event loop lag detected");
}, 10000);

滯後	解讀
< 10 毫秒	健康
10–50 毫秒	關於 — 調查
> 50 毫秒	關鍵－需要立即採取行動

常見原因包括同步 CPU 密集型操作、大負載上的過多 JSON 解析以及主執行緒中執行的資料庫查詢最佳化不佳。

垃圾收集指標

V8 的垃圾收集器分兩個階段運行：快速的清理（年輕代）和較慢的標記-清除-壓縮（老年代）。長時間或頻繁的 GC 暫停會直接影響 p99 延遲。

React 並發功能：建立響應式 UI

Fri, 06 Dec 2024 00:00:00 +0900

React 18 引入了並發功能，從根本上改變了渲染的工作方式。這些功能使 React 可以一次準備多個版本的 UI、中斷正在進行的工作，並優先考慮緊急更新而不是非緊急更新。結果是應用程式回應速度更快，而無需放棄使 React 高效的聲明式程式設計模型。

React 中的並發不是一種全有或全無的模式。與早期實驗版本中廢棄的「並發模式」概念不同，React 18+ 選擇加入並發功能。您可以逐一採用它們，因為它們可以提供最大的價值。底層 Fiber 架構使這成為可能：React 的渲染階段可以暫停和恢復，因此協調器可以隨著優先順序的變化在不同的工作單元之間切換。

使用轉換鉤子

useTransition 掛鉤可讓您將狀態更新標記為非緊急。這可以防止更新在關鍵用戶互動（例如打字）期間阻塞主執行緒。

import { useTransition } from "react";

function SearchPage() {
 const [isPending, startTransition] = useTransition();
 const [query, setQuery] = useState("");

 function handleChange(e) {
 // Urgent: update the input value immediately
 const value = e.target.value;
 setQuery(value);

 // Non-urgent: filter the large dataset
 startTransition(() => {
 setFilter(value);
 });
 }

 return (
 <div>
 <input value={query} onChange={handleChange} />
 {isPending && <Spinner />}
 <SearchResults filter={filter} />
 </div>
 );
}

isPending 標誌提供了一種在不阻塞 UI 的情況下顯示載入指示器的方法。當 React 正在進行轉換時，isPending 是 true，使用者可以繼續鍵入，因為轉換可能會被更緊急的狀態更新中斷。

WebAssembly for Browser 使用法s: Beyond the Hype

Sat, 30 Nov 2024 00:00:00 +0900

Introduction

WebAssembly has matured from a niche curiosity into a production-ready tool for browser-based applications. While early demos focused on gaming engines and scientific simulations, today Wasm is used in image editors, video transcoders, compression libraries, and cryptographic utilities — all running in the browser at near-native speed.

The key shift in 2024 is 生態系 maturity. WasmGC ships in Chrome 119+, SIMD is available across all major browsers, and reference types allow passing DOM nodes directly into Wasm modules. This article cuts through the hype to examine realistic use cases, compile-target decisions, memory management strategies, and integration patterns for production applications.

Third-Party Script 優化: 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 優化: 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 優化 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.

Node.js 工作執行緒：平行處理實踐

Tue, 23 Apr 2024 00:00:00 +0900

Node.js 傳統上是單線程的，並依賴非同步 I/O 來實現並發。雖然此模型擅長處理 I/O 密集型工作負載，但 CPU 密集型操作會阻止事件循環並降低應用程式回應能力。在 Node.js 12 中穩定的工作執行緒透過在單獨的 V8 隔離中執行 JavaScript 來在單一進程中提供真正的平行執行。本文介紹了在生產中使用工作執行緒的實用模式。

工人生命週期和溝通

建立工作執行緒需要一個單獨的 JavaScript 文件，該文件在自己的 V8 隔離中執行，並具有自己的堆和事件循環。

// main.js
const { Worker } = require("worker_threads");

const worker = new Worker("./worker.js", {
 workerData: { input: largeDataset },
});

worker.on("message", (result) => {
 logger.info({ result }, "Worker completed");
});

worker.on("error", (err) => {
 logger.error({ err }, "Worker failed");
});

worker.on("exit", (code) => {
 if (code !== 0) logger.error({ exitCode: code }, "Worker crashed");
});

// worker.js
const { parentPort, workerData } = require("worker_threads");
const result = processData(workerData.input);
parentPort.postMessage(result);

工作人員透過結構化克隆進行通信，該克隆支援物件、陣列、Map、Sets、RegExp、Date 和 ArrayBuffers。對於大型二進位數據，請使用可傳輸物件來避免複製開銷 - 來源緩衝區在傳輸後會被中和。

Next.js Image 優化: From 設定 to 進階 Patterns

Tue, 26 Mar 2024 00:00:00 +0900

Introduction

Images account for over 50% of total webpage bytes on average, making optimization essential for performance. Next.js provides a comprehensive image optimization pipeline through the next/image component and its built-in Image Optimization API. This article covers setup, configuration, and advanced patterns with a focus on Core Web Vitals impact.

The next/image Component

The next/image component extends the HTML <img> element with automatic optimization features: lazy loading, responsive srcset generation, width and height enforcement to prevent Cumulative Layout Shift, blur-up placeholders, and automatic format negotiation.

Core Web Vitals 優化: Complete 2024 指南

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.