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.
Top comments (1)
Im in the process of writing an article on brotli compression and I can say right now, it rocks. :-)