github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-05-26 08:51:52 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

DEV: Preload CSS in the <head> (#17322)

Browse Source 
This commit adds preload links for core/plugin/theme CSS stylesheets in the head.

Preload links are non-blocking and run in parallel. This means that they should have already been downloaded by the time we use the actual stylesheets (in the <body> tag).

Google is currently complaining about this here and this PR will address that warning.

This commit will also fix an issue in the splash screen where it sometimes doesn't respect the theme colors - causing a slightly jarring experience on dark themes.

Note that I opted not to add new specs because the underlying work required already has a lot of coverage. The new methods only change the output HTML so we can chuck that in the document <head>

This change also means that we can make all the stylesheets non-render blocking, but that will follow in a separate commit.
This commit is contained in:
Joe
2022-07-05 00:23:09 +08:00
committed by GitHub
parent 8bdbefe0e0
commit cfde4419f5
6 changed files with 78 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
lib/stylesheet/manager.rb
View File

@ -188,6 +188,14 @@ class Stylesheet::Manager
stylesheet_details(target, "all")
end
def stylesheet_preload_tag(target = :desktop, media = 'all')
stylesheets = stylesheet_details(target, media)
stylesheets.map do |stylesheet|
href = stylesheet[:new_href]
%[<link href="#{href}" rel="preload" as="style"/>]
end.join("\n").html_safe
end
def stylesheet_link_tag(target = :desktop, media = 'all')
stylesheets = stylesheet_details(target, media)
stylesheets.map do |stylesheet|
@ -293,6 +301,16 @@ class Stylesheet::Manager
stylesheet
end
def color_scheme_stylesheet_preload_tag(color_scheme_id = nil, media = 'all')
stylesheet = color_scheme_stylesheet_details(color_scheme_id, media)
return '' if !stylesheet
href = stylesheet[:new_href]
%[<link href="#{href}" rel="preload" as="style"/>].html_safe
end
def color_scheme_stylesheet_link_tag(color_scheme_id = nil, media = 'all')
stylesheet = color_scheme_stylesheet_details(color_scheme_id, media)