Over the past week I’ve been doing free technical audits for sites posted in feedback subreddits (r/websitefeedback, r/reviewmyshopify and similar) – measuring each one with curl, Chrome DevTools and raw HTML reads before commenting. Eight audits in, the same handful of problems keeps showing up, and they’re mostly NOT the things speed tools yell about. Here they are, with real numbers.
1. Your share preview is your storefront window – and it’s often empty
A merch brand about to promote its store to an engaged social audience had no og:image, no twitter:image, and no meta description. Every link shared to Instagram Stories, X, Discord or iMessage unfurled as a text-only card with a blank thumbnail – for a brand whose entire pitch is aesthetics. Same store’s homepage title tag was the bare domain (the platform fallback when the SEO title is unset).
The fix is minutes: one strong social sharing image + a homepage meta description, set before the promo push, not after. If you check nothing else before launch, check what your link looks like when pasted into a chat.
2. Entrance animations hide your page from the people you’re trying to impress
An education platform’s hero – headline, guarantee box, CTA – sat at opacity 0 for over six seconds on my first cold load, while entrance animations waited for ~10MB of eager-loaded media. A coaching site had the same pattern: full navy screen, zero words, until a fade-in ran. Both sites look great in the founder’s warm-cached browser. First-time visitors on a school Chromebook or hotel wifi see a blank panel – and that’s exactly the audience being courted.
If content is invisible until JavaScript says otherwise, your worst-case first impression is nothing at all. Fade things in fast, or don’t gate the hero on animation at all.
3. Photos exported as PNG are quietly most of your page weight
One founder photo: 640×720 pixels, exported as PNG with alpha, 783KB – referenced three times on the page. Saved as JPG or WebP it’s ~50KB, a 15x cut on a single file with zero visible change. The same site’s lifestyle photos were all 200-260KB PNGs; the page shipped ~4MB of images with not a single loading=”lazy”.
Rule of thumb that would have fixed every case I saw: photos are never PNG. PNG is for screenshots, flat graphics and things that need transparency – and if a photo needs transparency, it needs WebP.
4. Measure before you optimize – the platform may have already solved it
I almost posted “your hero image is 1.2MB” on a supplement store’s thread. Then I re-checked with a browser Accept header: Shopify’s CDN was auto-converting that PNG to an 84KB WebP for real visitors. The image problem I was about to report didn’t exist – the site’s actual gaps were metadata and content repetition. Same story on a Ghost blog: the theme was fine (TTFB 50-130ms, proper responsive images); the weight was two membership/payment scripts loading ~900KB on every page view, whether or not the reader would ever subscribe.
Half the value of measuring is finding problems. The other half is not “fixing” things that were never broken.
5. Config leftovers ship to production and nobody notices
My favorite find of the week: a programming blog whose article:publisher meta tag pointed at a beekeeping Facebook page – a copy-paste leftover from another site, shipping in the head of every post. The same blog’s og:image was a generic stock photo served from a *.r2.dev URL – Cloudflare’s dev-only preview endpoint, rate-limited and not meant for production. Elsewhere: an email popup wired to fire on first scroll, seconds into a first visit; three h1 elements on one page because a hidden brand h1 shipped in the header template.
None of these show up in Lighthouse. All of them showed up in sixty seconds of reading the raw HTML head. Your head section is small – read it once with your own eyes before launch.
The meta-lesson
Speed tools score what they can score. Most of what actually hurt these eight sites – blank share cards, animation-gated heroes, identity metadata borrowed from stock libraries and beehives – scores fine. The audit method that caught everything above is embarrassingly simple: curl the page, read the head, check the wire sizes, load it once cold on a throttled connection, and paste your own URL into a chat app to see the card.
(All examples are from public feedback threads where owners explicitly asked for critique; numbers are from my measurement logs. I’ve kept sites anonymous here – the point is the patterns, not the naming.)
답글 남기기