Performance is one of the most important concerns when developing an application. All software developers should monitor and improve performance in every layer of the application. From the database to the server-side language, there are plenty of opportunities for performance issues to arise, and the front end is certainly no exception.
In short, users are impatient. You’re probably aware of research showing that most users expect a page to load in under two seconds. If your application is too slow—and what “slow” means keeps decreasing—users will just give up.
DHH (David Heinemeier Hanson), the creator of the Ruby On Rails framework, once said something to the effect of “the greatest tool for creating good software is the delete key.” He was talking about software design, not performance, but I think the same reasoning applies here.
“The greatest tool for creating good software is the delete key.” David Heinemeier Hanson, creator of the Ruby on Rails framework
- White lines
- White spaces
The items above are necessary in order to make code easier to read and navigate, but when it comes to the interpretation or compilation of the code, they’re just useless bytes. How can we solve this?
The answer is to use a process called minification. Minification is the process of removing all of those “useless” characters we’ve just described from source code to make the file smaller.
3. Use Gzip compression
Imagine if instead of sending a big file to the browser, your web server could send a zipped file to make it lighter. That way, the browser would finish downloading the file sooner. After the browser received the compressed file, it could then extract the document and use it as usual. Well, that’s exactly what Gzip is for!
4. Keep DOM interaction to a minimum
Another useful technique is to cache DOM elements, which simply means storing references to frequently accessed elements and using that reference when accessing the same object again in the future. By doing so, you can obtain significant performance gains.
5. Switch to HTTP/2
Delay loading anything not needed for the initial page load. Not all functions are needed when the page first loads. For example, you can delay loading functions that require users to perform a given action.
That way you avoid loading JS code that would do nothing but delay the initial load and display of the page. Once the browser loads the page, you can load the other pieces of functionality so that they’re ready when users need them.
7. Use performance improvement tactics that work with other languages
The software industry has never been so fast-paced, and it’s becoming increasingly hard for companies to stay afloat. In this scenario, one organization’s mistake is another’s opportunity.
Performance is certainly one of the areas where mistakes can make a huge impact. As Jeff Atwood wrote almost ten years ago, “Performance is a feature.” In this highly competitive era we live in, organizations just can’t afford to develop slow applications.