www.jsdelivr.com icon indicating copy to clipboard operation
www.jsdelivr.com copied to clipboard

Published 20 hours ago • verified publisher icon jsdelivr

Optimize site performance

Open jimaek opened this issue 4 years ago • 12 comments

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

jimaek avatar May 30 '20 13:05 jimaek

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 avatar May 30 '20 15:05 MartinKolarik

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

MartinKolarik avatar May 30 '20 15:05 MartinKolarik

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

jimaek avatar May 30 '20 16:05 jimaek

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 avatar May 30 '20 19:05 MartinKolarik

Which of the metrics does it complain about?

MartinKolarik avatar May 30 '20 19:05 MartinKolarik

Cumulative Layout Shift (CLS)

jimaek avatar May 30 '20 20:05 jimaek

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

MartinKolarik avatar May 30 '20 20:05 MartinKolarik

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

XhmikosR avatar Jul 03 '20 18:07 XhmikosR

Need to focus on this on the new redesigned website googleperf

jimaek avatar Aug 24 '21 18:08 jimaek

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

jimaek avatar Jan 22 '23 17:01 jimaek

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

jimaek avatar Feb 02 '23 10:02 jimaek

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.

image

desktop: image

mobile: image

MartinKolarik avatar Apr 15 '23 22:04 MartinKolarik