search

wncc / WnCC

The official website for WnCC: www.wncc-iitb.org resides in this repository.
http://www.wncc-iitb.org
22 stars 154 forks source link

Website Optimization Tracker #179

Open ydidwania opened 6 years ago

ydidwania commented 6 years ago

The Google Page Speed Insight gives us a low score on Desktop. Few quick fixes listed include optimizing the images and minifying html, js and css. We can use the optimized versions provided by google, but we must find a way to do it ourselves. Other issues are browser caching and the blocking js tracked in #37 @nihal111 anything else we can do?

nihal111 commented 6 years ago

@ydidwania Let's get all that you suggested done asap before we think of anything else.

Also consider shifting logos and images to resources.wncc-iitb.org after resizing.

nihal111 commented 6 years ago

We can use the optimized versions are provided by google, but we must find a way to do it ourselves.

What does this mean?

alokwhitewolf commented 6 years ago

https://css-tricks.com/contrast-swap-technique-improved-image-performance-css-filters/

^ This works pretty good.

On Wed, Apr 4, 2018 at 11:14 PM, Nihal Singh notifications@github.com wrote:

We can use the optimized versions are provided by google, but we must find a way to do it ourselves. What does this mean?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/nihal111/WnCC/issues/179#issuecomment-378685917, or mute the thread https://github.com/notifications/unsubscribe-auth/AXX99rBP4LmWGoiWZ5ggYZ2OrJy2CTC6ks5tlQaNgaJpZM4TG94- .

grubdragon commented 6 years ago

@alokwhitewolf I think that initially we should be doing more primitive optimizations Also, I felt GTMetrix gives a good insight into load time

Also consider shifting logos and images to resources.wncc-iitb.org after resizing.

+1 to this

ydidwania commented 6 years ago

What does this mean?

Google already provides the optimized images, CSS and Javascript. Look at the bottom of the page linked

cheekujodhpur commented 6 years ago

Let me make a few comments here, as #37 was first raised by me and I've closely followed the site speed and performance.

We can use the optimized versions provided by Google, but we must find a way to do it ourselves.

Why must we find a way to do it ourselves? If they are providing minified CSS/JS, just download and use. What are we losing here again?

Apart from that, we have lost the score because of the additional number of images that we have on our front page. Note that these things do not actually make the site anywhere close to noticeably slower, but they potentially can, and that prompts google to give us a bad score. Thus, the two things that are there: minifying scripts and stylesheets and reducing image size, are both not that important to the actual speed. I had tried reducing image size in one PR, no difference. The actual problem with the site is skel.js loader

The CSS of the site is not loaded directly, there is a script called init.js which checks the device width and loads the relevant CSS accordingly since there are different CSS files per device size. This causes the glitch mentioned in #37 and reduces the site load time significantly. Here is what you should do in my opinion:

  1. Replace whatever init.js does with media queries. The skel library _potentially does more than what media queries can achieve, but other than a couple of tiny things that we can manually code, it isn't applicable to us.

  2. Have a tremendously low res, so low res that all you see is a blurred copy of all images which are initially loaded with the page. Once the page is loaded, async load the high res copies of the image.

I exactly know how to do these things, but I am not able to find the time, so perhaps give me a ring and I will tell you in detail what to do.

ydidwania commented 6 years ago

Why must we find a way to do it ourselves? If they are providing minified CSS/JS, just download and use. What are we losing here again?

Sorry, I was referring to only the images here. We cannot use the images given by google forever.

pulsejet commented 6 years ago

I'm strongly in favor of not using images optimized by Google, since they will always have terrible JPEG artifacts. A few things that come to mind:

nihal111 commented 6 years ago

Let's just listen to @pulsejet

starlord1311 commented 6 years ago

can someone help me with what to do?

pulsejet commented 6 years ago

@starlord1311 you can start by bringing down sizes of all team member images to < 50 kB each (or lower if there are no significant artifacts). Make sure you're using JPEG.

starlord1311 commented 6 years ago

how to run the site locally?