11 Things That Will Make Your Web Application Load Faster

https://www.pexels.com/photo/blurred-motion-of-illuminated-railroad-station-in-city-253647/

1. Caching

Static caching is saving content’s copy in browser’s memory after initial serving, so that subsequent requests can be served faster — from memory, rather than sending new request to the server to fetch it. In the initial serving, server can setup various cache parameters, like how long will browser keep copy, what kind of files to cache, etc.

2. CDN (Content Delivery Network)

To ensure faster content delivery to your clients, use CDN: highly optimized services which will serve your clients probably faster than your own origin. They also provide global accessibility by having multiple Points of Presence (PoPs), automatic data analytics, less delays, lower rates of network congestion and protection against DDoS attacks.

3. Compression

Using gzip or brotli compression you will reduce bundle size which in result means faster download of the assets. Configuring this utility shouldn’t be too complicated for most of the technologies today.

4. Tweak HTTP requests

If it is possible, limit number of requests used for fetching initial data. Browsers have limitation on maximum number of parallel TCP connections to one origin (usually 6), so some requests can get stalled, which results in slower initial page load.

5. Remove unused code

As we all know, we shouldn’t have unused code, but it happens often. Today, there are plenty of tools for every technology that will help you automate this step: warnings and errors in compile time that will remind or force you to remove unused variables, functions… Unnecessary code will generate bigger bundle files for which it will take longer to download and render.

6. Tweak bundling process

Add tools and plugins in your building process that will help you create best optimized production build. Experiment with different compilers, bundlers, task runners and minifiers, and go with the one that suits best for your application.

7. Images

If your app uses a lot of images, there are several things you can do. Quality images are generally big in size, so it takes time to download and show them. You can compress them by specific percentage and still get the quality that the human eye cannot notice the difference. Also, depending on application, you can crop images to fit some predefined dimensions, for example, you don’t need 3200x2400px image for a tiny email profile picture.

8. Lazy loading modules

If your application has multiple pages on different URL paths, you can implement lazy loading modules: load module for specific page only when user access it on some URL. That will reduce size of the initial bundle, which again results in faster initial download and render.

9. SSR (Server Side Rendering)

As its’ name may suggest, Server Side Rendering is technique where you move creation of complete HTML document from client to server. In CSR (Client Side Rendering) user sends request for our page and receives usually short HTML file with links to JS files. User’s browser then has to download those files, execute its’ code and populate HTML document with DOM. Only after that it will start rendering UI. With SSR this process happens on server, so user receives HTML prepared for rendering.

10. PWA (Progressive Web App)

Another interesting and promising paradigm which should be taken with caution is Progressive Web Apps (PWA). It has been around several years but it isn’t a standard yet. It uses different kinds of caching (assets and data) so it makes applications load much faster. It also gives smooth user experience with its ability to render your app to the users even when they have network issues or don’t have network at all.

11. Latest tools versions

Authors of the technologies, tools and libraries are usually trying to improve their software with every new version. Those improvements often mean performance. Keeping version up to date is also important because of security issues, of course.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Amel Halilovic

Amel Halilovic

Senior Software Engineer and Writing Enthusiast.