Five boring fixes I made before sending anyone to my landing page

说明与用途

作者通过将图片转换为 WebP、内联 CSS、使用自托管字体并设置长缓存、延迟加载 SVG 图表以及改善对比度来优化登陆页面，从而提升移动端加载速度。

问题

The landing page was heavier than necessary, especially on phones, causing slow load times.

结果

The landing page load time was reduced, especially on mobile devices, by optimizing images, eliminating render blocking, caching assets, deferring non‑essential content, and improving contrast.

工作流

• 1. Replace large images with properly sized WebP versions.
• 2. Inline the only render‑blocking stylesheet.
• 3. Serve fonts from own domain and set long cache headers.
• 4. Lazy‑load SVG diagrams that appear below the fold.
• 5. Fix low‑contrast text.

证据

The three illustrations were 280 KB on phones. Properly sized WebP versions brought that down to about 50 KB.

来源

The stylesheet was the only render‑blocking request on the page, so I inlined it.

来源

Fonts now come from our own domain, and the CSS, JS and fonts are cached for a year.

来源

Four diagrams (45 KB of SVG) now load when you scroll to them instead of in the first response.

来源

I fixed some low‑contrast text I'd been ignoring for a while.

来源