Internship at Hasura — 7.1
After completing the app, now is the time to get user’s feedback, do testing and improve performance.
User Feedback
- Getting the error message “Something went wrong on every page”: This was the first bug which I encountered as soon as I asked my fellow interns to give feedback. But the app was working properly on my system. So, after doing some research on my code base, I found out that the URL of the HTTP request which the app was sending to Hasura Data API was incorrect. The URL should be http://data.khana-plaza.hasura.me/ instead of http://data.c100.hasura.me/.
- Changes in the Place Order form: In the Place Order form, the app was asking the users to input the Dish Name which they wanted to Order. Initially, it worked perfectly but later one of my non-developer friends pointed out a problem. He said that while ordering “Laccha Paratha” he made a typo “Laccha paratha” which eventually resulted in a Bad Request. And he had to again place a fresh order! Therefore, I decided not to take a text input from the user, rather I would display all the dishes as options and the user will just need to select it. The name of dishes are sorted in Alphabetic order which helps the user to quickly search the dish, they are looking for.

Performance Optimisation
I used a tool called PageSpeed to optimise the performance of my web app. It is a tool from Google which helps developers to build high-performance web apps. With PageSpeed Insights you can identify ways to make your site faster and more mobile-friendly. Some of the Optimisation recommendations which I followed are :
- Minify HTML, CSS and JavaScript : Minifying the Critical resources, i.e HTML, CSS and JavaScript reduces the size of the document significantly! For example, the index page of my app got reduced to 26.83% in size after minification. Similarly, my JavaScript file got reduced to 52.70% and CSS 26.13%! For more information, check Google Developer -> Web Fundamentals or Click Here.
- Compression Critical Resources through Gzip : Enabling
gzipcompression can reduce the size of the transferred response by up to 90%, which can significantly reduce the amount of time to download the resource, reduce data usage for the client, and improve the time to first render of your pages. To enable Gzip compression in express@4.x server, we need to install a package called compression. After doing so, we can use it as a middleware directly in our server.js file.
var express = require('express');
var compression = require('compression');
var app = express();app.use(compression());
app.use(express.static(__dirname + '/public'));app.listen(8080);
This will enable Gzip compression to all the static files of our web application.
- Caching the Critical Resources : Fetching resources over the network is both slow and expensive: the download may require multiple roundtrips between the client and server, which delays processing and may block rendering of page content, and also incurs data costs for the visitor. Hence caching is very important to increase the performance of a web application. To cache the static resources, I have used Cache-Control package, see the documentation for more information.
Here’s the Screenshot of the performance analyse of my web app…


You might be thinking, why am I getting Leverage browser caching and Enable Compression as Possible Optimizations. That’s because I have enabled caching and compression only for the static files, i.e I still don’t compress or cache the images because those are not part of my database. I just use the link to fetch the images, hence I can’t really compress or cache it through my Express server!
Please Comment below any suggestions or feedback…