web performance monitoring
UI Development

Web Application performance checklist

 

Introduction

Web page performance takes vital role to get more traffic and ranking. Google considers load time while ranking websites, so page speed is an important aspect. Improving page load time gets more traffic and many customers finds it reliable and easy accessible when it is fast.

Below are few checklist points we need to pay attention while developing

Page weight

Page weight should be < 1500 KB (ideal value is < 500 KB). The smaller file size of a web page, the faster page is going to load.

Page weight means the total size of a particular web page which includes all the files that are used to develop like HTML files, style sheets, images, scripts, and other media files.

Solution:

We can achieve this by optimizing the resources used by following the resource optimization ways mentioned in below points

Lazy load of images

Lazy loading means deferring the load of assets like images until they are actually required on the web page. It just keeps note of the view-port and only loads images to the network when they are within the boundaries of end user screen.

It will speed up current page load time, time to interact and also avoid unnecessary off screen images that the user may not require at initial load.

Solution:

  • We can  use Lighthouse to find out off-screen images which are not seen by user when they initially load the page.
  •  Also lazy load alternative images to be displayed at mouse over or upon other user actions.
  • There are different possible ways to achieve this like using data-src attribute for images and others choose the solution which are feasible for your project.

Don’t scale images in HTML

Web page developers sometimes mention image dimensions by using the width and height attributes on HTML image element.

Do avoid this, because this will result in images being larger than required. For example, image displayed with  dimensions 120 x 360  But actually size of image is 240 x 720.

Solution

Make  sure that images are not larger than it need to be, and also they are in right file format.

And also we have graphical icons in a  website or app. Web developers have two options: SVG or icon fonts. SVG are the preferred method to implement.

Assets Optimizations

Minify or compress files

Solution

We can use GZIP / Brotli compression which will  pre-compress the size of your static files. Brotli, is fast and supported in all modern browsers.

They will compress (dynamic) HTML on the fly. With a smaller sizes file, users will be able to download the assets faster, resulting in improved performance.  It is clearly conveyed in below images

Http request and response

Compressed http response

Optimizing videos

Instead of using animated GIF’s, we can use either animated WebP (with GIF being a fallback).

Solution

WebP is an image format and it provides smaller file sizes. Please find below screen

WebP image and jpeg size

 

 

 

Web fonts optimization

Solution

As per Google, the WOFF 2.0 Web Font compression format offers 30% average gain over WOFF 1.0. It’s better to use WOFF 2.0, WOFF 1.0 as a fallback.

We can use preconnect to load fonts fast 

<link rel=”preconnect” href=”https://fonts.gstatic.com” crossorigin>

This will boost the performance because by the time the browser gets started to parsing the css file that will be ready with information it needs to request a font file from the server,using this preconnect

Prefetching allows web browser to fetch required resources which are used to display content that user might access in near future. Actually the browser will store these resources in its cache and speed up the web pages load time when we are using page resources which are from different domains.

Basic checks

Remove unnecessary attributes like type attributes i.e  type=”text/javascript” or type=”text/css” are not required anymore and should be removed. Load CSS files in head tag and JavaScript  before the closing body tag.

We can achieve pre-load optimization with prefetch, dns-prefetch and prerender.

Idea Page load time is 2 to 5 seconds  

Solution

Use online tools like PageSpeedInsights ,  WebPageTest or there are many available tools to analyze what could be reason for high load time and resolve.

Try to adopt the  Atomic Design visual design systemarchitect with ITCSS, and build with BEM which will give Good maintainability, scalability and load page faster.

Atomic design

Optimize the performance of your APIs

When we have huge number of resources require data from an API its becomes a performance bottleneck. Consider using GhraphQL which is a query language. It will fetch the data that you require, you limit the amount of processing required unlike  REST  it resolves both over-fetching and under-fetching issues. Based on scenario choose appropriate one Rest API or GhraphQL

Use tree shaking, code-splitting and scope hoisting to reduce payloads.

Tree-shaking is a way to clean up the  build process to only include the  code that is actually used in production. Code splitting means it will  split the code into “chunks” that are loaded on demand.

Scope hoisting detects the  import chaining which can be flattened and converted into one inlined function without compromising the code base (these can be achieved  via Webpack).

Reduce redirects

Every time when a page redirects to another web page, the  user  face additional time waiting for the HTTP request and response cycle to finish. Too many redirects cause higher page overhead and this delays the page load.

  • Avoid redundant redirects
  • Chain redirects:
  • Clean-up redirects

Set HTTP cache headers

HTTP header holds directives  for caching in requests and responses. While fetching resources repeatedly over the network is slow and expensive and it increases number of requests between the client and server, the ability to cache and reuse previously fetched resources is an important aspect for optimizing page performance.

Solution

We can use directives listed in below link

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control

Benefits of HTTP/2

With HTTP/2, multiple HTTP requests are possible on just one TCP(Transmission Control Protocol) connection which means that transferring resources to website will be faster and efficient. And also it gives better security and it has encryption enabled by default

Various ways to check performance

In chrome network panel

We can do our analysis in chrome developer tool we have different ways. Mentioned couple of examples for reference

1) Remove unused code.

We can find unused CSS and JS code with the Coverage tab in chrome. When you load the page, the coverage tab tells you how much code was used, versus how much was loaded. Code in green is actually executed. You can reduce the size of your pages by only keeping the code that you need.

coverage report

Solution

Go to source tab select the file for which you want analyse and do cntrl+shift+p and type coverage and you can see the report

2) Block requests

We can test how our page behaves when specific script, stylesheet or other resource not  available? Right click on the request in the Network panel and select Block Request URL and you can analysis the behavior.

block-request-url

Below are few efficient performance tools we can use

https://developers.google.com/web/tools/lighthouse

https://developers.google.com/speed/pagespeed/insights/

https://www.webpagetest.org/

Performance checklist reference links for current technologies

Angular Performance Checklist

Optimizing Performance – React

Vue – Useful Links Style Guide and Performance

About The Author