magento2-lightspeed

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

magento2-lightspeed

(★ 62)

Magento 2 - Lightspeed for Google Lighthouse optimizations

magento2-lightspeed Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Magento 2 - Lightspeed for Lighthouse optimizations

Process your Google Lighthouse feedback using sane defaults. This module defines several sections where you can define
common feedback from Google Lighthouse.

## Installation

Run this in your Magento 2 project root;

```bash
composer require elgentos/module-lightspeed
php bin/magento module:enable Elgentos_Lightspeed
php bin/magento setup:upgrade
```

## Features

### Javascript handling
Move all `script` tags before body end. This is the default after installing this module, no exceptions.

### Connection optimization (layout.xml)
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`.

### Fonts (layout.xml)
Load external fonts to the head section.

### Styles (layout.xml)
Inline CSS in the head or before body end for critical CSS.

### External CSS (layout.xml)
We have several options for optimizing external CSS;
* Directly in the head;
* Before body end;
* Defer till all other stuff is done.

### Javascript (layout.xml)
Javascript via XML before body end via layout XML.

## Usage

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
<?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" />

</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
<?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">
            
            <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>
                    
                </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>
    
                    
                    
                    <item name="google-gtm" xsi:type="string">www.googletagmanager.com</item>
                </argument>
            </action>
        </referenceBlock>

<referenceBlock name="lightspeed.head.fonts">
            
            <action method="addItem">
                <argument name="value" xsi:type="string">https://fonts.googleapis.com/css?family=Font&amp;amp;display=swap</argument>
            </action>
            
        </referenceBlock>

<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>

</body>
</page>
```

## Block quick references

### References HEAD

* `lightspeed.head.dns-prefetch`
* `lightspeed.head.preconnect`
* `lightspeed.head.fonts`
* `lightspeed.head.inline-styles`

### References (before body end)

* `lightspeed.body.defer-styles`
* `lightspeed.body.no-defer-styles`
* `lightspeed.body.inline-styles`
* `lightspeed.body.footer-js`

## Block code reference

You can also use `\Elgentos\Lightspeed\Block\ItemsWithPattern` to add your own references.

Public:
* `addItem(string $value): void`
* `addItems(array $values): void`
* `getItems(): array`
* `hasItems(): bool`
* `removeItem(string $value): void`
* `setPattern(string $pattern): void`
* `render(): string`

### Custom block definition

`default.xml`
```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>
        
       <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="lightspeed.head.custom" destination="head.additional" />
        
        <move element="lightspeed.head.custom" destination="before.body.end" />
    </body>
</page>
```

## Authors
* [Gideon Overeem](@govereem)
* [Jeroen Boersma](@Jeroen_Boersma)

magento2-lightspeed

magento2-lightspeed Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

magento2-lightspeed

magento2-lightspeed Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README