Lightna Lane

Complex or heavily customized projects may require additional effort to migrate to Lightna. Lightna Lane lets you use Lightna without a full migration. You can move selected features to Lightna while keeping the rest on your current solution.

Key possibilities:

• A project can keep using an existing design
• Rendering of any block on the website can be delegated to Lightna
• Smooth full-migration of a project to Lightna

You have total control on how deep optimization you need and can afford. Here is a step-by-step guide:

1. Equip by Lightna and start using it when implementing new features.
   • This way you will mitigate further performance degradation.
2. Migrate existing customizations to Lightna.
3. Migrate third-party customizations to Lightna.
   • On this stage you will get default website performance, like it hasn't been customized.
4. Migrate default features to Lightna.
   • You outplay the default performance.
5. Migrate Javascript to Lightna.
   • Performance gains on the client side can be substantial if the current JavaScript structure is suboptimal
6. Migrate design to Lightna.
   • Gains might vary depending on the project.
7. Switch page fully to Lightna.
   • Excellent server-side performance.
   • Excellent web vitals.

Using Lightna Lane in your development you prevent further performance degradation and create opportunities for future improvements while gradually progressing toward a fully optimized Lightna page.

Lightna block is attached to Magento 2 block by lightna_block_id argument:

<referenceContainer name="page.wrapper">
    <block name="lightna.header" before="main.content">
        <arguments>
            <argument name="lightna_block_id" xsi:type="string">header</argument>
        </arguments>
    </block>
    <block name="lightna.footer" before="before.body.end">
        <arguments>
            <argument name="lightna_block_id" xsi:type="string">footer</argument>
        </arguments>
    </block>
</referenceContainer>

Block ID is defined in Lightna's layout file:

.body:
  .header:
    id: header
  .footer:
    id: footer

Data in Lightna's block is requested from Data classes by PHPDoc:

<?php
/** @var Lightna\Magento\Data\Session $session */
$isLoggedIn = $session->user->groupId !== 0;
$iconClass = $isLoggedIn ? 'icon-user__filled' : 'icon-user__outline';
?>
<div class="icon-dropdown dropdown">
    <div class="header__icon header__icon--hover">
        <a href="/customer/account" class="icon <?= $iconClass ?>"></a>
    </div>
    <?php if ($isLoggedIn): ?>
        <?= block('customer') ?>
    <?php else: ?>
        <?= block('guest') ?>
    <?php endif; ?>
</div>

On the Lightna Demo, some pages are built as Lane pages — rendered by Magento 2 together with Lightna blocks. For example, the Lane Login Page has its header and footer rendered by Lightna.

While header and footer are not heavy blocks in Magento 2 by default, the server time difference is 635 ms vs 583 ms in favor of Lightna Lane. To compare, you can view the same login page with the ?disable_lane parameter: Magento Login Page.

Note that opcache is intentionally disabled for Magento on the demo, to reflect performance closer to a real or customized project.

On real projects where server rendering takes over a second, there are much heavier blocks worth replacing.

Even by default, there are better candidates for migration to Lightna. For example, the related products block accounts for 21% of total rendering time. The empty upsell block takes 3 ms — which is enough time for Lightna to render a complete page.

Lightna Lane is especially useful for uncachable private pages that require optimization, such as account pages, checkout pages, and more.