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

Improvements webfont loading for theme #29044

Merged
merged 1 commit into from
Sep 7, 2020
Merged

Improvements webfont loading for theme #29044

merged 1 commit into from
Sep 7, 2020

Conversation

mrtuvn
Copy link
Contributor

@mrtuvn mrtuvn commented Jul 8, 2020 •
edited by m2-assistant bot
Loading

Description (*)

This PR aims to bring improvement while theme load icons font. Apply font-display while magento import font icons
Ensure text remains visible during webfont load
The best option finally is block or optional for optimize web icons font load

Screenshot from 2020-08-03 22-15-14

Related Pull Requests

Fixed Issues (if relevant)

  1. Fixes magento/magento2#<issue_number>

Manual testing scenarios (*)

  2. ...

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)
  • All automated tests passed successfully (all builds are green)

Resolved issues:

  1. resolves [Issue] Improvements webfont loading for theme #29526: Improvements webfont loading for theme

@m2-assistant
Copy link

m2-assistant bot commented Jul 8, 2020

Hi @mrtuvn. Thank you for your contribution
Here is some useful tips how you can test your changes using Magento test environment.
Add the comment under your pull request to deploy test or vanilla Magento instance:

  • @magento give me test instance - deploy test instance based on PR changes
  • @magento give me 2.4-develop instance - deploy vanilla Magento instance

❗ 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

You can find more information about the builds here

ℹ️ Please run only needed test builds instead of all when developing. Please run all test builds before sending your PR for review.

For more details, please, review the Magento Contributor Guide documentation.

@ghost ghost added this to Pending Review in Pull Requests Dashboard Jul 8, 2020
@mrtuvn
Copy link
Contributor Author

mrtuvn commented Jul 8, 2020

@magento run all tests

@mrtuvn
Copy link
Contributor Author

mrtuvn commented Jul 8, 2020

@krzksz @ptylek can you guys give me a review ?

krzksz
krzksz approved these changes Jul 9, 2020
View reviewed changes
Copy link
Contributor

@krzksz krzksz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I always like it when we remove some redundancy, good job!

@ghost ghost moved this from Pending Review to Ready for Testing in Pull Requests Dashboard Jul 9, 2020
@ghost ghost assigned krzksz Jul 9, 2020
@ghost ghost removed the Progress: pending review label Jul 9, 2020
@krzksz krzksz added Auto-Tests: Not Required Changes in Pull Request does not require coverage by auto-tests Progress: pending review labels Jul 9, 2020
@krzksz
Copy link
Contributor

krzksz commented Jul 9, 2020

No possible to test with automatic tests. We need to manually make sure that icons are still working on Luma theme.

@magento-engcom-team
Copy link
Contributor

Hi @krzksz, thank you for the review.
ENGCOM-7803 has been created to process this Pull Request

@ihor-sviziev ihor-sviziev added Severity: S3 Affects non-critical data or functionality and does not force users to employ a workaround. and removed Progress: pending review labels Jul 9, 2020
@woutk88
Copy link
Contributor

woutk88 commented Jul 22, 2020

font-display: swap isn't suitable for an icon font since it has no fallback font.

See: https://developers.google.com/web/updates/2016/02/font-display#swap

Similar to block, this value should only be used when rendering text in a particular font is important for the page, but rendering in any font will still get a correct message across

Rendering 'any font' won't do for icons.

@mrtuvn mrtuvn force-pushed the theme-improvements-webfont-preload branch 2 times, most recently from 0e68656 to 0293456 Compare July 24, 2020 18:28
@mrtuvn
Copy link
Contributor Author

mrtuvn commented Jul 24, 2020

@magento run all tests

@mrtuvn mrtuvn requested a review from woutk88 July 26, 2020 06:28
engcom-Delta
engcom-Delta requested changes Jul 27, 2020
View reviewed changes
Copy link
Contributor

@engcom-Delta engcom-Delta left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@woutk88 @krzksz Could you review last commit?

@ghost ghost moved this from Ready for Testing to Changes Requested in Pull Requests Dashboard Jul 27, 2020
@ghost ghost assigned engcom-Delta Jul 27, 2020
@woutk88
Copy link
Contributor

woutk88 commented Jul 29, 2020

