Wp-rocket: Verzögerung JS - Links müssen unter iOS / Safari zweimal angeklickt werden

Ich hatte einen Kunden, der dies auch mit dem Flying Scripts-Plugin meldete.

Nach der Suche habe ich festgestellt, dass es unter IOS ein Problem mit Safari gibt, das mit der Verwendung von touchstart oder touchmove ohne Verwendung von touchend wodurch die Links doppelklicken (Sie müssen darauf klicken) Beliebiger Punkt auf dem Bildschirm als erster Klick, dann können Sie auf einen beliebigen Link klicken.

Der folgende Link versucht, das Problem hervorzuheben:
https://stackoverflow.com/a/10340968

Auf Kundenseite habe ich folgende Änderung vorgenommen und das Problem behoben:
https://github.com/wp-media/wp-rocket/blob/7ec9d996f004707a57c4c8476090d5bd943051f0/assets/js/lazyload-scripts.js#L91 -L99
Ersetzen Sie touchmove durch touchmove touchend
Ersetzen Sie touchstart durch touchstart touchend

Nachdem sie sich bei @hellofromtonya erkundigt hatte , sagte sie: -

Dieses spezielle Problem muss genauer untersucht werden, um herauszufinden, warum. Warum haben sie das Problem, anstatt dem Code für diesen speziellen Randfall einen Patch hinzuzufügen, und warum behebt diese spezielle Kombination das Problem?
Ich denke, das „Warum“ hier wird sehr wertvoll sein, um sicherzustellen, dass wir anderen Kunden kein weiteres Problem bereiten.

Also werde ich Bedürfnisse hinzufügen: F & E-Label zu untersuchen.

Ein weiterer Fall: https://secure.helpscout.net/conversation/1296370691/198532?folderId=377611
Der Kunde berichtet, dass dies auf Chome und Safari auf Mobilgeräten geschieht

Zugehöriges Ticket: https://secure.helpscout.net/conversation/1296809928/198688/

Zugehöriges Ticket: https://secure.helpscout.net/conversation/1322836283/206594?folderId=2135277

Zugehöriges Ticket: https://secure.helpscout.net/conversation/1334490646/210819/

Zugehöriges Ticket: https://secure.helpscout.net/conversation/1336672544/211528/
Notizen und Bildschirmaufzeichnung in den Notizen. Das Problem tritt sowohl in Safari- als auch in Chrome-Browsern auf.

Nach der Suche habe ich festgestellt, dass es unter IOS ein Problem mit Safari gibt, das mit der Verwendung von touchstart oder touchmove ohne Verwendung von touchend wodurch die Links doppelklicken (Sie müssen darauf klicken) Beliebiger Punkt auf dem Bildschirm als erster Klick, dann können Sie auf einen beliebigen Link klicken.

Der folgende Link versucht, das Problem hervorzuheben:
https://stackoverflow.com/a/10340968

Auf Kundenseite habe ich folgende Änderung vorgenommen und das Problem behoben:
https://github.com/wp-media/wp-rocket/blob/7ec9d996f004707a57c4c8476090d5bd943051f0/assets/js/lazyload-scripts.js#L91 -L99

Ersetzen Sie touchmove durch touchmove touchend
Ersetzen Sie touchstart durch touchstart touchend
Nachdem sie sich bei @hellofromtonya erkundigt hatte , sagte sie: -

Dieses spezielle Problem muss genauer untersucht werden, um herauszufinden, warum. Warum haben sie das Problem, anstatt dem Code für diesen speziellen Randfall einen Patch hinzuzufügen, und warum behebt diese spezielle Kombination das Problem?
Ich denke, das „Warum“ hier wird sehr wertvoll sein, um sicherzustellen, dass wir anderen Kunden kein weiteres Problem bereiten.

Also werde ich Bedürfnisse hinzufügen: F & E-Label zu untersuchen.

Ich habe diesen Vorschlag ausprobiert, aber das Problem wurde unter iOS leider nicht behoben (zumindest für mich).

Gleiches Problem. Versuchte diese Funktion vor einigen Tagen zum ersten Mal und erhielt sofort Berichte, dass Links unter iOS nicht funktionierten und sie doppelt getippt werden mussten, um zu funktionieren. Versuchte auf 2 x iOS 14-Geräten und bestätigte dieses Problem, so dass es vorerst deaktiviert ist.

Irgendwelche Updates dazu?

Verwandte: https://secure.helpscout.net/conversation/1367506767/223234

Gleiches Problem. Irgendwelche Updates?

