README

使用合理的默认设置处理 Google Lighthouse 反馈。此模块定义了几个部分，您可以在此处定义 Google Lighthouse 的常见反馈。

安装

在您的 Magento 2 项目根目录中运行此命令；

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

功能

JavaScript 处理

将所有 script 标签移动到 body 结束之前。安装此模块后，这是默认设置，没有例外。

连接优化（layout.xml）

允许现代浏览器使用 DNS 预获取和预连接。

DNS 预获取仅执行 DNS 查找，预连接已经连接到远程服务器并执行 SSL 握手。预连接受限于浏览器中定义的几个连接，我们回退到 DNS 预获取，但在添加所有内容到 preconnect 之前请三思。

字体（layout.xml）

将外部字体加载到 head 部分。

样式（layout.xml）

对于关键 CSS，在 head 或 body 结束之前内联 CSS。

外部 CSS（layout.xml）

我们有几种优化外部 CSS 的选项；

直接在 head 中；
在 body 结束之前；
在其他所有内容完成后延迟执行。

JavaScript（layout.xml）

通过 XML 在 body 结束之前将 JavaScript 放置在 layout XML 中。

使用方法

建议将所有内容放在一起的方法是向 layout/default.xml 添加一个处理程序。您还可以添加特定于控制器的规则，在特定于控制器的处理程序中添加它们，例如 layout/catalog_category_default.xml

您还可以添加特定规则并将它们绑定到您的模块，而不是主题。

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>

之后，所有默认 Lighthouse 反馈都可以放入 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>

块快速参考

引用 HEAD

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

引用（在 body 结束之前）

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

块代码引用

您还可以使用 \Elgentos\Lightspeed\Block\ItemsWithPattern 来添加您自己的引用。

公开

addItem(string $value): void
addItems(array $values): void
getItems(): array
hasItems(): bool
removeItem(string $value): void
setPattern(string $pattern): void
render(): 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>

elgentos / module-lightspeed

维护者

详细信息