Wp-rocket: Delay JS: es necesario hacer clic dos veces en los enlaces en iOS / Safari

También tuve un cliente que informó esto con el complemento Flying Scripts.

Después de buscar, me di cuenta de que hay un problema en IOS con Safari relacionado con el uso de touchstart o touchmove sin usar touchend que hace que los enlaces sean un problema de doble clic (debe hacer clic en cualquier punto de la pantalla como primer clic, luego puede hacer clic en cualquier enlace)

el siguiente enlace intenta resaltar el problema:
https://stackoverflow.com/a/10340968

En el sitio del cliente, realicé el siguiente cambio y resolví el problema:
https://github.com/wp-media/wp-rocket/blob/7ec9d996f004707a57c4c8476090d5bd943051f0/assets/js/lazyload-scripts.js#L91 -L99
reemplace touchmove con touchmove touchend
reemplace touchstart con touchstart touchend

Después de consultar con @hellofromtonya , dijo: -

Este problema en particular necesitará más investigación para averiguar por qué. En lugar de agregar un parche al código para este caso de borde específico, ¿por qué tienen el problema y por qué esta combinación específica lo soluciona?
Creo que el "por qué" aquí será muy valioso para garantizar que no inyectemos otro problema a otros clientes.

así que añadiré necesidades: etiqueta de I + D a investigar.

Otro caso: https://secure.helpscout.net/conversation/1296370691/198532?folderId=377611
El cliente informa que está sucediendo en chome y safari en el móvil

Boleto relacionado: https://secure.helpscout.net/conversation/1296809928/198688/

Boleto relacionado: https://secure.helpscout.net/conversation/1322836283/206594?folderId=2135277

Boleto relacionado: https://secure.helpscout.net/conversation/1334490646/210819/

Boleto relacionado: https://secure.helpscout.net/conversation/1336672544/211528/
Notas y grabación de pantalla en las notas. El problema ocurre en los navegadores Safari y Chrome.

Después de buscar, me di cuenta de que hay un problema en IOS con Safari relacionado con el uso de touchstart o touchmove sin usar touchend que hace que los enlaces sean un problema de doble clic (debe hacer clic en cualquier punto de la pantalla como primer clic, luego puede hacer clic en cualquier enlace)

el siguiente enlace intenta resaltar el problema:
https://stackoverflow.com/a/10340968

En el sitio del cliente, realicé el siguiente cambio y resolví el problema:
https://github.com/wp-media/wp-rocket/blob/7ec9d996f004707a57c4c8476090d5bd943051f0/assets/js/lazyload-scripts.js#L91 -L99

reemplace touchmove con touchmove touchend
reemplace touchstart con touchstart touchend
Después de consultar con @hellofromtonya , dijo: -

Este problema en particular necesitará más investigación para averiguar por qué. En lugar de agregar un parche al código para este caso de borde específico, ¿por qué tienen el problema y por qué esta combinación específica lo soluciona?
Creo que el "por qué" aquí será muy valioso para garantizar que no inyectemos otro problema a otros clientes.

así que añadiré necesidades: etiqueta de I + D a investigar.

Probé esta sugerencia pero desafortunadamente no resolvió el problema en iOS (al menos para mí).

El mismo problema. Probé esta función por primera vez hace unos días y obtuve informes inmediatos de que los enlaces en iOS no funcionaban y necesitaban tocar dos veces para funcionar. Probé en 2 x dispositivos iOS 14 y confirmó este problema, por lo que está desactivado por ahora.

¿Alguna actualización sobre esto?

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

El mismo problema. ¿Alguna actualización?

Experimentando el mismo error con WP-Rocket y Flying Scripts. Reemplazar touchstart y touchmove no ayudó.

Relacionado: https://secure.helpscout.net/conversation/1376564315/226026/

Tengo esto sucediendo en el navegador Chrome de iOS en lugar de Safari. ¿Alguien más puede confirmar?

Hemos eliminado el complemento WP Rocket por ahora, este problema ya está abierto durante 3 meses y no creo que se vaya a solucionar pronto con el recuento actual de problemas abiertos (+400).

Relacionado: https://secure.helpscout.net/conversation/1379195337/226677

Espero que WP-rocket agregue la "solución" pronto :)

¿Alguna actualización de los desarrolladores? ¿Estás trabajando en eso?

@ wp-media / dev Dado que estamos viendo más y más de esto y dado que el error hace que la función sea bastante inutilizable, creo que debemos priorizarla. Lo agregué al siguiente sprint para ver si podemos encontrar una solución. 🙏

