npm / www

community space for the npm website
https://npm.community
69 stars 48 forks source link

Webperf: Very large images for often installed projects #365

Open Munter opened 6 years ago

Munter commented 6 years ago

In the Packages people 'npm install' a lot a couple of open source projects are highlighted with images of their logos.

The npmjs.com frontpage weighs 600kb in total, and these project logos weigh 200kb for 6 images.

The images are not in the size they will be displayed at, meaning a lot of those extra bytes are just wasted.

The images are loaded from 4 different domains:

For each of the above domains a new connection has to be established. That's dns, tls handshake, request latency, tcp slowstart. This means a lot of kilobytes are downloaded extremely slowly.

Possible solution

If this section is hand rolled with curated projects and logos, I suggest integrating the logos into the www.npmjs.com repository, get the images resized to the displayed size, compressed properly and served from static.npmjs.com so they also get downloaded on an already warm connection.

I estimate you can reduce the download size below 50kb with the right compression settings.

jefflembeck commented 6 years ago

@Munter I really appreciate the time you took to put together this list of perf issues. They've been put into our backlog in our internal tracker. Seriously, thank you.