Codeberg/Community
54
325
Fork
You've already forked Community
12

Performance suggestions #817

Closed
opened 2022年11月28日 05:20:11 +01:00 by HexagonCDN · 6 comments
https://pagespeed.web.dev/report?url=https%3A%2F%2Fcodeberg.org%2F&hl=en ![image](/attachments/f3d47e6c-4bcd-491b-be7d-2281de32cb51) https://pagespeed.web.dev/report?url=https%3A%2F%2Fcodeberg.org%2FCodeberg%2FCommunity%2Fissues%2F479%23issuecomment-633066&form_factor=mobile&hl=en ![](/attachments/c4832040-a386-4a18-9af2-64cc99577793) https://pagespeed.web.dev/report?url=https%3A%2F%2Fcodeberg.org%2FCodeberg%2FCommunity&hl=en https://pagespeed.web.dev/report?url=https%3A%2F%2Fcodeberg.org%2FCodeberg&hl=en https://pagespeed.web.dev/report?url=https%3A%2F%2Fcodeberg.org%2FCodeberg%2Fgitea%2Fpulls%2F43&hl=en
Owner
Copy link

Sorry, but we had this topic already. These are not suggestions, this are just screenshots from random internet speed testers, and storing them on our systems does not make anything faster.

Yes, there's a lot you can optimize, also see https://forgeperf.org/ for some more useful metrics.

But: If you want to help out, then suggest what can be improved in the software or infrastructure setup, not that we need to look at the results.

Sorry, but we had this topic already. These are not suggestions, this are just screenshots from random internet speed testers, and storing them on our systems does not make anything faster. Yes, there's a lot you can optimize, also see https://forgeperf.org/ for some more useful metrics. But: If you want to help out, then **suggest** what can be improved in the software or infrastructure setup, not that we need to look at the results.

A. Reduce unused stuff

  1. Reduce rules from stylesheets and defer CSS not used for above-the-fold content
URLs
codeberg.org/assets/css/index.css?v=1.17.3~104-g5904fd9
design.codeberg.org/design-kit/codeberg.css

  1. Reduce unused JavaScript and defer loading scripts until they are required
URLs
codeberg.org/assets/js/index.js?v=1.17.3~104-g5904fd9
design.codeberg.org/components/codeberg-components.js

B. Eliminate render-blocking resources

Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles.

C. Enable text compression

Uses gzip or Brotli. I prefers Brotli. Guide to enable compression

D. Don't serve legacy JavaScript to modern browsers

URLs
/assets/js/index.js?v=1.17.3~118-g078b52c:4:20090 Object.values
/assets/js/index.js?v=1.17.3~118-g078b52c:4:26422 Array.prototype.filter
/assets/js/index.js?v=1.17.3~118-g078b52c:6:5867 Array.from
/assets/js/index.js?v=1.17.3~118-g078b52c:6:8906 Object.keys
/assets/js/index.js?v=1.17.3~118-g078b52c:7:53496 Array.prototype.map
/assets/js/index.js?v=1.17.3~118-g078b52c:7:54017 Object.getOwnPropertyDescriptors
/assets/js/index.js?v=1.17.3~118-g078b52c:7:60662 @babel/plugin-transform-classes

E. Use system fonts instead for text

  1. Beautiful web fonts are not that necessary. Also system fonts is actually beautiful and nice to read. No need for downloading a web font.

  2. It is also better for accessibility since you can customize the font to the one that works well for you.
    image

I use uBlock Origin to block web fonts.
https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals#web_safe_fonts

F. Add explicit width and height attributes for image elements

G. Cache more often

H. Replace .png with .webp

.webp has same quailty as .png but loads more efficently.

  1. https://en.wikipedia.org/wiki/WebP
  2. https://developers.google.com/speed/webp/docs/webp_study
