search

HITK-TECH-Community / Community-Website

Official Website of HITK Tech Community 👩🏻‍💻👨🏻‍💻
https://hitk-tech-community.netlify.app/
MIT License
173 stars 321 forks source link

[Bug] Reduce The Image loading Time #666

Open Kajol-Kumari opened 2 years ago

Kajol-Kumari commented 2 years ago

Description- The Image loading on the website takes a lot of time which makes the website slower and look bad.

Requirement-

TheSwordBreaker commented 2 years ago

Hello Kajol. I am New To Community . Here Are My ideas.

  1. Stored Static Images in CDN , or Set Cache Option to Max 6 month to 10 days
  2. Daynmic Images Can Be Display With lazyLoading Component with default images base on pages where it is needed
  3. For The First Load of Site What We can Do Minimize The Image Size with Github Plugins like Img-Bot Which i have used
  4. Other Advances thing i have read to handle static images is transform images for device resolution and try to give them best resolution base on device height and width
TheSwordBreaker commented 2 years ago

We Can Used Some Node Package and Custom Command For Development only files to config point number 3 and 4. and handle them

Kajol-Kumari commented 2 years ago

@TheSwordBreaker the idea seems achievable. Could you please try implementing it atleast for one of the pages?

TheSwordBreaker commented 2 years ago

@Kajol-Kumari Sure I Would Love To Try LazyLoading Component and cli code for node package for image handling and compression

TheSwordBreaker commented 2 years ago

But Ya Pls Help me on How To contribute in open source as my knowledge on github always endup with lots of merge conflicts

Kajol-Kumari commented 2 years ago

Hey @TheSwordBreaker I can list the generalised step for making a PR below for you -

  1. Fork this repo
  2. Clone it on local (git clone )
  3. Make a new branch from master and checkout to the same (git checkout -b )
  4. Make the required code changes
  5. Add to staging (git add .) 6.Commit your changes. (git commit -a -m "")
  6. Push it.(git push origin )
  7. Make the PR using GitHub interface In case these steps doesn't make sense to you I would recommend you to go through gut tutorial first.
iamsandeepshekhawat commented 2 years ago

Hey @Kajol-Kumari i'd like to work on it, please assign :)

Kajol-Kumari commented 2 years ago

Sure @SandeepShekhawat8778 please go ahead with this issue.

Happy Learning :)

Kajol-Kumari commented 2 years ago

@SandeepShekhawat8778 can I please get an update on this issue?

Priyamakeshwari commented 1 year ago

I would like to work on this issue under JWOC

lassmara commented 4 months ago

please assign me this issue under Gssoc