@ wp-media / dev Dado que estamos viendo más y más de esto y dado que el error hace que la función sea bastante inutilizable, creo que debemos priorizarla. Lo agregué al siguiente sprint para ver si podemos encontrar una solución. 🙏

Suena bien. Esta función marca una gran diferencia para mi sitio web en cuanto a velocidad, me encantaría tenerla activada de nuevo =)

@arunbasillal no, el problema está marcado como necesidad de I + D, no puede ser parte de un sprint. Para que un problema sea parte de un sprint, primero debe prepararse por completo.

@ wp-media / dev Dado que estamos viendo más y más de esto y dado que el error hace que la función sea bastante inutilizable, creo que debemos priorizarla. Lo agregué al siguiente sprint para ver si podemos encontrar una solución. 🙏

¡Gracias! Realmente me encanta esta función, ¡sería increíble si pudiera usarse en todos mis sitios web!

@ wp-media / productrocket Algunos comentarios del equipo sobre esto:

• Esto es complicado debido a la forma en que funciona iOS.
• La cuestión es que las pantallas táctiles no tienen una buena alternativa de desplazamiento, aparte de tocar y mantener presionado, pero al menos en los dispositivos iOS, eso tiene su propio significado (carga un marco de vista previa del destino del enlace).
• Ahmed también se sumergió profundamente en esto antes, la única solución es usar el tiempo de espera como scripts voladores

Como no hay solución para eso sin cambios significativos en la forma actual en que funciona esta función, es necesario pensar más antes de seguir adelante.

Need y evento mouseWheel y setTimeOut. En los scripts de mouseweel como Infinite Scroll y otros scripts, no funciona correctamente, no carga la página siguiente si solo es mousewhell. En general, esto se aplica a todos los scripts y es fundamental.
Delay JS sin setTimeOut también causa problemas, además de que es necesario hacer clic dos veces en los enlaces. Ejemplo: En el segmento ruso, motor de búsqueda Yandex. El contador puede usar un visor web, este es un registro de las acciones del usuario. En consecuencia, la secuencia de comandos no debe retrasarse: ya que al ver las acciones del usuario, se debe cargar la secuencia de comandos del contador en el sitio. Y, naturalmente, no se carga porque en el visor no se producen acciones, ni "keydown", "mouseover", "touchmove", "touchstart".

Realmente me gustaría saber cómo el equipo de WP Rocket está considerando esto, pero al menos la opción de carga automática de scripts después de x segundos es imprescindible hasta que iOS solucione el problema.

@ wp-media / productrocket Algunos comentarios del equipo sobre esto:

• Esto es complicado debido a la forma en que funciona iOS.
• La cuestión es que las pantallas táctiles no tienen una buena alternativa de desplazamiento, aparte de tocar y mantener presionado, pero al menos en los dispositivos iOS, eso tiene su propio significado (carga un marco de vista previa del destino del enlace).
• Ahmed también se sumergió profundamente en esto antes, la única solución es usar el tiempo de espera como scripts voladores

Como no hay solución para eso sin cambios significativos en la forma actual en que funciona esta función, es necesario pensar más antes de seguir adelante.

¿Algún cronograma para la implementación de la solución de tiempo de espera?

Cargar scripts después de X segundos no es la solución. Hacer eso es justo lo opuesto al interés de esta función. Si podemos encontrar una solución sin hacerlo, intentaremos seguir por este camino.

@arunbasillal @ engahmeds3ed ¿Podrías rehacer algunas pruebas?

Pregunto porque también tuvimos el mismo problema con nuestro sitio web. Pero desde la semana pasada, ya no tenemos el problema. ¿Es la coincidencia de lanzar nuestro nuevo sitio web o una actualización de iOS?

¿Algún cronograma para la implementación de la solución de tiempo de espera?

No podemos proporcionar ninguna ETA.

@GeekPress Cuando veo su sitio con Chrome usando el tamaño de ventana móvil proporcionado por la herramienta de desarrollo (¿Hay algún nombre oficial para esta función? ¿Quizás una vista previa móvil?), El desplazamiento con dos dedos nunca activa scripts retrasados, incluidos análisis. Y para los problemas de doble clic en este hilo, ¿qué página y enlace probó? ¿La primera página?

@GeekPress Cuando veo su sitio con Chrome usando el tamaño de ventana móvil proporcionado por la herramienta de desarrollo (¿Hay algún nombre oficial para esta función? ¿Quizás una vista previa móvil?), El desplazamiento con dos dedos nunca activa scripts retrasados, incluidos análisis. Y para los problemas de doble clic en este hilo, ¿qué página y enlace probó? ¿La primera página?

