Website Optimization Tracker

[ydidwania]

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]

@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]

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]

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 ***@***.***> 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 <#179 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AXX99rBP4LmWGoiWZ5ggYZ2OrJy2CTC6ks5tlQaNgaJpZM4TG94-> .

[grubdragon]

@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]

What does this mean?

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

[cheekujodhpur]

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]

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]

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:

• Use something like jekyll minifier for js/css/html/text asset optimization.
• Use JPEG for photographs with medium compression, SVG wherever we have vectorized counterparts of images. In case we don't some PNG would be okay.
• Look into plugins like jekyll-compress-image for the above.

[nihal111]

Let's just listen to @pulsejet

[starlord1311]

can someone help me with what to do?

[pulsejet]

@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]

how to run the site locally?