The title of this post is enough to pass my message. However, I will try to provide a better explanation and make my case clearer.

JavaScript

Can we agree on something? JavaScript should be a last resort. Full stop.

Let me explain.

jQuery, React, Angular, Vue and other JavaScript frameworks and libraries are amazing and very powerful. They even allow you to make a website very fast. For example, if you want a website, you can use Next.js or Gatsby.js and get something very feature-rich, with nice page transitions and other bells and whistles.

At what cost?

I have a Gatsby.js website that downloads very big JSON files just so it can use to hydrate pages when they have loaded. This is not a bug. It is a feature of Gatsby that allows it to make loading pages feel snappy by preloading. I loved using Gatsby so much on a small website, 10 pages. When I got to 100 pages is when I started feeling the pinch. So I can imagine what you will get when you have 10k pages. Maybe there is something I am missing, but I humbled myself, sacrificed all the speed and comfort, and started learning Hugo.

Hugo is a static generator that exports a good old HTML file. It also has assets optimization, like image compression, JavaScript and CSS minification, asset bundling, and so on. It even allows you to write styles directly using SCSS. I think these are cool features.

I decided I would make a website that uses minimal JavaScript. JavaScript is only used where plain HTML and CSS cannot work, like hiding and unhiding navigation box, hiding and unhiding input boxes, and so on.

Forms? Let HTML submit the forms. JavaScript makes life hard for people when you use it to submit forms. Ajax forms are great, yet they don’t impress me at all. I mean, why would you want to prevent the default behavior of HTML forms? In essence, you are eliminating some features of HTML, that it does well, and at what gain?

I think this is breaking the web and I feel bad whenever I want to do it.

My advice is that you should use JavaScript to handle forms if you are absolutely on a SPA, since that way, you get to preserve the state of the current window. However, for a blog, to submit comments and handle contact forms, please, avoid the hassle. Just let HTML do its thing.

So, we are now at a point where you have tried so much to implement the features using plain old HTML and CSS and you want to sprinkle some JS to make your website come alive. Don’t worry.

Let’s say you have 5 JavaScript files. Intead of linking all of them individually, you can bundle all of them together. There are tools for this. And in my favorite static site generator, I do:

{{ $plugins := resources.Get "js/plugins.js" }}
{{ $main := resources.Get "js/main.js" }}
{{ $slide := resources.Get "js/slide.js" }}

{{ $js := slice $plugins $main $slide | resources.Concat "js/bundle.js"}}

<script src="{{ ($js |  resources.Minify | fingerprint).Permalink }}"></script>

Image Assets

Graphics are amazing on the web. The use of colors, images, videos, and other things enable us to be more engaging and attractive. But wait until you have many images and the feature starts to work against you.

Back in 2017, I didn’t have any idea there is a difference between PNGs and JPGs. So, each time I resized images for my website, I would save them as PNGs. I loved PNG format because it would, on many occasions allow me to save the images as partly transparent. It was an attractive feature.

After a short while, I came across Google PageSpeed Insights. It had a different name back then I think. The thing is, I tested my website and scored a terrible 15/100. I was informed the website had several performance issues, and one of them was an image of 4MiB in size.

Images come in different formats. The most common ones are JPEGs and PNGs. Just know that JPEGs are better than PNGs when it comes to sharing images online, except when you need to share images that have transparent parts, like your logo or something similar.

Images have something called quality. Quality in simple terms determines how close the image you see is to how it was captured by the camera. Images are captured at 100% quality. However, you can get rid of some of this quality without perceived visual degradation and yet end up with a smaller image file.

In most cases, images you use for websites can be reduced in quality up to even 60% and you will still like how they look. This can save you up to a little over 90% in size. In my experience, I always save between 80-95% in file size.

Consider a file of 5MiB in size at 100% quality. At 60% quality, it can be as small as 250KB. Imagine how fast you will make your website when you compress your images that well.

There’s more! Most websites have a maximum width that is smaller than 1000px wide to make the content on the website more readable, right? We ended up with a 250KB image. However, you can find the image is more than 4000px wide. If we reduce that to 1000px wide, we can end up with an image that is 4 times smaller. Which hypothetically is around 65KB!

Then, there is SVG. SVGs are in most cases very tiny (like 1KB), yet can scale up to any size you need. So, your logo should not necessarily be a PNG file, let is be an SVG.

The advantage of an SVG is that when it is displayed, it looks very smooth and high quality. An SVG is made of curves, which can be redrawn at any size. This is as opposed to JPEGs and PNGs that are made up of single pixels, which are limited and scaling them to fit a larger area than the image makes them look “pixelated” which is to say they that individual squares making up the image become visible.

Available tools to compress images

  • Imagemin
  • CLI tools
  • Static website generators

I will highlight a bit about how to configure image compression in Hugo static website generator because it is so fast and so good at compressing images.

Assuming you have your images inside a folder called images inside your content folder, that is, /content/images/.

// layouts/shortcodes/compress.html

{{ $image := (.Get 0) }}
{{ $options := .Get 1 }}
{{ with .Site.GetPage "section" "images" }}
  {{ $original := .Resources.GetByPrefix  $image }}
  {{ with ($original.Resize $options) }}
  <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}">
  {{ end }}
{{ end }}

In your markdown file: {{< compress my_image "50x50" >}}

Code snippet from StackOveflow.

Conclusion

The web is a bit broken, and it is getting worse because we are not doing enough to stop it. We are doing much, but not enough. We just need to do more and we need to, by default, be there to improve, and reject anything that makes the web bad.

I will add more ideas to this list, and please contribute below.

comments powered by Disqus

You might also like