Improving performance of single page application or front end web application
Now a days, most of the people are using single page application. Before I mention performance testing of single page application, I should mention what is single page application and why it is getting popular.
Single Page Application (known as SPA) - As it is clear from the name, single page application contains primarily one main html page and rest of the pages are different views in addition to the main html page. User will not see any change in the url once main page is loaded. They can click on different features and only some portion of the main page will be reloaded thus providing good user experience.
Why single page application is getting popular - There are many reasons but some of the main reasons are -
Single Page Application (known as SPA) - As it is clear from the name, single page application contains primarily one main html page and rest of the pages are different views in addition to the main html page. User will not see any change in the url once main page is loaded. They can click on different features and only some portion of the main page will be reloaded thus providing good user experience.
Why single page application is getting popular - There are many reasons but some of the main reasons are -
- Entire page is loaded only once at client end and will be served from client side thus performance will be fast
- HTML/CSS/JS can be cached on first load and network call(except fetching dynamic data) will not be required to load static assets.
- User will not observe page reload/redirect in the url and will get good user experience
There are some tools(integrated with browser) to check page load time. You can click on F12 on Chrome, FireFox or Internet explorer and see the page load time. e.g. open Internet Explorer and click on F12 and go to Network tab as shown below.
You will see lot of network calls along with load time of Java Script, CSS etc. Calls can be sorted on basis of size of the data or response time.
In case page response time is higher than the standards, there are some corrective actions that can be taken to improve the performance as -
1. Minify(known as minification) the HTML/JS/CSS - In case you haven't minify the css or js, it is time to do it now. There are many tools which can minify the js/css . Minifying the js or css will remove all unnecessary characters from source code without changing its functionality. These unnecessary characters usually include white space characters, new line characters, comments etc required for readability of the code but are not required for it to execute. There are tools like YUI Compressor, UglifyJS which can minify the js and css files. Minification can be done at run time through the build process. Minifying can easily reduce the file size by 20-30% and hence improving page response time.
2. Compressing JS/CSS files - Once file is minified, we can compress it using tools like gzip to compress the file. Compressing the minified file can further reduce the file size by 10-20%. Most of the modern browsers can support compression.
3. Image scaling - We should be using image of the required size instead of using high resolution image and reducing it to fit into space of required size. If possible, use sprite images. Sprite images is a collection of all images which reduced network latency.
4. Caching - Use caching by specifying manifest file in the header. Manifest file is nothing but list of static resources like HTML,CSS and JS files which needs to be cached. Browser will look at the manifest files and download all the listed files on first page load. So you might see slow response time on first page load but subsequent responses will be fast. If you modify static resources like html or js, then you need to update the manifest file(by adding a space or updating a comment). Browser will see that manifest file is updated and will download all static resources again. Other option is that user clears the browser's cache.
<html manifest="demo.manifest">
5. Lazy loading - Since we dont need all js or css file at beginning, we can avoid loading the js files until we need them. There are many frameworks which provide lazy loading capabilities like require.js. These framework loads the js file when when it is required.
6. CSS Optimization - CSS should be loaded in the head and we should avoid using inline css in the page. Also we should be combining related css files into one file to avoid unnecessary network calls.
7. JS Optimization - JS files should be loaded at the end(before the body close). Reason is that downloading a js file might block other http request like css,images etc. Also related java script files should be merged together to reduce network calls.
8. Broken resources - Check all resources in the debugger by using F12 if there are any http request returning 404. If yes, fix the broken image/css/js issue.
9. Redirection - Avoid redirection (301,302) if possible. Generally we use redirection to point to a new resource/site from old site.
10. Content Delivery Network - Use content delivery network (CDN) if possible. CDN loads resources from the nearest resources e.g. if user is accessing the site from Europe and resources are located in CDN located in Europe, it will download resources from Europe CDN server.
These steps should definitely allow performance of site to be improved.
You won't believe me, but I was planning to write a blog very similar to the one you have posted here. Great work!
ReplyDeleteSEO Training In Chennai
Digital Marketing is something that will suit anyone. Right from graduates, sales/marketing professionals, housewives looking for a work at home option or those freelancing enthusiasts. By the way, nice article. Like the way you organised the content.
ReplyDeleteDigital Marketing Training In Chennai