Giter Club home page Giter Club logo

module-critical-css's Introduction

M2Boilerplate Critical CSS

Magento 2 module to automatically generate critical css with critical

Features:

  • generate critical css with a simple command
  • Fallback critical css for "empty" pages
  • Add urls by creating a custom provider

Installation

Install the critical binary. Install instructions can be found on the critical website. Only versions >=2.0.3 are supported.

Add this extension to your Magento installation with Composer:

composer require m2-boilerplate/module-critical-css

Usage

Configuration

The critical css feature needs to be enabled (available in 2.3.4+):

bin/magento config:set dev/css/use_css_critical_path 1

Features can be customised in Stores > Configuration > Developer > CSS.

Generate critical css

Run the following command

bin/magento m2bp:critical-css:generate

Afterwards you should find the the generated css in var/critical-css. The css will now be integrated automatically on your website.

Add additional URLs via a custom provider

The following example adds the magento contact page via a custom provider:

<?php

namespace Vendor\Module\Provider;

use Magento\Framework\App\Request\Http;
use Magento\Framework\App\RequestInterface;
use Magento\Framework\UrlInterface;
use Magento\Framework\View\LayoutInterface;
use Magento\Store\Api\Data\StoreInterface;
use M2Boilerplate\CriticalCss\Provider\ProviderInterface;
  
class CustomProvider implements ProviderInterface
{
    const NAME = 'custom_example';

    /**
     * @var UrlInterface
     */
    protected $url;

    public function __construct(UrlInterface $url)
    {
        $this->url = $url;
    }


    public function getUrls(StoreInterface $store): array
    {
        return [
            'contact_index_index' => $this->url->getUrl('contact'),
        ];
    }

    public function getName(): string
    {
        return self::NAME;
    }

    public function isAvailable(): bool
    {
        return true;
    }

    public function getPriority(): int
    {
        return 1200;
    }

    public function getCssIdentifierForRequest(RequestInterface $request, LayoutInterface $layout): ?string
    {
        if ($request->getModuleName() !== 'contact' || !$request instanceof Http) {
            return null;
        }
        
        if ($request->getFullActionName('_') === 'contact_index_index') {
            return 'contact_index_index';
        }

        return null;
    }
}

Add the new provider via DI:

in your module´s etc/di.xml add the following:

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="M2Boilerplate\CriticalCss\Provider\Container">
        <arguments>
            <argument name="providers" xsi:type="array">
                <item name="custom_example" xsi:type="object">Vendor\Module\Provider\CustomProvider</item>
            </argument>
        </arguments>
    </type>
</config>

License

See the LICENSE file for license info (it's the MIT license).

module-critical-css's People

Contributors

thampe avatar marvinhinz avatar luksurious avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.