DEV Community

Cover image for JavaScript Tips to Improve Your Webpage Performance
Mark Vassilevskiy
Mark Vassilevskiy

Posted on

JavaScript Tips to Improve Your Webpage Performance

One of the most important things, when you're building a website, is ensuring its good performance. When people visit your webpage, they don't want to wait for 10 minutes until the page (and all the images) load. In a survey, it was found that 47% of visitors expect a website to load in less than 2 seconds and 40% of visitors leave the website if it takes more than 3 seconds to load.
Many sites are built on JavaScript and improving performance isn't one of the easiest tasks. However, I'll show you some effective ways to do it.


1. Local Variables

Whenever you call a certain function, the variables that are used to define that function are stored inside. Variables can be categorized into two types.

  • Local variables- Variables that are defined only within themselves.
  • Global variables - Variables that are used throughout the script.

At the time when you're calling a function, the browser does an activity that is termed as scope lookup. With the increase in the number of scopes in the scope chain, there's also an increase in the amount of time taken to access variables that are outside the current scope.

That's the reason why an engine takes a long time to access a global variable as compared to a local variable. This means that if you define most of the variables locally, then there will be a rapid decrease in the time required by the engine to search them. Hence, it will boost the overall speed of the application.

2. Webpack

When the size of your file increases by adding new JavaScript modules or scripts respectively, your code just gets slower and slower.

Webpack is an open-source JavaScript module bundler. It is made primarily for JavaScript. Webpack creates the dependency graph using the existing module. Webpack explores the packages and creates a new package with a minimum number of files that are required to run the application.

3. Location

One of the simplest and easiest ways to improve your performance is to move your JavaScript code to the bottom of the page. Because when your page first loads, it needs texts, images, etc, and only then will it need to execute the JavaScript code.

4. Gzip Compression

JavaScript files can be very large and that may impact the loading time of your website. Gzip is a software that can be used to compress your JavaScript file.
When a browser requests a resource, the server compresses the response before sending it to the web browser. This software reduces the size of the JavaScript file, saves bandwidth, and accelerates the performance of the website.

5. JavaScript Cache API

The second method to increase the performance of your site is to use cache in your browser. When your browser launches your code, it repeatedly opens the same script again. If you use your cache right, it will open the already saved script the next time and the performance will improve immediately.

6. Acces to DOM

The DOM (Document Object Model) is an object-oriented representation of the web page, which can be modified with a scripting language such as JavaScript. The browser has to refresh the page whenever you interact with the DOM outside the JavaScript native environment. It's good to keep DOM access to a minimum or in your web application.


Conclusion

I tried to find the best ways to improve the performance of your webpage with JavaScript tips. I've been using some of these myself for over a year. And I just want you to remember that people love it when there are no lags and bugs on the webpage they're opening. And this too is an important thing.

Discussion (4)

Collapse
lukeshiru profile image
LUKESHIRU

A few things about the topics mentioned:

  • Local Variables: The important thing about avoiding global variables is not so much performance, but actually security.
  • Webpack: There are bundlers way better than WebPack if we care about FCP, like Rollup. But, the bundler will have no effect whatsoever if the app is coded poorly (not helping treeshacking, for example), or the bundler is misconfigured.
  • Location: Having the async and defer attributes, the location of the scripts can be on the header.
  • Access to DOM: If you will not interact with the DOM from JS, then why do you even have JS to begin with?

Also, I think some other things weren't mentioned:

  • Avoid JS when possible: JS will never be faster than just HTML+CSS, so if your site will be static and only have some animations, then you can skip JS altogether.
  • Take stuff away from the main thread: When possible, use workers, they allow you to take processes to a new thread or even handle the caching and serving of resources, which actually makes your app load faster.
  • Use CDNs: CDNs such as CloudFlare will make loading your site in remote places way faster than just serving it yourself directly.

Cheers!

Collapse
explosion profile image
--Explosion--

I disagree with "Avoid JS when possible". Server side rendered sites can be good, but they often take a long time to render before sending the page to you, while a skeleton loader is much more preferable. I do agree with it to an extent though, because using excess javascript can slow down the page. For animations and styles it's a lot better to skip JS altogether, but don't go to crazy with the "ONLY CSS" stuff. For me the best way to build a site is through something like Nuxt.js, which statically generates your site. Making it lightning fast.

Collapse
lukeshiru profile image
LUKESHIRU

Take a look at Astro or Remix, that's the type of tool I think of when I say "avoid JS when possible". They keep JS to a minimum, do a lot of SSR and they are blazing fast compared to any SPA.

Collapse
pavelloz profile image
Paweł Kowalski

Im in the process of writing an article on brotli compression and I can say right now, it rocks. :-)