This article walks developers through setting up Lighthouse to evaluate Thorium’s web performance, explains the benchmark scores, and provides concrete GN and V8 configuration tweaks, media‑codec settings, and JavaScript optimizations to achieve higher Lighthouse ratings.
This guide explains why static‑dynamic separation is essential for high‑traffic sites, describes the typical Nginx architecture, and provides a complete configuration example that routes static assets directly while proxying dynamic requests to backend servers with load‑balancing and caching.
This guide explains how to detect when a user leaves a web page using modern APIs like Page Visibility, beforeunload/unload, sendBeacon, and pagehide, compares their advantages and drawbacks, provides code snippets, and offers practical recommendations for reliable data reporting and UI handling.
This article explains the principle of Nginx static‑dynamic separation, describes its layered architecture, request routing flow, and key optimization techniques such as caching, compression, load balancing, security limits, and monitoring to dramatically improve overall system performance.
This article examines the security risks, synchronous blocking, size limits, and query shortcomings of localStorage, then shows how IndexedDB’s asynchronous API, larger storage capacity, stronger security model, and advanced indexing make it the superior choice for modern web applications.
Despite widespread browser and CDN support for HTTP/3, most developers still struggle to deploy it end‑to‑end because of missing QUIC implementations in language runtimes, fragmented open‑source tooling, and compatibility issues with core libraries like OpenSSL.
This article details how to configure Nginx to separate static assets from dynamic requests, using dedicated static servers and reverse‑proxying dynamic traffic to application servers, thereby improving web performance up to three times while simplifying architecture and caching strategies.
This article explains how to configure Nginx for high‑performance static sites by setting up effective browser caching, enabling gzip compression, handling CORS headers, and preventing hotlinking, complete with code examples, header details, and step‑by‑step principles.
This article explains the native visibilitychange event of the Page Visibility API, its core properties document.hidden and document.visibilityState, provides complete JavaScript examples for listening and removing the event, discusses practical use cases such as media control, request throttling, form saving, outlines browser compatibility, and highlights limitations and best‑practice considerations.
While localStorage has long been the default client‑side storage for web apps, its security risks, synchronous blocking, limited capacity, and lack of advanced querying make it unsuitable for modern applications, and IndexedDB emerges as a superior, asynchronous, high‑capacity, secure, and query‑rich alternative, especially when paired with helper libraries like idb, Dexie.js, and localForage.
This guide explains the concepts, response headers, Nginx configuration examples, behaviors, and best‑practice strategies for both strong (max‑age) and negotiated (ETag/Last‑Modified) caching, helping you improve web performance and significantly reduce server load.
Understanding when users leave or hide a page is crucial for UX, analytics, and performance; this guide explains the Page Visibility API, beforeunload/unload events, the sendBeacon method, and pagehide/pageshow handling, offering code examples and best‑practice recommendations for reliable detection and data reporting.
This article explains the concept of Nginx static‑dynamic separation, shows how to configure Nginx to serve static files directly while proxying dynamic requests to backend servers, and includes a sample configuration with code snippets, plus a call‑to‑action for additional architecture resources.
This article examines the security, performance, and capacity limitations of localStorage and explains how IndexedDB offers asynchronous operations, larger storage, stronger security, and advanced query capabilities, while also recommending helper libraries to simplify its use.
The article explains how React has evolved from class components to hooks and now to React Server Components (RSC), detailing their architecture, server‑vs‑client responsibilities, performance benefits, developer experience improvements, and practical usage with Next.js.
Mike Chen explains how Nginx static‑dynamic separation works, detailing the concept, benefits, and a complete configuration that routes static files directly while proxying dynamic requests to an application server, thereby boosting response speed, resource utilization, and overall website performance.
This article details how test development engineers tackled CDN stability challenges by implementing a dual overseas architecture, automated backend interface validation, and a data‑driven front‑end image detection pipeline, achieving an 80% efficiency gain and minute‑level issue detection.
Understanding how to determine whether a user has left or hidden a web page—covering the Page Visibility API, beforeunload/unload events, navigator.sendBeacon, and pagehide/pageshow—enables developers to improve UX, pause resources, and reliably report analytics without sacrificing performance.
This guide walks you through four practical Apache optimizations—web compression, caching, hotlink protection, and version information hiding—explaining why they matter, how to configure them with step‑by‑step commands, and the measurable performance and security benefits they deliver.
This article traces the evolution from HTTP/1.1 to HTTP/3, explains QUIC's design and its advantages over TCP, and examines how features like connection migration, head‑of‑line blocking elimination, congestion control, and flow control improve latency and reliability for modern web applications.
This article explains the concepts, response headers, Nginx configuration examples, behavior, and suitable scenarios for both strong (expires‑based) and conditional (ETag/Last‑Modified) caching, compares their differences, and offers best‑practice tips and debugging tools to boost web performance.
This article explains the concept of static‑dynamic separation in web architecture, outlines its performance and maintenance benefits, and provides detailed Nginx configuration examples—including location blocks for static assets, API proxying, and fallback routing—to illustrate how to implement the technique effectively.
This article explains how Nginx static‑and‑dynamic separation works, why it dramatically improves response speed and concurrency, and provides complete configuration examples for serving static assets, proxying dynamic requests, and integrating caching, CDN and load‑balancing for optimal web performance.
This guide explains how to activate gzip compression in Nginx, configure its compression level, buffer size, and minimum file size, and apply it to both static and dynamic responses, providing step‑by‑step examples to improve web performance.
This guide explains the concepts of strong (expires‑based) and weak (validation‑based) HTTP caching, details the relevant response headers, provides Nginx configuration examples for each strategy, compares their behaviors and suitable use cases, and offers best‑practice tips and debugging tools to improve website performance.
This article explains how to configure Nginx for high‑performance static websites by setting up proper caching, gzip compression, cross‑origin resource sharing and anti‑hotlinking rules, and also includes a brief promotional segment for AI‑related products and services.
This article examines video preloading techniques for web pages, comparing the HTML5 video element's preload attribute with Media Source Extensions (MSE) chunked streaming, detailing their configurations, loading processes, implementation steps, advantages, drawbacks, and best-use scenarios to improve playback experience.
During performance tuning of Alibaba.com’s PC new‑user homepage, the Time To First Byte became acceptable while the First Contentful Paint remained 3 seconds slower, revealing that CSS download and parsing blocked rendering and that inlining critical CSS dramatically reduced FCP latency.
This article explains how to use Service Workers to apply a Stale‑While‑Revalidate caching strategy, detailing the three‑step process, essential APIs, code examples for intercepting and cloning responses, and a complete Express‑based demo to improve first‑visit page performance.
This guide explains why compressing HTTP responses with Nginx gzip improves user experience and reduces bandwidth costs, details the key gzip and gzip_static directives, offers practical tips on settings, and highlights common pitfalls when configuring compression in multi‑proxy production environments.
This guide explains how to install Locust, write a Python test script, launch the tool, configure load parameters, analyze real‑time results, and explore advanced features such as custom clients and distributed testing for web performance evaluation.
Despite long‑standing criticism that PHP is outdated, slow, and cumbersome, the article explains why the language still matters and how FrankenPHP—a Go‑based server—injects modern performance, deployment simplicity, and future‑ready features to revitalize PHP for contemporary web development.
This article explains why web‑application speed is critical, presents ten concrete NGINX‑based techniques—including reverse proxy, load balancing, caching, compression, SSL/TLS tuning, HTTP/2, software updates, Linux and server tuning, and real‑time monitoring—to achieve up to ten‑fold performance gains.
This article explains how a motion‑effects platform decouples design and development by automatically converting sequence‑frame animations into multiple formats (APNG, WEBP, AVIF, video), provides a runtime that dynamically selects the optimal format, and offers batch conversion APIs to improve performance and reduce engineering overhead.
A 2024 analysis by Nikita Prokopov of uncompressed JavaScript file sizes across a range of popular websites shows sizes varying from a tiny 0.1 MB for jQuery to over 12 MB for heavyweight platforms like YouTube and Booking.com, highlighting the diversity of front‑end payloads.
This article explains how to configure Nginx for static sites by setting up caching policies, gzip compression, cross‑origin resource sharing, and anti‑hotlinking rules, while also providing practical code examples and discussing the underlying HTTP cache mechanisms.
This article explores a range of web preloading techniques—including DNS‑prefetch, preconnect, preload, prefetch, prerender, the Speculation Rules API, streaming rendering, HTTP/2 push, and Early Hints—detailing how they reduce network latency, improve first‑paint times, and enhance overall user experience.
After initially adopting Tailwind CSS for rapid UI development in a React real‑time chat app, our team reverted to SASS combined with CSS Modules because the growing utility‑class markup hurt readability, increased build times, and bloated the CSS bundle, ultimately delivering a more maintainable codebase and noticeably better performance.
This article explains how to configure Nginx for high‑performance static sites by setting up proper caching rules, enabling gzip compression, handling cross‑origin requests, and preventing hotlinking, complete with practical code examples and detailed workflow analysis.
Learn step-by-step how to activate gzip compression in Nginx, configure compression level, buffer size, minimum file size, and proxy settings, and understand the impact of each directive on bandwidth reduction and page load speed for both static and dynamic content.
This article explores why Large Contentful Paint (LCP) often lags behind overall performance scores, explains how to measure LCP using ProductionObserver and web‑vitals, and presents a detailed case study with code snippets and actionable strategies to reduce LCP below 2.5 seconds.
This comprehensive guide explains how to identify and resolve slow web page performance by addressing hardware resources, network configuration, and both front‑end and back‑end optimizations such as server upgrades, CDN usage, HTTP/2, image compression, code minification, caching, and efficient database queries.
This comprehensive guide explains hardware, frontend, and backend optimization techniques—including server upgrades, CDN usage, code minification, caching strategies, and database tuning—to systematically improve website speed and maintain high performance.
Airbnb tracks five real‑user performance metrics—Time To First Contentful Paint, Time To First Meaningful Paint, First Input Delay, Total Blocking Time, and Cumulative Layout Shift—using a mix of browser APIs and custom polyfills, combines them into a weighted Page Performance Score, and leverages that score to guide trade‑off decisions and detect regressions.
Optimizing images is crucial for e‑commerce web performance, and this guide explores practical methods such as early loading of above‑the‑fold images, reducing image size through compression, format selection, responsive delivery, lazy loading, and modern browser features like fetch‑priority and content‑visibility to improve LCP and overall user experience.
This article explains how OpenResty combines Nginx and Lua to deliver a high‑performance, non‑blocking web platform, covering its architecture, Lua scripting model, efficient coroutine handling, LuaJIT advantages, step‑by‑step installation, systemd service setup, and practical code examples.
Airbnb created the Page Performance Score (PPS), a unified 0‑100 metric that aggregates platform‑specific initial‑load and post‑load user‑centric measurements for Web, iOS, and Android, using weighted curves to enable cross‑page, cross‑team comparisons, track organizational weighted averages, and evolve with new metrics while preserving a stable scale.
This guide explains how to enable and fine‑tune gzip compression in Nginx, covering activation, compression level, buffer size, minimum file size, and proxy settings, so you can reduce payloads, speed up page loads, and improve overall web performance.
This article explores critical latency metrics—from nanosecond-level CPU operations to intercontinental network delays—illustrating how each contributes to web performance, and provides real‑world measurements for various connection types, data processing tasks, and user‑perceived response times to help developers optimize user experience.
Content Delivery Networks (CDNs) distribute cached content across edge servers to accelerate website access, reduce origin server load, enhance security, provide global coverage, and ensure high availability, while also addressing dynamic resource challenges through routing, protocol, pre‑caching, and compression optimizations.
This curated roundup highlights recent technical resources—including React Compiler, Deno's JSX migration, Node v22.2.0, image loading optimizations, short‑URL generation, hooks ref handling, HTTP proxy solutions, and notification system design—to keep developers up‑to‑date with modern web development practices.
This article explains the fundamentals of HTTP caching, including how it works, the different cache types, key cache-control directives, and the testing scenarios where testers must be aware of cache behavior to ensure performance, data consistency, and security.
This article explains why Lighthouse removed the Time to Interactive (TTI) metric after version 10, describes how TTI was calculated, discusses its inaccuracies, and introduces the more reliable replacement metrics such as Total Blocking Time (TBT), First Input Delay (FID) and Interaction to Next Paint (INP) for assessing web performance.
Google’s newly released Jpegli library offers a backward‑compatible JPEG encoder with up to 35% better compression, adaptive quantization, 10‑bit support and speed comparable to traditional codecs, promising faster web pages and reduced bandwidth without sacrificing image quality.
This article explains what latency is, how it occurs in web interactions, the main factors that contribute to it, common tools for measuring it, and a set of practical optimization techniques such as HTTP/2, CDN usage, caching, and efficient coding practices.
A 2024 survey of uncompressed JavaScript bundle sizes across various popular websites reveals that many sites far exceed the expected 1‑5 MB range, with static sites like Wikipedia at just 0.2 MB and multimedia giants like YouTube reaching 12 MB, highlighting the wide performance spectrum in modern web development.
Google has removed the 'Cache' link from its search results, ending direct access to cached page snapshots, while still allowing cache retrieval via the 'cache:' operator, and cites improved page load speeds and similar moves by competitors like Baidu as reasons.
This article explains how Content Delivery Networks (CDNs) address internet performance challenges by bringing content closer to users, detailing their working principles, key components such as GSLB and caching, and common application scenarios like website acceleration, file download, and streaming.
To address fragmented TV OS versions, low‑end hardware, and SDK fragmentation, the Kiwi App team defined unified performance metrics and applied optimizations—resource merging, server‑side rendering, offline caching, HTTP/2 networking, parallel loading, WebView pre‑heating, and page pre‑rendering—cutting average H5 load time from over five seconds to about two seconds and increasing conversion and payment success rates, with plans to keep loads under two seconds.
This article explains why browsers cancel pending requests during navigation, the risks of lost data, and demonstrates reliable solutions using JavaScript—first by awaiting fetch, then leveraging the fetch keepalive option—to guarantee logs reach the server without delaying page loads.
This article explains the INP (Interaction to Next Paint) performance metric, its calculation method, satisfaction thresholds, differences from FID, and provides practical guidance on measuring INP using Chrome's CrUX, PageSpeed Insights, the web‑vitals library, Chrome extensions, and custom console scripts.
The article explains how modern browsers let developers actively control resource loading order with Priority Hints and the fetchpriority attribute—using preload links, fetch requests, image tags, and script tags—to boost performance on limited bandwidth, while warning against overuse.
This article explains the background, definition, calculation methods, measurement techniques, and practical optimization strategies for Cumulative Layout Shift (CLS), a key web‑performance metric, and provides JavaScript code examples for tracking and reporting CLS values.
This article explains the fundamentals of Memcache in PHP, covering its purpose as an in‑memory cache, how to connect, store, retrieve, delete, increment, decrement, and flush data, along with important considerations such as data types, memory limits, server failures, and multi‑server sharing.
This article explains what the Back‑Forward Cache (bfcache) is, how it works across browsers, the page lifecycle events involved, common pitfalls that prevent caching, and practical testing methods to ensure optimal front‑end performance.
This article explains why web performance matters, introduces key user‑centric metrics such as First Contentful Paint, Largest Contentful Paint and Cumulative Layout Shift, describes how to measure them with tools like Chrome DevTools, Lighthouse and ftwo, and provides practical optimization techniques including gzip, HTTP/2, CDN, image handling, code splitting and Vue router lazy‑loading.
This article demonstrates how to accelerate website image loading by applying PHP‑FPM performance optimizations such as image compression with GD, jQuery lazy loading, CDN acceleration, multithreaded parallel fetching, and proper browser‑cache headers, providing complete code examples for each technique.
Font2svg converts large font glyphs into on‑demand SVG paths using Python’s freetype‑py and svgpathtools, dramatically shrinking download size, speeding page loads, and improving user experience, with CDN‑served SVGs, a lightweight front‑end injector, and graceful fallback, as demonstrated by a 98 % size reduction in a Bilibili case study.
The article explains modern pre‑rendering techniques—historical prefetched and prerendered links, Chrome’s new predictive full‑page rendering, and the Speculation Rules API that lets developers declaratively or dynamically specify prefetch and prerender JSON rules, while noting same‑origin limits, debugging tools, and performance benefits for Core Web Vitals.
This article introduces the Islands Architecture concept, explains how Astro implements a zero‑JS front‑end by rendering static HTML and selectively hydrating interactive UI components as independent islands, and compares it with traditional SSR and SPA approaches while providing practical code examples.
The article describes how to build an H5 page Experience Checkpoint service that automatically runs headless‑browser scripts to detect critical (P0) and potential (P1) UX issues—such as large media, privacy leaks, or slow APIs—by integrating data providers, page inspectors, and reporters into an existing inspection system, exposing a task‑creation API, and delivering detailed HTML reports via Feishu.
This article explains the AVIF image format, its superior compression and quality compared to JPEG and WebP, provides a detailed comparison of image formats, offers conversion tools and command‑line examples, and shows how to integrate AVIF on the client, server, and via JavaScript polyfills for modern web development.
This article explains the fundamentals of HTTP caching, covering the structure of HTTP messages, the two main cache strategies—strong caching and validation caching—the relevant response headers such as Expires, Cache-Control, Last-Modified, and ETag, and provides practical guidelines for effective cache implementation in web development.
OpenResty combines Nginx and Lua to create a high‑performance, scalable web platform that lets developers write Lua scripts for handling HTTP requests and backend services, offering non‑blocking I/O, coroutine support, and built‑in modules for databases and caches.
BBC found that each extra second of load time cuts users by 10%, so they adopted server‑side rendering to boost first‑screen performance on low‑end devices, accepting higher server load and longer white‑screen time, choosing the stable Rax solution over ICE 3.0, and emphasizing selective use, streaming HTML, and careful migration guidelines.
PerformanceObserver, part of the W3C Performance Timeline API, enables developers to efficiently monitor key web performance metrics such as FP, FCP, LCP, CLS, and FID without polling, and the article explains its background, usage, methods, code examples, related PerformanceEntry types, and browser compatibility.
This article explains how to design and implement a comprehensive front‑end monitoring solution that captures errors, performance metrics, and client data, covering data collection, tracing, transmission, storage, and analysis to help developers quickly locate and resolve issues.
This newsletter issue teaches frontend developers how to simplify TypeScript typings with mapped and index types, extend Chrome Lighthouse by adding custom gatherers and audits for static resources, and effectively use React portals for modals and other UI elements while handling events and styling correctly.
This article examines how different React rendering strategies—client‑side rendering, server‑side rendering, and the new React 18 Streaming SSR—affect key web performance metrics such as TTI, FCP, and first‑paint, and demonstrates substantial latency reductions achieved through streaming and selective hydration.
This article explains Chromium's Prerender2.0—its reintroduction in M94, the underlying MPArch multi‑page architecture, the Speculation Rules API usage, activation detection methods, detailed implementation flow in M97, and practical scenarios for safely applying prerender to improve web performance.
This article explains the fundamentals of HTTP caching, covering request/response structures, strong and validation cache rules, header directives like Expires and Cache-Control, and practical tips for implementing effective caching strategies in front‑end development.
This article explains the key features of HTTP/2, the performance and security enhancements of TLS 1.3, the benefits of ECC over RSA, Brotli compression, and provides step‑by‑step Nginx configuration snippets to enable these technologies in production environments.
The guide explains how to implement Server‑Side Rendering in a Rax‑based e‑commerce car platform, replacing client‑side rendering to fix white‑screen and performance issues by simulating the browser environment with jsdom, handling data requests, null API fields, and auto‑closing tag discrepancies, while outlining architecture, middleware, and future CSR‑SSR integration.
This article explains how browsers handle TCP connections and SSL sessions when loading pages with many images, covering connection persistence, request multiplexing, HTTP pipelining limitations, per‑host connection limits, and the advantages of HTTP/2 multiplexing for efficient resource fetching.
HTTP/2 introduces a binary framing layer, multiplexed streams, header compression, and server push, replacing the limitations of HTTP/1.x by enabling a single TCP connection to carry multiple concurrent requests, reducing latency, improving bandwidth usage, and simplifying web development, while also presenting new debugging challenges.
Content Delivery Networks (CDNs) add a caching layer to the Internet, placing content on edge nodes near users to reduce latency, alleviate bandwidth constraints, and improve response speed, with DNS-based smart routing, cache servers, and load balancing forming the core of their operation.
This article explains what Lighthouse is, how to run it via Chrome extensions, DevTools, CLI or Node.js, details its internal architecture, driver and pass configuration, gatherer and trace processing, and shows how audits generate performance reports with scoring based on HTTP Archive data.
This article explains the key web performance indicators such as FP, FCP, LCP, TTI, TBT, FID, CLS, how to obtain them using the Performance API and PerformanceObserver, and provides step‑by‑step guidance on configuring Sentry for automated performance monitoring, including sample JavaScript code for custom calculations.
This article explains the TCP slow‑start algorithm, how its initial 10‑packet window translates to a practical 14 KB rule for web pages, and why keeping the first‑byte payload under this size dramatically reduces latency across various network conditions.
This article examines the unique technical hurdles of video‑conference RTC—such as free mic control, flexible layouts, screen sharing, weak networks, diverse devices and poor lighting—and outlines the edge‑rendering, smart encoding, multi‑level simulcast and reliable signaling solutions we’ve built to tackle them.
The Qingtian framework redesigns VAPD’s monolithic front‑end by employing full‑screen iframes with shared component libraries, asynchronous loading, and synchronized routing and state engines, delivering instant sub‑app switching, complete isolation, and fast page loads while preserving micro‑frontend scalability.
This article explains the fundamentals of Content Delivery Networks (CDN), detailing how browsers request resources, the role of DNS, the long-haul backbone bottleneck, and how CDN edge servers cache content to reduce latency and bandwidth load, illustrated with real-world examples like ticket‑booking spikes.
This article explains how ByteDance measures website performance, introduces key front‑end performance metrics such as FP, FCP, LCP, TTI, TBT, FID, and MPFID, describes the APIs and code needed to collect them, and discusses how to evaluate and improve overall site performance using these indicators.
Astro 1.0, the new web framework backed by companies like Google Firebase and IKEA, combines static site generation with minimal JavaScript, supports multiple UI frameworks, and introduces the Island architecture that can cut page‑load JavaScript by up to 90% and improve load speed by around 40%.
This article explains how ByteDance measures website performance, describing key front‑end metrics such as FP, FCP, LCP, TTI, TBT, FID, and MPFID, the APIs used to collect them, and how to evaluate overall site health and guide targeted optimizations.
This article explains the fundamentals of Content Delivery Networks (CDN), detailing how browsers request resources, the role of DNS, the multi‑step data transmission process, and how CDN caching servers reduce long‑haul network traffic and latency to improve user experience.
This article explains the evolution from HTTP/1.1 to HTTP/3, highlights the limitations of HTTP/2 such as head‑of‑line blocking and TCP‑based latency, and shows how QUIC’s UDP‑based design, 0‑RTT handshakes, connection migration, and advanced congestion‑control mechanisms overcome those challenges to deliver faster, more reliable web traffic.
This roundup highlights a Microsoft browser team interview on the web’s past and future, the practical use of HTTP 103 status code, advice against over‑abstracting components, Combine programming practices, live‑stream performance tuning, applying cognitive psychology to UX design, and insights on building effective frontend teams.
This article explains the concept, motivation, and basic workflow of Content Delivery Networks (CDN), showing how caching data near users reduces latency, eases origin server bandwidth pressure, and mitigates network congestion across multiple transmission layers.
This article explains the significance of HTTP/3 for web performance, outlines its standardization history, compares it with HTTP/1.1 and HTTP/2, presents benchmark results, and discusses practical adoption considerations such as QUIC, 0‑RTT, and current implementation support.
