Yo guys,

I want to share and also document these tricks too for my next websites.

Note: we are talking about "website". Unlike web apps where you can interact a lot (click here to open the modal, solve this, do that,...). Websites simply present the information/content (blog posting, product information, landing,...)

And the website is the first thing customers will visit and decide whether to roll with us or not. So we have to play a really nice game here 😎.

The Ranking Indexes

There are multiple criteria, indeed, things like:

• Good content, SEO-optimized.

• Mobile-friendly.

• High PageSpeed score.

• ...

So if 2 websites compete with each other, A has a better PS score? A result will be shown first.

Let's jump into the tips

Serve static files using a high-speed internet server

There are plenty of ways to do this:

• CDN (S3, Google Cloud, Bunny,...); The best.

  • Pay on usage

  • Your files will be distributed across the globe and the CDN service will serve the files based on the location of the users (nearest server to serve)

  • Custom cache rules & expiration.

  • Mobile users (especially 3G~5G) will love this.

• High-speed VPS/Server

  • Setup your own nginx and let it handles

  • Pricing might be a bit higher (cuz you pay for the server, not the requests)

Load CSS in background / async mode

2020+ tip:

<link 
    rel="stylesheet" 
    href="/styles.css"
    media="print" onload="this.media='all'"
/>

So basically browsers will load the CSS in the background (because of printing mode). After loaded, we added a hook there to change the default styling.

The ugly thing is that the HTML comes, but styling not yet => we'll see things not so cool. But yeah, we can add some improvements like:

• <style>...</style> for some initial styles.

• Loading indicator.

• ...

Load JS in background mode

There are 2 ways:

• defer attribute loads scripts in the background. The script will be executed after the HTML document has been parsed but before the DOMContentLoaded event fires. Multiple defer scripts will be executed in the order they appear in the HTML document.

• async attribute, the browser continues to parse the HTML document while fetching the script file in the background. When the script file is downloaded, it will be executed asynchronously without blocking the HTML parsing process.

  • Basically yolo-loading.

Put it simply:

• Do your scripts have dependencies?

  • Yes => Use defer

  • No => Use async

I usually go like this:

<script src="jquery.slim.min.js" defer></script>
<script src="slider.min.js" defer></script>
<script src="web.js" defer></script>

// web.js
$(document).ready(function () {
    // work fine here
});

Optimized Images

• https://tinyjpg.com/ to optimize png & jpg (GOOD Quality)

• Use webp (bye bye IE, we don't miss you)

And, back to the #1, Use CDN to serve static files.

Optimized DOM Nodes

You don't return HTML content with 1000 articles at once. Instead, paginate them.

Load about 5~10 articles at first, then let users click the "Next page" or "Load more" to retrieve more content.

Ending

That's all, I'll see if I will come up with other things but noted these for now hehe.

Thanks for reading.