Process your Google Lighthouse feedback using sane defaults. This module defines several sections where you can define common feedback from Google Lighthouse.
Run this in your Magento 2 project root;
composer require elgentos/module-lightspeed
php bin/magento module:enable Elgentos_Lightspeed
php bin/magento setup:upgradeMove all script tags before body end. This is the default after installing this module, no exceptions.
Allow modern browsers to use DNS prefetching and preconnecting.
DNS prefetching only does a DNS lookup, preconnecting already connects to the remote server and does SSL handshake.
Preconnecting is limited to a few connections which is defined in your browser, we have fallback to DNS-prefetching,
but think before you add everything to preconnect.
Load external fonts to the head section.
Inline CSS in the head or before body end for critical CSS.
We have several options for optimizing external CSS;
- Directly in the head;
- Before body end;
- Defer till all other stuff is done.
Javascript via XML before body end via layout XML.
Preferred usage to keep everything together is to add a handle to layout/default.xml.
You can also add controller specific rules, add them in the controller specific handles, for instance layout/catalog_category_default.xml
You can also add specific rules and bind them to your module, instead to the theme.
app/design/frontend/your/theme/Magento_Theme/layout/default.xml
<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<update handle="default_lightspeed" />
<!-- .... snap ... -->
</page>After that all default lighthouse feedback can go into layout/default_lightspeed.xml
app/design/frontend/your/theme/Magento_Theme/layout/default_lightspeed.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="lightspeed.head.dns-prefetch">
<!-- Use addItems to add multiple values without writing to much code -->
<action method="addItems">
<argument name="items" xsi:type="array">
<item name="google" xsi:type="string">www.google.com</item>
<item name="google-static" xsi:type="string">www.gstatic.com</item>
<item name="google-adservices" xsi:type="string">www.googleadservices.com</item>
<!-- .... etc ... -->
</argument>
</action>
</referenceBlock>
<referenceBlock name="lightspeed.head.preconnect">
<action method="addItems">
<argument name="items" xsi:type="array">
<item name="google-apis" xsi:type="string">fonts.googleapis.com</item>
<item name="google-fonts" xsi:type="string">fonts.gstatic.com</item>
<!-- .... etc ... -->
<item name="google-gtm" xsi:type="string">www.googletagmanager.com</item>
</argument>
</action>
</referenceBlock>
<referenceBlock name="lightspeed.head.fonts">
<!-- Use addItem if you just need to add one line -->
<action method="addItem">
<argument name="value" xsi:type="string">https://fonts.googleapis.com/css?family=Font&amp;display=swap</argument>
</action>
<!-- .... etc ... -->
</referenceBlock>
<!-- Choose if you want your css to go in the head, or in the footer -->
<referenceBlock name="lightspeed.head.inline-styles">
<action method="addItem">
<argument name="value" xsi:type="string"><![CDATA[*{color: red !important;}]]></argument>
</action>
</referenceBlock>
<referenceBlock name="lightspeed.body.inline-styles">
<action method="addItem">
<argument name="value" xsi:type="string"><![CDATA[*{color: red !important;}]]></argument>
</action>
</referenceBlock>
<referenceBlock name="lightspeed.body.defer-styles">
<action method="addItem">
<!-- Use a custom helper if you need to add some logic outside of layout.xml, needs to return a string -->
<argument name="value" xsi:type="helper" helper="Magento\Helper\Data::getStyleSheet" />
</action>
</referenceBlock>
<!-- Use defer styles which waits till all js/css painting is done -->
<referenceBlock name="lightspeed.body.no-defer-styles">
<action method="addItem">
<argument name="value" xsi:type="helper" helper="Magento\Helper\Data::getStyleSheet" />
</action>
</referenceBlock>
</body>
</page>lightspeed.head.dns-prefetchlightspeed.head.preconnectlightspeed.head.fontslightspeed.head.inline-styles
lightspeed.body.defer-styleslightspeed.body.no-defer-styleslightspeed.body.inline-styleslightspeed.body.footer-js
You can also use \Elgentos\Lightspeed\Block\ItemsWithPattern to add your own references.
Public:
addItem(string $value): voidaddItems(array $values): voidgetItems(): arrayhasItems(): boolremoveItem(string $value): voidsetPattern(string $pattern): voidrender(): string
default.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<!-- .... snap ... -->
<body>
<!-- .... example custom ... -->
<block name="lightspeed.head.custom" class="Elgentos\Lightspeed\Block\ItemsWithPattern">
<arguments>
<argument name="pattern" xsi:type="string"><![CDATA[<link href="//%s" rel="dns-prefetch" />]]></argument>
</arguments>
</block>
<!-- Move element to correct section -->
<move element="lightspeed.head.custom" destination="head.additional" />
<!-- or to the footer -->
<move element="lightspeed.head.custom" destination="before.body.end" />
</body>
</page>