github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-22 10:57:04 +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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 78 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/assets/javascripts/discourse/app/index.html
View File

@ -11,6 +11,9 @@
<bootstrap-content key="before-script-load">
{{content-for "before-script-load"}}
<bootstrap-content key="discourse-preload-stylesheets">
{{content-for "discourse-preload-stylesheets"}}
<script defer src="{{rootURL}}assets/vendor.js"></script>
<script defer src="{{rootURL}}assets/discourse.js"></script>

8
app/assets/javascripts/discourse/lib/bootstrap-json/index.js
View File

@ -101,6 +101,13 @@ function beforeScriptLoad(buffer, bootstrap) {
);
}
function discoursePreloadStylesheets(buffer, bootstrap) {
(bootstrap.stylesheets || []).forEach((s) => {
let link = `<link rel="preload" as="style" href="${s.href}">`;
buffer.push(link);
});
}
function discourseStylesheets(buffer, bootstrap) {
(bootstrap.stylesheets || []).forEach((s) => {
let attrs = [];
@ -164,6 +171,7 @@ function preloaded(buffer, bootstrap) {
const BUILDERS = {
"html-tag": htmlTag,
"before-script-load": beforeScriptLoad,
"discourse-preload-stylesheets": discoursePreloadStylesheets,
head,
body,
"discourse-stylesheets": discourseStylesheets,

24
app/helpers/application_helper.rb
View File

@ -570,6 +570,19 @@ module ApplicationHelper
)
end
def discourse_stylesheet_preload_tag(name, opts = {})
manager =
if opts.key?(:theme_id)
Stylesheet::Manager.new(
theme_id: customization_disabled? ? nil : opts[:theme_id]
)
else
stylesheet_manager
end
manager.stylesheet_preload_tag(name, 'all')
end
def discourse_stylesheet_link_tag(name, opts = {})
manager =
if opts.key?(:theme_id)
@ -583,6 +596,17 @@ module ApplicationHelper
manager.stylesheet_link_tag(name, 'all')
end
def discourse_preload_color_scheme_stylesheets
result = +""
result << stylesheet_manager.color_scheme_stylesheet_preload_tag(scheme_id, 'all')
if dark_scheme_id != -1
result << stylesheet_manager.color_scheme_stylesheet_preload_tag(dark_scheme_id, '(prefers-color-scheme: dark)')
end
result.html_safe
end
def discourse_color_scheme_stylesheets
result = +""
result << stylesheet_manager.color_scheme_stylesheet_link_tag(scheme_id, 'all')

23
app/views/common/_discourse_preload_stylesheet.html.erb Normal file
View File

@ -0,0 +1,23 @@
<%= discourse_preload_color_scheme_stylesheets %>
<%- if rtl? %>
<%= discourse_stylesheet_preload_tag(mobile_view? ? :mobile_rtl : :desktop_rtl) %>
<%- else %>
<%= discourse_stylesheet_preload_tag(mobile_view? ? :mobile : :desktop) %>
<%- end %>
<%- if staff? %>
<%= discourse_stylesheet_preload_tag(:admin) %>
<%- end %>
<%- if admin? %>
<%= discourse_stylesheet_preload_tag(:wizard) %>
<%- end %>
<%- Discourse.find_plugin_css_assets(include_official: allow_plugins?, include_unofficial: allow_third_party_plugins?, mobile_view: mobile_view?, desktop_view: !mobile_view?, request: request).each do |file| %>
<%= discourse_stylesheet_preload_tag(file) %>
<%- end %>
<%- if theme_id.present? %>
<%= discourse_stylesheet_preload_tag(mobile_view? ? :mobile_theme : :desktop_theme) %>
<%- end %>

2
app/views/layouts/application.html.erb
View File

@ -6,6 +6,8 @@
<meta name="description" content="<%= @description_meta || SiteSetting.site_description %>">
<meta name="discourse_theme_id" content="<%= theme_id %>">
<meta name="discourse_current_homepage" content="<%= current_homepage %>">
<%= render partial: "common/discourse_preload_stylesheet" %>
<%= render partial: "layouts/head" %>
<%= discourse_csrf_tags %>

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)