No creo que las pruebas con Mobile Preview en Chrome Developer Tool den el mismo resultado que las pruebas en un dispositivo iOS debido a la diferencia en los gestos táctiles.

@Roboonl Tienes razón, deberían ser diferentes. Y no lo estoy haciendo. Simplemente me pregunto si está bien para WP Rocket que los scripts nunca se carguen bajo ciertas condiciones.

El setTimeOut es necesario, o más bien necesario.

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

Caso relacionado: https://secure.helpscout.net/conversation/1405169718/233859/

Navegador: Safari y Chrome
Dispositivo: iPhone 11 Pro

Agregar un disparador de tiempo de espera también resolvería https://github.com/wp-media/wp-rocket/issues/3420

Agregar un disparador de tiempo de espera también resolvería # 3420

@piotrbak No estoy seguro de que # 3420 esté relacionado con este problema. Arreglando # 3454 si creo que arregle # 3420

@GeekPress Según tengo entendido, los usuarios se desplazaban por la página web y el Delay JS no se activaba. Entonces no se cargó el script de Google Analytics.

Parece que tienes razón sobre https://github.com/wp-media/wp-rocket/issues/3454 también está relacionado con los móviles. Probablemente cualquiera de esos problemas resolvería el https://github.com/wp-media/wp-rocket/issues/3420
Gracias

¿Cualquier actualización?

@arunbasillal ¿ No puedes agregar una opción en WP-rocket para que esto se excluya en ciertas páginas mientras tanto?
Al igual que Flying Scripts, incluso tienen la opción de excluir Delay JS para ciertas páginas con palabras clave.

otro caso:
https://secure.helpscout.net/conversation/1417928403/237257?folderId=2683093

No creo que las pruebas con Mobile Preview en Chrome Developer Tool den el mismo resultado que las pruebas en un dispositivo iOS debido a la diferencia en los gestos táctiles.

@Roboonl Se ha probado en un dispositivo móvil real. Pruebe nuestro sitio web en un dispositivo móvil, no es necesario que haga clic dos veces.

@roberthedlund Debería haberme perdido algo, no encuentro ninguna forma con Flying Script para tener palabras clave basadas en páginas.

No creo que las pruebas con Mobile Preview en Chrome Developer Tool den el mismo resultado que las pruebas en un dispositivo iOS debido a la diferencia en los gestos táctiles.

@Roboonl Se ha probado en un dispositivo móvil real. Pruebe nuestro sitio web en un dispositivo móvil, no es necesario que haga clic dos veces.

@roberthedlund Debería haberme perdido algo, no encuentro ninguna forma con Flying Script para tener palabras clave basadas en páginas.

https://ibb.co/qYVyhh6

@roberthedlund Bueno, ya puedes hacer eso con WP Rocket. Solo tiene que ir a la pantalla de edición de su página, abrir el metabox «Opciones de WP Rocket» y desactivar la opción Delay JS Execution.

@roberthedlund Bueno, ya puedes hacer eso con WP Rocket. Solo tiene que ir a la pantalla de edición de su página, abrir el metabox «Opciones de WP Rocket» y desactivar la opción Delay JS Execution.

Sí, pero no es ideal hacerlo manualmente en más de 100 páginas, por ejemplo.

¿Cualquier actualización?

Este problema todavía está disponible con la versión 3.8.6 con Chrome en Android. Acabo de probar Fying Scripts, luego este error de doble clic no sucedió. Para iOS, incluso con Flying Scripts, los espectadores deben hacer doble clic.

¿Cualquier actualización? Me parece extraño que todavía no hayas informado a los usuarios de WP-rocket sobre el problema. ¿Qué tan difícil es ingresar un aviso de advertencia antes de que las personas activen la función Delay JS? He visto a tantos usuarios en varios foros que aún no saben que están sufriendo el problema antes de que los haya contactado al respecto. Es un problema bastante grande y creo que debería advertirlo.

@socialpreneur Para iOS, ¿lo estás probando en un móvil real y no con una simulación?

¿Por qué hago la pregunta?

Vuelvo a intentarlo yo mismo en mi iPhone 8 personal y no tengo que hacer clic dos veces en todos los sitios web que probé que tenían Delay JS, incluido nuestro propio sitio web.

@GeekPress En un dispositivo móvil real, incluyéndome a mí y al teléfono de mi cliente, así que tuve que deshabilitar Delay JS por completo. Flying Scripts tampoco funcionó, así que supongo que esta es una limitación de iOS en este momento.

Agregado: parece que hay un script externo o interno que está causando este problema. No todos los sitios que utilizan Delay JS de WP Rocket ni Flying Scripts tienen estos síntomas de doble clic. Hasta ahora, dos sitios que no tienen este problema no utilizan adsense. Creo que necesitaremos reunir más casos para averiguar cuál es la causa.

