Critial preloading assets

Hello everyone,

I’m asking for your help to understand how to load assets from an HTML template where assets are stored in vendor/assets/(fonts|images|javascripts|stylesheets) folders. My problem is to translate tags below to find the correct path of assets:

	<!-- ... -->
	<%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <!-- Critical preload -->
    <link rel="preload" href="js/vendors/uikit.min.js" as="script">
    <link rel="preload" href="css/vendors/uikit.min.css" as="style">
    <link rel="preload" href="css/style.css" as="style">
    <!-- Icon preload -->
    <link rel="preload" href="fonts/fa-brands-400.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="fonts/fa-solid-900.woff2" as="font" type="font/woff2" crossorigin>
    <!-- Font preload -->
    <link rel="preload" href="fonts/rubik-v9-latin-500.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="fonts/rubik-v9-latin-300.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="fonts/rubik-v9-latin-regular.woff2" as="font" type="font/woff2" crossorigin>
    <!-- Favicon and apple icon -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="apple-touch-icon-precomposed" href="apple-touch-icon.png">
    <!-- Stylesheet -->
    <link rel="stylesheet" href="css/vendors/uikit.min.css">
    <link rel="stylesheet" href="css/style.css">

at the end of the template file:

    <script src="js/vendors/uikit.min.js"></script>
    <script src="js/vendors/indonez.min.js"></script>
    <script src="js/config-theme.js"></script>

Note: I’m working with rails


Use the helper preload_link_tag. It will automatically give you the digested version in production:

<%= preload_link_tag "rubik-v9-latin-500.woff2" %>


<%= preload_link_tag "fonts/rubik-v9-latin-500.woff2" %>

The correct one depends on how you are adding your assets to the pipeline, so try both.

wow, everything works like a charm! My major problem was in asserts.rb where I forgot to declare the /vendor/assets folder.


I’m facing one last problem: my “style.css” file contains ERB code, so I renamed the extension to “.css.erb”.

Unfortunately, the tag <%= preload_link_tag "style.css" %> no longer works, even though I specify the full extension “style.css.erb”

I don’t see what I could have missed in relation to the asset documentation :frowning:

thank you in advance

What is the reason you are using ERB in your CSS? If it’s because of the digest in images, there’s no need. If you use “asset-path” and other similar directives from Sprockets, you don’t need erb.

Okay, after setting the extension ".css.scss", the path of the resources in the CSS are correct in the browser. Thanks