Yireo - Developer training

Open main menu
LinkPreload

Magento 2 Extension

LinkPreload

Send initial CSS and JS faster to browsers using HTTP/2 preload
  • 100% open source and well-written
  • compliant with modern Magento standards
  • Free with no strings attached
  • Community collaboration via GitHub
FREE

Latest release: 1.4.19

Jisse Reitsma

This extension has been created by Jisse Reitsma

This extension has been written - with love - by Jisse Reitsma, founder of Yireo, three times Magento Master, partner of ExtDN, trainer and author. Jisse has been in the Magento ecosystem for many years and has created numerous Magento extensions. He also has been pushing better coding practices, like CI/CD, clean coding, coding standards and testing.

Packages & pricing

This extension is hosted on GitHub:
https://github.com/yireo/Yireo_LinkPreload

Usage after installation

Usage

Once the extension is installed, you will still need to enable it via Store> Configuration> System> Yireo LinkPreload.

Once enabled, you should be able to see new Link: headers by debugging the HTTP headers of the HTML source of your Magento pages. This allows your browser to request for some initial CSS and JavaScript, once the HTML document has been received.

Optional XML layout configuration

Optionally, you can add additional links via the XML layout, which is mostly useful for JavaScript loaded via RequireJS, or webfonts loaded via css:

<referenceBlock name="link-preload">
    <arguments>
        <argument name="scripts" xsi:type="array">
            <item name="my-script-name" xsi:type="string">my-script.js</item>
        </argument>
        <argument name="fonts" xsi:type="array">
            <item name="my-font-name" xsi:type="string">my-font.woff2</item>
        </argument>
        <argument name="styles" xsi:type="array">
            <item name="my-style-name" xsi:type="string">my-style.css</item>
        </argument>
        <argument name="images" xsi:type="array">
            <item name="my-image-name" xsi:type="string">my-image.png</item>
        </argument>
    </arguments>
</referenceBlock>

Please note that RequireJS bundling has a similar effect and should be the preferred way to go.

Backgrounds

With HTTP/2 a lot of cool things have been added to the web. However, for things to work really optimal a HTML document could mark additional resources (like CSS or JavaScript) with Link headers in the HTTP response. This extension simply adds these Link headers to the HTTP response, allowing your Magento 2 site to be loaded faster under HTTP/2.

About the browser cache

Please note that this extension does not implement a PUSH initiated from the server, which would bypass the browser cache. Instead, it implements a method that respects the browser cache, which resembles more of a pull than a push.

Use a cookie?

This module also ships with a setting Use Cookie. Keep it disabled unless you know what you are doing. Theoretically, there could be a reverse-proxy between the browser and Magento that doesn't forward Link header but instead uses it to initiate a real PUSH, so that it bypasses the browser cache. This depends entirely on the configuration of this reverse-proxy. But in this specific case, the cookie feature needs to be enabled.

Quick Start

Get up and running with your Yireo extension

Installation via composer URL

We recommend to install Magento 2 extensions via composer. See the Composer project for instructions on how to get composer up and running. Once composer is installed, use the following command to install our extension.

composer require yireo/magento2-linkpreload

This will make composer download the package from Packagist. After the composer installation has finished, use the following commands to enable the module within Magento:

bin/magento module:enable Yireo_LinkPreload
bin/magento cache:clean
bin/magento setup:upgrade

After these commands, the extension is ready for use in Magento. If you were already logged into the Magento Admin Panel, make sure to logout and log back in again, before proceeding. Do not forget to grab yourself a manual copy of our extension as a backup.

Manual installation

Please note that we strongly recommend using composer instead. If you bump into issues with this manual procedure, the first thing we need to ask is whether you have installed all dependencies, as mentioned in the composer.json file of this extension. If the composer.json file of this extension mentions requirements, you need to fulfill these requirements. This could involve checking for PHP requirements but also installing third party add-ons. Sounds difficult? Yes! That's why we can only recommend you to use composer. The manual installation does NOT make your life easier, even if you think it does.

Do use composer: It allows for dependency tracking and in the end, prevents breaking your site. However, in some cases, it might be required to do a non-composer installation. For these exceptional situations, download the module ZIP from our site (under the tab File Downloads). Next, create a folder with the following name and copy to the ZIP contents to it:

app/code/Yireo/LinkPreload

After the files have been uploaded, confirm that all files are in place. For instance, you should have a file like app/code/Yireo/LinkPreload/etc/module.xml. Next, use the following commands to enable the module within Magento:

bin/magento module:enable Yireo_LinkPreload
bin/magento cache:clean
bin/magento setup:upgrade

After these commands, the extension is ready for use in Magento. If you were already logged into the Magento Admin Panel, make sure to logout and log back in again, before proceeding. Do not forget to grab yourself a manual copy of our extension as a backup.

Downloads

Head over to the GitHub repository for downloads: https://github.com/yireo/Yireo_LinkPreload

Frequently Asked Questions

No, it is not. As a policy, all our Yireo software is unencrypted - we do not make use of technologies like ionCube or ZendOptimizer. All PHP-code is open source, but for commercial extensions the code is only given to paying customers.

You probably would like to know if this extension is working under a specific Magento version 2.X.Y. However, from a technical point of view, the question is wrong: The major Magento version 2.X.Y is not semantical but instead used for marketing purposes. It doesn't give any guarantees.

Instead, we maintain compatibility with the actual modules that lie underneath (like Magento_Catalog or the Magento Framework). And version management for these dependencies is handled via composer. We strongly advice you to rely on composer to answer the question whether our extension works under a specific Magento version. This is the only way to guarantee compatibility in a professional way.

