The page freezes while the Real-Time SEO module runs script

Hi knyshuk.vova,

Thank you for your bug report and patch. Before we review and commit this I'd like to explore an alternative route.

Could you give some more information about:

• The entity and fields that you're analysing
• Your browser, browser version and operating system
• Whether you're experiencing this issue for all fields or only when editing a specific field

I think the automatic refreshing is a very useful feature for real-time feedback. I'd prefer to ensure the slowdown is avoided altogether and keep the auto-refresh working than to disable that functionality altogether. If we find that the slowdown is unavoidable then we can always use this solution but I consider it a last resort.

Thanks!

Not sure if it is related to this issue, but while the Yoast SEO widget is running, my page is completely unresponsive. Can't click anything. It is essentially locked up, but I can still scroll.

I'm using it on the Body field of the basic page content type.
Browser is Chrome Version 74.0.3729.169 (Official Build) (64-bit) (chrome on Ubuntu 18.04)

But my coworkers experience the same on their Macs.

This happens both when the edit page is first loaded (completely locked up for about 10 or more seconds) and anytime I defocus (onBlur) the body field....

Hi!

I have the same issue, the page freeze but I can still scroll.

I'm using it on the Body field.
Browser: Chrome 87.0.4280.141
Operating system: Ubuntu 20.04.1 LTS
Drupal Version: 9.0.11
Yoast seo version: 8.x.1.7

Thanks a lot.

I have the same problem: editing a page is a pain since the form totally freezes. I think that SEO should work in background without blocking the page load.

Confirming the issue. The page freezes while Yoast Seo is processing (running spinner).

#6 is a nice workaround, but a better solution would be to make the script non-blocking (async).

Is the maintainer inactive or doesn't care? ;D This makes the module close to unusable... just to say... ;)

would working with this version of Metatag help at all?

#6 is not applying to the current dev version. I am including a new patch.

Attached bellow is the ported patch for 2.0.0-alpha8. Could it please be include in the next version?

Reroll for 2.0.0alpha9

It's unbelievable. This critical issue exists since > 2 years and the maintainers just don't care? I think they must have missed this issue. Going to contact them via PM.

@Nixou could you please provide the patch as MR to make it easier to review and merge for the maintainers?

Thanks! :)

Related issue : #3367982: Page freeze caused by Symfony 6 non-scalar error when tokensNotFound is triggered. There is a patch which solved this problem.

Thanks @omar_emailat - still this are separate issues. The frontend should never wait for the response, but run async, was written above.

Bumping this major issue.

Next step should be to prepare a MR from the latest patch. This is still horrible to use, waiting for the UI.

For that reason, I'd suggest adding a note to the description of the new setting:

+    $form['auto_refresh']['auto_refresh_seo_result'] = [
+      '#type' => 'checkbox',
+      '#title' => $this->t('Enable auto refresh of the Real Time SEO widget result'),
+      '#description' => $this->t('You can use this setting to allow or deny auto refreshing of the Real Time SEO widget results after a value of a form field is changed and a field focus is lost.'),
+      '#default_value' => $config->get('auto_refresh_seo_result'),
+    ];

like

Please note that this may cause UI delays, waiting for e.g. the Metatag values to become available to calculate the score

(A native speaker should improve the sentence).

And I guess this should have an update hook for existing installations to inform about the new option and keep the value enabled like before? (BC)

For new installations, I'd even propose to disable the setting by default for the reasons given and use an opt-in!

LGTM! Tested it and everything seems to be working as expected!

Added 2 more comments otherwise RTBC.

Finally :)

Perfectly fine now @lrwebks! RTBC from my side, thank you!!

I've been hoping for the past time that I'd find the time to fully update the Real-Time SEO module to the now released version of the Yoast SEO library so that we could move to webworkers and fix this issue. However, unfortunately that has required more time (and a better development set-up then I currently have available).

Given that the first release of Drupal CMS is around the corner and the Real-Time SEO module will be part of it, I'm adding the button and tagging a stable release. However, I do hope that in a future release we can once again remove the button and go back to "Real-Time" while preserving a smooth experience :)

While merging I've split this issue in two. One to refactor the controller into a SettingsForm and the other to introduce the actual change with the new setting. I also fixed some comments to use more inclusive language.

Thanks for your contributions everyone!

Hi and thank you so much @kingdutch for taking the time for this project! We've been waiting years for this to be fixed and never used the project because of the broken state of this issue.

Reading the comments and the MR, I think we should open a follow-up to also fix the JS-side of this issue.
The root cause here is blocking JavaScript and I think we might also want to remove jQuery?

The new option gives us the opportunity to disable the auto-refresh and makes the module usable again, but to have the functionality fixed, the JS needs to be corrected.

Do you agree? Should we open a follow-up for replacing jQuery by Vanilla JS and remove this blocking implementation combined?

Hey Anybody,

Yes I think that follow-up would be #2992481: Update YoastSEO JS to recent version. The newest release for the Yoast SEO library which finally came somewhere last year moves most of the processing to a webworker and keeps only the UI updates on the main thread. So that ensures that even if the server needs a bit more time we're not blocking.

My 5 year ago developer idea was to do that update with an overhaul of the widget itself and move that to React so that there's fewer event listeners and a more linear "Updated data comes in" -> "Render UI element top down" approach. One of the features that that should enable in the future is multiple keywords at the same time. However, I think that's a much larger undertaking so it makes sense to refocus the update issue to moving to the newest version as-is and seeing if we can only make smaller improvements to the existing widget, like replacing jQuery with vanilla JS.

I suppose this addresses #3067487: Allow configuring of manual checking per field as well (using a site wide setting instead of form widget setting though). Maybe maintainers should decide whether to close #3067487: Allow configuring of manual checking per field now as a duplicate or not.

I added the point from #36 / #37 to #2992481: Update YoastSEO JS to recent version FYI