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