Erleben Sie den gleichen Fehler sowohl mit WP-Rocket als auch mit Flying Scripts. Das Ersetzen von touchstart und touchmove hat nicht geholfen.

Siehe auch: https://secure.helpscout.net/conversation/1376564315/226026/

Ich habe dies eher im iOS Chrome-Browser als in Safari. Kann noch jemand bestätigen?

Wir haben das WP Rocket-Plugin vorerst gelöscht. Dieses Problem ist bereits seit 3 ​​Monaten offen und ich habe nicht das Gefühl, dass es in Kürze mit der aktuellen Anzahl offener Probleme (+400) behoben wird.

Siehe auch: https://secure.helpscout.net/conversation/1379195337/226677

Hoffe, WP-Rakete fügt das "Update" bald hinzu :)

Irgendwelche Updates von den Entwicklern? Arbeitest du daran?

@ wp-media / dev Da wir immer mehr davon sehen und der Fehler die Funktion ziemlich unbrauchbar macht, müssen wir sie meiner Meinung nach priorisieren. Ich habe es dem nächsten Sprint hinzugefügt, um zu sehen, ob wir eine Lösung finden können. 🙏

@ wp-media / dev Da wir immer mehr davon sehen und der Fehler die Funktion ziemlich unbrauchbar macht, müssen wir sie meiner Meinung nach priorisieren. Ich habe es dem nächsten Sprint hinzugefügt, um zu sehen, ob wir eine Lösung finden können. 🙏

Hört sich gut an. Diese Funktion macht einen großen Unterschied für meine Website, wenn es um Geschwindigkeit geht. Ich würde sie gerne wieder aktivieren lassen =)

@arunbasillal Nein, das Problem ist als F & E-Bedarf gekennzeichnet. Es kann nicht Teil eines Sprints sein. Damit ein Problem Teil eines Sprints ist, muss es zuerst vollständig gepflegt werden.

@ wp-media / dev Da wir immer mehr davon sehen und der Fehler die Funktion ziemlich unbrauchbar macht, müssen wir sie meiner Meinung nach priorisieren. Ich habe es dem nächsten Sprint hinzugefügt, um zu sehen, ob wir eine Lösung finden können. 🙏

Vielen Dank! Ich liebe diese Funktion wirklich - wäre großartig, wenn sie auf allen meinen Websites verwendet werden kann!

@ wp-media / productrocket Einige Rückmeldungen des Teams dazu:

• Dies ist aufgrund der Funktionsweise von iOS schwierig.
• Die Sache ist, dass Touchscreens keine wirklich gute Hover-Alternative haben, außer vielleicht Touch-and-Hold - aber zumindest auf iOS-Geräten hat dies seine eigene Bedeutung (es lädt einen Vorschaubild des Link-Ziels).
• Ahmed hat sich auch schon vorher eingehend damit befasst. Die einzige Lösung besteht darin, Timeout wie fliegende Skripte zu verwenden

Da es keine Lösung dafür gibt, ohne dass wesentliche Änderungen an der aktuellen Funktionsweise dieser Funktion vorgenommen wurden, müssen Sie weitere Überlegungen anstellen, bevor Sie fortfahren.

Need and mouseWheel event und setTimeOut. Funktioniert bei Mouseweel-Skripten wie Infinite Scroll und anderen Skripten nicht korrekt und lädt die nächste Seite nicht, wenn nur Mousewhell. Im Allgemeinen gilt dies für alle Skripte und ist kritisch.
Verzögerung JS ohne setTimeOut verursachen ebenfalls Probleme, zusätzlich müssen Links zweimal angeklickt werden. Beispiel: Im russischen Segment Yandex-Suchmaschine. Der Zähler kann einen Webviewer verwenden. Dies ist eine Aufzeichnung der Benutzeraktionen. Dementsprechend sollte das Skript nicht verzögert werden: Da beim Anzeigen von Benutzeraktionen das Zählerskript auf der Site geladen werden sollte. Und es wird natürlich nicht geladen, da im Viewer keine Aktionen, kein "Keydown", "Mouseover", "Touchmove", "Touchstart" auftreten.

Ich würde wirklich gerne wissen, wie das WP Rocket-Team dies in Betracht zieht, aber zumindest das automatische Laden von Skripten nach x Sekunden ist ein Muss, bis iOS das Problem behebt.

@ wp-media / productrocket Einige Rückmeldungen des Teams dazu:

