How To Build a Ridiculously Fast Website

And So the Quest Begins

Welcome to our series about building fast websites.

Through a total of 6 articles we’ll show you all the techniques we used to make hegecoin.com fast.

How fast?

Really fast.

Literally loading in the blink of an eye on high-end devices.

Fast by desktop standards, even on low-budget phones with janky connections.

Perfect PageSpeed score fast. Even with lots of content, images, animations, and custom fonts.

And here’s the good news: You can do this too. There’s no magic here. Just solid craftsmanship, across all parts of the stack.

Come follow along and learn how it’s done!

Does Speed Even Matter? Yes, It Does.

First off, why should you even care about how fast your website is?

You should definitely care, because a slow website will:

• Make your conversion rates drop.
• Make your visitors less satisfied.
• Drop retention.
• Lead to a lower ranking on Google.

Slow websites are especially a problem on slower devices with slower connections. On decent desktops with fast Internet, most sites feel okay. Even bad ones.

But if you target the slow end of the spectrum, you’ll see positive result across the board. On a budget phone with janky Internet, your site will still feel fast. Surprisingly fast. On a desktop with good Internet, it will feel unreal.

Table of Contents

Without further ado, here is the entire series, in all its glory:

• Part 0: Introduction (this article)
• Part 1: Big Picture
  • Level 1: Static Website + CDN
  • Level 2: Fingerprint Assets for Optimal Caching
  • Level 3: No Cookies
• Part 2: Optimize Fonts
  • Level 1: Self-Host, Subset, Use WOFF2
  • Level 2: Preload Fonts
  • Level 3: Subsetmaxx, Inline
• Part 3: Optimize Images
  • Level 1: Use Modern Image Formats, Set Width and Height
  • Level 2: Lazy Load Images
  • Level 3: Responsive Images, Optimize SVGs
• Part 4: Optimize HTML and JavaScript
  • Level 1: No Frameworks, No Render-Blocking JavaScript
  • Level 2: Use Native HTML Features
  • Level 3: Minify, Shorten Fingerprints
• Part 5: Optimize CSS
  • Level 1: Custom CSS, Preload, Animations
  • Level 2: Use Native CSS Features
  • Level 3: Minify, Inline, Split
• Part 6: Final Results
  • How Fast is Our New Website?
  • Takeaways
  • Detailed results: Overview
  • Detailed results: Page Size and Download Time
  • Detailed results: Rendering Benchmarks

Thanks For Reading

We hope this series will help you in your quest to build websites that truly impress your visitors.

Continue reading here: Part 1: Big Picture.

---

Want to connect with us? Drop by our Telegram Hegequarters and say hi, or check out our account on X. Good vibes guaranteed!

Also see our GitHub for the full source code of this website.

Yours truly,
— Team Hege ✌️

PS. Check out the piece “APHRODITE” below. This ETERNAL collectible is up for sale on HEGE DRiP!