Already months ago, I developed a module to preload CSS and JavaScript files in Magento 2, giving a performance boost to the waterful of resources, needed to render the HTML document. The module was called ServerPush, but that name lead to confusion: The module is now relaunched as LinkPreload. And it is easy to use.
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.
About the author
Jisse Reitsma is the founder of Yireo, extension developer, developer trainer and 3x Magento Master. His passion is for technology and open source. And he loves talking as well.