## A. Reduce unused stuff 1. [Reduce rules from stylesheets and defer CSS not used for above-the-fold content](https://developer.chrome.com/docs/lighthouse/performance/unused-css-rules/) | URLs | | -------- | | codeberg.org/assets/css/index.css?v=1.17.3~104-g5904fd9 | | design.codeberg.org/design-kit/codeberg.css | <br> 2. [Reduce unused JavaScript and defer loading scripts until they are required](https://developer.chrome.com/docs/lighthouse/performance/unused-javascript/) | URLs | | -------- | | codeberg.org/assets/js/index.js?v=1.17.3~104-g5904fd9 | | design.codeberg.org/components/codeberg-components.js | ## B. Eliminate render-blocking resources [Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles.](https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/) ## C. Enable text compression Uses [gzip](https://en.wikipedia.org/wiki/Gzip) or [Brotli](https://en.wikipedia.org/wiki/Brotli). I prefers Brotli. [Guide to enable compression](https://developer.chrome.com/docs/lighthouse/performance/uses-text-compression) ## [D. Don't serve legacy JavaScript to modern browsers](https://philipwalton.com/articles/deploying-es2015-code-in-production-today) | URLs | | | -------- | -------- | | /assets/js/index.js?v=1.17.3~118-g078b52c:4:20090 |`Object.values` | | /assets/js/index.js?v=1.17.3~118-g078b52c:4:26422 |`Array.prototype.filter` | | /assets/js/index.js?v=1.17.3~118-g078b52c:6:5867 |`Array.from` | | /assets/js/index.js?v=1.17.3~118-g078b52c:6:8906 |`Object.keys` | | /assets/js/index.js?v=1.17.3~118-g078b52c:7:53496 |`Array.prototype.map` | | /assets/js/index.js?v=1.17.3~118-g078b52c:7:54017 |`Object.getOwnPropertyDescriptors`| | /assets/js/index.js?v=1.17.3~118-g078b52c:7:60662 |`@babel/plugin-transform-classes` | ## E. Use system fonts instead for text 1. Beautiful web fonts are not that necessary. Also system fonts is actually beautiful and nice to read. No need for downloading a web font. 2. It is also better for accessibility since you can customize the font to the one that works well for you. ![image](/attachments/593c1540-9329-490e-8138-7fd1c156d82d) I use uBlock Origin to block web fonts. https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals#web_safe_fonts ## F. Add explicit `width` and `height` attributes for image elements ## G. [Cache more often](https://developer.chrome.com/docs/lighthouse/performance/uses-long-cache-ttl) ## H. Replace `.png` with `.webp` `.webp` has same quailty as `.png` but loads more efficently. 1. https://en.wikipedia.org/wiki/WebP 2. https://developers.google.com/speed/webp/docs/webp_study

?

?
Owner
Copy link

I still won't address generic suggestions. I know there are like 192837465 things to optimize, and yet, having general suggestions won't help in getting anything done.

If you insist on keeping it open, we can keep it open.

If you want to help us, make a proposal of what needs to be changed, not a list of stuff that you think could be optimized.

If you really want to help us, pick the most important thing and start working on it.

Until then, I'll address other serious issues around.


For example, the first suggestion alone is an issue on it's own. It's not trivial to solve. How can we extend the Gitea/Forgejo style compilation to know which CSS is used "above the fold"? And how can we ensure that the file can be cached, because since "above the fold" content differs on every single page of Codeberg, having a different style sheet for each page would not reduce download size, as it could not be cached. This alone is a whole long debate, that should not be made here in the Community issues, but with Gitea / Forgejo developers. And even then, it's likely quite some effort to discuss and implement, so we need people to look into it. Just posting a bunch of auto-generated reports does not help to solve these non-trivial issues in any way. My opinion.

