Web Performance Checklist

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:

GoogleChromeLabs/webpack-libs-optimizations

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:

Use video instead of animated GIFs

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:

lazysizes - the ultimate lazyloader for responsive images, iframes and widget

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.
• 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.
• 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:

1. Penthouse, Critical Path CSS Generator.
2. Critical, extract & Inline Critical-path CSS in HTML pages.

Server Side

Compression (gzip, brotli)

Compress all text files with Gzip Compression or Brotli Compression. It is very simple, all that you need is just configure your server configuration and make a restart it. If you are using Cloud services like Google Cloud Platform or AWS, Azure, in most cases they provide Compression out of the box for some storage services. Or you can use Firebase for hosting files that also give you Gzip out of the box.

Brotli is one of the best approaches for clients, with decompression performance comparable to gzip while significantly improving the compression ratio. These are powerful properties for serving static content such as fonts and HTML pages.

Compression Benchmarks: brotli, gzip, xz, bz2. Jeroen Ooms

Efficient caching strategy

We all know that short cache time of static resources can affect repeat visits and per this reason, you need to provide a good caching strategy for your users. Especially for images and fonts.

Tip:

We need to cache as many resources as it possible, more resources are better for repeatable visits.

**.@(jpg|jpeg|png|gif|woff2)
Cache-Control
max-age=31536000

That will tell for user using files from cache instead of downloading them.

Remastered diagram from Google IO 18, “Web performance made easy”

HTTP/2 instead of HTTP/1.1

Why HTTP/2 ? Because HTTP1.1 was limited to processing only one outstanding request per TCP connection, forcing browsers to use multiple TCP connections to process multiple requests simultaneously.

Multiplexed streams

Bi-directional sequence of text format frames sent over the HTTP/2 protocol exchanged between the server and client are known as “streams”. Earlier iterations of the HTTP protocol were capable of transmitting only one stream at a time along with some time delay between each stream transmission.

Receiving tons of media content via individual streams sent one by one is both inefficient and resource consuming. HTTP/2 changes have helped establish a new binary framing layer to addresses these concerns.

This layer allows client and server to disintegrate the HTTP payload into small, independent and manageable interleaved sequence of frames. This information is then reassembled at the other end.

HTTP/2 Server push

This capability allows the server to send additional cacheable information to the client that isn’t requested but is anticipated in future requests. For example, if the client requests for the resource X and it is understood that the resource Y is referenced with the requested file, the server can choose to push Y along with X instead of waiting for an appropriate client request.

The usage of HTTP/2 will provide you with the significant performance of resources loading, especially parallel loading.

Tools

Analyze and Audit

For making a powerful analysis of your Website or Web I propose yo use Google Lighthouse Audit. It will help you to analyze your JavaScript Boot-up Time, that is very important to understand problems of booting your website or web app.

Extra

This section contains some experimental and alpha version feature that you can investigate and prepare for their usage.

Priority Hints

Not so long time ago in W3C there an interesting feature that called importance. It’s a simple feature that can be used for prioritization of loading content.

Prioritization of fetch requests is very interesting tech if it will be implemented.

Priority Hints

For more details you can take a look here.

Data-driven loading and bundling

With Google Analytics page navigation model or with your custom navigation model and Machine Learning you can integrate data-driven loading or bundling mechanism.

Let’s take a look at the top example. Let’s imagine presented application above. In this particular app, you have three simple routes. The first route is the main route like login page; second is a home screen where you will be navigated once you logged in and third profile page. In most cases, about 80% of users don’t need a bundle that will render and provide the functionality of profile component under profile route, so in the initial bundle you will see login in second will be home and the last one will be profiled.

Take a look at small article of usage:

Increase performance of your Angular, React and Gatsby Apps with Guess.js

Conclusion

Always think about performance it’s a good challenge for you and your team.

Once you will start to optimize your Website or Web App and you will see the result, you will get the satisfaction of its lightning speed.

Always focus on all detail, not only on fundamental problems. Because it’s same as a house building it is a huge mechanism that includes too many small details.

Thanks for reading!