Top 12 Tricks to Boost Site Performance in 2021

Thursday May 27, 2021

Slow and steady does not always win the race. When it comes to website speed optimization, being lightweight is the way to go!

Hashtag Website Speed Optimization.

1. Reduce Main-Thread work

Since JavaScript is single-threaded — the Main-Thread is basically the one focal point inside your browser which includes things such as the Call-Stack, Browser APIs ( setTimeout , Promise , AJAX etc.) and the different queues. The Main Thread performs all the actions to make a web site work such as:

• Parsing HTML.
• Executing scripts and user-events.
• Style and layout applications.
• Garbage Collection etc.

Successfully executing the below steps will help satisfy this crucial step and achieve good website speed optimization.

2. Minify your code

Doing this will lighten your file sizes and will make it easier for you to bundle your code for production. Minifying your HTML, CSS, JavaScript for production builds will definitely help you improve site performance because now the parser spends less time parsing past spaces and line-breaks.

The lighter the files, the faster they will load!

3. Defer your script files

Placing the defer attribute on your script tags like so:

<script src='something.js' defer> will literally defer the loading of these script files until the parser has finished constructing the DOM tree, to prevent bottlenecking the Critical Rendering Path. This will improve perceived load times for the user and will improve something known as First Contentful Paint (FCP).

4. Remove unused and commented code

Unused code is like wearing an empty bag-pack, hoping to use it some day. It will eventually start having an effect on performance! When measuring site-speed, try to keep your code as clean and optimized as you can. Remove any unnecessary and commented out code — this removes extra work for the parser. Huge time saver.

5. Use next-generation image formats

SVG, JPEG-2000, JPEG-XR and WebP are good examples. The main benefit they provide is powerful meta-data stripping along with improved image quality as opposed to regular JPEG and PNGs.

6. Lazy-load images & sections

This is a widely-used trick to load only what is in the current-viewport, instead of loading an entire page’s worth of images and sections all at once. Doing this will improve First Contentful Paint (FCP) & First Meaninfgul Paint (FMP), thus speeding up your site speed & improving User Experience.

7. Explicit WIDTH and HEIGHTs for images

Setting explicit dimensions for your images is not usually your first instinct — because you know, CSS and all. However, doing this can reduce something know as Layout-Shifting.

One of the many reasons this happens is — when the browser has still not loaded or fully loaded your stylesheet(s). An image that is loaded when the HTML file is parsed initially has no set dimensions, but a few milli-seconds later when the stylesheet is parsed — is when your styles are actually applied. Setting explicit dimensions will tell your browser — “Hey, this image is so and so dimensions, so load it appropriately”.

8. Setup efficient caching policies

HTTP caching is quite worth the effort because proper caching can provide a great User Experience to repeat-visitors. A server can tell the browser how long it should store the incoming resources (images, fonts, media files, scripts and stylesheets). For all requests after the initial request, the browser will use its local copy — rather than making a network request.

The downside to this is that users won’t see any updates to the UI.

9. Manage request chaining

The Critical Request Chain is a list of priority resources for the browser to fetch — such as fonts, stylesheets and vendor libraries such as jQuery. Reducing the number of requests and/or optimizing them by fetching only when a certain user-action is taken is one good solution to improve load times!

10. Appropriately size images

You wouldn’t want to load a 3000×1500 pixel image for your logo would you? Making rational choices for image sizes will help you keep your file sizes in check. Further optimizations like image formats, lazy-loading and further image compression can enhance image quality to improve file sizes.

11. Compress your files

Use a tool such as G-Zip — which basically compresses your HTML, CSS and JavaScript files to strip out extra meta-data. This will reduce file sizes! Now thats good website speed optimization!

12. Audit your site frequently

Use tools such as Google Lighthouse, PageSpeed Insights and GT-Metrix. These tools will audit your site for both mobile and desktop — Mobile being the crucial word here since 68.1% of all website visits in 2020 came from mobile-devices (according to perficient.com).

13. Use a good web hosting service

Using this right tools for the job is crucial to success. Having web hosting that is affordable, scalable and offers help when you need it will save you money, time a headache. Read this article to find out how to host your website using a web hosting company called BlueHost. Or you can just read this article on Medium instead.

Conclusion

(Disclosure: This article contains affiliate links for which I might receive a small commission through BlueHost, at no extra cost to you if you choose to purchase through my links).

The faster your site is, the more people will be willing to interact with it. Plain and simple. Use these above mentioned tricks to… do the trick and increase conversions, user stay-times and user-interactivity!

Good luck!

Please feel free to message me if you have any questions whatsoever.

Resources:

Next-gen Images:
https://web.dev/uses-webp-images/

Cumulative Layout Shift:
https://web.dev/optimize-cls/?utm_source=lighthouse&utm_medium=devtools#images-without-dimensions

Minimize main thread work
https://web.dev/mainthread-work-breakdown/?utm_source=lighthouse&utm_medium=devtools

Browser Caching
https://web.dev/uses-long-cache-ttl/?utm_source=lighthouse&utm_medium=devtools

Mobile Vs. Desktop
https://www.perficient.com/insights/research-hub/mobile-vs-desktop-usage#:~:text=Globally%2C%2068.1%25%20of%20all%20website,increase%20from%2063.3%25%20in%202019.

More content at plainenglish.io