Skip to content
Asynchronous CSS loading in Magento 2 using rel="preload"
JavaScript PHP
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Magento 2 CSS Preload

Simple module that allows for asynchronous CSS loading in Magento 2


  1. Go to your Magento root directory
  2. Run composer require meanbee/magento2-csspreload


Setting up a development environment

A Docker development environment is included with the project:

docker-compose run --rm cli magento-extension-installer Meanbee_CSSPreload
docker-compose up -d


To add assets to the block, provide the assets argument:

<referenceBlock name="head.csspreload">
        <argument name="assets" xsi:type="array">
            <item name="unique_name" xsi:type="array">
                <item name="path" xsi:type="string">css/filename.css</item>
                <item name="attributes" xsi:type="array">
                    <item name="name" xsi:type="string">attribute</item>
                    <item name="value" xsi:type="string">value</item>

To modify the template of the generated <link /> tags, provide a link_template argument, e.g.:

<referenceBlock name="head.csspreload">
        <argument name="link_template" xsi:type="string"><![CDATA[<link rel="preload" as="style" href=":path:" onload="this.rel='stylesheet'" :attributes: />]]></argument>

There are two variables that will be substituted: :path:, which will be replaced by the asset path, and :attributes: that will contain your attributes of your assets as HTML attributes.

You can’t perform that action at this time.