In the era of user experience, the speed at which the website is loaded directly affects users ' retention, conversion rates and even seo rankings. The data show that for each one second extension of the page loading time, the user dropout rate may increase by 32 per cent. This paper optimizes the dimensions of front-end, network transmission, server configuration, etc., and summarizes 10 landing-ready hard-core techniques to help you build a high-performance website with millisecond response。
First screen loading optimization: priority for replicating key content
1. Implementation of "key css extraction" and "lackloading of non-key resources"
Principle: when browsers render pages, wait for cssom (css object model) to complete construction, and the non-first screen css will block rendering。
Operation:
Use tools (e. G., cristical, penthouse) to extract the inline css required for front-screen rendering and to avoid blocking external style sheet requests。
Use media = "print" or js dynamically loaded for non-first screen content (e. G. Bottom advertising, window-entry styles) until the first screen is rendered。
Case: a manufacturer's website optimized by a key css, reduced the lead time from 4. 2 seconds to 1. 8 seconds, and increased conversion rate by 15%。
2. Use server rendering (ssr) or static site generation (ssg)
Apply scenario: a dynamic web site (e. G., blogs, news stations) uses ssr to predivide HTML back to the client; a pure static page (e. G., business office networks) uses ssg to generate static files to reduce the pressure on client js execution。
Tools: react eco-available next. Js, vue eco-available nuxt. Js, both built into ssr/ssg solutions。
Resource optimization: reducing ineffective data transmission
3. Extreme compression and format upgrading of pictures and videos
Photo optimization:
Format conversion: webp is 25-50% smaller than jpeg, avif is 20% better than webp, using sharp, squaosh, etc。
Responsive pictures: adopted
Let the browser load as required。
Lazy load: adding = "razy" properties to non-first screen pictures (modern browser supported)。
Video optimization:
Use the ffmpeg compression rate before uploading, with priority given to HTML5 labels, with post previews and controllist= "nodownload" to reduce additional requests。
4. Code compression and tree shake
Js/css compression:
Enables terser (js), cssnano (css) to remove spaces, comments, and to shorten the variable name。
Use a new generation of construction tools like esbuild and vite to remove unused codes, 10-20 times faster than webpack, and with the built-in tree shake。
HTML optimization: delete redundant labels, spaces, and use plugins (e. G. Gulp-HTMLmin) to automatically compress。
Networking and rendering: reduction of congestion and simultaneous loading
Enable http/2 and cdn acceleration
Http/2 advantages: multi-routing (one connection loads multiple resources), head compression (reduces 50-90% http header data), server push (proactive transfer of associated resources)。
Cdn configuration:
Deployment of static resources (photos, jss, css) to cdn nodes, using global distribution caches to reduce delays, recommended cloudflare, aliyun cdn。
Add a resource domain name with a cross-origin = "anonymous" to avoid cross-domain blocking。
6. Offset loads of non-key js and css
Js processing:
Js: add async for non-immediate scripts (by-step without blocking rendering) or defer (delay until HTML resolution is completed)。
Split codes: split public libraries (e. G. React, vue) with splitchunksplugin from webpack to avoid double loading。
Css processing: use preloading for non-critical css, then dynamically inserted through js。
Rendering performance: optimizing browser rendering
7. Reduction of reflow and repaint
Rationale: changes in the structure or style of the dom trigger a rearrangement (impact layout) or redraw (visibility only) and frequent operations lead to performance bottlenecks。
Best practices:
Batch changes to a dom style, such as replacing multiple styles with a css class name on a one-time basis to avoid individual changes。
Use will-change: transform or transform: translatez(0) for frequent animated elements to render them visible in separate layers。
8. Font optimization: avoid loading fonts to block rendering
Policy:
Preload font: by loading key fonts in advance。
Font format selection: priority is given to wofff2 (40% smaller than ttf size) with font-display: swap (show the system default font when font is not loaded, load and switch)。
Servers and cache: increasing backend response efficiency
9. Strong and negotiated cache strategies
Http cache configuration:
Static resource settings cache-control: max-age=31536,000, public) with browsers reading directly from local caches without requesting servers。
The dynamic resource uses the consultation cache (etag+last-modified) and the server decides whether to return the new content by matching the logo。
Tools: configure expires commands in nginx, or set the cache header using the service-stat middle of express。
10. Compressed transmission and load balance
Content compression: enable gzip/ brotli compression with a compression of more than 70% for text type resources (HTML/js/cs), nginx through gzip on; gzip types text/css application/javasCript; open。
Load balance: the use of nginx reverse agent or cloud service load balance services in high-mix scenario to spread server pressure and avoid single-node overload resulting in delayed response。
Performance detection and continuous optimization
Required tools:
Lighthouse (inlined to chrome devtools): provides performance scoring, optimization advice, and covers dimensions such as load speed, accessibility, etc。
Webpagetest: simulate real user environments (e. G. 4g network, mobile end), visualisation waterfall maps to analyse the order in which resources are loaded。
Calibre: monitor website performance indicators (fcp, ttfb, lcp) with threshold alerts to detect unusual fluctuations in a timely manner。
Summary
Load speed optimization is a systematic project that requires front-end code, network transmission and server configuration of the full chain. It is suggested that priority be given to addressing the three pain points of slow front-screen "big file transfer" and "blocking resource loading" and to achieving continuous optimization in combination with automated tools (e. G. Auto-compression at construction, ci/cd process integration performance testing). Remember: users are waiting not for "complete loading" but for "fast presentation of available content" and focus on "key content priority" is the core guideline for performance optimization。
