Preloading CSS and JavaScript

On every Magento page, there are a couple of CSS and JavaScript files needed from the start: For CSS, a default Magento shop loads a generic CSS stylesheet, plus additional CSS stylesheets depending on media queries. For JavaScript, it loads the core libraries of RequireJS (and its configuration). Only once the CSS is loaded, the rendering can be completed. And still, quite a bunch of RequireJS files needs to load as well.

The faster the page receives these initial files, the better. The browser cache helps here. But we can help the browser a bit by sending Link headers together with the HTML document, so that these essential CSS and JS files are loaded as quickly as possible: That's what our module Yireo_LinkPreload is doing.

Install, configure and deploy

The module is easy to install and use: Simply run composer require yireo/magento2-linkpreload to install the Magento 2 module via composer. Next, run the usual bin/magento setup:upgrade and after this, you are good to deploy the module to production.

Browser cache issues?

Earlier, there was a discussion on cookies needed to enhance the functionality of the browser cache - especially if a reverse proxy like Varnish would interpret the Link header in a wrong way. As of yet, we have done various configurations but can't find any evidence of this happening, unless by some ugly intentional hack that a devops should know about.

Feel free to contribute to the extension or specifically this discussion via the GitHub project.

What about RequireJS files?

A Magento 2 frontend typically loads three or four JavaScript files via the XML layout. And it is those files that our module is able to optimize. However, we also know that there might be over 200 additional JavaScript files loaded via RequireJS. So what about those files?

RequireJS doesn't allow for this trick. Instead, see the official Advanced JavaScript bundling guide of the Magento devdocs to help with optimization in that area.