Everything involving code writing can be optimized, from artificial intelligence and databases to mobile apps and websites. The only limits are your time restraints and requirements.
Yet when it comes to web application programming, there is the front end, i.e. how the product or service visually behaves when you work with it, and the back end, which is the code and infrastructure that make it work.
Both parts are equally important and deserve separate blog posts, so today we'd like to start with front-end optimization.
The front end of a website consists of three big parts: HTML, CSS, and JavaScript, so this is where we start. And then we'll proceed with more specific aspects of website optimization.
HTML
HTML provides only the basic structure of your site, so it affects the loading speed only a wee bit. Thus, its optimization won't bring any significant outcome.
Minification. The only thing you can apply here is usual minification practices such as removing line breaks and duplicate spaces, shorting class names, eliding attributes, and so on. All of them are aimed to decrease the amount of code necessary to be downloaded by the end-user.
The Store
Check for more
CSS
Bundling. Since CSS files describe the layout and presentation of your website, they can be quite big. In such cases, web app developers split them into parts called bundles. To do that splitting, you need to set up corresponding tools during the development process.
The team should additionally agree on the bundling approach, since bulky bundles affect the website performance negatively, as well as too many small ones. Sometimes, you'll want to measure and compare your website's performance to figure out if your bundling approach is good enough.
Minification. You can also minify CSS files. This is a compression technique that removes comments, new line and white space characters to make the overall code smaller in size. This technique allows decreasing the CSS files by up to 20% according to our estimates.
JavaScript
This is where the biggest part of optimization happens since JavaScript basically controls the behavior of some of your UI elements.
Bundling. JavaScript bundles are necessary for any big site, as they help avoid downloading all the code when you open it for the first time. Instead, you'll download only the code necessary for the particular page you've opened.
Minification. The JavaScript code can as well be minified for the same purpose of decreasing the file size. Of course, the minification tools are not used manually but rather get launched automatically during the deployment process.
Library selection. As a website\application development company, we recommend keeping an eye on the size of the libraries you add to the code. Our advice is to use a minimum of them, i.e. only when they're necessary.
Also, there's this Import Cost VSCode extension that allows seeing the size of the library you import immediately in the code. Similar extensions for the tools of your choice should exist as well.
Tree shaking. In the context of JavaScript, tree shaking conveys the idea of checking if you have any 'dead', i.e. unused code in your website.
Surely any code that has been once written serves some purpose, but it might be so that some parts got too outdated or implement new functionality that is not yet used in the production version, and thus can be removed.
The tree shaking task needs to be enabled manually in Bundler, Rollup, and Parcel, while Webpack 2.2+ does it by default.
Additional Techniques
And now let’s proceed to the optimization tricks not related to code.
Image optimization. Images take about 50% of the content, so optimizing them helps a lot. We use different image sizes for different screens, and our preferable image format is WebP. Google states Webp images 34% or even less space than the same PNG and JPEG images.
Since we're talking about code optimization here, we're not going to cover image optimization practices. But there is a huge lot of them, from removing unnecessary image data and using SVG format for vector images to 'lazy load' and online tools for optimized image delivery on the fly. Some of them can also be added as automatic tasks during the production deployment phase.
Caching. Basically, You can cache everything: data loaded in browser, API code, database contents, and even data running between database and API. Cache data can be saved to a file, to another database, or you can store it in RAM. In other words, you can find loads of ways to optimize caching and each has dozens of libraries implementing them.
If we're talking about standard or most popular solutions, it’s Redis for cache database responses on the back end. On the front end, the cache is usually written to the browser's localStorage where it has no expiration date. For progressive web apps popular among cross-platform application projects, you have an option to store data like a mobile app and work offline.
Tool selection. Selecting the right architecture, framework, libraries, etc. is extremely important in terms of further optimization. Usually, a project architect is responsible for these choices.
For instance, in one of our previous posts, we mentioned Preact, a React-like library that takes much less space. But going with that means a lot of React functions will be inaccessible and some approaches might seem to be too doubtful for your case. Thus, you'll need to understand if a particular tool fits your project before going with it.
Performance testing. Techniques used for performance testing can point out what else can be optimized in your code. For instance, the Coverage Table tool in Google Chrome allows to 'shake the three' and see if there is any code that never gets executed.
Lighthouse, a tool popular among QA experts, also helps improve the quality and performance of the web app by providing useful optimization requirements. For instance, it might recommend converting the overweight animated GIF into a video format, or reveal unnecessary page redirects, or suggest minifying CSS and JS files.
Load Testing. The idea behind this is that the QA engineer can use special scripts and macros to emulate multiple simultaneous requests to a server or a page to find performance bottlenecks and study the app behavior during high load. The most popular tool here is Apache Jmeter, also listed in the blog post above.
Bundling. Since bundling is so important, you’ll find a lot of tools and plugins for them that might be helpful. However, setting them is not an easy task.
In our practice, we tend to use WebPack and a helpful plugin called WebPack Analyzer that visualizes the size and dependencies across packages.
Load Balancer. Though it relates more to back-end optimization, it should be mentioned here as one of the most effective ways to get ready for high load in the practice of our outsource web development company.
If you write the back-end code in a specific way and collect it into the containers according to pre-described rules, then you can set up the load balancers on Azure or similar services. Such a service will then create new service instances as the load on your web app grows.
For instance, if you have a service showing products by the chosen category and it gets a lot of traffic, a new identical service will be created to direct a part of users to it.
Content Delivery Networks. CDN allows connecting external dependencies to the project. With this approach, a user can load your code not from your server, but from the one that is geographically closer to them.
Server response compression. To decrease traffic and page load time, you can compress server responses via a tool like GZIP. However, often the time required to zip and unzip the data will be bigger than the time you're going to save.
Bottom line
In 2021, there are so many web optimization techniques that you can no longer go with best practices just for the sake of optimization. Web app optimization also requires research and strategy.
