Cofers.mx
A homepage redesign and a new page, built from the client's Figma designs and adapted for mobile, along with a full performance optimization.
A homepage that loaded slowly, with unoptimized assets
The WordPress/Elementor page carried years of accumulated page-builder weight: uncompressed images, unused plugin assets and animation effects added piecemeal over time. The client's design team had already produced a complete redesign in Figma, so the optimization work meant improving load times for the pages while respecting the assets they rely on.
- No framework migration, stay on WordPress/Elementor, the tool the marketing team already knows and edits day to day.
- Match the Figma designs faithfully, including scroll and hover-triggered animations, not just the static layout.
- Keep the software integrations and plugins they work with, even where they noticeably slow the site down.
A new homepage and one additional page, built from Figma with meticulous performance optimization
Custom elements and animations to match the Figma design, which Elementor doesn't offer out of the box, image and video compression and optimization, plus a new page built the same way so the marketing team can keep editing both without touching code.
Three decisions, and what each one cost
Custom widgets instead of an animation plugin
Animation plugins for Elementor tend to ship every effect they support, whether or not a given page uses them. Building the scroll and hover sections as purpose-built widgets meant the page only loaded the JavaScript this design actually needed.
Reserving explicit dimensions instead of only compressing images
Compression brought the weight down, but several images still caused layout shift (CLS) because they had no declared `width`/`height` and the browser couldn't reserve the space before loading them. Setting explicit dimensions is what actually stabilized the score, not file weight alone.
Animated WebP instead of Lottie animations
The design called for transparency in the animations. The obvious path was video (WebM/VP9 with an alpha channel), and that's how it was built first. But the HTML <video> element doesn't composite the alpha channel in practically any browser, no matter that the file encodes it correctly. A real limitation of the web platform, not an encoding mistake. Animated WebP solved it at the root: it renders as an image, composites transparency natively, and depends on no client-side library or script.
Measured with PageSpeed Insights, under the same simulated conditions (Moto G Power, slow 4G)
The goal wasn't just to bring the load times down, but to keep them down without constant technical intervention: lightweight widgets, images with their dimensions reserved and animations in native formats, so the marketing team could keep publishing without reintroducing the same performance problems.