Performance suggestions #817

HexagonCDN commented 2022年11月28日 05:20:11 +01:00

https://pagespeed.web.dev/report?url=https%3A%2F%2Fcodeberg.org%2F&hl=en
image

https://pagespeed.web.dev/report?url=https%3A%2F%2Fcodeberg.org%2FCodeberg%2FCommunity%2Fissues%2F479%23issuecomment-633066&form_factor=mobile&hl=en

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

https://pagespeed.web.dev/report?url=https%3A%2F%2Fcodeberg.org%2F&hl=en  https://pagespeed.web.dev/report?url=https%3A%2F%2Fcodeberg.org%2FCodeberg%2FCommunity%2Fissues%2F479%23issuecomment-633066&form_factor=mobile&hl=en  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

fnetX commented 2022年11月28日 17:20:21 +01:00

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.

HexagonCDN commented 2022年12月07日 02:10:07 +01:00

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

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

HexagonCDN commented 2022年12月21日 04:23:42 +01:00

?

?

fnetX commented 2022年12月21日 19:30:18 +01:00

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.

fnetX commented 2022年12月21日 19:32:27 +01:00

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.

HexagonCDN commented 2022年12月22日 02:09:21 +01:00

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