Make WordPress Core

Opened 17 months ago

Last modified 2 months ago

#57157 assigned enhancement

Reduce external resources for wp-login.php

Reported by: sabernhardt's profile sabernhardt Owned by: rajinsharwar's profile rajinsharwar
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Login and Registration Keywords: has-patch changes-requested
Focuses: javascript, css, performance Cc:

Description

The login page is quite heavy.

  • The user-profile script adds zxcvbn, wp-util, jQuery, etc. (about 1MB together). When not resetting the password, a small inline script might be used.
  • The Dashicons stylesheet (about 60kB) is rather large for 3 icons if they could be inline SVG instead.
  • Because the login page does not include locale- body classes, l10n.css only change the body font for RTL languages. If login.css sets that font instead, the stylesheet could also specify 'Arial Hebrew' with body.rtl:lang(he-IL).

However, the separate buttons and forms stylesheets could remain as dependencies.

Change History (23)

This ticket was mentioned in PR #3654 on WordPress/wordpress-develop by @sabernhardt.


17 months ago
#1

  • Keywords has-patch added
  • Removes external scripts when the login action is not password reset, and prints an inline script for the password visibility toggle.
  • Adds dashicons SVGs inline instead fetching the stylesheet for all login actions, but this does not (yet) change them in password reset context.
  • Copies the one necessary line from l10n.css into login.css, and adds a special font for Hebrew.
  • Corrects the button class following changeset:52417.

Trac ticket: https://core.trac.wordpress.org/ticket/57157

#2 @krupalpanchal
17 months ago

Hi @sabernhardt

PR LGTM. I think this can give somehow a good performance.

#3 @sabernhardt
15 months ago

  • Keywords 2nd-opinion added

PR 3725 on #3534 suggests a password-toggle.js, using dashicons with a similar icon-only button. If it remains icon-only, hopefully the script could work on the login page (it would not yet). Keeping the icon font may be preferable for consistency.

Even if creating the new implementation is a good idea, with more inconsistency, this patch could be written better.

Last edited 15 months ago by sabernhardt (previous) (diff)

#4 @joedolson
10 months ago

With #3534 committed, open to updates that use or modify the password-toggle script.

@sabernhardt commented on PR #3654:


10 months ago
#5

Starting over with a fresh branch would be better, using password-toggle.js.

#6 @rajinsharwar
8 months ago

  • Milestone changed from Awaiting Review to 6.4
  • Type changed from enhancement to task (blessed)

Great suggestion, putting this for 6.4

#7 @joemcgill
8 months ago

  • Type changed from task (blessed) to enhancement

Changing this back to an enhancement as the "Task (blessed)" type is meant to be reserved for tasks related to major features or for changes to build/testing tools that can be committed at any time during a release process. See: https://make.wordpress.org/core/handbook/contribute/trac/#ticket-properties

Last edited 8 months ago by joemcgill (previous) (diff)

This ticket was mentioned in PR #5040 on WordPress/wordpress-develop by @sabernhardt.


8 months ago
#8

  • Adds fonts for RTL languages to login.css and removes the l10n stylesheet dependency.
  • Replaces user-profile script with password-toggle for standard login form.
  • Gives the button a .pwd-toggle class and a hidden text span (with a new .hidden class).

Trac 57157

#9 @sabernhardt
8 months ago

  • Keywords 2nd-opinion removed

PR 5040 uses the new password-toggle script without editing it. Activating the button would add either "Show" or "Hide" in the empty .text element, but that is hidden.

Unless the translation bug in #58696 gets fixed, this is not ready to commit. If someone wants to try moving the translations to the PHP and update the script, the installation pages' toggle buttons might be updated similarly without needing to fix that bug. (I had attempted to set data- attributes, but my script did not change the ARIA label and text every time I clicked the button.)

#10 @rajinsharwar
8 months ago

  • Keywords needs-testing added
  • Owner set to rajinsharwar
  • Status changed from new to assigned

Thanks, @sabernhardt. It does seem to have a great impact on the login page. Here are the results of a clean site.

Without patch:

https://img001.prntscr.com/file/img001/pE4t-dHMRjmUOBaxPiCt9Q.png

With patch:

https://img001.prntscr.com/file/img001/eN3rQs6fS6WkUlgIioSwyQ.png

Looks good to me, I guess we can commit this change, after some testing for any edge issues.

This ticket was mentioned in Slack in #core-performance by joemcgill. View the logs.


8 months ago

This ticket was mentioned in Slack in #core by oglekler. View the logs.


7 months ago

This ticket was mentioned in Slack in #core-test by oglekler. View the logs.


7 months ago

#14 @pooja1210
7 months ago

Hi,

Test report for - https://github.com/WordPress/wordpress-develop/pull/5040

Verified the patch and it is working fine. Now, the performance of the login page has been improved.

Screenshots:

Before applying patch - https://prnt.sc/0Q2G8eU-V88B
After applying patch: https://prnt.sc/PxD8fDW8q11D

However, the show and hide password toggle text is not visible properly - https://prnt.sc/fPmlJLAaTepp

Thanks!

#15 @mukesh27
7 months ago

  • Keywords needs-testing-info added

@sabernhardt @rajinsharwar Could you please share the testing info so other can test it?

#16 @sabernhardt
7 months ago

I had intended to change this only for the standard login action (not Register, Reset Password, etc.) It would be good to confirm that the other actions are unaffected.

People could test how the login form's visibility button works with these proposed changes in English. Before testing it in other languages, however, please test the patch on #58696. If that fixes the install and setup-config pages, then keep that patch applied to determine whether the aria-label updates properly in that language with the login's password visibility button (or if it still needs an adjustment for the login).

Another situation we should try is adding a custom script with a dependency of user-profile, which might conflict with password-toggle. (If so, maybe it is still acceptable if a dev note recommends to dequeue password-toggle when user-profile is necessary.)

When applying the patch from PR 5040, ensure that the stylesheet is compiled, and refresh the page (clear cache if necessary). The text in the toggle button should not be visible with the new .hidden class.

#17 @oglekler
7 months ago

  • Keywords changes-requested added; needs-testing needs-testing-info removed
  • Milestone changed from 6.4 to 6.5

Login, Register and Reset Password is pretty much the same page and in my opinion all changes should be good for all of them. Because the patch needs a bit of work, and we are in two days before the Beta 1, I am moving this ticket into 6.5. It can go in trunk as soon as the patch will be ready and trunk open again after 6.4 will be branched out.

This ticket was mentioned in Slack in #core-performance by mukeshpanchal27. View the logs.


6 months ago

This ticket was mentioned in Slack in #core-performance by mukeshpanchal27. View the logs.


4 months ago

This ticket was mentioned in Slack in #core-performance by mukeshpanchal27. View the logs.


3 months ago

This ticket was mentioned in Slack in #core-performance by mukeshpanchal27. View the logs.


2 months ago

#22 @mukesh27
2 months ago

@sabernhardt @rajinsharwar, is this on your radar for 6.5?

#23 @swissspidy
2 months ago

  • Milestone changed from 6.5 to Future Release
Note: See TracTickets for help on using tickets.