Patch #37664

Preload all stylesheets and JavaScripts

Added by Takashi Kato 17 days ago. Updated 1 day ago.

Status:NewStart date:
Priority:NormalDue date:
Assignee:-% Done:

0%

Category:Performance
Target version:Candidate for next major release

Description

All browsers usually block HTML from rendering when loading stylesheets and javascript. Preloading the stylesheet and javascript with the link element or Link header can avoid this block.

Rails 6.1 has a feature that automatically preloads stylesheets and javascript, so enable it.

Please see https://github.com/rails/rails/pull/39939 and https://github.com/rails/rails/pull/40882 .

0001-Preload-all-stylesheets-and-JavaScripts.patch Magnifier (848 Bytes) Takashi Kato, 2022-09-11 23:35

History

#1 Updated by Go MAEDA 15 days ago

I think the patch is expected to add rel="preload" to link tags, right?

I tried out the patch but found no change in link tags.

<link rel="stylesheet" media="all" href="/stylesheets/jquery/jquery-ui-1.13.1.css?1655625104" />
<link rel="stylesheet" media="all" href="/stylesheets/tribute-5.1.3.css?1589811489" />
<link rel="stylesheet" media="all" href="/stylesheets/application.css?1660262973" />
<link rel="stylesheet" media="all" href="/stylesheets/responsive.css?1655625104" />

#2 Updated by Takashi Kato 15 days ago

This patch adds a Link header to the HTTP response header as follows. The effect is the same as adding a link element to html.

Link: </stylesheets/jquery/jquery-ui-1.13.1.css?1662818440>; rel=preload; as=style; nopush,
</stylesheets/tribute-5.1.3.css?1662818440>; rel=preload; as=style; nopush,
</stylesheets/application.css?1663018932>; rel=preload; as=style; nopush,
</stylesheets/responsive.css?1662818440>; rel=preload; as=style; nopush,
</javascripts/jquery-3.6.0-ui-1.13.1-ujs-6.1.3.1.js?1662818440>; rel=preload; as=script; nopush,
</javascripts/tribute-5.1.3.min.js?1662818440>; rel=preload; as=script; nopush,
</javascripts/tablesort-5.2.1.min.js?1662818440>; rel=preload; as=script; nopush,
</javascripts/tablesort-5.2.1.number.min.js?1662818440>; rel=preload; as=script; nopush,
</javascripts/application.js?1662818440>; rel=preload; as=script; nopush,
</javascripts/responsive.js?1662818440>; rel=preload; as=script; nopush

#3 Updated by Go MAEDA 15 days ago

  • Target version set to Candidate for next major release

#4 Updated by Go MAEDA 4 days ago

  • Target version changed from Candidate for next major release to 5.1.0

Setting the target version to 5.1.0.

#5 Updated by Mischa The Evil 2 days ago

I am not able to test this myself, but I wonder: does this 'play nicely' with Redmine's custom implementations of stylesheet_link_tag (source:/trunk/app/helpers/application_helper.rb@21848#L1664) and javascript_include_tag (source:/trunk/app/helpers/application_helper.rb@21848#L1698)? I.e. does it work for third-party plugin resources too?

#6 Updated by Go MAEDA 1 day ago

  • Target version changed from 5.1.0 to Candidate for next major release

Mischa The Evil wrote:

I am not able to test this myself, but I wonder: does this 'play nicely' with Redmine's custom implementations of stylesheet_link_tag (source:/trunk/app/helpers/application_helper.rb@21848#L1664) and javascript_include_tag (source:/trunk/app/helpers/application_helper.rb@21848#L1698)? I.e. does it work for third-party plugin resources too?

I found the patch properly handles third-party theme's stylesheet and JavaScript but does not for plugin assets.

Also available in: Atom PDF