Project

General

Profile

Actions

Patch #37664

open

Preload all stylesheets and JavaScripts

Added by Takashi Kato over 2 years ago. Updated about 2 years ago.

Status:
New
Priority:
Normal
Assignee:
-
Category:
Performance
Start date:
Due date:
% Done:

0%

Estimated time:

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 .


Files

Actions #1

Updated by Go MAEDA over 2 years 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" />
Actions #2

Updated by Takashi Kato over 2 years 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
Actions #3

Updated by Go MAEDA over 2 years ago

  • Target version set to Candidate for next major release
Actions #4

Updated by Go MAEDA about 2 years ago

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

Setting the target version to 5.1.0.

Actions #5

Updated by Mischa The Evil about 2 years 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?

Actions #6

Updated by Go MAEDA about 2 years 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.

Actions #7

Updated by Takashi Kato about 2 years ago

Preloading doesn't work for plugin assets because calling from call_hook lost the context, not the helper customization.

Using the context when calling the hook works as expected.

Actions

Also available in: Atom PDF