Simple steps that will increase the performance of your website or web app. Take a look maybe you missed something in yours?

Does your Website or Web App have a maximum performance? I think a lot of developers and teams have this question in their minds, and in our days it’s easy to follow simple steps on a design or refactoring stage. There are so many powerful tools that can assist you to use the best practices and have the huge performance of your Website or Web App.

I propose you to follow some this simple Tips and Tricks can help you to maximise the performance of your Web App or Website.

Take a look at this list and follow simple steps of verification. In this article, I include all crucial steps that cover best practices for colossal performance of your web apps and sites. Of course, it’s not all that we can do, just one of the most usual.

Why?

Note: You can skip this part and go to technical part

Most web pages sizes are about 1.5 MB, and they have huge time to be loaded and provide interaction in most cases it’s about 10s for most pages. Let’s analyze resources of them since 2014 below.

Mary Meeker, Morgan Stanley, “Internet Trends”

We can see that web growing so fast as the usage of a device grows since 2014 count of mobile phones used for websites equal to desktops. Count of content was also growing so fast as we can see from our chart.

I think that developers need to care about the user first always and we need to optimize our Websites and Web Apps as maximum as it is possible to have a good per cent of view. Of course in most cases, if you live in a big city, you don’t have problems with internet. But how can you share your content and knowledge with all the world? I know the places where EDGE internet is maximum possible internet and people always happy to read something at that places. Thanks for some news portals that are using AMP to make this possible to read some information with the bad internet connection.

Importance of speed for users in UX hierarchy

Speed Matters vol. 3

As we can see for 75% users speed is one of the critical factors.

The real downloading speed is pretty fast. The 7 out of 10 sites loaded in less than 4 seconds and around 33% load in less than 1 second. In respect to the perception of the users, in general, they perceive the speed of the download as quite fast with figures very similar to the real measured speed. And we can do this, let’s move on to technical part.

Let’s divide our web performance optimizations for two significant sections, Client Side and Server Side. Both parts are essential.

Before start

Please don’t forget, when you go through each step, always verify potential regression!

Client Side

Minification and Compression

Analyze and remove unnecessary resources and optimize your application with minification of JavaScript and compression of CSS. This is very important to send fewer data to the client that is very helpful. For JavaScript, I propose to use a simple UglifyJS. For CSS, I propose to use Compress CSS plugin or option if you are using Preprocessor Languages ( SASS, LESS, Stylus, etc. ). You will see that size of your bundle will significantly change.

Tip:

All that you need to install required plugins or dependencies in your project and integrate it into your build system (Webpack, Gulp, etc).

CDN

If you are using some popular libraries that are used everywhere, CDN can be a good solution of removing some lib from your bundle.

Tip:

Usage of CDN resources like Cloudflare, etc.

Avoid Unused Code

Unused JS: It is a frequent problem especially if you are working on some large enterprise project where you have tones of code. The requirements that are always changing some functionality becomes deprecated and useless. You marked this with comments like

@depreaceted

@note This feature was removed but will be used later.

And it’s a beginning of the unused tones of code.

Tip:

You need to load only required code and lazyLoad other chunks.

Potential savings at this steps will be very huge. Most users analyze the performance of website or web app with the first initial load.

Unused CSS: In most cases, if you have an initial loading with some important styles that will be used, there is a great sense to divide this parts to css chunks and load only required styles for the first page and load other with a lazyLoad option.

Analyze your bundles and assets to understand the value of your dependencies

Analyze your bundles to verify your vendors that can have huge dependencies. In the process of analysis, you can discover the real usage of your dependencies.

Always analyze and provide the audit of your bundles, assets, libs. Make an inventory of all assets. Verify impact of each of this dependency because sometimes it’s better to use your own or much smaller approach for same issues.

Tip:

There are many tools for analyzing your bundles:

Webpack bundle Analyzer to analyze your bundles sizes with Webpack.

Import Cost is a simple plugin for Visual Code that provides for you cost of imported dependency.

BundlePhobia one of the best tools that give you detailed information about import dependency including minification, gzip compression and downloading time.

Optimize JavaScript Boot-up Time

