Making a super-fast simple website

Probably one of the simplest websites out there. But there’s a little more going on behind the scenes than one might guess.

Designing the basics

font-size: calc(16px + 10vw);

Making it fast

  1. Host the font on my own server instead of Google Fonts. This sacrifices any chance of the font already being cached, but avoids an extra DNS lookup, SSL handshake, etc. Also, I’m still a bit unsure about the GDPR compliance of Google Fonts, althought this discussion suggests it should be fine.
  2. Subset the font. Since we only use the font to render the text “Jan Pöschko”, we only need a small fraction of its glyphs. Aggressive subsetting wouldn’t make sense for a (potentially cached) font on a CDN used for a lot of varying text, but that’s not the case here. So I used an online Font Subsetter with only the needed characters and then the woff2 tools to turn the resulting TTF file (still useful for older browsers) back into a (smaller) WOFF2 font (which works in all modern browsers). This brings the font size down from 17 KB to 2,132 bytes.
  3. Inline the font as a data URL. Since the font is now really small, we can inline it to save another network request — at least for modern browsers that support WOFF2. I still include a separate TTF URL for browsers that don’t support WOFF2. I used an online Data URL Maker for this. Base64-encoding the binary font data blows it up a little bit (to 2,867 bytes), but that’s still worth it.

Keeping it simple

AddOutputFilterByType DEFLATE text/html

Measuring performance

Conclusion

--

--

--

Software developer at @WolframResearch, photographer, traveller.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Quick Tip — How to find the difference between two numbers

Why MVL? — 2 What MVL can Solve — How MVL Works

Are you a problem-solver or a problem-builder software developer?

Azure Logic Apps Anywhere: Host your logic apps in AWS Fargate

Introducing FeatureHub — open source Feature Flag service

Key-Value Store — NoSQL Database

Strings and Performances!

The result from the Benchmarks

The simplest way to write Dockerfile!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jan Pöschko

Jan Pöschko

Software developer at @WolframResearch, photographer, traveller.

More from Medium

4 Simple Steps to Make Your Website Accessible

a11y

Flexbox Container Width Broken In Direction Column — Why And How To solve

5 Articles every WebDev should read this week (#51)

College Decider: Your College Application Companion