Document CSS critical path #4726

adifucan · 2019-06-11T17:24:35Z

Purpose of this pull request

Document new feature CSS critical path for Magento 2.3 & Magento 2.2.
New CSS critical path feature is introduced for developers. Now they can eliminate render-blocking CSS resources with minified critical.css inlined in .
By using CSS critical path we deliver minified critical CSS inline in html and defer all non-critical styles that are loaded asynchronously. Thus we can significantly improve the time to first render of our pages.

This pull request (PR) ...

Affected DevDocs pages

guides/v2.3/frontend-dev-guide/css-topics/css-critical-path.md
guides/v2.3/frontend-dev-guide/css-topics/css-overview.md
guides/v2.3/frontend-dev-guide/css-topics/using-fonts.md
guides/v2.3/frontend-dev-guide/theme-best-practice.md
guides/v2.2/frontend-dev-guide/css-topics/css-critical-path.md
guides/v2.2/frontend-dev-guide/css-topics/css-overview.md
guides/v2.2/frontend-dev-guide/css-topics/using-fonts.md
guides/v2.2/frontend-dev-guide/theme-best-practice.md

Links to Magento source code

https://github.com/magento/magento2ce/pull/4310

whatsnew
Added the new topic CSS Critical Path to the Frontend Developer Guide.

devops-devdocs · 2019-06-11T17:25:08Z

An admin must run tests on this PR before it can be merged.

- Update critical CSS performance improvements;

vzabaznov · 2019-06-11T17:40:25Z

guides/v2.3/frontend-dev-guide/css-topics/css-critical-path.md

+If there is not `critical.css` for custom theme but there is Luma theme, Luma's `critical.css` will be used.
+Critical css file path can also be configured in `di.xml` as a constructor `filePath` argument in `Magento\Theme\Block\Html\Header\CriticalCss` block.
+
+To generate critical CSS for your theme online generators can be used or you can create it by yourself. While creating your own critical CSS adhere to the following principles:


can you also describe alternatives of generating critical css manually, like:

https://www.npmjs.com/package/penthouse

https://www.npmjs.com/package/critical

Added links to generators but I'm not going to describe how to work with them in this documentation as they are external.

Hi, thanks for doing this, but I am afraid this is still not very clear, looking at the grunt-critical documentation I wonder if we manually have to copy the html and css of different pages like Homepage, Product Listing page, etc into an html and css file, and then run the grunt task to get the critical css, however this way we will get the critical css of all of the page views inside critical.css , so we will load css that is not needed into some pages, is there a way so the critical.css file only has the critical css for the specific pageview? . Also does this mean we will have to manually copy the html and css contents every time something is changed in the content of a page? and then make a new deployment to production? . Another question is, how do we remove the critical css from styles-l.css and styles-m.css so they are not duplicated in critical.css ?

vzabaznov · 2019-06-11T17:42:30Z

guides/v2.3/frontend-dev-guide/css-topics/css-critical-path.md

+### Critical CSS loader
+
+There is a loading spinner in critical styles if CSS critical path is enabled in configuration. Loader explains to users that something is still loading and it helps to increase the user experience.
+After non-critical CSS is loaded and applied, spinner disappears. External developers should either override `main_css_preloader` block defined in `Magento/Theme/view/frontend/layout/default.xml` or hide loading spinner after non-critical CSS is loaded.


Spinner disappears only in case you have css styles from blank theme css, instead you have your own css rule you should hide preloader by data-role='main-css-loader' attribute

Documentation about reloader updated

vzabaznov · 2019-06-11T17:45:41Z

guides/v2.3/frontend-dev-guide/css-topics/using-fonts.md

+
+### Font head type
+
+`<font>` is added to HTML `<head>` type for the layout in `lib/internal/Magento/Framework/View/Layout/etc/head.xsd`. It means that fonts and icons can be preloaded by default. As a result custom fonts can be delivered faster.


<font> node is added

all resources added with <font> node will be downloaded with preload html tag, since preload does not use downloaded resource you should ensure that you this resource in css or html DOM

- Update documentation about fonts and critical css;

- Add documentation for 2.2; - Update using fonts documentation for 2.2;

- Optimized images;

# Conflicts: # guides/v2.2/frontend-dev-guide/css-topics/css-overview.md # guides/v2.2/frontend-dev-guide/css-topics/using-fonts.md # guides/v2.3/frontend-dev-guide/layouts/layout-types.md

osrecio · 2019-07-18T07:04:26Z

@vzabaznov Can you mark as resolved these conversations? For me the PR is ok from the technical point of view

dobooth · 2019-07-22T15:02:51Z

guides/v2.2/frontend-dev-guide/css-topics/using-fonts.md

+
+### `<font>` head type
+
+`<font>` node is added to HTML `<head>` type for layout in `lib/internal/Magento/Framework/View/Layout/etc/head.xsd`. All resources added with `<font>` node will be downloaded with `preload` html attribute. Since preload does not use downloaded resource, you should ensure that this resource is used in CSS or HTML DOM.