It is very important if your website or web app is focused on Mobile devices, because on mobile devices thus the process can take much more time. So we need to provide interactivity as fast as it possible.

Tip:

To optimize this process, you can use one of the popular technics that calls Code-Splitting. It’s very easy to understand; it’s like chocolate with pieces, some of them with nuts, other with berries. Same in JavaScript, where for example each chunk will be loaded per route its own data.

You can split your code via Components or via Routes, this is very useful so instead of giving full bundle with the application, we provide just important pieces of code that will be used by the user in a particular rote, component and bundles.

Switch from static imports to dynamic imports. This will provide the very great performance to Boot-up Time your app. LazyLoading increasing performance.

Tree-shaking

Use tree-shaking tools for dead code elimination.

Unused libraries code

Remove unused libraries code from your website or web app.

You can investigate this good lib’s optimization tool for Webpack:

Image optimization

From the begging, we’ve mentioned that images have a very big part of our page and we need to use optimizing technics for them.

Tip:

Use proper sizes of your images; there is no any sense to send the 4k image for mobile browser, it may take to many time for loading.

Using build image optimization tools like imagemin or libvips. Plugins for Webpack or gulp.

You can also use CDN approach. Roll your own CDN Thumbor or Imageflow or use existing solutions like Cloudinary, Imgix, Fastly, Akamai.

Use newer image formats(JPEG 2000, JPEG XR, WebP that often provide better performance than PNG or JPEG) for your images that provide better compression, faster downloads and less data consumption.

Use <video> instead of GIF

A large GIF is inefficient for animated content; video can provide much more with less traffic cost.

Tip:

You can provide a huge optimization for animated content via transforming it from GIF to an MPEG4 video with FFMPEG, and you can take a look a simple guide of usage this technics here:

Analyze network connection on the fly to update assets

We can use navigator.connection.effectiveType to analyze user network connection. This can help us to use more productive assets depending on a network connection.

For example, on a desktop device browser, you can see a preview of the video. But on a mobile device, it’s better to show just an image, because the size of it will be about 50 KB instead of 1+ MB that is very efficient.

Simple preview for poor internet connection

Video preview for a good internet connection

LazyLoading images

Try to avoid offscreen images that you try to load inside the browser.

Tip:

You can use lazyLoading images solutions via using lazysizes.

With this powerful tool, you can provide good performance of your app, and your images will be tracked to be loaded. This is very useful.

You can look the demo here:

For more details, please take a look official GitHub repo.

Inform browser what to load first

By default browser don’t know what to load first, CSS, images, scripts and some time there is a situation where some of your images are not available when CSS for them is already loaded.

Use <link rel=preconnect> , <link rel=preload> , <link rel=prefetch> to notify browser the importance of resources loading at the right time. But they also can be used for other efficient points like:

Avoid multiple connections to the same origin.

This usually happens when you import fonts or assets from remote servers. In this case <link rel=preconnect> will help you to minify count of opened connections.

This usually happens when you import fonts or assets from remote servers. In this case will help you to minify count of opened connections. Preload key requests with <link rel=preload> that can help you to optimize loading time of your resources. It will tell for the browser, that we need to load this resource as fast as possible. So instead of wasting time and wait until all resources are loaded we loading all resources with fonts and saving a lot of time. It has a huge impact on your page loading.

that can help you to optimize loading time of your resources. It will tell for the browser, that we need to load this resource as fast as possible. So instead of wasting time and wait until all resources are loaded we loading all resources with fonts and saving a lot of time. It has a huge impact on your page loading. Use <link rel=prefetch> for assets that will be used for future navigation. Webpack 4.6 (prefetch, preload).

Font-display

We need always try to avoid text that requires some web font to be loaded. You can use font-display: swap that is will help you to swap your fonts once they are loaded.

It’s pretty new feature and supported by all new browsers except Edge.

You can take a look for more detailed information here.

Avoid render-blocking stylesheets ( Critical Path Optimization )

This part mostly important for first-time page paint. You can put inline critical styles on a first page and Lazy-load all other styles.

Tip: Increase FMP ( First Maingfull Paint ) with this awesome tools: