squid/blog
squid/blog
1
2
Fork 0
Code Issues 10 Pull Requests Actions Projects 1 Releases 7 Wiki Activity

BLOG-92 Fix improve google font loading efficiency #111

Merged
squid merged 2 commits from BLOG-92_improve_font_loading_efficiency into main 2025-08-02 15:26:49 +08:00
Conversation 3 Commits 2 Files Changed 2 +16
squid commented 2025-08-02 15:22:18 +08:00
Owner
Copy Link

Description

Reference: https://web.dev/learn/performance/understanding-the-critical-path?utm_source=lighthouse&utm_medium=lr&hl=zh-tw#render-blocking_resources/

Package Changes

No response

Screenshots

No response

Reference

Resolves #92

Checklist

  • A milestone is set
  • The related issuse has been linked to this branch
### Description Reference: https://web.dev/learn/performance/understanding-the-critical-path?utm_source=lighthouse&utm_medium=lr&hl=zh-tw#render-blocking_resources/ ### Package Changes _No response_ ### Screenshots _No response_ ### Reference Resolves #92 ### Checklist - [x] A milestone is set - [x] The related issuse has been linked to this branch
squid added this to the 0.3 milestone 2025-08-02 15:22:18 +08:00
squid added 1 commit 2025-08-02 15:22:19 +08:00
BLOG-92 fix: improve google font loading efficiency
All checks were successful
Frontend CI / build (push) Successful in 1m6s
Details
Auto Comment On PR / add_improve_comment (pull_request) Successful in 17s
Details
PR Title Check / pr-title-check (pull_request) Successful in 16s
Details
48005d1f52
bot commented 2025-08-02 15:22:25 +08:00
Collaborator
Copy Link

/improve

/improve
bot commented 2025-08-02 15:22:28 +08:00
Collaborator
Copy Link

PR Code Suggestions ✨

CategorySuggestion                                                                                                                                    Impact
Security
Avoid inline script for CSP compatibility

The inline onload script this.media='all' can be blocked by a strict Content
Security Policy (CSP) that disallows unsafe-inline scripts. This would prevent the
Google Fonts from loading for users with JavaScript enabled. Consider moving this
logic to an external JavaScript file or using a nonce attribute if your CSP allows
it.

frontend/src/app.html [20-25]

 <link
 	href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono&family=Noto+Sans+TC:wght@100..900&display=swap"
 	rel="stylesheet"
 	media="print"
-	onload="this.media='all'"
+	id="google-fonts-link"
 />
Suggestion importance[1-10]: 8

__

Why: The suggestion correctly identifies a potential Content Security Policy (CSP) issue with the inline onload script. Moving this logic to an external JavaScript file or using a nonce attribute is a good security practice to prevent unsafe-inline script execution.

Medium
## PR Code Suggestions ✨ <!-- --> <table><thead><tr><td><strong>Category</strong></td><td align=left><strong>Suggestion&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </strong></td><td align=center><strong>Impact</strong></td></tr><tbody><tr><td rowspan=1>Security</td> <td> <details><summary>Avoid inline script for CSP compatibility</summary> ___ **The inline <code>onload</code> script <code>this.media='all'</code> can be blocked by a strict Content <br>Security Policy (CSP) that disallows <code>unsafe-inline</code> scripts. This would prevent the <br>Google Fonts from loading for users with JavaScript enabled. Consider moving this <br>logic to an external JavaScript file or using a <code>nonce</code> attribute if your CSP allows <br>it.** [frontend/src/app.html [20-25]](https://git.squidspirit.com/squid/blog/src/branch/BLOG-92_improve_font_loading_efficiency/frontend/src/app.html#L20-L25) ```diff <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono&family=Noto+Sans+TC:wght@100..900&display=swap" rel="stylesheet" media="print" - onload="this.media='all'" + id="google-fonts-link" /> ``` <details><summary>Suggestion importance[1-10]: 8</summary> __ Why: The suggestion correctly identifies a potential Content Security Policy (CSP) issue with the inline `onload` script. Moving this logic to an external JavaScript file or using a `nonce` attribute is a good security practice to prevent `unsafe-inline` script execution. </details></details></td><td align=center>Medium </td></tr></tr></tbody></table>
squid changed title from BLOG-92 fix: improve google font loading efficiency to BLOG-92 Fix improve google font loading efficiency 2025-08-02 15:22:47 +08:00
squid added 1 commit 2025-08-02 15:25:35 +08:00
BLOG-92 feat: defer font loading to improve performance
All checks were successful
PR Title Check / pr-title-check (pull_request) Successful in 16s
Details
Frontend CI / build (push) Successful in 1m5s
Details
1e1bae0812
squid commented 2025-08-02 15:26:08 +08:00
Author
Owner
Copy Link

The inline onload script this.media='all' can be blocked by a strict Content
Security Policy (CSP) that disallows unsafe-inline scripts. This would prevent the
Google Fonts from loading for users with JavaScript enabled. Consider moving this
logic to an external JavaScript file or using a nonce attribute if your CSP allows
it.

frontend/src/app.html [20-25]

 <link
 	href="https://fonts.googleapis.com/css2?> family=Noto+Sans+Mono&family=Noto+Sans+TC:wght@100..900&display=swap"
 	rel="stylesheet"
 	media="print"
-	onload="this.media='all'"
+	id="google-fonts-link"
 />

Addressed in 1e1bae0812.

> **The inline <code>onload</code> script <code>this.media='all'</code> can be blocked by a strict Content <br>Security Policy (CSP) that disallows <code>unsafe-inline</code> scripts. This would prevent the <br>Google Fonts from loading for users with JavaScript enabled. Consider moving this <br>logic to an external JavaScript file or using a <code>nonce</code> attribute if your CSP allows <br>it.** > > [frontend/src/app.html [20-25]](https://git.squidspirit.com/squid/blog/src/branch/BLOG-92_improve_font_loading_efficiency/frontend/src/app.html#L20-L25) > > ```diff > <link > href="https://fonts.googleapis.com/css2?> family=Noto+Sans+Mono&family=Noto+Sans+TC:wght@100..900&display=swap" > rel="stylesheet" > media="print" > - onload="this.media='all'" > + id="google-fonts-link" > /> > ``` Addressed in https://git.squidspirit.com/squid/blog/commit/1e1bae08127f4487ff323768d4d38048a75769fc.
squid merged commit 18f29655bf into main 2025-08-02 15:26:49 +08:00
squid deleted branch BLOG-92_improve_font_loading_efficiency 2025-08-02 15:26:49 +08:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
Clear labels
bug
Something is not working
design
dev
automation
dev
backend
dev
frontend
dev
improvement
duplicate
This issue or pull request already exists
enhancement
New feature
help wanted
Need some help
invalid
Something is wrong
question
More information is needed
wontfix
This won't be fixed
No Label
Milestone
No items
No Milestone 0.3
Projects
Clear projects
No project
Assignees
Clear assignees
bot zoe squid
No Assignees
2 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: squid/blog#111
No description provided.
Delete Branch "BLOG-92_improve_font_loading_efficiency"

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?