Improve cls pdp screen #33265

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

Closed

mrtuvn wants to merge 28 commits into magento:2.4-develop from mrtuvn:improve-pdp-cls

Contributor

mrtuvn commented Jun 17, 2021 •

edited by engcom-Lima

Loading

Description (*)

Some improvements on details page. Try to reduce as much as possible for CLS layout. Previously this page layout become shift when page loading or being initialized. Some element dymanic delay render in DOM caused jumping content -> Google penalized CLS metric

Related Pull Requests

Fixed Issues (if relevant)

Fixes Magento 2.4.2 CLS issue #32956
Fixes Improve CLS on PDP 2.4.4 #35410

Manual testing scenarios (*)

...
...

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)

Resolved issues:

Fixes Magento 2.4.2 CLS issue #32956
Fixes Improve CLS on PDP 2.4.4 #35410

m2-assistant bot commented Jun 17, 2021

Hi @mrtuvn. Thank you for your contribution
Here are 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:

Database Compare
Functional Tests CE
Functional Tests EE,
Functional Tests B2B
Integration Tests
Magento Health Index
Sample Data Tests CE
Sample Data Tests EE
Sample Data Tests B2B
Static Tests
Unit Tests
WebAPI Tests
Semantic Version Checker

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.

⚠️ According to the Magento Contribution requirements, all Pull Requests must go through the Community Contributions Triage process. Community Contributions Triage is a public meeting.

🕙 You can find the schedule on the Magento Community Calendar page.

📞 The triage of Pull Requests happens in the queue order. If you want to speed up the delivery of your contribution, please join the Community Contributions Triage session to discuss the appropriate ticket.

🎥 You can find the recording of the previous Community Contributions Triage on the Magento Youtube Channel

✏️ Feel free to post questions/proposals/feedback related to the Community Contributions Triage process to the corresponding Slack Channel

magento-engcom-team added Area: Frontend Component: Catalog Release Line: 2.4 labels

m2-community-project bot added the Progress: pending review label

mrtuvn force-pushed the improve-pdp-cls branch 3 times, most recently from c95cb32 to 1a692b7 Compare

June 28, 2021 15:16

Contributor Author

mrtuvn commented Jun 28, 2021

@magento run all tests

magento-automated-testing bot commented Jun 28, 2021

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

1 similar comment

magento-automated-testing bot commented Jun 28, 2021

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

mrtuvn force-pushed the improve-pdp-cls branch from 5ca0ba9 to ef7abde Compare

June 29, 2021 01:46

Contributor Author

mrtuvn commented Jun 29, 2021

@magento run all tests

magento-automated-testing bot commented Jun 29, 2021

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

Contributor Author

mrtuvn commented Jun 29, 2021

@magento run WebAPI Tests, Unit Tests, Static Tests, Sample Data Tests EE, Sample Data Tests B2B, Integration Tests, Functional Tests EE, Functional Tests CE, Functional Tests B2B, Database Compare

magento-automated-testing bot commented Jun 29, 2021

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

mrtuvn force-pushed the improve-pdp-cls branch 2 times, most recently from f21599e to 1aa677d Compare

June 29, 2021 14:29

Contributor Author

mrtuvn commented Jun 29, 2021

@magento run all tests

magento-automated-testing bot commented Jun 29, 2021

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

mrtuvn marked this pull request as ready for review

July 1, 2021 07:12

mrtuvn force-pushed the improve-pdp-cls branch from 1aa677d to 981f11e Compare

July 1, 2021 08:08

mrtuvn marked this pull request as draft

July 2, 2021 15:44

mrtuvn marked this pull request as ready for review

July 5, 2021 02:43

mrtuvn force-pushed the improve-pdp-cls branch 4 times, most recently from ac143c9 to 3ac64f7 Compare

July 12, 2021 02:32

Contributor Author

mrtuvn commented Jul 12, 2021

@magento run all tests

magento-automated-testing bot commented Jul 12, 2021

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

magento-automated-testing bot commented Aug 31, 2023

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please message the #magento-devops slack channel if they don't show in a reasonable amount of time and a representative will look into any issues.

Contributor

engcom-Charlie commented Aug 31, 2023

@magento run Functional Tests CE, Functional Tests EE, Functional Tests B2B, Integration Tests, WebAPI Tests

