This article details how a team tackled frequent video playback stutter on an internal learning platform by evaluating multiple player options, optimizing encoding parameters, adopting HLS streaming, and implementing a front‑end chunked upload workflow, ultimately reducing load times from several seconds to under one.
This article investigates Vue 3.6’s new Vapor mode, comparing its compilation output with traditional Vue, revealing that while most bindings skip the virtual‑DOM and diff steps, the v‑for directive still relies on a full diff algorithm for complex list updates.
This article explains the principles of Tree Shaking, outlines prerequisites, demonstrates common pitfalls such as CommonJS usage, object aggregation, indirect re‑exports, side‑effect modules, and dynamic properties, and provides practical ways to verify that dead code has been successfully removed from your bundle.
When a page needs to fire many simultaneous requests—such as loading ten resources at once or uploading dozens of files—the browser can freeze and the server can be overwhelmed, so using a request queue to limit concurrency keeps both responsive and stable.
This article explains how to reduce bundle size and improve load speed of large micro‑frontend projects by sharing common dependencies through CDN externalization, using tools such as qiankun, vite‑plugin‑cdn‑import, and Rollup plugins for HTML generation.
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.
This article explains what browser repaint (reflow) is, how screen refresh rates and the pixel pipeline work, the performance impact of excessive repaints—including CPU load and CLS—and provides practical strategies to minimize reflows for smoother web experiences.
This guide shows how to speed up Vue‑based web apps by configuring Nginx to serve gzip‑compressed files dynamically and using the compression‑webpack‑plugin to pre‑compress JavaScript and CSS during the build, cutting bundle size from megabytes to a few, and halving page‑load times without extra server load.
The article examines the end‑to‑end technical and design challenges of delivering a single customer‑service instant‑message, detailing reliability, ordering, idempotency, performance optimizations such as async handling and binary‑search traversal, security practices, latency reductions via Protocol Buffers, and a roadmap for future enhancements.
This report analyzes performance issues in a logistics platform, identifying backend IC card interface timeouts causing database connection pool exhaustion and frontend problems from excessive DOM elements and network loading, then proposes optimizations including interface migration, CDN, compression, preloading, domain sharding, and virtual scrolling.
This article presents a detailed summary of the AutoHome client team's performance optimization efforts for both the native mobile app and the H5 web frontend, covering background, specific tool and platform enhancements, metric‑driven improvements, process standardization, and future quality‑boosting initiatives.
This article examines why bundle size matters for front‑end performance and provides a step‑by‑step guide to reducing Webpack output by optimizing Babel polyfills, leveraging @babel/preset‑env, using @babel/runtime, applying tree‑shaking, and eliminating duplicate dependencies.
Tencent’s Enterprise WeChat team built a hybrid H5 instant‑rendering solution that combines offline packages, global WebView pre‑creation, data pre‑fetching and JavaScript pre‑execution to cut first‑screen time from over a second to about 130 ms, achieving a 97 % pre‑heat container hit rate and dramatically improving interactive performance.
This article details a technical solution for balancing visual aesthetics and readability in mobile app text rendering, specifically addressing challenges of two-column justification with long English words and numbers by implementing manual hyphenation strategies.
The article defines T‑level interactions—high‑traffic, high‑revenue e‑commerce events—and outlines how using the Taro framework, a unified H5 and mini‑program development stack, combined with a custom component library, automated testing, and robust error‑handling strategies can dramatically improve development efficiency, consistency, and reliability across massive seasonal campaigns.
This article chronicles the step‑by‑step optimization of a WeChat mini‑program, covering native stack choices, ES6+ adoption, modular architecture, versioning, code formatting, request abstraction, UI component migration, ESLint, unit testing, routing, environment handling, Gulp workflow, CSS variables, and sub‑package strategies.
While lazy loading can reduce initial page load time and save resources, overusing it can slow scrolling, cause layout shifts, hinder SEO, and ultimately degrade overall web performance, so developers need clear guidelines on when and how to apply it effectively.
The Baidu Aifanfan lead list page evolved through six versions—from rapid MySQL‑based delivery to a metadata‑driven, ES‑backed architecture with Redis synchronization—culminating in a high‑availability, high‑performance system that slashed server latency from 25 seconds to under one second and cut frontend load times and static asset sizes dramatically.
This article presents a comprehensive guide to improving web performance for Trip.com’s flight pages, covering user‑centric metrics, measurement methods, and practical optimization techniques such as package size reduction, resource hints, lazy loading, server‑side rendering, long‑task mitigation, and React‑specific improvements, ultimately raising the PageSpeed score from around 30 to over 80.
This talk explains how minimizing draw calls in Canvas2D and WebGL dramatically improves rendering speed for large graph visualizations, covering CPU‑GPU interaction, culling, dirty‑rectangle rendering, batch rendering, and GPU‑driven calculations to achieve smoother 60 FPS interactions.
This article explains how to collect real‑user performance data with the W3C Performance APIs, defines key metrics such as first paint and TTI, and provides practical loading, caching, rendering, and framework optimization techniques to improve web page speed and user experience.
This article explains the browser's rendering pipeline—from render trees and layers to compositing and rasterization—and provides practical techniques such as passive event listeners, requestAnimationFrame, CSS containment, and will-change to dramatically improve animation smoothness and reduce layout and paint costs.
This article describes a method for shortening i18n keys in Feishu's frontend architecture by encoding them into compact strings, integrating the process into Babel and webpack pipelines, and demonstrates a 7.2 MB reduction in total page code size for over 11,000 keys.
This article explains the concepts of debouncing and throttling in frontend development, their differences, practical applications, and provides detailed analysis of Lodash's implementation with code examples.
This article explains how to use Chrome's Performance panel, the W3C Performance API, and third‑party tools to measure, analyze, and optimize page load times, providing practical code examples and a real‑world case study of reducing DOMContentLoaded latency.
Baidu’s end‑to‑end optimization of commercial landing pages—splitting container initialization, parallelizing billing, preloading critical resources, and employing server‑ and client‑side pre‑rendering—cuts load times below the 1‑second threshold that Baidu’s data shows is essential to prevent a 5% conversion drop, though implementation demands significant development effort.
To dramatically improve page load speed, first diagnose whether slowness stems from client network, DNS, or server bottlenecks, then apply solutions such as scaling servers, optimizing TCP settings, enabling HTTP/2/QUIC, compressing assets, and most cost-effectively integrating a CDN for global edge caching and compression.
This article explores practical techniques for combining CDN and Alibaba Cloud OSS to achieve efficient static resource delivery, high cache hit rates, global acceleration, and multi‑region synchronization in modern frontend development.
This article explains what Core Web Vitals are, why they matter for user experience, and provides detailed guidance on measuring and improving the three key metrics—Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift—using Chrome tools, web‑vitals library, and best‑practice optimizations.
This article explains why web apps still feel slower than native apps, analyzes the performance gaps of traditional client‑side rendering, and introduces a low‑cost, progressive “same‑screen rendering” approach—using a sandbox, parallel API loading, and browser‑like HTML rendering—to deliver native‑like user experiences without major rewrites.
This article evaluates Taro’s conversion to JD mini‑programs by comparing package size, long‑list rendering benchmarks, and development experience against native JD and WeChat mini‑programs, revealing where Taro excels, where it lags, and the optimizations it provides.
In this article we detail how a Swiss job‑search platform improved user experience and SEO by applying three unconventional frontend techniques—JSON preloading, a lightweight client‑side cache, and trimming CSS/JS bundles—to cut overall load time by 24%, with some reports showing up to a 43% reduction.
This article explains why a newly rebuilt site can suffer a “JavaScript hangover,” then walks through concrete front‑end performance techniques—including tree shaking, code splitting, externalizing third‑party scripts, smaller library choices, differential serving, and reducing Babel‑generated bloat—to restore speed and improve user experience.
The article details a comprehensive homepage redesign that introduced strict TypeScript type checking, migrated to a customized Webpack build, added Nightwatch.js automated tests, upgraded monitoring with BadJS and performance metrics, implemented skeleton screens, and improved accessibility for visually impaired users.
This article introduces the Baice web performance optimization platform built by the Zhengcai Cloud front‑end team, explaining synthetic and real‑user monitoring, the Lighthouse workflow, custom extensions using Puppeteer, metric weighting, detection models, scoring, optimization suggestions, and trend analysis for improving page speed and user experience.
This article explains how to improve web page rendering speed by reducing the number of critical resources, shortening the critical path length, and minimizing critical bytes through DOM, CSSOM, and JavaScript optimizations, including practical code examples and performance measurements.
This article examines the stark differences between domestic and overseas e‑commerce client preferences, highlights the unexpected popularity of mobile‑only sites abroad, and details how implementing Google AMP on a high‑traffic M‑site dramatically reduced bounce rates, improved first‑interactive times, and increased conversion rates.
Tencent CDN’s implementation of HTTP/2 Server Push predicts and preloads dependent resources via link tags or headers, creates PUSH_PROMISE frames, and streams assets before the main response, yielding measurable latency reductions on real‑world pages when used with proper sizing, priority, and cache awareness, while avoiding slow‑start and buffer issues.
This article explains how programmable shaders running on the GPU form the foundation of modern graphics rendering, and demonstrates step‑by‑step how to replace a large transparent PNG background, create animated particle effects, and draw complex patterns directly with GLSL in WebGL, resulting in smaller, more dynamic, and faster web pages.
Learn five practical techniques—image optimization, minimizing HTTP requests, proper file placement, CSS/JS compression, and external linking—to dramatically improve website loading times and security, with actionable tips for both beginners and seasoned developers, plus WordPress-specific recommendations.
This article explores why embedded H5 pages in mobile apps suffer long white‑screen delays and presents a comprehensive set of front‑end and client‑side optimizations—including request reduction, caching strategies, offline packages, pre‑loading webviews, and fallback mechanisms—to achieve near‑native startup performance.
This article examines common mistakes when nesting Vue.js components—such as overly deep parent‑child structures and cumbersome event communication—and demonstrates how to streamline component design using reusable child components and the slot content‑distribution mechanism, complete with practical code examples and visual diagrams.
This article examines the critical factors influencing web performance—including network latency, TCP/HTTP protocols, browser rendering, and server-side architecture—and provides practical optimization techniques such as TCP tuning, HTTP/2 adoption, resource compression, caching, load balancing, and distributed design to achieve fast, scalable web services.
This article explains Chrome’s user‑centric RAIL performance model, detailing its four categories—Response, Animation, Idle, Load—along with perceptual latency thresholds, and shows how developers can prioritize optimizations to deliver faster, smoother web experiences.
This article explains why web performance matters, outlines the 2‑5‑8 response‑time principle, and presents practical front‑end optimization techniques such as reducing HTTP requests, internal page tweaks, caching strategies, download size reduction, and network connection improvements to accelerate user experience.
This article explains Facebook’s BigPipe architecture, which breaks pages into independent pagelets and pipelines server‑side generation with client‑side rendering to dramatically cut perceived latency and double overall site speed.
This article explains JD's technical practices for handling massive traffic on product detail pages, covering front‑end rendering, KV storage, Nginx + Lua dynamic templating, unified service systems, monitoring, caching strategies, service isolation, and automated degradation mechanisms.
This article explains why websites load slowly, outlines key factors such as compression, image optimization, removing unnecessary assets, progressive rendering, and async scripts, and shows how to measure improvements with tools like WebPageTest and Chrome DevTools.
Discover 17 essential strategies—from merging and compressing JS/CSS to leveraging CDNs and lazy-loading images—that developers can implement to significantly overall improve website overall load times, reduce render blocking, and enhance user experience.
This article details Meituan's 2014 presentation on building a performance analysis framework and monitoring platform, describing the bottlenecks they faced, the metrics they collected, the insights gained, and the tangible improvements achieved across front‑end and back‑end processing.
This guide explains how HTTP/2 changes traditional front‑end performance tricks, covers browser support, TLS requirements, Server Push benefits, and provides a concise Nginx configuration example to enable HTTP/2 on your site.
The article explains why web performance matters, outlines the 2‑5‑8 response time rule, and details five key optimization strategies—reducing HTTP requests, internal page tweaks, caching, minimizing download size, and network improvements—while also discussing engineering practices and tools like StyleCombine and H5 incremental packaging.
Using cookie‑free domains prevents browsers from sending unnecessary cookies with every static asset request, reducing network overhead and improving page load speed, especially on sites with many images, CSS, or JavaScript files.
This article explains why modern web sites face exploding concurrent connections, how richer front‑end interactions and browser limits increase load, and presents practical front‑end caching, request merging, and server‑side techniques—including Apache MPM tuning, Nginx adoption, sendfile, and epoll—to reduce memory and CPU pressure.
This article explains why web performance matters, outlines the 2‑5‑8 response time principle, and provides practical front‑end optimization techniques such as reducing HTTP requests, internal page tweaks, caching strategies, gzip compression, and network connection improvements to deliver faster user experiences.
This article distills Steve Souders' high‑performance web guidelines into thirteen practical front‑end rules—such as reducing HTTP requests, leveraging CDNs, enabling caching, compressing assets, and optimizing script placement—to dramatically improve page load speed with minimal effort.
This article compiles Yahoo's 35 golden rules for frontend performance, covering content, server, cookie, CSS, JavaScript, image optimization and mobile considerations, and explains how to test and apply each technique to dramatically improve page load speed.
Zhitu, a Tencent front‑end tool, compresses PNG, JPEG, GIF images and automatically converts them to optimal formats like WebP; this guide shows how to manually upload images or integrate the gulp‑imageisux plugin into your build process to achieve significant size reductions while preserving visual quality.
Facebook’s web team revisited Yahoo’s 2007 cache research, measuring how often PC and mobile browsers serve resources from cache today, discovering that roughly 45% of requests still miss the cache and that cache lifetimes are short, prompting new optimization recommendations.
This guide presents fourteen actionable techniques—including server response tuning, browser caching, gzip compression, asynchronous scripts, CDN usage, and resource minification—to dramatically improve website loading speed, boost SEO rankings, lower bounce rates, and enhance user experience.
The article examines the rise of high‑concurrency web connections, explains how richer front‑end interactions increase load, and presents a range of optimization techniques—from caching and request merging to server‑side memory and CPU reductions using Apache MPM modes, Nginx, and sendfile—to improve web service efficiency.
This article compiles practical front‑end performance tips from Google and Yahoo, covering bad request elimination, CSS @import avoidance, script handling, resource merging, image sprites, DNS reduction, caching, compression, and a suite of analysis tools to help developers dramatically improve page load times and user experience.