I still won't address generic suggestions. I know there are like 192837465 things to optimize, and yet, having general suggestions won't help in getting anything done. If you insist on keeping it open, we can keep it open. If you want to help us, make a proposal of what needs to be changed, not a list of stuff that you think could be optimized. If you really want to help us, pick the most important thing and start working on it. Until then, I'll address other serious issues around. --- For example, the first suggestion alone is an issue on it's own. It's not trivial to solve. How can we extend the Gitea/Forgejo style compilation to know which CSS is used "above the fold"? And how can we ensure that the file can be cached, because since "above the fold" content differs on every single page of Codeberg, having a different style sheet for each page would not reduce download size, as it could not be cached. This alone is a whole long debate, that should not be made here in the Community issues, but with Gitea / Forgejo developers. And even then, it's likely quite some effort to discuss and implement, so we need people to look into it. Just posting a bunch of auto-generated reports does not help to solve these non-trivial issues in any way. My opinion.
Owner
Copy link

And another recommendation: Issues should be actionable. Someone willing to contribute will open an issue, and if they know what it is about, they might start working on it.

If they need to go through dozens of screenshots and long reports and discussions without having a single atomic piece of work they could do, they'll move on. That's how issues get stale, very often.

Yes, discussions are important, but still focused on one thing. If you look at healthy discussion threads, you'll notice they aren't usually a debate between two people only, one only wanting to close the issue because they consider it invalid.

And another recommendation: Issues should be actionable. Someone willing to contribute will open an issue, and if they know what it is about, they might start working on it. If they need to go through dozens of screenshots and long reports and discussions without having a single atomic piece of work they could do, they'll move on. That's how issues get stale, very often. Yes, discussions are important, but still focused on one thing. If you look at healthy discussion threads, you'll notice they aren't usually a debate between two people only, one only wanting to close the issue because they consider it invalid.

OK. Now I will make seperate issues for some important but really simple pieces of work they could do.

  1. #844
  2. #845
  3. #846
  4. #847
OK. Now I will make seperate issues for some important but really simple pieces of work they could do. 1. https://codeberg.org/Codeberg/Community/issues/844 2. https://codeberg.org/Codeberg/Community/issues/845 3. https://codeberg.org/Codeberg/Community/issues/846 4. https://codeberg.org/Codeberg/Community/issues/847
Sign in to join this conversation.
No Branch/Tag specified
main
No results found.
Labels
Clear labels
accessibility

Reduces accessibility and is thus a "bug" for certain user groups on Codeberg.
bug

Something is not working the way it should. Does not concern outages.
bug
infrastructure

Errors evidently caused by infrastructure malfunctions or outages
Codeberg

This issue involves Codeberg's downstream modifications and settings and/or Codeberg's structures.
contributions welcome

Please join the discussion and consider contributing a PR!
docs

No bug, but an improvement to the docs or UI description will help
duplicate

This issue or pull request already exists
enhancement

New feature
infrastructure

Involves changes to the server setups, use `bug/infrastructure` for infrastructure-related user errors.
legal

An issue directly involving legal compliance
licence / ToS

involving questions about the ToS, especially licencing compliance
please chill
we are volunteers

Please consider editing your posts and remember that there is a human on the other side. We get that you are frustrated, but it's harder for us to help you this way.
public relations

Things related to Codeberg's external communication
question

More information is needed
question
user support

This issue contains a clearly stated problem. However, it is not clear whether we have to fix anything on Codeberg's end, but we're helping them fix it and/or find the cause.
s/Forgejo

Related to Forgejo. Please also check Forgejo's issue tracker.
s/Forgejo/migration

Migration related issues in Forgejo
s/Pages

Issues related to the Codeberg Pages feature
s/Weblate

Issue is related to the Weblate instance at https://translate.codeberg.org
s/Woodpecker

Woodpecker CI related issue
security

involves improvements to the sites security
service

Add a new service to the Codeberg ecosystem (instead of implementing into Gitea)
upstream

An open issue or pull request to an upstream repository to fix this issue (partially or completely) exists (i.e. Gitea, Forgejo, etc.)
wontfix

Codeberg's current set of contributors are not planning to spend time on delegating this issue.
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
2 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
Codeberg/Community#817
Reference in a new issue
Codeberg/Community
No description provided.
Delete branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?