How To Speed Up Your Custom-Coded Website

Whant to speed up your custom coded website? Pull-up a chair, grab a ☕, and let’s peel back the hood on modern, hand-coded, Eleventy-powered sites that leave PageSpeed Insights blushing with a perfect 100/100. Below is a deep-dive field-manual—part war-story, part recipe book—covering what to do (and what absolutely not to do) when every byte and millisecond counts. Expect code you can copy-paste, humour that’s (hopefully) paste-copy-worthy, and pointers to the freshest research and specs.

1. Why Raw Speed Matters

Time is the only thing you can’t npm install. Shaving even 100 ms off First Contentful Paint can lift conversion by 1 %, and that compounds across campaigns, A/B experiments, and—most importantly—real human patience. Google bakes Core Web Vitals into ranking signals, so performance is now literally SEO.

2. Measure Twice, Ship Once

Before optimisation comes observation. Run Lighthouse inside Chrome DevTools, WebPageTest for multi-location throttling, and PageSpeed Insights for field data. Eleventy’s built-in performance debug flag prints build timings, revealing which collections or images are bottlenecks.

# Eleventy build with perf trace
npx @11ty/eleventy --incremental --quiet --perf

3. Build Stack: Eleventy, Pug, SCSS, TypeScript

• Eleventy: zero-JavaScript hydration by default, markdown-first, supports “islands architecture” (more on that later) with <is-land> helpers.
• Templates: Pug compiles down to semantic HTML, letting you write DRY layouts.
• Styles: SCSS compiled to one tiny, critical CSS file inlined, plus deferred non-critical bundle.
• Script: TypeScript compiled to ES 2022 modules; we ship native ESM, no bundler if a tree-shaken import map suffices.  

4. Speed Up Your Custom-Coded Website with Lean HTML

Lean HTML starts by treating every tag as a promise: if your CSS or JavaScript needs twenty nested divs to style a button, the markup is lying. Pick the native element that already conveys the meaning — button, nav, figure — then stop typing. True semantics pay dividends: screen readers announce content correctly, browsers build an accessibility tree for free, and search engines parse structure without guesswork. Fewer wrappers also mean fewer bytes over the wire and a shallower DOM for the rendering engine to traverse, so your First Contentful Paint stays in the green. Think of it like packing carry-on instead of checked luggage: you land, open the site, and everything important is already with you.

4.1 The Anti-Pattern

<div class="wrapper">
  <div class="header">
    <img src="logo.png" width="500" />
  </div>
  <div class="main">
    <h1>Title</h1>
  </div>
</div>

4.2 The Right Way

header.site-header
  img(src="/img/logo.svg" alt="Leonov Design")
main
  h1 How to Speed Up Your Custom-Coded Website?

• SVG over oversized PNG.
• Use real structural elements (header, main) so browsers can perform smarter layout and prefetch decisions. Bonus: accessibility robots send you thank-you cards.

5. CSS: Modern Techniques That Feel Like Sci-Fi

5.1 Extract & Inline Critical CSS

Generate critical-above-the-fold rules during build and inline them into , deferring the rest with media=”print” swap trick.

npx critters target/index.html

5.2 Use content-visibility & Container Queries

Render only what’s in the viewport:

.article {
  content-visibility: auto;
  contain-intrinsic-size: 1000px;
}

This alone can deliver up to 7× faster initial rendering on long scrollers.

5.3 Humble BEM Naming

A fast site is also one that the next developer doesn’t refactor for three days straight. Keep .block__element–modifier and let SCSS @use split files logically.

6. Images: Reshape the Heavyweights

Rule #1: Never serve the same pixels twice.

Technique	Old Way Example	Better Example
Format	<img src=”hero.jpg”>	<img src=”hero.avif” type=”image/avif”>
Responsive sizes	none	sizes=”(min-width:60em) 50vw, 100vw”
LCP Boost	n/a	fetchpriority=”high” decoding=”async”
Lazy Load	JS plugin	loading=”lazy” (built-in)

AVIF offers 30-50 % smaller files than JPEG/WebP while retaining quality. More about best practices serving images here.

Eleventy’s Image plugin generates all variants in a single shortcode:

const Image = require("@11ty/eleventy-img");
async function hero(src, alt) {
  let stats = await Image(src, { widths:[480,960,1920], formats:["avif","webp"] });
  return Image.generateHTML(stats, { alt, loading:"lazy", decoding:"async" });
}

7. Fonts: FOUT-Free and Lightning-Fast

1. Self-host woff2 in /fonts.
2. Use <link rel=”preload” as=”font” type=”font/woff2″ crossorigin> to eliminate late discovery.
3. Add font-display: swap in @font-face.
4. Group families into a single file; variable fonts often weigh less than 3 static cuts. 

8. JavaScript: Smaller, Smarter, Later

8.1 Partial Hydration a.k.a Islands Architecture

Rather than sending React to paint a static brochure, hydrate only interactive widgets:

<is-land on:visible>
  <counter-island data-start="0"></counter-island>
</is-land>

Eleventy ships a zero-runtime solution; call custom elements when they scroll into view, cutting JS payload by ~70 %. More about island methodology here.

8.2 Split On Intent

• type=”module” for modern browsers, nomodule fallback for dinosaurs.
• Dynamic import() for feature gates.
• Prefer native Web Components over monolithic SPA frameworks.

