skills.rest
Maitreya04
Maitreya04COMMUNITY
Explore all skills by this author →
GitHub

high-perf-browser

Optimize browser resource fetching and rendering for Core Web Vitals.

Updated Mar 1, 2026
Search Tags:#caching#real-time#web-performance#core-web-vitals#resource-loading#http3#browser-networking
One-click install
npx skills add https://github.com/Maitreya04/pasplmaster --skill high-perf-browser-maitreya04
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: high-perf-browser
Source: https://github.com/Maitreya04/pasplmaster/tree/main/.agents/skills/high-perf-browser
Command: npx skills add https://github.com/Maitreya04/pasplmaster --skill high-perf-browser-maitreya04

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps frontend teams dramatically improve perceived performance by optimizing how browsers fetch resources, render pages, and communicate with servers across modern network protocols.

Core Features & Use Cases

  • Network Fundamentals: understanding latency, RTTs, and how DNS, TCP, TLS affect page load; apply optimizations to reduce round trips.
  • HTTP Protocol Evolution: choosing between HTTP/1.1, HTTP/2, and HTTP/3, and using features like 103 Early Hints.
  • Resource Loading & Critical Rendering Path: minimize render-blocking resources, inline critical CSS, and optimize script loading and fonts.
  • Caching Strategies: configure long-term caching, hashing, and service worker patterns to minimize re-fetches.
  • Core Web Vitals Optimization: target LCP, INP, CLS with practical techniques and measurement.
  • Real-Time Communication: select WebSocket/SSE/polling strategies for live data with efficient reconnections.

Quick Start

Identify the current performance bottlenecks on a web app and implement a starter optimization pass: enable preconnect to critical origins, inline above-the-fold CSS, and preload the LCP image.

Frequently Asked Questions about high-perf-browser

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

FAQPage Schema
How do I optimize Core Web Vitals like LCP, INP, and CLS for my web application?▼

Reduce latency by applying network optimizations that minimize round trips across DNS, TCP, and TLS. You can improve resource fetching by enabling preconnect to critical origins and choosing between HTTP/2 and HTTP/3 protocols based on your network requirements.

What's the best way to configure caching strategies to minimize browser re-fetches?▼

Configure long-term caching and asset hashing to minimize browser re-fetches. You can implement service worker patterns to cache resources efficiently, ensuring returning users experience faster load times by avoiding unnecessary network requests for unchanged files.

How do I minimize render-blocking resources on the critical rendering path?▼

Minimize render-blocking resources by inlining above-the-fold CSS and optimizing script loading strategies. You can streamline the critical rendering path by preloading essential assets like fonts and images, allowing the browser to render content without waiting for blocking scripts.

When should I choose WebSocket, SSE, or polling for real-time browser communication?▼

Apply HTTP/3 and 103 Early Hints to improve resource loading by allowing the browser to start fetching critical assets before the server finishes processing the main request. This protocol evolution reduces latency and optimizes how browsers fetch resources across modern networks.

Related Skills

Explore More Software Engineering Skills→
ZainEldeen-Ashraf-Ibrahim-Ibrahim-SamakZainEldeen-Ashraf-Ibrahim-Ibrahim-Samak

optimize

Diagnose and fix UI performance issues using Core Web Vitals measurements.

Community
Advanced
smarmen86smarmen86

benchmark

Detects performance regressions by measuring page loads, Core Web Vitals, and resource sizes.

Community
Advanced
tech-leads-clubtech-leads-club
5.0k

perf-astro

Optimize Astro projects for Lighthouse performance with critical CSS and asset compression.

Official
Intermediate
netlifynetlify
32

netlify-caching

Configure and validate Netlify CDN and browser caching headers.

Official
Intermediate