Optimize site performance

[jimaek]

Our mobile rank https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.jsdelivr.com%2Fpackage%2Fnpm%2Fjquery is only 43.
We really need to fix that.

If anyone has time to go through the code to optimize the performance on mobile and desktop please do. Make sure nothing breaks of course.

I will check it out later myself if nobody takes over this task.

Switch fonts to CSS2 https://developers.google.com/fonts/docs/css2

[MartinKolarik]

I fixed the easy things but our main issue here is loading more JS that needed and changing that requires some architecture improvements. Also even with that, I'll again argue the website is not at all slow and you shouldn't take that test too seriously (and we still get more points than https://www.npmjs.com/package/jquery)

[MartinKolarik]

Got 70 points now on mobile, 98 on desktop (and we're not really targeting mobile with the package pages, are we?).

[jimaek]

Normally I wouldn't care that much about the rating but we are getting an SEO hit because of this https://dl.dropboxusercontent.com/s/91fgxb5ryxi4tnp/chrome_CZnfNp1Lnf.png

Thats why I created the task

[MartinKolarik]

It could be that the file listing or versions take long to load from the API or something like that. There's no way this has "poor" performance on desktop on its own.

[MartinKolarik]

Which of the metrics does it complain about?

[jimaek]

Cumulative Layout Shift (CLS)

[MartinKolarik]

Ok that was important because your initial post was about mobile rank but this is about desktop.

[XhmikosR]

It's a tricky thing but I believe it's because some stuff in the viewport are rendered after the initial layout paint, thus leading to a layout shift.

• https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fwww.jsdelivr.com%2F
• https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fwww.jsdelivr.com%2Fpackage%2Fnpm%2Fjquery

There are some sort of easy tweaks you could make:

1. load Google Fonts with display=swap or whatever you prefer
2. update all third-party libs
3. async load all JS files
4. code split all the things
5. lazyload images
6. make sure you always specify image dimensions
7. ideally inline the critical CSS

[jimaek]

Need to focus on this on the new redesigned website

[jimaek]

The new site is live, performance optimization work can begin. We're currently failing many metrics

[jimaek]

https://web.dev/top-cwv-2023/

[MartinKolarik]

Moving to low priority as there may still be some improvements possible, but we now achieve a near-perfect performance score for desktop and a very good one for mobile too.

desktop:

mobile: