WordPress Hero Image Speed Optimization
Budget / Salary$30–250
TypeFreelance project
LocationRemote
Posted1 hour ago
My homepage hero currently relies on a CSS background-image. That approach is hurting Largest Contentful Paint and delaying the overall load, especially on mobile. I want the section rebuilt so the hero graphic is delivered as a regular element that browsers can preload and lazy-load intelligently.
Key objectives
• Primary goal: shorter page-load times, with measurable Lighthouse improvements.
• Highest priority device group: mobile phones.
• Visual requirement: the entire image must remain visible on small screens; no cropping or alternate artwork—just scale it down proportionally.
Scope of work
1. Refactor the hero section in my WordPress theme (PHP + HTML + CSS) to swap the background property for an inline .
2. Maintain existing layout, buttons, overlays, and responsive behaviour.
3. Apply best-practice performance tweaks—width/height attributes, srcset/sizes, lazy loading, and preload where appropriate.
4. Test thoroughly across major mobile browsers and desktop to confirm no layout shifts or CLS issues.
5. Provide before/after Lighthouse or PageSpeed Insights screenshots so we can quantify the gain.
Deliverables
• Updated theme files or a child-theme patch.
• Any custom CSS/JS added.
• A concise read-me explaining edits and rollback steps.
• Performance report demonstrating improvement on mobile.
Acceptance criteria
The page achieves noticeably faster LCP (
Key objectives
• Primary goal: shorter page-load times, with measurable Lighthouse improvements.
• Highest priority device group: mobile phones.
• Visual requirement: the entire image must remain visible on small screens; no cropping or alternate artwork—just scale it down proportionally.
Scope of work
1. Refactor the hero section in my WordPress theme (PHP + HTML + CSS) to swap the background property for an inline .
2. Maintain existing layout, buttons, overlays, and responsive behaviour.
3. Apply best-practice performance tweaks—width/height attributes, srcset/sizes, lazy loading, and preload where appropriate.
4. Test thoroughly across major mobile browsers and desktop to confirm no layout shifts or CLS issues.
5. Provide before/after Lighthouse or PageSpeed Insights screenshots so we can quantify the gain.
Deliverables
• Updated theme files or a child-theme patch.
• Any custom CSS/JS added.
• A concise read-me explaining edits and rollback steps.
• Performance report demonstrating improvement on mobile.
Acceptance criteria
The page achieves noticeably faster LCP (
Apply on Freelancer →
Project sourced from Freelancer.com. Applications happen directly on the original platform — we never collect your data.