resource hints | BestHub

Rare Earth Juejin Tech Community

Sep 9, 2023 · Frontend Development

Using Resource Hints (Prefetch, Preload, Preconnect, DNS‑Prefetch) to Optimize Frontend Loading Performance

This article explains how to use the four resource‑hint APIs—prefetch, preload, preconnect, and DNS‑prefetch—along with the crossorigin attribute and a custom npm tool (resource‑hint‑generator) to dramatically reduce page load times, improve web‑vitals, and increase cache‑hit rates, providing code examples, tables, and validation steps.

Preconnectfrontend performancenpm

0 likes · 17 min read

Using Resource Hints (Prefetch, Preload, Preconnect, DNS‑Prefetch) to Optimize Frontend Loading Performance

Ctrip Technology

Feb 10, 2022 · Frontend Development

Web Performance Optimization Practices for Trip.com Flight Site

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.

ReActfrontend optimizationlighthouse

0 likes · 20 min read

Web Performance Optimization Practices for Trip.com Flight Site

vivo Internet Technology

Oct 22, 2020 · Frontend Development

Optimizing Front‑End Resource Loading with preload and prefetch

The article explains how to improve front‑end performance by using the browser hints preload and prefetch—preload for critical resources like fonts, prefetch for resources needed later—showing practical examples, webpack automation, best‑practice guidelines, and common pitfalls to avoid.

Webpackbrowser cachingfrontend

0 likes · 14 min read

Optimizing Front‑End Resource Loading with preload and prefetch

WecTeam

Apr 29, 2020 · Frontend Development

Master Front‑End Performance: Transfer Optimizations, Lazy Loading & Critical CSS

This article presents an in‑depth front‑end performance checklist covering transfer optimizations, script loading strategies, IntersectionObserver lazy loading, critical CSS inlining, resource hints, service‑worker caching, connection‑aware components, and techniques to prevent layout shifts and improve rendering speed.

Lazy LoadingService Workercritical CSS

0 likes · 36 min read

Master Front‑End Performance: Transfer Optimizations, Lazy Loading & Critical CSS

UC Tech Team

Nov 1, 2018 · Frontend Development

Web Performance Optimization: Lessons from the Oodles Theater App

This article walks through practical web performance optimization techniques—such as removing unused resources, effective caching, code splitting, image compression, lazy loading, and resource hints—demonstrated on the Oodles Theater demo app, showing how Lighthouse audits guide measurable improvements.

Code SplittingLazy Loadingfrontend

0 likes · 23 min read

Web Performance Optimization: Lessons from the Oodles Theater App

360 Tech Engineering

Jul 23, 2018 · Frontend Development

Comprehensive Guide to Web Performance Optimization

This article provides a comprehensive overview of web performance optimization for frontend developers, covering metrics and goal setting, code and DOM optimizations, static asset compression, delivery techniques like async loading and resource hints, build strategies such as tree‑shaking and SSR, and monitoring tools.

Build Optimizationfrontendoptimization

0 likes · 16 min read

Comprehensive Guide to Web Performance Optimization