Hi @adifucan I am a bit confused on this paragraph. What do you mean 'preload does not use downloaded resources'? What does it use? Which resource should we ensure is used?

I mean that preload attribute just specifies resources that your page will need very soon, which you want to start loading early in the page lifecycle. This ensures they are available earlier.
Here I mean that fonts will be preloaded now and you should ensure that they are used in CSS/HTML.

Maybe it's not obligatory to mention about "Since preload does not use downloaded resource, you should ensure that this resource is used in CSS or HTML DOM." here because preload functionality works in this way.

dobooth · 2019-07-29T14:43:15Z

running tests

dobooth · 2019-07-30T13:46:54Z

running tests

ghost · 2019-07-30T14:02:25Z

Hi @adifucan, thank you for your contribution!
Please, complete Contribution Survey, it will take less than a minute.
Your feedback will help us to improve contribution process.

atwixfirster · 2019-09-13T09:09:23Z

@dobooth , could you please clarify what is https://github.com/magento/magento2ce/pull/4310 ? Reference to that PR is provided in the Links to Magento source code section.

Thank you!

Document CSS critical path

bb64aaa

Document CSS critical path

4eee79c

- Update critical CSS performance improvements;

vzabaznov suggested changes Jun 11, 2019

View reviewed changes

Document CSS critical path

38ad71f

- Update documentation about fonts and critical css;

osrecio added Technical Updates to the code or processes that alter the technical content of the doc New Topic A major update published as an entirely new document labels Jun 12, 2019

osrecio self-assigned this Jun 12, 2019

adifucan added 2 commits June 12, 2019 16:31

Document CSS critical path

6957670

- Add documentation for 2.2; - Update using fonts documentation for 2.2;

Merge remote-tracking branch 'mainline/master' into css_critical_path

ea7fe84

keharper added 2.2.x 2.3.x Magento 2.3 related changes and removed Technical Updates to the code or processes that alter the technical content of the doc labels Jun 27, 2019

dobooth self-assigned this Jul 16, 2019

adifucan and others added 3 commits July 16, 2019 16:59

Document CSS critical path

2dec32c

- Optimized images;

Merge remote-tracking branch 'origin/master' into css_critical_path

620003c

# Conflicts: # guides/v2.2/frontend-dev-guide/css-topics/css-overview.md # guides/v2.2/frontend-dev-guide/css-topics/using-fonts.md # guides/v2.3/frontend-dev-guide/layouts/layout-types.md

Merge branch 'master' into css_critical_path

884fce3

dobooth added 2 commits July 22, 2019 09:00

Merge branch 'master' into css_critical_path

b788a8b

Grammar fixes.

64ad58d

dobooth suggested changes Jul 22, 2019

View reviewed changes

dobooth added 2 commits July 29, 2019 09:40

Removed unneeded sentence.

22a4a11

Merge branch 'master' into css_critical_path

9f99a04

dobooth approved these changes Jul 29, 2019

View reviewed changes

Merge branch 'master' into css_critical_path

5881bb8

dobooth merged commit 681851d into magento:master Jul 30, 2019

vasilii-b mentioned this pull request Sep 13, 2019

Hide "CSS Critical Path" mentioned in documentation pages as it is not port of stable Magento version yet (nor 2.2 or 2.3) #5392

Merged

keharper mentioned this pull request Oct 5, 2019

Restore PR-5392 to develop #5586

Merged


		### Font head type

		`<font>` is added to HTML `<head>` type for the layout in `lib/internal/Magento/Framework/View/Layout/etc/head.xsd`. It means that fonts and icons can be preloaded by default. As a result custom fonts can be delivered faster.


		### `<font>` head type

		`<font>` node is added to HTML `<head>` type for layout in `lib/internal/Magento/Framework/View/Layout/etc/head.xsd`. All resources added with `<font>` node will be downloaded with `preload` html attribute. Since preload does not use downloaded resource, you should ensure that this resource is used in CSS or HTML DOM.

Document CSS critical path #4726

Document CSS critical path #4726

Uh oh!

Conversation

adifucan commented Jun 11, 2019 • edited by dobooth Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Purpose of this pull request

Affected DevDocs pages

Links to Magento source code

Uh oh!

devops-devdocs commented Jun 11, 2019

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

joseborngroup Dec 18, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

osrecio commented Jul 18, 2019

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dobooth commented Jul 29, 2019

Uh oh!

dobooth commented Jul 30, 2019

Uh oh!

ghost commented Jul 30, 2019

Uh oh!

atwixfirster commented Sep 13, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

adifucan commented Jun 11, 2019 •

edited by dobooth

Loading

joseborngroup Dec 18, 2019 •

edited

Loading

atwixfirster commented Sep 13, 2019 •

edited

Loading