Performance Profiler: Add link to recommendations on CWW section #94439

WBerredo · 2024-09-11T17:33:23Z

Fixes Performance Profiler: add link to jump to recommendations

Proposed Changes

Add a link to the recommendations section on the CWW section.
The link should redirect to the section with using the current metric as filter.

PS: If there are no recommendations for a given metric, this section shouldn't be shown.

Why are these changes being made?

Performance Profiler: add link to jump to recommendations

Testing Instructions

Go to speed-test-tool?url=https%3A%2F%2Fwordpress.com%2F&hash=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6NzQ2N30.LOelpUBxFDxMytpSYeB3EBNdBnHeYTvonyZ6zE7aqSM
On the CWW section check if there is a button with View recommendations
Click on this button
Check if you the page scroll to the recommendations section with the selected metric on the filter.
Check if the section is not shown for some metrics
- It shouldn't be shown where are no recommendations for a given metric.

github-actions · 2024-09-11T17:33:37Z

Calypso Live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-119364

Jetpack Cloud live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-119364&env=jetpack

Automattic for Agencies live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-119364&env=a8c-for-agencies

matticbot · 2024-09-11T17:37:58Z

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

blaze-dashboard
notifications
odyssey-stats
wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug add/performance-profiler-cww-rec-link on your sandbox.

matticbot · 2024-09-11T17:39:42Z

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~2 bytes removed 📉 [gzipped])

name                 parsed_size           gzip_size
entry-subscriptions        +14 B  (+0.0%)       -2 B  (-0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~313 bytes added 📈 [gzipped])

name                                parsed_size           gzip_size
site-performance                         +962 B  (+0.1%)     +239 B  (+0.1%)
performance-profiler                     +962 B  (+0.3%)     +239 B  (+0.2%)
write-flow                                +14 B  (+0.0%)       +5 B  (+0.0%)
videopress-flow                           +14 B  (+0.0%)       +5 B  (+0.0%)
themes                                    +14 B  (+0.0%)       +5 B  (+0.0%)
subscribers                               +14 B  (+0.0%)       +5 B  (+0.0%)
stats                                     +14 B  (+0.0%)       +5 B  (+0.0%)
staging-site                              +14 B  (+0.0%)       +5 B  (+0.0%)
sites-dashboard                           +14 B  (+0.0%)       +5 B  (+0.0%)
site-purchases                            +14 B  (+0.0%)       +5 B  (+0.0%)
site-profiler                             +14 B  (+0.0%)       +5 B  (+0.0%)
site-monitoring                           +14 B  (+0.0%)       +5 B  (+0.0%)
site-logs                                 +14 B  (+0.0%)       +5 B  (+0.0%)
settings-writing                          +14 B  (+0.0%)       +8 B  (+0.0%)
settings-security                         +14 B  (+0.0%)       +5 B  (+0.0%)
settings-performance                      +14 B  (+0.0%)       +5 B  (+0.0%)
settings-jetpack                          +14 B  (+0.0%)       +5 B  (+0.0%)
settings-discussion                       +14 B  (+0.0%)       +5 B  (+0.0%)
settings                                  +14 B  (+0.0%)       +5 B  (+0.0%)
security                                  +14 B  (+0.0%)       +6 B  (+0.0%)
scan                                      +14 B  (+0.0%)       +5 B  (+0.0%)
reader                                    +14 B  (+0.0%)       +5 B  (+0.0%)
purchases                                 +14 B  (+0.0%)       +5 B  (+0.0%)
promote-post-i2                           +14 B  (+0.0%)       +5 B  (+0.0%)
posts-custom                              +14 B  (+0.0%)       +5 B  (+0.0%)
posts                                     +14 B  (+0.0%)       +5 B  (+0.0%)
plugins                                   +14 B  (+0.0%)       +5 B  (+0.0%)
plans                                     +14 B  (+0.0%)       +5 B  (+0.0%)
people                                    +14 B  (+0.0%)       +5 B  (+0.0%)
patterns                                  +14 B  (+0.0%)       +1 B  (+0.0%)
pages                                     +14 B  (+0.0%)       +5 B  (+0.0%)
notification-settings                     +14 B  (+0.0%)       +5 B  (+0.0%)
media                                     +14 B  (+0.0%)       +5 B  (+0.0%)
marketing                                 +14 B  (+0.0%)       +5 B  (+0.0%)
link-in-bio-tld-flow                      +14 B  (+0.0%)       +5 B  (+0.0%)
jetpack-connect                           +14 B  (+0.0%)       +5 B  (+0.0%)
jetpack-cloud-pricing                     +14 B  (+0.0%)       +5 B  (+0.0%)
jetpack-cloud-plugin-management           +14 B  (+0.0%)       +5 B  (+0.0%)
jetpack-cloud-partner-portal              +14 B  (+0.0%)       +4 B  (+0.0%)
jetpack-cloud-features-comparison         +14 B  (+0.0%)       +5 B  (+0.0%)
jetpack-cloud-agency-sites-v2             +14 B  (+0.0%)       +5 B  (+0.0%)
import-hosted-site-flow                   +14 B  (+0.0%)       +4 B  (+0.0%)
import                                    +14 B  (+0.0%)       +6 B  (+0.0%)
hosting-features                          +14 B  (+0.0%)       +5 B  (+0.0%)
hosting                                   +14 B  (+0.0%)       +5 B  (+0.0%)
home                                      +14 B  (+0.0%)       +5 B  (+0.0%)
google-my-business                        +14 B  (+0.0%)       +5 B  (+0.0%)
github-deployments                        +14 B  (+0.0%)       +5 B  (+0.0%)
earn                                      +14 B  (+0.0%)       +5 B  (+0.0%)
domains                                   +14 B  (+0.0%)       +5 B  (+0.0%)
comments                                  +14 B  (+0.0%)       +5 B  (+0.0%)
checkout                                  +14 B  (+0.0%)       +5 B  (+0.0%)
build-flow                                +14 B  (+0.0%)       +5 B  (+0.0%)
a8c-for-agencies-team                     +14 B  (+0.0%)       +5 B  (+0.0%)
a8c-for-agencies-sites                    +14 B  (+0.0%)       +5 B  (+0.0%)
a8c-for-agencies-settings                 +14 B  (+0.0%)       +5 B  (+0.0%)
a8c-for-agencies-referrals                +14 B  (+0.0%)       +5 B  (+0.0%)
a8c-for-agencies-purchases                +14 B  (+0.0%)       +5 B  (+0.0%)
a8c-for-agencies-plugins                  +14 B  (+0.0%)       +5 B  (+0.0%)
a8c-for-agencies-partner-directory        +14 B  (+0.0%)       +5 B  (+0.0%)
a8c-for-agencies-overview                 +14 B  (+0.0%)       +5 B  (+0.0%)
a8c-for-agencies-migrations               +14 B  (+0.0%)       +5 B  (+0.0%)
a8c-for-agencies-marketplace              +14 B  (+0.0%)       +5 B  (+0.0%)
a8c-for-agencies-landing                  +14 B  (+0.0%)       +5 B  (+0.0%)
a8c-for-agencies-client                   +14 B  (+0.0%)       +5 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~10 bytes added 📈 [gzipped])

