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

Описание и применение

Автор оптимизировал лендинг‑страницу, уменьшив размер изображений, встроив CSS, обслуживая шрифты локально, отложив загрузку диаграмм и улучшив контрастность текста, чтобы ускорить загрузку, особенно на мобильных устройствах.

Задача

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.

Источник