• Dies ist aufgrund der Funktionsweise von iOS schwierig.
• Die Sache ist, dass Touchscreens keine wirklich gute Hover-Alternative haben, außer vielleicht Touch-and-Hold - aber zumindest auf iOS-Geräten hat dies seine eigene Bedeutung (es lädt einen Vorschaubild des Link-Ziels).
• Ahmed hat sich auch schon vorher eingehend damit befasst. Die einzige Lösung besteht darin, Timeout wie fliegende Skripte zu verwenden

Da es keine Lösung dafür gibt, ohne dass wesentliche Änderungen an der aktuellen Funktionsweise dieser Funktion vorgenommen wurden, müssen Sie weitere Überlegungen anstellen, bevor Sie fortfahren.

Gibt es einen Zeitplan für die Implementierung der Timeout-Lösung?

Das Laden von Skripten nach X Sekunden ist nicht die Lösung. Dies ist genau das Gegenteil des Interesses dieser Funktion. Wenn wir eine Lösung finden können, ohne dies zu tun, werden wir versuchen, diesen Weg fortzusetzen.

@arunbasillal @ engahmeds3ed Könnten Sie einige Tests wiederholen?

Ich frage, da wir das gleiche Problem auch mit unserer Website hatten. Aber seit letzter Woche haben wir das Problem nicht mehr. Ist es der Zufall, dass wir unsere neue Website oder ein iOS-Update veröffentlichen?

Gibt es einen Zeitplan für die Implementierung der Timeout-Lösung?

Wir können keine ETA bereitstellen.

@GeekPress Wenn ich Ihre Website mit Chrome unter Verwendung der vom Dev-Tool bereitgestellten mobilen Fenstergröße

@GeekPress Wenn ich Ihre Website mit Chrome unter Verwendung der vom Dev-Tool bereitgestellten mobilen Fenstergröße

Ich glaube nicht, dass das Testen mit der mobilen Vorschau im Chrome Developer Tool aufgrund der unterschiedlichen Berührungsgesten das gleiche Ergebnis liefert wie das tatsächliche Testen auf einem iOS-Gerät.

@Roboonl Du hast recht, sie sollten anders sein. Und das mache ich nicht. Ich frage mich nur, ob es für WP Rocket in Ordnung ist, dass Skripte unter bestimmten Bedingungen niemals geladen werden.

Das setTimeOut wird benötigt oder vielmehr benötigt.

Verwandte: https://secure.helpscout.net/conversation/1406743456/234374/

In Verbindung stehender Fall: https://secure.helpscout.net/conversation/1405169718/233859/

Browser: Safari und Chrome
Gerät: iPhone 11 Pro

Durch Hinzufügen eines Timeout-Triggers wird auch https://github.com/wp-media/wp-rocket/issues/3420 aufgelöst

Das Hinzufügen eines Timeout-Triggers würde auch # 3420 auflösen

@piotrbak Nicht sicher, ob # 3420 mit diesem Problem zusammenhängt. Fixing # 3454 sollte ich denken, Fix # 3420

@GeekPress Nach meinem Verständnis haben die Benutzer auf der Webseite

Scheint, dass Sie Recht haben, was https://github.com/wp-media/wp-rocket/issues/3454 betrifft , das sich auch auf Mobiltelefone bezieht. Wahrscheinlich würde eines dieser Probleme das https://github.com/wp-media/wp-rocket/issues/3420 beheben
Vielen Dank

Irgendein Update?

@arunbasillal Kannst du nicht eine Option in WP-Rocket hinzufügen, die dies in der Zwischenzeit auf bestimmten Seiten ausschließt?
Wie bei Flying Scripts haben sie sogar die Möglichkeit, die Verzögerungs-JS für bestimmte Seiten mit Schlüsselwörtern auszuschließen.

ein anderer Fall:
https://secure.helpscout.net/conversation/1417928403/237257?folderId=2683093

Ich glaube nicht, dass das Testen mit der mobilen Vorschau im Chrome Developer Tool aufgrund der unterschiedlichen Berührungsgesten das gleiche Ergebnis liefert wie das tatsächliche Testen auf einem iOS-Gerät.

@Roboonl Es wurde auf einem echten mobilen Gerät getestet. Bitte probieren Sie unsere Website auf dem Handy aus. Sie müssen nicht zweimal klicken.

@roberthedlund Ich hätte etwas

Ich glaube nicht, dass das Testen mit der mobilen Vorschau im Chrome Developer Tool aufgrund der unterschiedlichen Berührungsgesten das gleiche Ergebnis liefert wie das tatsächliche Testen auf einem iOS-Gerät.

