PERF: Remove unnecessary `<link rel="preload">` (#26219)

Why this change?

According to https://web.dev/articles/preload-critical-assets,

> By preloading a certain resource, you are telling the browser that you would like to fetch it sooner than the browser would otherwise discover it because you are certain that it is important for the current page.

The preload resource hint is meant to tell the browser to fetch
resources that it would not discover upfront or early. However, we are
not using it the right way because we are literally adding the resource
hint right before a `<script>` tag which means the browser would have
discovered the resource even without the resource hint.

What does this change do?

This commit removes the preload resource hint which are added right
before script tags since the optimization here is highly questionable at the expense of making 
our initial DOM larger.
This commit is contained in:
Alan Guo Xiang Tan 2024-03-18 20:07:29 +08:00 committed by GitHub
parent 27b0ebff4c
commit e2da72b76c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 4 additions and 11 deletions

View File

@ -151,16 +151,10 @@ module ApplicationHelper
nonce_attribute = "nonce=\"#{csp_nonce_placeholder}\""
add_resource_preload_list(url, "script")
if GlobalSetting.preload_link_header
<<~HTML.html_safe
<script defer src="#{url}" #{entrypoint_attribute} #{nonce_attribute}></script>
HTML
else
<<~HTML.html_safe
<link rel="preload" href="#{url}" as="script" #{entrypoint_attribute} #{nonce_attribute}>
<script defer src="#{url}" #{entrypoint_attribute} #{nonce_attribute}></script>
HTML
end
<<~HTML.html_safe
<script defer src="#{url}" #{entrypoint_attribute} #{nonce_attribute}></script>
HTML
end
def add_resource_preload_list(resource_url, type)

View File

@ -5,7 +5,6 @@ RSpec.describe ApplicationHelper do
describe "preload_script" do
def script_tag(url, entrypoint, nonce)
<<~HTML
<link rel="preload" href="#{url}" as="script" data-discourse-entrypoint="#{entrypoint}" nonce="#{nonce}">
<script defer src="#{url}" data-discourse-entrypoint="#{entrypoint}" nonce="#{nonce}"></script>
HTML
end