Hero Image Optimization

[jasperf]

This PR implements comprehensive image optimization for the home page hero block, introducing responsive image sizes and lazy loading controls to improve page load performance. The changes add WordPress responsive image generation with multiple size variations specifically tailored for hero display, while implementing conditional lazy loading that disables it for above-the-fold hero images to optimize Largest Contentful Paint (LCP) metrics. The implementation follows WordPress best practices by leveraging the native wp_get_attachment_image() function with custom size attributes and loading parameters configured through ACF block fields.

Hero Block Image Optimization:

• Added responsive image size generation in app/setup.php with multiple breakpoint-specific dimensions for hero images
• Updated HeroBlock.php to include a new disable_lazy_load field allowing editors to control lazy loading behavior per-block
• Modified the Blade template to use wp_get_attachment_image() with proper sizes attribute and conditional loading parameter based on the lazy load setting

Performance and Core Web Vitals:

• Implemented loading="eager" option for hero images to prevent lazy loading on above-the-fold content, directly improving LCP scores
• Added sizes attribute with responsive breakpoints to ensure browsers download appropriately-sized images for each viewport

Documentation:

• Updated CHANGELOG.md to document the home hero image optimization changes

Files Changed:

• CHANGELOG.md (Modified)
• app/Blocks/HeroBlock.php (Modified)
• app/setup.php (Modified)
• resources/views/blocks/hero-block.blade.php (Modified)
• style.css (Modified)