@Roboonl Es wurde auf einem echten mobilen Gerät getestet. Bitte probieren Sie unsere Website auf dem Handy aus. Sie müssen nicht zweimal klicken.

@roberthedlund Ich hätte etwas

https://ibb.co/qYVyhh6

@roberthedlund Nun, das kannst du auch schon mit WP Rocket machen. Sie müssen nur den Seitenbearbeitungsbildschirm aufrufen, die Metabox «WP Rocket Options» öffnen und die Option JS-Ausführung verzögern deaktivieren.

@roberthedlund Nun, das kannst du auch schon mit WP Rocket machen. Sie müssen nur den Seitenbearbeitungsbildschirm aufrufen, die Metabox «WP Rocket Options» öffnen und die Option JS-Ausführung verzögern deaktivieren.

Ja, aber nicht ideal, um dies manuell auf über 100 Seiten zu tun.

Irgendein Update?

Dieses Problem ist in Version 3.8.6 mit Chrome unter Android weiterhin verfügbar. Ich habe gerade Fying Scripts ausprobiert, dann ist dieser Doppelklick-Fehler nicht aufgetreten. Für iOS müssen Betrachter auch mit Flying Scripts einen Doppelklick ausführen.

Irgendein Update? Ich finde es seltsam, dass Sie die Benutzer von WP-rocket immer noch in keiner Weise über das Problem informiert haben. Wie schwierig ist es, einen Warnhinweis einzugeben, bevor Benutzer die Funktion "JS verzögern" aktivieren? Ich habe so viele Benutzer in verschiedenen Foren gesehen, die noch nicht wissen, dass sie unter dem Problem leiden, bevor ich sie darüber kontaktiert habe. Es ist ein ziemlich großes Problem und ich denke, Sie sollten davor warnen.

@socialpreneur Versuchen Sie es mit iOS auf einem echten Handy und nicht mit einer Simulation?

Warum stelle ich die Frage?

Ich versuche es erneut auf meinem persönlichen iPhone 8 und muss nicht zweimal auf alle Websites klicken, die ich ausprobiert habe und auf denen Delay JS vorhanden ist, einschließlich unserer eigenen Website.

@GeekPress Auf echten Mobiltelefonen, einschließlich mir und dem Telefon meines Kunden, musste ich Delay JS vollständig deaktivieren. Flying Scripts hat auch nicht funktioniert, daher schätze ich, dass dies derzeit eine iOS-Einschränkung ist.

Hinzugefügt: Es sieht so aus, als ob es ein externes oder internes Skript gibt, das dieses Problem verursacht. Nicht jede Site, die Delay JS von WP Rocket oder Flying Scripts verwendet, weist diese Doppelklicksymptome auf. Bisher verwenden zwei Websites, die dieses Problem nicht haben, kein Adsense. Ich denke, wir müssen mehr Fälle sammeln, um herauszufinden, was die Ursache ist.

@GeekPress

@socialpreneur Versuchen Sie es mit iOS auf einem echten Handy und nicht mit einer Simulation?

Warum stelle ich die Frage?

Ich versuche es erneut auf meinem persönlichen iPhone 8 und muss nicht zweimal auf alle Websites klicken, die ich ausprobiert habe und auf denen Delay JS vorhanden ist, einschließlich unserer eigenen Website.

Ich hatte auf vielen Websites versucht, die Delay JS verwenden, und habe es auf echten Telefonen versucht. iPhone 8, iPhone SE, iPhone 11 und alle hatten dieses Problem. Manchmal funktioniert es beim ersten "Klicken", dann hören die anderen völlig auf zu arbeiten. Das Problem ist also real.

