Frontend changes for faster page loading

[sreenadh]

1. Avoid all other CSS files except bootstrap
2. Use standard browser font. Remove 'raleway'
3. Put request for help in home page and give other links on right side. two column layout
4. Load logos on top asynchronously.
5. If possible remove bootstrap and use table layout for faster loading.

83 #84

[visakhsuku]

i could help with 2nd one

[sreenadh]

Remove the district column in 'view requests'. not necessary @biswaz

[shabinGravitum]

5. If possible remove bootstrap and use table layout for faster loading.

The design is responsive and looks well on mobile, do you really want to do this?

[sreenadh]

@shabinGravitum to reduce page load time. not for responsiveness.

[bodhish]

Use tailwind, only styles which are used will be loaded to production

[sreenadh]

Use single external CSS file or use inline style.

[prajintst]

reduce the use of images and styles. move images and assets to s3bucket or cdn.

[ivalsaraj]

@shabinGravitum Table is messed up. See the mobile view.

[visakhsuku]

105 for 2nd one

[prajintst]

Please use it https://github.com/django-compressor/django-compressor

[naveenpf]

Many issues reported in one ticket. Please log separate one

[sengar23]

Couple of fixes I used and managed to bring down the website size from 172 kb to 105 kb, which will definitely help in reducing the load time of the site on weaker connections. The fixes are listed below:

1. Don't use an external font (very important). Use default font provided by bootstrap.css. Removed the loading of font.css file in base.html.
2. Did the optimization the images, retaining the original features but reduced the file size to 60% of total image data downloaded on loading of the website. Below are the links of the optimized image: https://ranjeetsengar.com/keralarescue/kerala-government.png https://ranjeetsengar.com/keralarescue/it-mission.png https://ranjeetsengar.com/keralarescue/ieeelogo.png https://ranjeetsengar.com/keralarescue/emblem.png

Note: I'm sharing the link of the screenshots of the fixes done https://ranjeetsengar.com/keralarescue/keralarescue1.png https://ranjeetsengar.com/keralarescue/keralarescue2.png

Hope this helps.

[asimqt]

Anybody working on rewriting CSS? (Remove bootstrap)

[sengar23]

If we remove bootstrap then the 'Glyphicons Halflings' will also be gone and there won't be any icons. Is that okay? I suggest to let go of the icons, it will reduce 18kb of total website size.

[sengar23]

I'm working on the custom css which will replace bootstrap.css and further reduce the total website size. let me know if anyone else is working on it.

[prajintst]

@sengar23 try to minimize the css and js file.

[sengar23]

We are loading 'Montserrat' font in templates/base.html. Are we loading that external font for any reason? Because I can't find it being used anywhere. Please let me know. Thank you.

[prajintst]

I think it is better to remove all external fonts. also remove the references.

[asimqt]

@sengar23 We removed that font in some PR. NOt sure whether it's merged or not.

[sreenadh]

Good work guys 👍