name                                                 parsed_size           gzip_size
async-load-store-app-store-stats                           +14 B  (+0.0%)       +5 B  (+0.0%)
async-load-design-playground                               +14 B  (+0.0%)       +5 B  (+0.0%)
async-load-design-blocks                                   +14 B  (+0.0%)       +5 B  (+0.0%)
async-load-design                                          +14 B  (+0.0%)       +5 B  (+0.0%)
async-load-calypso-post-editor-media-modal                 +14 B  (+0.0%)       +5 B  (+0.0%)
async-load-calypso-post-editor-editor-media-modal          +14 B  (+0.0%)       +5 B  (+0.0%)
async-load-calypso-components-web-preview-component        +14 B  (+0.0%)       +5 B  (+0.0%)
async-load-calypso-components-jetpack-portal-nav           +14 B  (+0.0%)       +5 B  (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

gcsecsey · 2024-09-12T11:18:25Z

I added a small change in 04f9994 to fix the hover styles for the dropdown items:

Before	After

gcsecsey

Changes LGTM and work great

…t on the insights section

gavande1 · 2024-09-13T06:22:10Z

The changes look good to me. However, there is a minor concern.

There is a noticeable white space between the explanation and the suggestions for improvement. While I understand why it is there, we could get rid of it by increasing the length of the text. What do you think?

gcsecsey · 2024-09-13T10:02:05Z

The changes look good to me. However, there is a minor concern.

There is a noticeable white space between the explanation and the suggestions for improvement. While I understand why it is there, we could get rid of it by increasing the length of the text. What do you think?

Agreed. I made some minor tweaks in 6bcdd06 to match the designs better:

Figma	Calypso

gavande1

LGTM 👍

WBerredo · 2024-09-13T12:57:02Z

The idea was to minimize the changes in the height of the CWW container when switching tabs, if we are ok with this, its ok to remove the calculation for a fixed number of lines as per 6bcdd06.

a8ci18n · 2024-09-13T18:19:48Z

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/16716981

Some locales (Hebrew, Japanese) have been temporarily machine-translated due to translator availability. All other translations are usually ready within a few days. Untranslated and machine-translated strings will be sent for translation next Monday and are expected to be completed by the following Friday.

Thank you @WBerredo for including a screenshot in the description! This is really helpful for our translators.

a8ci18n · 2024-09-15T23:35:17Z

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/16716981

Some locales (Hebrew, Japanese) have been temporarily machine-translated due to translator availability. All other translations are usually ready within a few days. Untranslated and machine-translated strings will be sent for translation next Monday and are expected to be completed by the following Friday.

Thank you @WBerredo for including a screenshot in the description! This is really helpful for our translators.

a8ci18n · 2024-10-06T07:31:19Z

Translation for this Pull Request has now been finished.

WBerredo and others added 10 commits September 10, 2024 15:51

Performance Profiler: Add filtering to the recommendations section

9af20bf

Update URL with the current filter

44a9801

Adds some padding to the filter dropdown

9eb951c

Use the SelectDropdown component

594dc01

Merge branch 'trunk' into add/performance-profiler-rec-filter

a39762d

Add margin botttom to insights section title

9edc21f

Make the colors for the dropdown fixed

29f6b45

Add the number of recommendations on the subtitle

4d96771

Performance Profiler: Add link to recommendations on CWW section

19356c3

Merge branch 'trunk' into add/performance-profiler-cww-rec-link

22bbb3c

WBerredo and others added 2 commits September 11, 2024 14:40

Add wrap of the filter

1bd73ca

update hover styles

04f9994

gcsecsey approved these changes Sep 12, 2024

View reviewed changes

Allow SelectDropdown to receive count per option object and display i…

2179f24

…t on the insights section

update gaps between recommendations

6bcdd06

gavande1 approved these changes Sep 13, 2024

View reviewed changes

Merge branch 'trunk' into add/performance-profiler-cww-rec-link

5094123

WBerredo merged commit 9e9c9d6 into trunk Sep 13, 2024
11 checks passed

WBerredo deleted the add/performance-profiler-cww-rec-link branch September 13, 2024 16:44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Performance Profiler: Add link to recommendations on CWW section #94439

Performance Profiler: Add link to recommendations on CWW section #94439

WBerredo commented Sep 11, 2024

github-actions bot commented Sep 11, 2024 •

edited by matticbot

Loading

matticbot commented Sep 11, 2024 •

edited

Loading

matticbot commented Sep 11, 2024 •

edited

Loading

gcsecsey commented Sep 12, 2024 •

edited

Loading

gcsecsey left a comment

gavande1 commented Sep 13, 2024 •

edited

Loading

gcsecsey commented Sep 13, 2024

gavande1 left a comment

WBerredo commented Sep 13, 2024 •

edited

Loading

a8ci18n commented Sep 13, 2024

a8ci18n commented Sep 15, 2024 •

edited

Loading

a8ci18n commented Oct 6, 2024

Performance Profiler: Add link to recommendations on CWW section #94439

Performance Profiler: Add link to recommendations on CWW section #94439

Conversation

WBerredo commented Sep 11, 2024

Proposed Changes

Why are these changes being made?

Testing Instructions

github-actions bot commented Sep 11, 2024 • edited by matticbot Loading

matticbot commented Sep 11, 2024 • edited Loading

matticbot commented Sep 11, 2024 • edited Loading

gcsecsey commented Sep 12, 2024 • edited Loading

gcsecsey left a comment

Choose a reason for hiding this comment

gavande1 commented Sep 13, 2024 • edited Loading

gcsecsey commented Sep 13, 2024

gavande1 left a comment

Choose a reason for hiding this comment

WBerredo commented Sep 13, 2024 • edited Loading

a8ci18n commented Sep 13, 2024

a8ci18n commented Sep 15, 2024 • edited Loading

a8ci18n commented Oct 6, 2024

github-actions bot commented Sep 11, 2024 •

edited by matticbot

Loading

matticbot commented Sep 11, 2024 •

edited

Loading

matticbot commented Sep 11, 2024 •

edited

Loading

gcsecsey commented Sep 12, 2024 •

edited

Loading

gavande1 commented Sep 13, 2024 •

edited

Loading

WBerredo commented Sep 13, 2024 •

edited

Loading

a8ci18n commented Sep 15, 2024 •

edited

Loading