Category 8: Performance & SEO

Create a Shopify section that:

• Implements lazy loading for all product and banner images
• Uses native `loading="lazy"` attributes and fallback for older browsers
• Ensures images have width/height attributes for CLS optimization

Build a section or snippet that:

• Inlines critical CSS for above-the-fold content
• Defers non-critical CSS to load after page render
• Minimizes render-blocking resources

Generate a section that:

• Automatically serves WebP images for supported browsers
• Falls back to JPEG/PNG for others
• Optimizes image delivery for speed and SEO

Create a product section that:

• Adds JSON-LD structured data for products, price, availability, and reviews
• Passes Google's Rich Results Test
• Updates schema dynamically with product changes

Build a pagination control for collection and blog pages that:

• Uses semantic HTML and ARIA attributes
• Is fully keyboard navigable and screen reader friendly
• Supports both numbered and "Load More" pagination

Generate a breadcrumb section that:

• Uses schema.org markup for breadcrumbs
• Dynamically updates based on page hierarchy
• Is accessible and mobile-friendly

Create a snippet that:

• Loads fonts using `font-display: swap` for faster text rendering
• Preloads critical font files
• Uses system font stacks as fallback

Build a loader that:

• Loads minified JavaScript and CSS files only when needed
• Defers non-essential scripts until after page interaction
• Reduces total requests for faster load times

Generate a section or snippet that:

• Dynamically sets meta title, description, and canonical tags for every page
• Ensures unique and keyword-rich content
• Is compatible with Shopify's SEO best practices

Create a dashboard section for theme owners that:

• Displays real-time metrics for LCP, FID, and CLS
• Alerts when scores drop below Google's recommended thresholds
• Suggests actionable improvements

Build a section that:

• Uses Shopify's CDN and image transformation parameters for optimal delivery
• Lets merchants set image quality and size in the theme editor
• Supports responsive images with `srcset`

Generate a blog post grid that:

• Uses semantic HTML5 elements for articles, headings, and images
• Includes schema.org markup for articles and authors
• Is optimized for fast loading and accessibility

Create a section or snippet that:

• Generates an up-to-date sitemap.xml for all products, collections, blogs, and pages
• Follows Shopify's SEO guidelines
• Updates automatically as content changes

Build a section for theme owners that:

• Audits the current page for accessibility issues (contrast, labels, keyboard nav)
• Provides actionable tips and links to resources

Generate a version of a key section (e.g., blog post or product) that:

• Is AMP-compliant for ultra-fast mobile loading
• Uses only AMP-approved HTML, CSS, and JS
• Provides fallback for non-AMP browsers

Create a snippet or section that:

• Automatically generates descriptive alt text for all images
• Uses product, collection, or blog post data for context
• Ensures all images meet accessibility and SEO standards

Build a dashboard section that:

• Lets merchants set performance budgets for page size, requests, and load time
• Alerts if budgets are exceeded
• Suggests optimizations

Generate a section that:

• Loads embedded videos (YouTube, Vimeo) only after user interaction
• Uses a placeholder image and play button for faster initial load

Create collection filters that:

• Use clean, crawlable URLs for filtered views
• Update meta tags and schema dynamically
• Are accessible and mobile-friendly

Build an FAQ section that:

• Uses schema.org FAQPage markup for rich results in Google
• Lets merchants add/edit questions and answers in the theme editor
• Is accessible and fast-loading

Create a snippet that:

• Adds `` and `` tags for key domains (CDN, analytics, fonts)
• Reduces DNS and connection time for critical resources

Generate a 404 error page that:

• Suggests popular products, collections, or blog posts
• Uses semantic HTML and schema.org markup
• Loads quickly and offers clear navigation back to the store