BestHub
Sign in
Tag

resource hints

0 views collected around this technical thread.

Rare Earth Juejin Tech Community
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.

PreconnectPreloadfrontend performance
0 likes · 17 min read
Using Resource Hints (Prefetch, Preload, Preconnect, DNS‑Prefetch) to Optimize Frontend Loading Performance
Ctrip Technology
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.

frontend optimizationlighthousereact
0 likes · 20 min read
Web Performance Optimization Practices for Trip.com Flight Site
vivo Internet Technology
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.

PreloadWebpackbrowser caching
0 likes · 14 min read
Optimizing Front‑End Resource Loading with preload and prefetch
UC Tech Team
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.

Image Optimizationcode-splittingfrontend
0 likes · 23 min read
Web Performance Optimization: Lessons from the Oodles Theater App
360 Tech Engineering
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.

OptimizationPerformance Metricsbuild optimization
0 likes · 16 min read
Comprehensive Guide to Web Performance Optimization