⚠ I havent edited this article.

These are the results: 100 Score on Google Pagespeed Insights Test.

Why would you want a fast website? You care about your users, right? Then we don’t have to list anything better than that.

How to Build a Fast Website

Step one: let JavaScript frameworks be your last resort

Don’t be tempted to add React, Vue or Angular to your website yet. Not even jQuery. What interactivity do you need? To toggle a menu? You can use a few lines of JavaScript to do that. This is probably a very long JavaScript function to toggle the comments boxes on the site you see above:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
function reply(element)
{
  const nextSibling = element.nextElementSibling;
  if (nextSibling.classList.contains("elev_hide_form")) {
    nextSibling.classList.add("elev_show_form");
    nextSibling.classList.remove("elev_hide_form");
    element.innerText = "CLOSE";
  } else {
    nextSibling.classList.remove("elev_show_form");
    nextSibling.classList.add("elev_hide_form");
    element.innerText = "REPLY";
  }
}

Someone could even write a single line of JavaScript to do that, I just wanted to write the logic that makes sense to me and not easy for me to forget in future.

That is almost all the JavaScript I needed for the website! Simple animations belong to CSS, not JavaScript.

Form submission? Let html handle that and then you can do the checks from the server. Besides, client side checks are very limited in effectiveness.

Step two: prefer JPEG images and compress them ruthlessly

Static website generators like GatsbyJS and Hugo allow you to optimize the images by compressing them at build time. Also, there are special Node.js scripts and apps that cann help you compress the images.

65% - 75% quality JPEGs are just right for the web. Whenever you compress the images to 75% quality, you can save more than 90% in size. You can compress a 5MB image at 100% to 400KB! That is huge.

Also, the reason you must always avoid PNGs is the fact that you can’t compress them like JPEGs. And when you do compress them, you lose tremendous visual quality.

In my case, I used Hugo to compress the images at build time using the following snippet:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
{{ if $image }}
{{ $resized := $image.Resize "600x" }}
<div class="elev_post_card_head">
    {{ if $resized }}
    <a href="{{ .URL }}" rel="bookmark">
    <img src="{{ $resized.Permalink }}" alt="{{ $post.Params.title }}" />
    </a>
    {{ end }}
</div>
{{ end }}

As you can see, I am resizing the photos to 600 pixels maximum width. I don’t need anything larger since the images are displayed on cards smaller than that size.

For the other single post display, I adjusted it to 720 because of the maximum width of the page is around the same value.

The guidline should be your container width. If you have a container whose maximum width is 800px, there is no reason to make your images larger than 800px wide.

Step three: use a static website generator

A static website is faster than dynamic website because it is always sitting on the server ready to be sent to the client. This is as opposed to dynamic sites which are mostly generated for each request. If you cannot get away from dynamic websites, always use caching.

Step four: use external fonts correctly

This should have been step one. 😄

When you use external fonts, make sure they are not blocking. In this case, you load them such that it displays default fonts at first, then swaps out for the font of your choice when it has been loaded. This way, you will not block renders at all.

For example:

1
2
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Sorts+Mill+Goudy&display=swap" rel="stylesheet">

Notice the display=swap at the end of the url.

As a side note, only load the font weights that you actually need. Don’t load everything there is yet you only use two.

Step five: use a CDN

Cloudflare is free to use. And it allows your users to access your site at blazing speeds since they are accessing from the nearest data center. Content delivery network even works best if you are using a static website generator because then the assets of your website do not rely on a database or a dynamic server.

Conclusion

This article is still not covering everything, it is a work in progress. So, as shallow as it is, don’t shy from asking me questions for clarification. Cheers! you can shoot me an email through ck at elevatika dot com.


comments powered by Disqus

You might also like