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 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.
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.
- 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.
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.
Minify or compress files
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
Instead of using animated GIF’s, we can use either animated WebP (with GIF being a fallback).
WebP is an image format and it provides smaller file sizes. Please find below screen
Web fonts optimization
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.
We can achieve pre-load optimization with prefetch, dns-prefetch and prerender.
Idea Page load time is 2 to 5 seconds
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).
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.
We can use directives listed in below link
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.
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.