@GeekPress

@socialpreneur Para iOS, ¿lo estás probando en un móvil real y no con una simulación?

¿Por qué hago la pregunta?

Vuelvo a intentarlo yo mismo en mi iPhone 8 personal y no tengo que hacer clic dos veces en todos los sitios web que probé que tenían Delay JS, incluido nuestro propio sitio web.

Lo probé en muchos sitios web que usan Delay JS y lo probé en teléfonos reales. iPhone 8, iPhone SE, iPhone 11 y todos ellos tenían este problema. A veces funciona con el primer "clic" y luego los demás dejan de funcionar por completo. Entonces el problema es real.

@socialpreneur ¿Ha probado en nuestro sitio web (https://wp-rocket.me)? Como dije, no puedo reproducir el problema después de probar en un par de sitios web.

¿Puedo saber la versión de iOS que está utilizando?

@GeekPress No todo lo que ves es la verdad. Si al menos un usuario de WP Rocket tiene el problema, entonces debemos hacer todo lo posible para resolverlo. Mi iOS es 14.4 y le pediré a mi cliente su versión de iOS. Como dije, dado que esto está sucediendo en todos los complementos de Delay JS (WP Rocket, Flying Scripts, Perfmatters) en cierto sitio con ciertos scripts, esta no es solo su causa.

Puede ser un navegador, pero cuando veo este problema de doble clic, no es solo iOS, sino que lo tengo en mi Android y su Chrome, por lo que claramente no es solo el problema de iOS o Safari. Solo espero que podamos idear un pequeño truco o functions.php adicional para evitar este problema en ciertos sitios.

Te avisaré si encuentro algo.

Agregado 1: OK, aquí está el tercer sitio que tiene el problema. Tal vez pueda reducir algunos guiones comunes.

Agregado 2: Hasta ahora, solo habilitar Delay JS no desencadenará este problema.

Pero cuando configuro algunos scripts, comienza a hacer doble clic / toque.

Agregado 3: Muy bien, esto es lo que encontré. Cuando agrego "tabla de contenido", se activa el doble clic. Puede que no sea lo mismo para todos los demás usuarios que informan esto, pero hasta ahora esta es una de las palabras clave. Table of Contents Plus es el nombre del complemento.

Agregado 4: Aquí hay buenas noticias. Otro sitio que tiene el mismo problema también está usando TOC Plus. @GeekPress ,

Agregado 5: He logrado resolver este problema para uno de los sitios al no demorar el script TOC Plus. Pero la misma solución no funcionó para otro sitio, por lo que parece que hay algunos scripts más que no son compatibles con los retrasos.

Agregado 6: Tengo la sensación de que la versión de jquery puede estar tomando parte de este problema. Un sitio en funcionamiento usa la última versión y el otro sitio que no funciona usa una versión anterior (/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp). Depurando más más ...

@GeekPress Aparte de TOC Plus, también descubrí que adsense es la causa del doble clic / toque. He probado con algunos sitios, y todos los sitios con diferentes temas / complementos tienen lo mismo. Esto sucede con las palabras clave de Adsense a continuación.

• googlesindication
• adsbygoogle
• adsbygoogle.js

Reproducir

1. Cree un sitio de prueba con adsense en cualquier lugar, en la mitad superior de la página o no.
2. Actualice la página, toque el logotipo / texto del encabezado o el ícono del menú móvil. En este punto, Adsense se carga, pero no abre el menú con un solo toque.

Solución

No estoy seguro, ya que así parece cómo está diseñado el script de adsense. Un trabajo considerable son:

1. Cargue adsense siempre después de 1 segundo. por lo que la mayoría de los usuarios no se enfrentarán a este problema.
2. Precargue adsense al pasar el mouse (no estoy seguro de si esto funcionaría en el toque móvil)
3. Dile a los usuarios que no moneticen con adsense, para que los sitios sean mucho más rápidos ...

@GeekPress mi sitio web es celmetro.com y tengo el mismo problema de doble clic cuando habilito Delay Javascript Execution, no importa si no hay scripts para retrasar en la lista.

Relacionado: https://secure.helpscout.net/conversation/1458853194/249184?folderId=3864740
Usan TOC Plus y adsense.
Editado: esta es información adicional de @socialpreneur con grabación de pantalla en el sitio afectado.

Puedo confirmar el problema en mi sitio web a través de Chrome móvil (así como a través de Chrome Desktop configurando la herramienta de desarrollo web para que se cargue como dispositivo móvil)