Alternatively, study our CHANGELOG for details on the progress we made.

This extension is offered for free. Feel free to go the GitHub repository (see the link under Quick Start> Downloads) and open an Issue there. Please note that this is a voluntary open source project. The more helpful you are in describing the issue at hand, the more likely volunteers can come in to help you with the issue.

Support

Getting support

If you run into problems, we are happy to help you out with the following resources:

  • Check FAQ on this page
  • See our Quick Start on this page
  • Open an Issue in the GitHub repository
    • Be as descriptive in your issue as possible
    • Do everything you can to troubleshoot the issue yourself
    • Understand that you are asking others to give up their free time

We usually respond in 24 hours but understand this is all done on a voluntary basis. Also note that we require you to collaborate together with us. Interpret errors as best as you can, before claiming our time. Free software does not automatically lead into free support as well.

RequireJS is not covered

This extension does not support scripts that are loaded via RequireJS. RequireJS itself (the core libraries) is served using a Link header though. If you want to optimize RequireJS sources, make sure to look into bundling instead.

Supported Magento versions

  • 2.2 (2.2.5, 2.2.6, 2.2.7, 2.2.8, 2.2.9, 2.2.10)
  • 2.3 (2.3.2, 2.3.3, 2.3.4, 2.3.5, 2.3.5-p1, 2.3.5-p2, 2.3.6, 2.3.7, 2.3.7-p1, 2.3.7-p2)
  • 2.4 (2.4.0, 2.4.1, 2.4.2, 2.4.2-p1, 2.4.2-p2, 2.4.3, 2.4.4, 2.4.5)
The supported PHP versions equal the versions supported by Magento itself

Requirement details

  • magento/framework: ^102.0|^103.0
  • magento/module-store: ^100.0|^101.0
  • symfony/dom-crawler: ^2.7|^3.0|^4.0|^5.0
  • symfony/css-selector: ^2.7|^3.0|^4.0|^5.0
  • php: >=7.1

Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

[Unreleased]

[1.4.19] - 5 October 2022

Fixed
  • Added nopush to all preload links

[1.4.18] - 26 June 2022

Fixed
  • Loosen symfony/dom-crawler constraint #40 (@bramstroker)

[1.4.17] - 18 June 2022

Fixed
  • Only preload CSS when critical CSS is disabled (@Quazz)

[1.4.16] - 5 April 2022

Fixed
  • Prevent LinkPreload module on non-HTML content

[1.4.15] - 31 March 2022

Fixed
  • Don't preload lazy loading images #36 (@Quazz)

[1.4.14] - 20 February 2022

Fixed
  • Missing crossorigin in html output (@mageho)

[1.4.13] - 19 January 2022

Fixed
  • Make sure title is only parsed once, fixing issues with SVGs

[1.4.12] - 8 July 2021

Fixed
  • Fix PHP Fatal Error with preconfigured assets from layout

[1.4.11] - 7 July 2021

Fixed
  • Prevent multiple rel-attributes
  • Complete refactoring to cleanup code

[1.4.10] - 15 June 2021

Fixed
  • Forget to include XML file

[1.4.9] - 15 June 2021

Added
  • Added hyva_default XML layout handle for Hyva compatibility

[1.4.8] - 12 January 2021

Fixed
  • Cast response to string #26 (@barryvdh)

[1.4.7] - 7 January 2021

Added
  • Add preload-attributes to HTML as well

[1.4.6] - 29 July 2020

Added
  • Magento 2.4 support

[1.4.5] - 2020-07-20

Added
  • Increase dep with symfony/css-selector

[1.4.4] - 2020-06-12

Added
  • Construct link according to W3 specs, including crossorigin on fonts (@dimitri-koenig)

[1.4.3] - 2020-06-03

Added
  • Extends layout configuration with options for fonts, images and styles (@dimitri-koenig)

[1.4.2] - 2020-02-17

Fixed
  • If link is full URL, try to turn it into absolute path

[1.4.1] - 2019-09-10

Fixed
  • Prevent HTTP/HTTPS URLs to be turned into static content URLs

[1.4.0] - 2019-09-08

Added
  • Add better detection of stylesheets (rel=stylesheet instead of as=style)
  • Add XML layout instructions for custom additional links to be set
  • Increase requirement for framework 102 or higher

[1.3.0] - 2019-05-03

Added
  • Add a flag "Skip Images"
  • Skip image when Yireo Webp2 is installed

[1.2.0] - 2019-04-23

Changed
  • Changed name of module from ServerPush to LinkPreload

[1.1.0] - 2019-04-19

Added
  • Add a separate Config class
  • Add a CHANGELOG
Changed
  • Changed paths in System Configuration
  • Make cookie check optional, because it only might be needed with Varnish
  • Remove frontend-check, so it also works for backend :)
Removed
  • Make several protected methods private

[1.0.0] - 2019-03

Added
  • Add a cookie to stop serving Link headers after initial request

[0.0.1] - 2018

Added
  • Initial release
ExtDN

We are a proud member of ExtDN

ExtDN forms a network of Magento extension developers, that strive for a better extension quality - both on a technical level and from an end-users point of view. With industry leaders like Fooman and aHeadworks, ExtDN lifts up the Magento extension space to a new level. And Yireo is proud to be part of this.

Do not miss out on what we say

This will be the most interesting spam you've ever read

We don't write too commercial stuff, we focus on the technology (which we love) and we regularly come up with innovative solutions. Via our newsletter, you can keep yourself up to date on all of this coolness. Subscribing only takes seconds.

Sign up for the Yireo newsletter

Training

Extensions

GitHub organizations

Legal information

Other Yireo sites

Get Social

About Yireo