DEV Community

Cover image for How I Got My Website to Load in 1 Second

How I Got My Website to Load in 1 Second

Jeremy Morgan on April 04, 2020

The front page of JeremyMorgan.com loads less than a second, most of the time, from various parts of the world. The website was fast before whe...
Collapse
 
xwero profile image
david duymelinck

This is an article about speeding up your static site build, not speeding up your page load.

If you are using netlify it doesn't matter how long your build is. Once the build is finished the server gets switched.
I think other static site hosters will have a similar setup.

Hugo is fast but you should be prepared to learn Go. If that is not something you want to do, stick with a static site generator in a language that you know.

Collapse
 
stereobooster profile image
stereobooster

I don't know Go, but I'm using Hugo for 1 year now...

Collapse
 
talha131 profile image
Talha Mansoor

Thank you for this beautiful and detailed write-up.

I checked a few pages of your website. You can further improve the speed by lazy loading the images.

Another area of improvement is making fewer HTTP requests. Like you can merge your main.css and syntax.css file, this way browser will have to fetch only one CSS file. You also load three separate JS files, which you can concatenate together into a single file.

Collapse
 
jeremycmorgan profile image
Jeremy Morgan

Thanks! That's among my next steps. I am on the fence about lazy loading but I will be combining CSS and JS even further, as well as pushing some assets out to their own domain/CDN. Right now I'm very happy with Netlify's speed.

Collapse
 
talha131 profile image
Talha Mansoor

I will be combining CSS and JS even further

Please do write on it when you finish it. I picked some new tools from your post on image optimization, so I would love to pick new tips on combing CSS and JS.

as well as pushing some assets out to their own domain/CDN.

I am curious. Is it necessary? Doesn't Netlify CDN handles all the assets?

Collapse
 
gabedunn profile image
Gabe Dunn

Netlify supports HTTP/2, which eliminates the need to bundle your files to reduce requests.

Collapse
 
tomap profile image
Thomas

I'd add a few items for your next comparison:

  • Hexo (static site generator in JS)
  • Google Firebase Hosting (10gb of static asset hosting)
  • Github hosting
  • Zeit (already mentioned)

And some of those hosting include free simple statistics, that could replace Google Analytics, and thus remove the need for JS in your site, unless your pride requires to have Google Analytics numbers :)

Collapse
 
stereobooster profile image
stereobooster

Which one does provide free statistics?

Collapse
 
tomap profile image
Thomas

Hexo is just a static site generator
Firebase has basic statistics
Github hosting don't provide any stats
And I don't know about Zeit

Collapse
 
randellbrianknight profile image
Randell Brian Knight

Thanks for providing that information. I recently purchased a dot com domain name but haven't done anything with it. I was thinking about moving my blogger page to it but am not sure how yet. Maybe I should just try to get it up and running first. First, I'll need to consider how (and who) to host it. I bought it on Dynadot because of the awesome price and was thinking about doing the blog first, then setting up my own email address on it. I don't really need the email, I just like the idea of having my own. Thanks again.

Collapse
 
stereobooster profile image
stereobooster

I chose same-ish tools:

  • Hugo
  • Parcel - to combine and minify assets
  • PostCSS - to use modern CSS
  • ganalytics - smaller Google analytics
  • lazysizes - for lazy loading images
  • quicklink - for faster page switch
  • I used simple links instead social widgets (for example, twitter button is about 100kb of JS)
  • Netlify for hosting
  • Cloudflare as CDN and DNS. Cloudflare would allow me to control subdomains and add other DNS records
  • Github to store source code
Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

My website loads in half a second (200ms for the DOM content) and the code is terribly unoptimized. In my experience, small filesizes and HTTP2 are the most important factors unless you're using rails, in which case you might as well give up.

Collapse
 
shaijut profile image
Shaiju T

I saw bug in your blog articles, there is a word blog in top. 😄

Collapse
 
ajkachnic profile image
Andrew

I don't know about how it works with Hugo, but in general zeit.co is also a great, free hosting choice!

Collapse
 
shaijut profile image
Shaiju T

Nice 😄 , Some questions:

  1. You have hosted Hugo in Netlify, But Which CDN you have used ?

  2. All this setup is free or you pay yearly price ?

Collapse
 
satvikpendem profile image
Satvik Pendem 🎉

Netlify is free. Hugo is also free of course. Netlify has their own CDN so you won't need another one.

Collapse
 
alan profile image
Alan

Why Netlify and not Zeit?

Collapse
 
jeremycmorgan profile image
Jeremy Morgan

I have never heard of Zeit and did not include it in my analysis. I will take a look at it in the future, however.

Collapse
 
levz0r profile image
Lev

Thank you for sharing this useful information!
It took almost 4 seconds to load here (I am currently located in Israel).
Also, are you using SSR?
Thanks