包简介

Magento 2 Lightspeed optimizations

README 文档

README

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;

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

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

Authors

elgentos/module-lightspeed 适用场景与选型建议

elgentos/module-lightspeed 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 39.99k 次下载、GitHub Stars 达 62，最近一次更新时间为 2020 年 02 月 06 日，在 PHP 生态内属于活跃度较高的组件。

我们在过去多个企业项目中使用过 elgentos/module-lightspeed 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 elgentos/module-lightspeed 我们能提供哪些服务？

定制开发 / 二次开发

基于 elgentos/module-lightspeed 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

elgentos/module-lightspeed

包简介