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

Description and use

The author optimized a landing page by resizing images to WebP, inlining CSS, self‑hosting fonts with long caching, lazy‑loading diagrams, and fixing contrast to improve load speed, especially on phones.

Problem

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

Outcome

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.

Workflow

• 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.

Evidence

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

Source

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

Source

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

Source

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

Source

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

Source