5 Simple Tricks to Boost Your Website Performance

Hi, Jerfareza here.
This time I would like to share a collection of tricks that I'm implementing in my websites to improve their performance.

1. Use Smaller Font File

If you self-host your fonts, try to use modern file extensions woff or woff2 format instead of ttf. ttf (True Type Font) fonts are considered the 'old' type, developed as far as the 1980s. They typically have larger sizes than their counterparts woff (Web Open Font Format), a rather new type developed as recently as 2009 woff.

The size difference is evident here.

There are numerous online converters out there to help you convert ttf to woff/woff2 easily.

2. Avoid Adding Unnecessary Package

Every npm package that you add to your bundle is a cost. That's the undeniable truth. Do you really need that package that you may replace with a few lines of code or that package that you only use once on your page?

One of the popular utility packages for time and date is moment.js. It's handy, yes, but if not used correctly, it may bloat the size of your client bundle. I stopped using it a while ago since I don't really show many dates on my website.

Always think before adding a new package to your code. The default is not to use. But if you have to add, use Bundlephobia to find out how big is the package you want, or if it has a better, slimmer alternative.

3. Defer Not Critical Third-Party Scripts

The easiest example of this is Google Analytics, which is an indispensable tool for all website owners. But it's also blocking the main thread and make Lighthouse complains every single time.

To deal with this, try to load the scripts last in your code. Typically you can put it in the last position before the closing tag of HTML.

In React I do something like:

        {/* Global Site Tag (gtag.js) - Google Analytics */}
        <script
            defer
            src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
        />
    </Html>

This will result in the script being called last:

4. Utilize Code Splitting

Code splitting is the splitting of code into various bundles or components, which can then be loaded on-demand or in parallel. (from Mozilla)

Bundlers like Webpack or Rollup make it easy for us to separate some parts of our website page to load independently beside the main thread. With React it's even easier: dynamic-import.

import("./expensiveComponent").then(component => {
  <>YOUR HEAVY DUTY COMPONENT HERE</>
});

Even much easier in Next.Js:

import dynamic from 'next/dynamic';
const DynamicProfile = dynamic(() => import('components/Profile'));
...
return (
    <>
        <DynamicProfile />
    </>

5. Pay Attention to Above & Below the Fold

Ok, this last trick might not be a simple one. This may involve changing your website design and may apply more to mobile users compared to desktop users. But since people use smartphones most of the time, optimizing for mobile is more paramount than desktop.

Let's think of it this way. In mobile, you have minimal space, although screen size depends on the device type. And to make use of that precious space, your browser does not load everything all at once. It loads your website part-by-part.

The part of your website shown on your screen right after page load is called 'Above the fold'. Everything else is not shown immediately, such as the footer or the main content below a beautiful hero image, is called 'Below the fold'. To boost the performance, all you have to do is optimize those visible parts. Simple. Anything else you can load later, it's not important to show in the initial.

In my photography website, I purposely made a huge hero section covering the whole screen. Aside from a marketing point of view, I did this to improve the performance. All Google sees for the first time on my home page is that hero, and thus I need to maximize the optimization of that hero.

This gets me a score of 90 for mobile in Page Speed Insight!

Closing

That's it. I hope these tricks are useful.

One trick that I initially wanted to include in the article is optimizing images. But then again, image optimization is a huge and complex topic and not really a 'trick'. Plus, there are already so many great articles out there that delve deep into the matter.