Reduce external resources for wp-login.php

[sabernhardt]

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.

• 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

[krupalpanchal]

Hi @sabernhardt

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

[sabernhardt]

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.

[joedolson]

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

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

[rajinsharwar]

Great suggestion, putting this for 6.4

[joemcgill]

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

• 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

[sabernhardt]

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.)

[rajinsharwar]

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

Without patch:

With patch:

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

[pooja1210]

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!

[mukesh27]

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

[sabernhardt]

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.

[oglekler]

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.

[mukesh27]

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