Toolverse
All skills
Frontend

web-performance-optimization

by davila7

Optimize website and web application performance including loading speed, Core Web Vitals, bundle size, caching strategies, and runtime performance

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Author
davila7
Category
Frontend
Views
43
GitHub repo

About this skill

Optimize website and web application performance including loading speed, Core Web Vitals, bundle size, caching strategies, and runtime performance

How to use

  1. Zainstaluj skill web-performance-optimization w swoim środowisku Claude/Copilot, dodając go do dostępnych narzędzi agenta.

  2. Uruchom pomiar wydajności bieżącej: poproś skill o przeprowadzenie audytu Lighthouse dla Twojej strony lub aplikacji. Skill zbierze dane o szybkości ładowania, Core Web Vitals (LCP, FID, CLS), rozmiarach bundle'ów JavaScript i zidentyfikuje wąskie gardła w sieci.

  3. Przeanalizuj zidentyfikowane problemy: skill wykaże duże bundle'e, nieoptymalizowane obrazy, zasoby blokujące renderowanie, wolne czasy odpowiedzi serwera, brakujące nagłówki cache'owania i długie zadania blokujące główny wątek.

  4. Ustal priorytety ulepszeń: skupiaj się na zmianach o największym wpływie – optymalizacji ścieżki krytycznego renderowania, code splittingu, lazy loadingu, strategiach cachowania i optymalizacji skryptów trzecich.

  5. Wdróż ulepszenia: skorzystaj ze wskazówek skill'u do optymalizacji zasobów (obrazy, czcionki, CSS, JavaScript), implementacji code splittingu, dodania nagłówków cache'owania i lazy loadingu zasobów niekrytycznych.

  6. Zweryfikuj wyniki: ponownie uruchom audyt Lighthouse, porównaj metryki przed i po zmianach, aby potwierdzić poprawę wydajności i rzeczywistego doświadczenia użytkownika.

Related skills

shadcn-ui-setup

by maneeshanif

Install and configure Shadcn/ui component library with Radix UI primitives, Aceternity UI effects, set up components, and manage the component registry. Use when adding Shadcn/ui to a Next.js project or installing specific UI components for Phase 2.

Frontend
23167

browser-automation

by browserbase

Automate web browser interactions using natural language via CLI commands. Use when the user asks to browse websites, navigate web pages, extract data from websites, take screenshots, fill forms, click buttons, or interact with web applications. Triggers include \

Frontend
21175

landing-page-guide-v2

by bear2u

Create distinctive, high-converting landing pages that combine proven conversion elements with exceptional design quality. Build beautiful, memorable landing pages using Next.js 14+ and ShadCN UI that avoid generic AI aesthetics while following the 11 essential elements

Frontend
3486

domain-name-brainstormer

by ComposioHQ

Generates creative domain name ideas for your project and checks availability across multiple TLDs (.com, .io, .dev, .ai, etc.). Saves hours of brainstorming and manual checking.

Frontend
21116

interactive-dashboard-builder

by anthropics

Build self-contained interactive HTML dashboards with Chart.js, dropdown filters, and professional styling. Use when creating dashboards, building interactive reports, or generating shareable HTML files with charts and filters that work without a server.

Frontend
2298

browser-use

by browser-use

Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, or extract information from web pages.

Frontend
23107