Seven avatars from one SVG symbol, each with its own animation. The CSS cascade dies at the Shadow DOM, but custom properties pass straight through it, which is how one symbol ends up blinking and tapping at a different rate per instance.
A client dropped 8MB 4K PNGs into the media library for holiday backgrounds and the LCP went red within the hour. Here is what fixed it: a 200KB cap on hero images, one file per breakpoint, and WebP.
A hero illustration that looked right at 16:9 and collapsed on mobile. Instead of shipping two SVG files, I moved the artwork into a hidden symbol library and referenced it from two wrappers with different viewBox values, then animated the use elements.
I inherited a landing page with 450 lines of IDs, duplicate selectors and !important flags everywhere. Notes on moving it onto cascade layers: the five-layer order I settled on, where media queries belong, and why !important inverts layer priority.
I spent three hours hand-coding cubic-bezier keyframes for a WooCommerce build and the bounce still felt stiff. A spring-based SVG animation workflow with SMIL exports got it right and kept the animation inside the asset.
A client was shipping a 4MB transparent PNG for every header to get a 1950s cartoon look, which killed load time and left the page with no real headings. Layered text-shadows, paint-order and a small jiggle animation do the same job in CSS.
A WooCommerce boutique was choking on JS sliders and a custom select. Swapping them for native CSS selects, scroll-marker carousels and scroll-state queries cut a second off Time to Interactive.
A team page that broke every time someone joined pushed me to rebuild it with sibling-index(), a double rotation transform and trig inside calc(). The ring now spaces itself, cut-out mask included.
A bespoke furniture shop was A/B testing gray buttons against other gray buttons. The fix was per-page color palettes injected from post meta into CSS variables, so the products set the tone instead of the theme.
An 85% churn score with no reason attached is a support ticket waiting to happen. What worked instead: a plain-language because statement, the charts behind a link, and code that maps feature names to words.