@mrtuvn Earlier I suggested using either block or optional (since swap isn't an option for an icon font), and because block has a longer bock period, the latter might be a good choice. But now I'm having second thoughts about it (sorry). Read this description about using optional:

Similar to fallback, this is a good choice for when the downloading font is more of a “nice to have” but not critical to the experience. The optional value leaves it up to the browser to decide whether to initiate the font download, which it may choose not to do or it may do it as a low priority depending on what it thinks would be best for the user. This can be beneficial in situations where the user is on a weak connection and pulling down a font may not be the best use of resources.

However some icons are quite critical to the experience. For example the icons in the header, especially on mobile:
LUMA mobile header
(Imagine not having the icons here, because the browser chose not to download the font because of a poor connection)

Therefore block does seems to be the best options here. And since we're preloading the font, the block-period probably isn't an issue.

Do you agree?

@engcom-Delta engcom-Delta moved this from Ready for Testing to Testing in Progress in Pull Requests Dashboard Aug 31, 2020
@engcom-Delta
Copy link
Contributor

✔️ QA passed
Was checked icons are loaded on catalog page, product details page, shopping cart page, checkout page, wish list page and compare page on Luma/Blank themes and mobile/tablet/desktop views
Results on Luma:
Mobile:
Catalog page:
image
Product details page
image
Shopping cart page
image
Wish list page
image
Compare page
image

Tablet:
Catalog page:
image
Product details page
image
Shopping cart page
image
Wish list page
image
Compare page
image

Desktop:
Catalog page:
image
Product details page
image
Shopping cart page
image
Wish list page
image
Compare page
image

@engcom-Delta engcom-Delta moved this from Testing in Progress to Extended Testing (optional) in Pull Requests Dashboard Aug 31, 2020
@engcom-Charlie engcom-Charlie self-assigned this Aug 31, 2020
@engcom-Delta engcom-Delta moved this from Extended Testing (optional) to Testing in Progress in Pull Requests Dashboard Aug 31, 2020
@engcom-Delta
Copy link
Contributor

Note: Functional tests are failing

@engcom-Delta engcom-Delta moved this from Testing in Progress to Extended Testing (optional) in Pull Requests Dashboard Sep 1, 2020
@mrtuvn mrtuvn force-pushed the theme-improvements-webfont-preload branch from 3b397fa to be3c1ec Compare September 1, 2020 11:20
@mrtuvn
Copy link
Contributor Author

mrtuvn commented Sep 1, 2020

@magento run all tests

1 similar comment
@engcom-Charlie
Copy link
Contributor

@magento run all tests

@engcom-Charlie engcom-Charlie added the QA: Ready to add to Regression Scope Should be analyzed and added to Regression Testing Scope(if applicable) label Sep 3, 2020
@engcom-Delta engcom-Delta added QA: Added to Regression Scope Scenario was analysed and added to Regression Testing Scope and removed QA: Ready to add to Regression Scope Should be analyzed and added to Regression Testing Scope(if applicable) labels Sep 4, 2020
@engcom-Delta engcom-Delta moved this from Extended Testing (optional) to Merge in Progress in Pull Requests Dashboard Sep 4, 2020
magento-engcom-team pushed a commit that referenced this pull request Sep 7, 2020
@sidolov
ENGCOM-7803: Improvements webfont loading for theme #29044
735a512
@magento-engcom-team magento-engcom-team merged commit 23acb42 into magento:2.4-develop Sep 7, 2020
@m2-assistant
Copy link

m2-assistant bot commented Sep 7, 2020

Hi @mrtuvn, 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.

@ghost ghost moved this from Merge in Progress to Recently Merged in Pull Requests Dashboard Sep 7, 2020
@mrtuvn mrtuvn deleted the theme-improvements-webfont-preload branch September 12, 2020 06:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@woutk88 woutk88 woutk88 approved these changes

@VladimirZaets VladimirZaets VladimirZaets approved these changes

@engcom-Delta engcom-Delta Awaiting requested review from engcom-Delta

@krzksz krzksz Awaiting requested review from krzksz

Assignees

@krzksz krzksz

@VladimirZaets VladimirZaets

@engcom-Charlie engcom-Charlie

@engcom-Delta engcom-Delta

Labels
Area: Design/Frontend Auto-Tests: Not Required Changes in Pull Request does not require coverage by auto-tests Priority: P3 May be fixed according to the position in the backlog. Progress: accept QA: Added to Regression Scope Scenario was analysed and added to Regression Testing Scope Release Line: 2.4 Severity: S3 Affects non-critical data or functionality and does not force users to employ a workaround.
Projects
Pull Requests Dashboard
  
Recently Merged
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Issue] Improvements webfont loading for theme
9 participants
@mrtuvn @krzksz @magento-engcom-team @woutk88 @sidolov @engcom-Delta @engcom-Charlie @VladimirZaets @ihor-sviziev