9. Network Layer: Moving Bits Faster Than Gossip

9.1 HTTP/3 + QUIC

Enabling HTTP/3 on your host (Cloudflare, Netlify, Fastly) slashes handshake latency by a full RTT, especially on flaky 4G.

9.2 103 Early Hints

Send critical Link: <…>; rel=preload headers before the HTML lands, letting the browser warm the cache sooner. Support is now production-ready in most CDNs.

9.3 Compression: Brotli or Zstd?

Brotli wins for text; Zstd edges ahead for binary payloads and is gaining CDN support. Configure server to negotiate the best algorithm.

10. Caching: Teach the Browser to Chill

Cache-Control: public, max-age=31536000, immutable

Couple fingerprinted filenames (app.a1b2c3.js) with immutable so repeat visits bypass revalidation entirely. For API responses, sprinkle stale-while-revalidate=60 to avoid blocking on network.

11. Service Workers: Your Own Edge Cache

Install a service worker that:

• Serves pre-cached static assets instantly.
• Falls back to network then cache for HTML (so users always see fresh content).
• Uses Cache.first() for images, Network.first() for JSON.

Remember to version your worker script or you’ll be debugging yesterday’s code all year.

self.addEventListener("fetch", event => {
  if (event.request.destination === "image") {
    event.respondWith(caches.match(event.request).then(resp => resp || fetch(event.request)));
  }
});

12. Hosting on the Edge

Netlify Edge Functions (powered by Deno) let you run auth checks or A/B logic milliseconds from the user without dragging everything back to us-east-1. Cache responses at the edge and you’re practically teleporting data.

13. Priority Hints, Please!

Drop fetchpriority=”high” on your LCP hero image so the browser stops treating it like the intern fetching coffee. Combine with rel=”preload” and as=”image”.

14. Lazy-Load Everything Else

HTML got a gym membership: loading=”lazy” for images, fetchpriority=”low” for below-the-fold thumbnails, and loading=”lazy” for iframes (YouTube embeds drop ~100 kB on first paint).

15. Modern CSS Wins

• Container queries let cards adapt without JS resize listeners.
• content-visibility + contain-intrinsic-size free up rendering budget.
• accent-color = fewer images for custom checkboxes.

16. Common Pitfalls (a.k.a “How Did My Lighthouse 100 Become 45?”)

1. Unoptimized hero background (20 MB PNG—don’t laugh, we’ve seen worse).
2. Thirty Google Fonts at 400, 500, 700, italic, bold-italic—choose two weights max.
3. Legacy polyfills shipped to every visitor (core-js for IE 9, really?).
4. Client-side rendered navigation; SSR it or leave it static.
5. Inline SVG with 2 000 unneeded <desc> tags bloats HTML.
6. Ad blockers breaking first-party JS if you name your file ads.js.

17. Full Checklist Before You Hit “Deploy”

• Eleventy production build passes with no un-optimized images.
• npm run analyse shows JS < 50 kB compressed.
• npx lhci autorun green across the board.
• Edge or CDN configured for HTTP/3 + TLS 1.3.
• Fonts preloaded, swap policy set.
• Critical CSS inlined; the rest deferred.
• Service worker cache warmed.
• robots.txt & sitemap.xml updated.

Tape this list to your monitor like an airline checklist—pilots use them for a reason.

18. The “Wrong vs Right” Mini-Gallery

JS Bundle Splat

<script src="/js/app.bundle.js"></script> <!-- 900 kB -->

Bundle-less Modules

<script type="module" src="/js/init.mjs" async></script> <!-- 28 kB -->

Inline Styles Gone Rogue

<h1 style="font-size:64px;color:red">Welcome</h1>

Anatomically Correct CSS

h1 { font-size: clamp(2rem, 5vw + 1rem, 4rem); color: var(--brand-red); }

Feel the cholesterol drain away.

19. Conclusion: Fast Sites, Happy Visitors

Performance isn’t a feature—it’s table-stakes. By embracing Eleventy’s no-nonsense static ethos, modern CSS powers, savvy caching, and a sprinkle of edge magic, you’ll reclaim user time, crush Core Web Vitals, and maybe even leave your competition wondering if you bribed Lighthouse. You didn’t—you just cared more.

Now go forth, ship pages that load quicker than readers can say “Leonov Design,” and remember: friends don’t let friends deploy unoptimised JPEGs.

Further Reading (and the fine folks whose research you just inhaled):

Eleventy docs, Web.dev articles on fetch priority, critical CSS, content-visibility, and lazy-loading, DebugBear on fonts and content-visibility, HackerNoon on AVIF, MDN on caching, Iron-Out on Early Hints, RivendellWeb on Brotli vs Zstd, Netlify Edge Docs, Codezup on service workers. Happy coding!

Don’t wait, do it!

When you add it all up—lightweight markup, surgical CSS, tiny bundles of hydration-only JavaScript, and edge-level caching—you’re not just shaving milliseconds; you’re giving visitors back precious moments of their lives. A fast site tells every would-be customer that you respect their time and take your craft seriously. If that sounds like the kind of experience you want for your brand, drop us a line at LeonovDesign. We hand-code, fine-tune, and launch custom Eleventy sites that hit 100/100 on PageSpeed Insights and feel instant on any device—so your business is the one they remember, not the one they bounced from. Let’s build something blazingly fast together.