Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Allow for Critical Css to be Configured via Layout Files #39406

Open
wants to merge 1 commit into
base: 2.4-develop
Choose a base branch
from
Open

Allow for Critical Css to be Configured via Layout Files #39406

wants to merge 1 commit into from

Conversation

SamJUK
Copy link

@SamJUK SamJUK commented Nov 27, 2024

Description (*)

This PR looks to move the critical css configuration to the layout configuration.
This allows for themes to more easily declare custom critical css files per layout type.

Theme authors can then write and set bespoke critical css targeting above the fold components for each page type (or generate them with external tooling).

The current approach is quite convoluted if I am not mistaken. Requiring you to declare a virtualType for the CriticalCss 'view model' and update the layout configuration to reference the new virtual type.

Manual testing scenarios (*)

  1. Add an additional css file to your theme alongside the existing critical.css. For example css/critical-search.css
/** File: css/critical-search.css */
* { background: salmon; border: 1px solid lime; }
  1. Add a layout file targeting the appropriate layout handle to your theme. eg. layout/catalogsearch_result_index.xml
    Updating the file_path argument for the critical_css_block block.
<!-- File: catalogsearch_result_index.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="critical_css_block">
            <arguments>
                <argument name="file_path" xsi:type="string">css/critical-search.css</argument>
            </arguments>
        </referenceBlock>
    </body>
</page>
  1. Enable Critical CSS php bin/magento config:set dev/css/use_css_critical_path 1
  2. Flush Caches php bin/magento cache:flush
  3. View the homepage source, see the usual critical content within the <style [data-type="criticalCss"]> node.
  4. View the search page, see our custom file content within the <style [data-type="criticalCss"]> node.

Questions or comments

Contribution checklist (*)

  • Pull request has a meaningful description of its purpose
  • All commits are accompanied by meaningful commit messages
  • All new or changed code is covered with unit/integration tests (if applicable)
  • README.md files for modified modules are updated and included in the pull request if any README.md predefined sections require an update
  • All automated tests passed successfully (all builds are green)

@m2-assistant M2 Assistant
Copy link

m2-assistant bot commented Nov 27, 2024

Hi @SamJUK. Thank you for your contribution!
Here are some useful tips on how you can test your changes using Magento test environment.
❗ Automated tests can be triggered manually with an appropriate comment:

  • @magento run all tests - run or re-run all required tests against the PR changes
  • @magento run <test-build(s)> - run or re-run specific test build(s)
    For example: @magento run Unit Tests

<test-build(s)> is a comma-separated list of build names.

Allowed build names are:
  1. Database Compare
  2. Functional Tests CE
  3. Functional Tests EE
  4. Functional Tests B2B
  5. Integration Tests
  6. Magento Health Index
  7. Sample Data Tests CE
  8. Sample Data Tests EE
  9. Sample Data Tests B2B
  10. Static Tests
  11. Unit Tests
  12. WebAPI Tests
  13. Semantic Version Checker

You can find more information about the builds here
ℹ️ Run only required test builds during development. Run all test builds before sending your pull request for review.

For more details, review the Code Contributions documentation.
Join Magento Community Engineering Slack and ask your questions in #github channel.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@SamJUK