-
-
Notifications
You must be signed in to change notification settings - Fork 3.5k
Improve performance of p5 contributors list #7788
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Comments
Faced the same loading issue a few times @quinton-ashley . I agree that optimizing the README could be a great step forward. To add on to the suggestion of moving the contributors section to a separate page, we could maybe use a hybrid approach: keep a small, optimized list of top contributors (e.g., 5–10) in the main README and include a "View All Contributors" link to a dedicated page. This balances performance improvements with the p5.js community's commitment to recognizing contributors. Or maybe we could have only the names displayed which could be linked to their profiles. |
Hello! @quinton-ashley I have submitted a PR as per the suggestion and used the hybrid approach suggested by @Ansh-Sarkar . Please review this when you have time and let me know if any change is required. |
I'm a little on the fence about leaving just a few contributors in the readme -- elsewhere I think there was discussion about randomizing the order to not make it seem like some contributors are the most worthwhile, and leaving just some may accidentally work against that goal. Also for the sake of discussion, some other notes:
|
Hi all, because the project follows the all-contributors specification, the README file intentionally lists all contributors (read more here). Just leaving top 5-10 is not consistent with this approach to collective attribution. It would also be important to leave the emojis. @LalitNarayanYadav are you interested in implementing @davepagurek 's suggestion of reducing the image sizes? I don't see any issue with that at all.
Edited to add: @quinton-ashley this would be really cool and be a great bridge between the README and the website "people" page that doesn't have the images, but would be great if it did! Would be great to see this, if someone wants to work on it. |
Thanks for the feedback, @davepagurek and @ksen0! I appreciate the concern about randomizing the order and the importance of consistency with the all-contributors specification. I agree that keeping the collective attribution intact is essential, and that's why I proposed a hybrid approach — preserving the visibility of contributors while improving performance. However, if there's a consensus that we should include all contributors in the README, I’m open to adjusting the approach accordingly. As for reducing image sizes, I’m happy to implement the changes based on @davepagurek's suggestion. I think a spritesheet image could be a more efficient solution, and I'll explore that further. I also like the idea of linking to a dedicated "contributors" page on p5js.org, as it could provide a better user experience while maintaining a clean README. Let me know if you’d like me to proceed with these changes in a follow-up PR! |
Thanks @LalitNarayanYadav feel free to go ahead first with the PR to reduce image size, so that can be merged in quicker (first in 1.x and then once thats merged, you could make the matching PR for dev-2.0 as well). We can keep this issue open for spritesheet (or other ideas that come up) or improvement to the website people page. Does that sound alright? I've updated the title to be more descriptive of the current scope but let me know if anyone has another idea! |
@LalitNarayanYadav Last I checked, GitHub doesn't enable the CSS required in Markdown HTML for the spritesheet approach to work in the readme. @davepagurek I think the problem is the amount of image requests to GitHub's server, which presumably has to retrieve them separately from a database or is cutting them to size on the fly. The size of the image may not be a significant factor. Even your quite stylized avatar becomes pretty illegible at 20x20. @ksen0 Might be better to keep the readme as is or not include profile images, just on p5js.org where it can be done more effectively. |
Small note about size vs number of image requests: loading smaller images may not improve load speed but I was thinking it can reduce the amount of data needed, and that's worth doing. I tried with @davepagurek 's links above (inspect + incognito mode so it's not caching) and I see Resulting image is indeed really small, but I think it's there more for creating a certain energy? And many avatars are not individually legible but still super recognizable at that scale, and exist in other parts of the GitHub UI, so I think aesthetically it would be my preference. @LalitNarayanYadav you're welcome to also try setting image size to 0 or try out other settings of all-contributors if you find a nice solution, removing avatars would be an alright option! |
Regardless of what we do here, this is potentially something GitHub could improve too -- e.g. letting users start clicking things on |
@ksen0 I've resized the avatar images to 64px in this portion of the code. Could you please review it and let me know if the size works well? Once confirmed, I'll proceed with the full update. |
Topic
Loading the p5.js GitHub repository page requires loading hundreds of contributor pictures.
I have a 800mbps internet connection and though it only amounts to 45mb of data transferred, the amount of separate image requests is staggering.
It takes a full 10 seconds for the page to completely load and during that time JavaScript can even block the issues tab, releases, and other links from being clickable.
slow.mov
It'd also improve accessibility for users with metered internet connections to make the README.md as lightweight as possible.
An ideal solution would be to make a single spritesheet image with all the contributor pictures and have a page displaying them on p5js.org. This way custom CSS styling could be used to make the markdown table look nicer too.
A good temporary fix is to move the contributors section from the readme.md to a separate markdown page that can be linked to in the readme.
The text was updated successfully, but these errors were encountered: