webperf-resources

Detect client connection types and provide adaptive loading recommendations.

Updated May 12, 2026

Search Tags:#performance #connection #network #chrome-devtools #budgets #adaptive-loading

Ready to run

npx skills add https://github.com/YeomanYe/skills --skill webperf-resources

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: webperf-resources
Source: https://github.com/YeomanYe/skills/tree/main/webperf-resources
Command: npx skills add https://github.com/YeomanYe/skills --skill webperf-resources

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Analyzes network conditions to guide adaptive loading strategies, reducing wasted bandwidth and improving perceived performance on slow or constrained connections.

Core Features & Use Cases

Detects connection type (slow-2g to 4g) and RTT to tailor resource budgets.
Provides actionable loading recommendations and cross-skill integration with Loading, Media, and Core Web Vitals.
Use Case: optimize a mobile page by lowering image quality and deferring non-critical scripts when on slow networks.

Quick Start

Ask the AI to analyze a page by monitoring network conditions and proposing adaptive loading and performance budgets.

Frequently Asked Questions about webperf-resources

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I optimize web performance for slow network connections?▼

Adaptive network-aware performance analysis detects client connection types like slow-2g and 4g to enforce tailored resource budgets, providing actionable loading recommendations that reduce wasted bandwidth and improve perceived performance on slow connections.

What is adaptive loading and how does it work for mobile optimization?▼

Adaptive loading is a strategy that detects client network conditions and RTT to dynamically adjust resource delivery. For mobile optimization, it lowers image quality and defers scripts when a slow connection is identified, enforcing performance budgets.

How do I set performance budgets based on network quality?▼

You set performance budgets based on network quality by identifying connection types from slow-2g to 4g and applying clear thresholds. This enforces actionable loading steps tailored to each connection type to reduce wasted bandwidth.

Can I use Chrome DevTools to analyze network conditions for adaptive loading?▼

Yes, you can analyze network conditions using Chrome DevTools to monitor connection types and RTT. This guides the implementation of adaptive loading strategies and enforces performance budgets for slow or constrained networks.

When do I need to apply data-saving scenarios for web performance?▼

You need to apply data-saving scenarios when targeting slow connections, mobile optimization, or constrained networks. By detecting connection types from slow-2g to 4g, you can enforce resource budgets and defer non-critical scripts to save bandwidth.