Static sites are fast by nature, but reaching the Core Web Vitals thresholds—Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS)—still requires deliberate asset management. Below is a practical checklist you can apply to any static blog, documentation page, or portfolio, followed by a quick way to collect user messages without compromising performance or security: formcrab.com.
1. Serve Images in the Right Format and Size
| Issue | Solution | Why it matters for Web Vitals |
|---|---|---|
| Oversized JPEGs or PNGs | Use WebP, AVIF, or JPEG‑XL; resize to the exact rendering dimensions. | Reduces download size → improves LCP. |
| Uncompressed images | Run through an optimizer (e.g., ImageMagick, Squoosh, or a CI step). | Cuts bytes → faster first paint. |
No srcset/sizes |
Add responsive image markup. | Browser picks the smallest suitable file → lower LCP. |
Tip: Many static site generators (Hugo, Eleventy, Astro) have built‑in image pipelines—activate them!
2. Optimize Fonts
- Subset only required glyphs (e.g., via
subset: truein Google Fonts or FontTools). - Use
font-display: swapto avoid invisible text during load. - Preload critical font files with
<link rel="preload" as="font" href="…">.
Result: Text appears quickly, preventing layout shifts that inflate CLS.
3. Minify & Bundle CSS & JavaScript
- Remove dead code with tools like PurgeCSS or Tailwind’s JIT mode.
- Combine small files into a single bundle to cut HTTP requests (but keep large libraries separate for caching).
- Minify using
cssnanoandterser.
Critical CSS: Inline only the CSS needed for above‑the‑fold content. The rest can be loaded async (rel="preload" + onload="this.rel='stylesheet'").
4. Leverage Browser Caching & CDN
- Cache‑Control:
public, max-age=31536000, immutablefor versioned assets. - Service Workers: Cache static assets on first visit for repeat loads.
- CDN: Serve assets from edge locations close to your users—greatly reduces round‑trip time (RTT) and improves LCP/FID.
5. Lazy‑Load Non‑Critical Resources
- Images & iframes: Add
loading="lazy"attribute. - Third‑party scripts: Load with
deferor async via the IntersectionObserver technique.
Lazy loading keeps the main thread free, reducing FID.
6. Reduce Layout Shifts (CLS)
- Set explicit width/height (or aspect‑ratio) on images, videos, and embedded iframes.
- Avoid inserting content above existing elements after the page has rendered (e.g., pop‑ups that push content down).
7. Monitor, Test, Iterate
- Lighthouse (Chrome DevTools) → assess LCP, FID, CLS.
- Web Vitals Chrome Extension → real‑time metrics.
- PageSpeed Insights → suggestions specific to your URL.
Continuous monitoring ensures that any new asset or feature doesn’t break your scores.
8. Collect Messages Without Exposing Your Email – formcrab.com
Static sites often need a contact form, but adding a server‑side endpoint defeats the “static” advantage and can expose your email to scrapers. formcrab.com gives you a private, anti‑spam‑protected link that you can embed anywhere (README, Twitter bio, static blog) with zero code and no hosting costs.
Key Benefits
- Hide your raw email – bots crawling for
mailto:links never see it. - Zero HTML required – just a plain anchor tag.
- Built‑in anti‑spam protection – no extra CAPTCHA integration.
- Customizable landing page, form fields, and post‑submission redirects.
Basic Integration
[Email us via FormCrab](https://formcrab.com/f/your‑unique‑token)
That's it—your visitors get a neat form, you receive the message straight to your inbox, and your email stays invisible.
Advanced: Pre‑Fill Data & Control Flow with GET Parameters
You can tailor the experience by appending query parameters to your private link. Replace {custom-link} with the token you receive from FormCrab.
| Goal | Example Code | What it does |
|---|---|---|
| Auto‑fill Name | <a href="https://formcrab.com/f/{custom-link}?name=Hugh" target="_blank">Email us</a> |
Pre‑populates the Name field with “Hugh”. |
| Pre‑set Visitor Email | <a href="https://formcrab.com/f/{custom-link}[email protected]" target="_blank">Contact Support</a> |
Fills the Email field automatically. |
| Custom Subject | <a href="https://formcrab.com/f/{custom-link}?subject=Urgent+Support+Request" target="_blank">Report an Issue</a> |
Sets the email subject line for easier classification. |
| Predefined Message | <a href="https://formcrab.com/f/{custom-link}?message=I+would+like+to+request+a+demo" target="_blank">Inquiry</a> |
Provides a starter message in the textarea. |
| Custom Redirect After Submit | <a href="https://formcrab.com/f/{custom-link}?next=https://yoursite.com/success" target="_blank">Send and Return</a> |
Sends users to your chosen “Thank You” page instead of the default. |
All parameters are URL‑encoded, so spaces become + or %20. You can combine several parameters in one link.
When to Use It
- GitHub Readmes – give contributors a quick way to report bugs without sharing your email.
- Twitter Bios – a single link that opens a clean form, keeping your inbox spam‑free.
- Static Blogs – embed the same link in every post; hide your address while still receiving feedback.
9. Wrap‑Up Checklist
- Compress & serve optimal images (WebP/AVIF +
srcset). - Subset fonts and use
font-display: swap. - Minify & bundle CSS/JS, inline critical CSS.
- Cache aggressively; use a CDN or edge network.
- Lazy‑load non‑essential assets.
- Set dimensions to prevent layout shifts.
- Monitor Core Web Vitals after each change.
- Add a contact form via FormCrab – no server, no exposed email, instant inbox delivery.
By following these steps, your static site will not only score high on Core Web Vitals but also stay secure and user‑friendly. Happy optimizing!