Performance is poor

[michaelrambeau]

Google PageSpeed Test result is bad:

• 40 / 100 on Mobile
• 53 / 100 on Mobile

I will see how we can improve that by decreasing the number of HTTP requests maybe, now we load a lot of images (164 requests!), because all avatars are loaded 2 times, once for the Table of Content, the second time inside the table rows.

[michaelrambeau]

Reducing the number of image requests

The same GitHub owner avatar was loaded 2 times, in 2 different sizes:

• once in the table of content, 30 px wide
• the second time in the project list rows: 50px wide

Now we use the 50px wide avatar everywhere, resized to 30 px in Table of Contents, see ProjectAvatar component.

But, still performance is poor!

[frankyxhl]

Yeah...So many icon requests. Possible to merge all of them into one sprite image file?

[michaelrambeau]

Hello Frank @frankyxhl Something that annoys me is the size of the "Death Star logo": 162 K, to me, it's too big.

Biggest images, from Firefox devtools, for https://risingstars.js.org/2017/en/ URL

I don't know why but it seems that it's not gzipped, because 162 K is the original size of the file, on the local filesystem.

Compare to 2016: https://risingstars2016.js.org/ I did my best to make the 2016 page fast (Speed score: 71/100 on mobiles), the banner was less than 23 K (gzipped).

It's a huge difference.

In 2016

I don't know how you guys feel about performance, but to me, the "price" we pay for the "Death Star" logo is pretty high.

At least, could we try to make the logo lighter? Maybe we could have a mobile version, very simplified, using media requests to load only the mobile version on small screens?

Sorry to bother you with performance consideration!

[frankyxhl]

Hello, @michaelrambeau

Sure. Performance is important.

First, I tried a online compress website https://tinypng.com/ the png file can be compressed from 166.1 K => 155.4 KB, seems not too much.

Then, transparent background color doesn't work either... even a little bigger... convert risingStars.png -channel rgba -alpha set -fill none -opaque "#EDEFED" risingstars_transparent_background.png

Right now for me, the only way works maybe is to resize it. When I change the png size from 1200 × 1183 to 400 × 394, the size is reduced to 40k. I'm not sure if this is acceptable for you guys. If this works, should we decide the size for a mobile device?

convert risingstars.png -resize 400 risingStars_small.png

https://www.webmalama.com/the-best-full-screen-background-image-sizes-for-web-design/

I think we need @SachaG's option how to improve this as well.

Anyway, you can make decision, don't worry about me. It's OK to not use this "Death Star logo" in the page.

[SachaG]

Personally I think 162k is fine, any "normal" site like the New York Times is 10 times that size. And even if the image takes time to load I don't think it'll hurt user experience since it doesn't prevent users from reading the rest of the content.

[michaelrambeau]

It will be interesting to compare the performance of the Next.js version, to be released in 2021, compared to the current one, built on top of Gatsby.

https://github.com/bestofjs/javascript-risingstars/issues/59