skills.rest
TECH-HY
TECH-HYOFFICIAL
Explore all skills by this author →
GitHub

site-performance-seo-ui

Optimize website UI for Core Web Vitals, responsive media, and crawl-safe rendering.

Updated Mar 22, 2026
Search Tags:#lazy loading#seo#core web vitals#responsive images#frontend performance#lcp#container queries
One-click install
npx skills add https://github.com/TECH-HY/SKILLS --skill site-performance-seo-ui-tech-hy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: site-performance-seo-ui
Source: https://github.com/TECH-HY/SKILLS/tree/main/skills/site-performance-seo-ui
Command: npx skills add https://github.com/TECH-HY/SKILLS --skill site-performance-seo-ui-tech-hy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Websites often fail real users on speed, layout stability, and indexability even when they pass isolated audits. This Skill guides frontend work so pages stay fast, stable, and crawlable under real traffic, especially for media-heavy and SEO-sensitive pages. ## Core Features & Use Cases - Core Web Vitals Triage: Diagnose and prioritize fixes for LCP, INP, and CLS based on user-visible impact rather than lab-only scores. - Responsive Media & Layout: Implement responsive images with srcset and sizes, container queries, and layout patterns that reduce both bytes and layout shift. - SEO-Safe UI Patterns: Keep content semantic, renderable, and discoverable with rules for lazy loading, infinite scroll, structured data, and overlays. - Use Case: A marketing landing page has a slow hero image and layout shift from late-loading banners. Use this Skill to prioritize the LCP bottleneck, add explicit image dimensions with fetchpriority, and verify the fix does not regress CLS. ## Quick Start Use the site-performance-seo-ui skill to review my landing page for Core Web Vitals issues and SEO-safe rendering patterns.

Frequently Asked Questions about site-performance-seo-ui

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

FAQPage Schema
How do I improve LCP on an image-heavy landing page?▼

LCP improves by giving the main visual deliberate priority: use fetchpriority="high", responsive srcset candidates, explicit width and height, and avoid render-blocking CSS or JavaScript. Fix the bottleneck on the primary content path before secondary enhancements.

How to lazy load images without hurting SEO?▼

Lazy-load only below-the-fold assets, never the first-screen content that explains the page. Keep important text and links in the DOM and verify content exists without scroll-triggered hacks so crawlers can still discover it.

Does infinite scroll work with search engine indexing?▼

Infinite scroll alone is not crawl-safe. Provide paginated URLs or another crawlable path to the same content so discovery does not depend on endless scrolling behavior.

What causes CLS layout shift on web pages?▼

CLS comes from images or embeds without reserved size, late-injected banners, font swaps that change layout, and placeholders that do not match final content dimensions. Reserve space and match placeholder shape to final content.

When should I use container queries instead of media queries?▼

Use container queries when a component must adapt to the space it actually occupies rather than the viewport, such as cards in mixed-width grids, sidebars, or widgets reused across templates. Viewport-only breakpoints fit page-level layout changes.

Related Skills

Explore More Software Engineering Skills→
rjit1rjit1
1

seo-google

Analyze Google Search Console, PageSpeed Insights, and GA4 data for SEO audits.

Community
Advanced
giljaegiljae
1

gstack-canary

Monitor live web apps for console errors, performance, and visual regressions post-deploy.

Community
Intermediate
yahav123147yahav123147

performance

Analyze Core Web Vitals bottlenecks and prescribe prioritized Lighthouse-style optimizations.

Community
Advanced
PatternsDevPatternsDev
235

react-server-components

Server-render React components to reduce client-side JavaScript in Next.js App Router.

Official
Intermediate