magento-automated-testing bot commented Aug 31, 2023

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please message the #magento-devops slack channel if they don't show in a reasonable amount of time and a representative will look into any issues.

Contributor

engcom-Charlie commented Aug 31, 2023

The 2 successive build results are showing different error failures for Functional CE, and Functional B2B. Hence moving this PR to Merge in Progress.

Functional CE: Run 1

Run 2:

Functional B2B: Run 1

Run 2:

m2-community-project bot added Progress: accept and removed Progress: extended testing labels

m2-community-project bot added Progress: review and removed Progress: accept labels

Contributor

engcom-Charlie commented Sep 7, 2023

It seems bot move this PR to Review hence moving it back to Merge in Progress.

m2-community-project bot added Progress: accept and removed Progress: review labels


          Merge branch '2.4-develop' into improve-pdp-cls

e97263c

Contributor

engcom-Charlie commented Oct 23, 2023

This PR got merged in 2.4-develop in b9f57bd commit. Hence closing this PR now.

engcom-Charlie closed this

m2-community-project bot added Progress: done and removed Progress: accept labels

Member

nkajic commented Oct 23, 2023

859 days

timpea-splat commented Oct 23, 2023

top work @mrtuvn!

This was referenced Mar 22, 2024

Product gallery jumps while loading #32315

Closed

Fix product gallery jump during page load #32316

Closed

cptX commented Oct 3, 2024

Are these enhancements included in the latest 2.4.7 release?

Contributor

ihor-sviziev commented Oct 7, 2024

cptX commented Oct 23, 2024 •

edited

Loading

I have installed 2.4.7-p3 and I think this issue isn't solved!!! The fotorama navigation dots are not visible during page load and their height is zero, and after loading they are shifting everything down! Tested this in mobile!
Check the video! I'm doing a page refresh. Please notice the absense of navigation dots under the image and then their loading and the shifting downwards.

magento.mp4

Contributor

ihor-sviziev commented Oct 30, 2024

@cptX, this issue might be in your custom theme. Please try switching to Luma theme and try again.

cptX commented Oct 30, 2024

Hi @ihor-sviziev , yesterday I studied thourougly the changes of your code and the only code that was in my custom theme was the gallery.phtml, which I modified accordingly.
So I'm pretty sure my code is now following all the new changes of your code. So according to your code the navigation dots shouldn't shift the content downwards? Can you please upload a video with the expected behavior?

Contributor

ihor-sviziev commented Oct 31, 2024 •

edited

Loading

@cptX,
Sorry, I didn't have a chance to verify it, the only I can say that the issue is marked as solved.
Could you just try to reproduce the issue on a clean Magento installation? If everything works fine - the problem becoming from your theme/extension(s). If the issue still there - please report a separate bug for this.
Thanks!

cptX commented Nov 1, 2024

@ihor-sviziev I have applied the changes several days already and in google search console I don't see any change!!
Can you please answer me one simple question: with the new code are the navigation dots supposed to shift everything down or are they supposed to have their placeholder fixed height and not shift anything at all. Because as far as I understand 1. I have applied all the changes 2. the changes do not involve having the navigation dots fixed height in advance...
Also by running lighthouse tests in google chrome the cls always are reported very low now 0.01 - 0.03 but I don't see any progress reflected in search console. It's like the code didn't make any difference for google...

Contributor

ihor-sviziev commented Nov 1, 2024 •

edited

Loading

@cptX, unfortunately, I don't have answers for you now. I'm not an author and didn't test this change. The pull request was merged more than a year ago. On top of that, something new might appear that will revert and/or change the behavior.

If you still see the issue on the latest version - please create a separate issue with an explanation of how to reproduce, what is expected, and the actual results.

Thanks for understanding

cptX commented Nov 14, 2024 •

edited

Loading

Guys, I have very good news, after upgrading to 2.4.7 and implementing the changes suggested here in my theme (based on Luma) I finally got 100% health in core web vitals. I had to wait 2-3 weeks to see results.

(My eshop: https://electrons.gr)

Member

tuyennn commented Jan 3, 2025 •

edited

Loading

Good works @mrtuvn @ihor-sviziev ! Confirm this #33265 fixed our current issue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Area: Frontend Area: Perf/Frontend Auto-Tests: Not Required Award: bug fix Award: category of expertise Component: Catalog Priority: P2 Progress: done Project: Community Picked Release Line: 2.4 Severity: S3