Web developers are so passionate about creating websites or web applications to meet user demand, after multiple brainstorming sessions to develop ideas and a bunch of code that transforms into functional user interface design for users.

The users bounce out of the website in less than 10seconds. If the website load time delays, users become frustrated 😞 and impatient to use the web service. This results in a bad user experience

What is web performance?

web performance is when a user experiences quick content load and response to user interaction.

Unavailability + Inaccessibility = Bad web performance

Availability + Accessibility = Good web performance

Why do web developers hate poor performance?

1. It limits user satisfaction and retention
2. It depicts the brand to be unreliable and unavailable.
3. Resources used for production are not maximised.
4. Reduces revenue for the business.
5. It portrays developers as incompetent.

In this article, I will discuss best practices for optimizing web applications.

Steps to optimize the web

Code minification

Code modification is also known as code compression, this is the process of removing unnecessary or redundant data from a codebase, without any defect in the output display in the browser.

A web application is composed of HTML, CSS and JAVASCRIPT files, the removal of unwanted and unused lines of code, comments, whitespace e.t.c from the codebase. This action reduces the file size and increases the load time.

Google's recommendations for minifying web files are:

For HTML files, try HTMLMinifier

For CSS, try CSSNano and csso

For JavaScript, try UglifyJS.

Code splitting

Code splitting is known as code chunking. This is the process splitting of code into various components or bundles which can then be loaded on request.

Some frameworks integrate the feature into setup e.g react, vue and angular. A component folder manages the component files handling different features and sections of the webpage.

It is a good and standard practice to split larger code files into small code files. It enables better maintainability and quick accessibility of files also the files load time is lesser.

The accessibility support lazy loading files, initial needed at load time is displayed, and after the initial load, other pages can be added. This is the same as cooking yam tuber by cutting it into slices(splitting), the yam gets ready faster and the selection of a yam slice is easier compare to placing a tuber of yam in a pot without slices.

Optimize web font

Web font consists of font-variant, glyphs, and font-family resources, some of these files aren't used during the load of the font but cause delay.

Large files of variant access problems were resolved using the @font-face CSS rule which was designed to split the font family into a collection of resources yet some of the problems persist, such as slow load time.

To optimize web font split web font and lazy load some font files.

Use the preload link <link rel="preload"> to fetch web font before other files.

Use different font-format of web format if the browsers that don't understand one format will then fall back on another format in order, format includes ttf, woff, woff2 and so on.

Use font format that allows compression such as woff, it reduces web font size.

woff and woff2 means Web Open Font Format versions 1 and 2 while TTF means TrueType Font.

Using online font because it is lightweight, easy to integrate and abstraction is done in the background, you can only access the type of font you need.

Online font service includes
Google font
Adobe font
cloud.typography

Image optimization

Image optimization is in varieties;

Selection of quality images occupying lesser space should be practice; it is the most effective way to optimize images. images with a larger number of bytes like 100MB header image on a webpage should be avoided.

Image compression is called image minification, reducing image file size in bytes without degrading its quality at an acceptable level.

Using webP, AVIF, PNG and SVG image format are recommended for web application because high-resolution images and allows compression without losing much quality. The WebP format is 39.8% lighter than other image format.

Using the right dimension of the image, a responsive image will optimize a web app.

Optimize network quality

User experience on different network quality differs, with fast network internet-based service are enjoyable(it load promptly) while on other hand, it annoys the user.

To solve the use with the poor network is trying to understand your user using google analytics based location and using a network Information API.

Network information API give web application developer access to quality information about the network connection status used by the device or a user.

Recommending networks type to users is also good.

Optimize third party resources

Third-party services provide functionality that might not be available for a project for the main time, so it send requests to their own server, some servers might take a longer response time, which delays the service causing bad performance.

To prevent this:

Understand third party service.

Select quality third party service.

Run frequent audit checks on its functionalities.

Use only need resources from the third party service.

Use lighthouse in a chrome developer console to check over the performance of the web app with and without the third party, to know if it is causing slow performance.

Conclusion

Optimizing your web app's performance influences product sustainability and its long term growth.

Good web performance is the oil jar of modern web solutions, I have listed the practice I engage in while developing web solutions, and I hope you explore them.

Thanks for reading this far, In case you have other solutions for great web performance kindly engage in this post. I will really appreciate it.