@socialpreneur Haben Sie es auf unserer Website versucht (https://wp-rocket.me)? Wie gesagt, ich kann das Problem nicht reproduzieren, nachdem ich einige Websites ausprobiert habe.

Darf ich die von Ihnen verwendete iOS-Version kennen?

@GeekPress Nicht alles, was Sie sehen, ist die Wahrheit. Wenn mindestens ein WP Rocket-Benutzer das Problem hat, müssen wir alles tun, um die Angelegenheit zu lösen. Mein iOS ist 14.4 und ich werde meinen Kunden nach seiner iOS-Version fragen. Wie gesagt, da dies auf allen Delay JS-Plugins (WP Rocket, Flying Scripts, Perfmatters) auf bestimmten Websites mit bestimmten Skripten geschieht, ist dies nicht nur Ihre Ursache.

Es mag ein Browser sein, aber wenn ich dieses Doppelklick-Problem sehe, ist es nicht nur iOS, sondern ich habe es auf meinem Android und seinem Chrome, also ist es eindeutig nicht nur das iOS- oder Safari-Problem. Ich hoffe nur, dass wir uns einen kleinen Hack oder zusätzliche Funktionen einfallen lassen können, um dieses Problem auf bestimmten Websites zu umgehen.

Ich werde dich wissen lassen, wenn ich etwas finde.

Hinzugefügt 1: OK, hier ist die dritte Seite, auf der das Problem auftritt. Vielleicht kann ich einige gängige Skripte eingrenzen.

Hinzugefügt 2: Bisher löst das Aktivieren von Delay JS dieses Problem bisher nicht aus.

Wenn ich jedoch einige Skripte einstelle, beginnt ein Doppelklick / Tippen.

Hinzugefügt 3: Okay, hier ist was ich gefunden habe. Wenn ich "Inhaltsverzeichnis" hinzufüge, wird ein Doppelklick ausgelöst. Es ist möglicherweise nicht für alle anderen Benutzer gleich, die dies melden, aber bisher ist dies eines der Schlüsselwörter. Inhaltsverzeichnis Plus ist der Name des Plugins.

Hinzugefügt 4: Hier sind gute Nachrichten. Eine andere Site mit dem gleichen Problem verwendet ebenfalls TOC Plus. @GeekPress , bitte testen Sie es mit aktiviertem Plugin. Und fordern Sie alle Support-Mitarbeiter auf, zu bestätigen, ob die Benutzer mit demselben Problem dieses Plugin auch auf ihren Websites verwenden. SO SCHNELL WIE MÖGLICH.

Hinzugefügt 5: Ich habe es geschafft, dieses Problem für eine der Sites zu lösen, indem ich das TOC Plus-Skript nicht verzögert habe. Die gleiche Lösung funktionierte jedoch nicht für eine andere Site, daher scheint es einige weitere Skripte zu geben, die nicht verzögerungsfreundlich sind.

Hinzugefügt 6: Ich habe das Gefühl, dass die jquery-Version möglicherweise einen Teil dieses Problems übernimmt. Eine Arbeitswebsite verwendet die neueste und die andere nicht funktionierende Website verwendet die alte Version (/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp). Weiteres Debuggen mehr ...

@GeekPress Abgesehen von TOC Plus habe ich auch festgestellt, dass Adsense die Ursache für Doppelklick / Tippen ist. Ich habe mit einigen Sites getestet und alle Sites mit unterschiedlichen Themes / Plugins haben die gleichen. Dies geschieht mit allen unten aufgeführten Adsense-Keywords.

• googlesyndication
• Werbung von Google
• adsbygoogle.js

Reproduzieren

1. Erstellen Sie eine Test-Site mit Adsense überall, ob über der Falte oder nicht.
2. Aktualisieren Sie die Seite, tippen Sie auf das Header-Logo / den Header-Text oder das mobile Menüsymbol. Zu diesem Zeitpunkt wird adsense geladen, das Menü wird jedoch nicht mit einem Fingertipp geöffnet.

Lösung

Ich bin mir nicht sicher, wie das Adsense-Skript so gestaltet zu sein scheint. Beträchtliche Umgehungsmöglichkeiten sind:

1. Laden Sie adsense immer nach 1 Sek. Daher werden die meisten Benutzer nicht mit diesem Problem konfrontiert sein.
2. Laden Sie adsense auf dem Mauszeiger vor (nicht sicher, ob dies auf dem mobilen Tippen funktionieren würde)
3. Sagen Sie den Benutzern, dass sie nicht mit Adsense Geld verdienen sollen, damit Websites viel schneller werden ...

@GeekPress Meine Website ist celmetro.com und ich habe das gleiche Doppelklickproblem, wenn ich die Ausführung von verzögerter Javascript-Ausführung aktiviere. Es spielt keine Rolle, ob die Liste keine zu verzögernden Skripte enthält.

Verwandte Themen: https://secure.helpscout.net/conversation/1458853194/249184?folderId=3864740
Sie verwenden TOC Plus und Adsense.
Bearbeitet: Dies sind zusätzliche Informationen von @socialpreneur mit Bildschirmaufzeichnung auf der betroffenen Site.

Ich kann das Problem auf meiner Website über Chrome Mobile bestätigen (sowie über Chrome Desktop, indem das Webentwicklungs-Tool so eingestellt wird, dass es als Handy geladen wird).