Wp-rocket: 지연 JS-iOS / Safari에서 링크를 두 번 클릭해야합니다.

플라잉 스크립트 플러그인으로이를보고하는 클라이언트도있었습니다.

검색 한 후 touchstart 또는 touchmove 를 사용하지 않고 touchend 를 사용하지 않고 Safari에서 IOS에 문제가 발생하여 링크를 두 번 클릭하는 문제가 있음을 확인했습니다 (클릭해야 함 첫 번째 클릭으로 화면의 아무 지점이나 다음 링크를 클릭 할 수 있습니다.)

다음 링크는 문제를 강조합니다.
https://stackoverflow.com/a/10340968

고객 사이트에서 다음과 같이 변경하여 문제를 해결했습니다.
https://github.com/wp-media/wp-rocket/blob/7ec9d996f004707a57c4c8476090d5bd943051f0/assets/js/lazyload-scripts.js#L91 -L99
touchmove 를 touchmove touchend 대체
touchstart 를 touchstart touchend 대체

@hellofromtonya 확인한 후 그녀 는 다음 과 같이 말했습니다.

이 특정 문제는 이유를 알아 내기 위해 더 많은 조사가 필요합니다. 이 특정 엣지 케이스에 대한 코드에 패치를 추가하는 대신 문제가있는 이유와이 특정 조합이 문제를 해결하는 이유는 무엇입니까?
여기에서 "이유"는 다른 고객에게 또 다른 문제가 발생하지 않도록하는 데 매우 중요하다고 생각합니다.

그래서 나는 필요를 추가 할 것입니다 : 조사 할 r & d 라벨.

다른 경우 : https://secure.helpscout.net/conversation/1296370691/198532?folderId=377611
고객이 모바일의 chome 및 safari에서 발생한다고보고합니다.

관련 티켓 : https://secure.helpscout.net/conversation/1296809928/198688/

관련 티켓 : https://secure.helpscout.net/conversation/1322836283/206594?folderId=2135277

관련 티켓 : https://secure.helpscout.net/conversation/1334490646/210819/

관련 티켓 : https://secure.helpscout.net/conversation/1336672544/211528/
메모에 메모 및 화면 기록. 이 문제는 Safari와 Chrome 브라우저 모두에서 발생합니다.

검색 한 후 touchstart 또는 touchmove 를 사용하지 않고 touchend 를 사용하지 않고 Safari에서 IOS에 문제가 발생하여 링크를 두 번 클릭하는 문제가 있음을 확인했습니다 (클릭해야 함 첫 번째 클릭으로 화면의 아무 지점이나 다음 링크를 클릭 할 수 있습니다.)

다음 링크는 문제를 강조합니다.
https://stackoverflow.com/a/10340968

고객 사이트에서 다음과 같이 변경하여 문제를 해결했습니다.
https://github.com/wp-media/wp-rocket/blob/7ec9d996f004707a57c4c8476090d5bd943051f0/assets/js/lazyload-scripts.js#L91 -L99

touchmove 를 touchmove touchend 대체
touchstart 를 touchstart touchend 대체
@hellofromtonya 확인한 후 그녀 는 다음 과 같이 말했습니다.

이 특정 문제는 이유를 알아 내기 위해 더 많은 조사가 필요합니다. 이 특정 엣지 케이스에 대한 코드에 패치를 추가하는 대신 문제가있는 이유와이 특정 조합이 문제를 해결하는 이유는 무엇입니까?
여기에서 "이유"는 다른 고객에게 또 다른 문제가 발생하지 않도록하는 데 매우 중요하다고 생각합니다.

그래서 나는 필요를 추가 할 것입니다 : 조사 할 r & d 라벨.

이 제안을 시도했지만 불행히도 iOS에서 문제를 해결하지 못했습니다 (적어도 저에게는).

같은 문제입니다. 며칠 전에 처음으로이 기능을 사용해 보았고 iOS의 링크가 작동하지 않고 작동하려면 두 번 탭해야한다는 즉각적인보고를 받았습니다. 2 x iOS 14 장치에서 시도했으며 현재이 문제가 비활성화되어 있음을 확인했습니다.

이것에 대한 업데이트가 있습니까?

관련 : https://secure.helpscout.net/conversation/1367506767/223234

같은 문제입니다. 업데이트가 있습니까?

WP-Rocket 및 Flying Scripts 모두에서 동일한 버그가 발생합니다. touchstart 및 touchmove 교체는 도움이되지 않았습니다.

관련 : https://secure.helpscout.net/conversation/1376564315/226026/

Safari가 아닌 iOS Chrome 브라우저에서 이런 일이 발생합니다. 다른 사람이 확인할 수 있습니까?

우리는 지금 WP Rocket 플러그인을 삭제했습니다.이 문제는 이미 3 개월 동안 열려 있으며 현재 열린 문제 수 (+400)로 곧 수정 될 것 같지 않습니다.

관련 : https://secure.helpscout.net/conversation/1379195337/226677

희망 WP-rocket은 곧 "수정"을 추가합니다 :)

개발자의 업데이트가 있습니까? 작업 중입니까?

@ wp-media / dev이 문제가 점점 더 많이 발생하고 버그로 인해 기능을 사용할 수 없게 되었기 때문에 우선 순위를 정해야한다고 생각합니다. 해결책을 찾을 수 있는지 확인하기 위해 다음 스프린트에 추가했습니다. 🙏

@ wp-media / dev이 문제가 점점 더 많이 발생하고 버그로 인해 기능을 사용할 수 없게 되었기 때문에 우선 순위를 정해야한다고 생각합니다. 해결책을 찾을 수 있는지 확인하기 위해 다음 스프린트에 추가했습니다. 🙏

좋아. 이 기능은 속도면에서 내 웹 사이트에 큰 차이를 만듭니다. 다시 활성화하고 싶습니다 =)

@arunbasillal 아니요, 문제는 R & D가 필요하다고 표시되어 있습니다. 스프린트의 일부가 될 수 없습니다. 이슈가 스프린트의 일부가 되려면 먼저 완전히 정리되어야합니다.

@ wp-media / dev이 문제가 점점 더 많이 발생하고 버그로 인해 기능을 사용할 수 없게 되었기 때문에 우선 순위를 정해야한다고 생각합니다. 해결책을 찾을 수 있는지 확인하기 위해 다음 스프린트에 추가했습니다. 🙏

감사! 이 기능이 정말 마음에 듭니다. 모든 웹 사이트에서 사용할 수 있다면 정말 좋을 것입니다!

@ wp-media / productrocket 이에 대한 팀의 피드백 :

• iOS 작동 방식 때문에 까다 롭습니다.
• 문제는 터치 스크린이 실제로 터치 앤 홀드를 제외하고는 호버링 대안이 없다는 것입니다.하지만 적어도 iOS 기기에서는 그 자체의 의미가 있습니다 (링크 대상의 미리보기 프레임을로드합니다).
• Ahmed는 전에도 이것에 대해 깊이 파고 들었고 유일한 해결책은 비행 스크립트와 같은 시간 제한을 사용하는 것입니다.

이 기능이 작동하는 현재 방식을 크게 변경하지 않고는 수정 사항이 없으므로 더 진행하기 전에 더 많은 생각이 필요합니다.

Need 및 mouseWheel 이벤트 및 setTimeOut. Infinite Scroll 및 기타 스크립트와 같은 mouseweel 스크립트에서 올바르게 작동하지 않으며 mousewhell 만 있으면 다음 페이지를로드하지 않습니다. 일반적으로 이것은 모든 스크립트에 적용되며 중요합니다.
setTimeOut이없는 지연 JS는 링크를 두 번 클릭해야하는 것 외에도 문제를 유발합니다. 예 : 러시아 세그먼트에서 Yandex 검색 엔진. 카운터는 웹 뷰어를 사용할 수 있으며 이는 사용자 작업의 기록입니다. 따라서 스크립트가 지연되어서는 안됩니다. 사용자 작업을 볼 때 사이트의 카운터 스크립트를로드해야하기 때문입니다. 그리고 뷰어에서 동작, 'keydown', 'mouseover', 'touchmove', 'touchstart'가 발생하지 않기 때문에 자연스럽게로드되지 않습니다.

나는 WP Rocket 팀이 이것을 어떻게 고려하고 있는지 정말로 알고 싶지만, iOS가 문제를 해결할 때까지 적어도 x 초 후 스크립트 자동로드 옵션은 필수입니다.

@ wp-media / productrocket 이에 대한 팀의 피드백 :

• iOS 작동 방식 때문에 까다 롭습니다.
• 문제는 터치 스크린이 실제로 터치 앤 홀드를 제외하고는 호버링 대안이 없다는 것입니다.하지만 적어도 iOS 기기에서는 그 자체의 의미가 있습니다 (링크 대상의 미리보기 프레임을로드합니다).
• Ahmed는 전에도 이것에 대해 깊이 파고 들었고 유일한 해결책은 비행 스크립트와 같은 시간 제한을 사용하는 것입니다.

이 기능이 작동하는 현재 방식을 크게 변경하지 않고는 수정 사항이 없으므로 더 진행하기 전에 더 많은 생각이 필요합니다.

타임 아웃 솔루션 구현에 대한 일정이 있습니까?

X 초 후에 스크립트를로드하는 것은 해결책이 아닙니다. 그렇게하는 것은이 기능의 관심과 반대입니다. 그렇게하지 않고 해결책을 찾을 수 있다면 우리는이 길을 가려고 노력할 것입니다.

@arunbasillal @ engahmeds3ed 몇 가지 테스트를 다시 할 수 있습니까?

나는 우리 웹 사이트에서도 같은 문제가 있었기 때문에 묻습니다. 하지만 지난주부터는 더 이상 문제가 없습니다. 새로운 웹 사이트를 공개 한 것이 우연인가요, 아니면 iOS 업데이트인가요?

타임 아웃 솔루션 구현에 대한 일정이 있습니까?

ETA를 제공 할 수 없습니다.

@GeekPress 개발자 도구에서 제공하는 모바일 창 크기를 사용하여 Chrome에서 사이트를 볼 때 (이 기능의 공식 이름이 있습니까? 모바일 미리보기일까요?) 두 손가락 스크롤은 분석을 포함한 지연된 스크립트를 트리거하지 않습니다. 이 스레드의 두 번 클릭 문제에 대해 테스트 한 페이지와 링크는 무엇입니까? 톱 페이지?

@GeekPress 개발자 도구에서 제공하는 모바일 창 크기를 사용하여 Chrome에서 사이트를 볼 때 (이 기능의 공식 이름이 있습니까? 모바일 미리보기일까요?) 두 손가락 스크롤은 분석을 포함한 지연된 스크립트를 트리거하지 않습니다. 이 스레드의 두 번 클릭 문제에 대해 테스트 한 페이지와 링크는 무엇입니까? 톱 페이지?

Chrome 개발자 도구에서 모바일 미리보기로 테스트하는 것이 터치 제스처의 차이로 인해 iOS 기기에서 실제로 테스트하는 것과 동일한 결과를 제공한다고 생각하지 않습니다.

@Roboonl 당신이 맞아요, 그들은 달라야합니다. 그리고 나는 그렇게하지 않습니다. 스크립트가 특정 조건에서로드되지 않는 것이 WP Rocket에 대해 괜찮은지 궁금합니다.

setTimeOut이 필요하거나 오히려 필요합니다.

관련 : https://secure.helpscout.net/conversation/1406743456/234374/

관련 사례 : https://secure.helpscout.net/conversation/1405169718/233859/

브라우저 : Safari 및 Chrome
기기 : iPhone 11 Pro

시간 초과 트리거를 추가하면 https://github.com/wp-media/wp-rocket/issues/3420 도 해결

시간 초과 트리거를 추가하면 # 3420도 해결됩니다.

@piotrbak # 3420이이 문제와 관련이 있는지 확실하지 않습니다. 수정 # 3454 수정 # 3420 생각해야

@GeekPress 내 이해에 따르면 사용자가 웹 페이지를 스크롤하고 Delay JS가 트리거되지 않았습니다. 그때 Google Analytics 스크립트가로드되지 않았습니다.

https://github.com/wp-media/wp-rocket/issues/3454 에 대해 당신이 옳은 것 같습니다. 그것은 또한 모바일과 관련이 있습니다. 아마도 이러한 문제 중 하나라도 https://github.com/wp-media/wp-rocket/issues/3420을 해결할 것입니다.
감사

모든 업데이트?

@arunbasillal WP-rocket에 옵션을 추가하여 그 동안 특정 페이지에서 제외 할 수 있습니까?
Flying Scripts와 마찬가지로 키워드가있는 특정 페이지에 대해 Delay JS를 제외하는 옵션도 있습니다.

다른 경우 :
https://secure.helpscout.net/conversation/1417928403/237257?folderId=2683093

Chrome 개발자 도구에서 모바일 미리보기로 테스트하는 것이 터치 제스처의 차이로 인해 iOS 기기에서 실제로 테스트하는 것과 동일한 결과를 제공한다고 생각하지 않습니다.

@Roboonl 실제 모바일 장치에서 테스트되었습니다. 두 번 클릭 할 필요가 없습니다.

@roberthedlund 나는 무언가를 놓 쳤어 야했는데, 나는 Flying Script로 페이지를 기반으로 키워드를 가질 방법을 찾지 못했습니다.

Chrome 개발자 도구에서 모바일 미리보기로 테스트하는 것이 터치 제스처의 차이로 인해 iOS 기기에서 실제로 테스트하는 것과 동일한 결과를 제공한다고 생각하지 않습니다.

@Roboonl 실제 모바일 장치에서 테스트되었습니다. 두 번 클릭 할 필요가 없습니다.

@roberthedlund 나는 무언가를 놓 쳤어 야했는데, 나는 Flying Script로 페이지를 기반으로 키워드를 가질 방법을 찾지 못했습니다.

https://ibb.co/qYVyhh6

@roberthedlund 글쎄, 당신은 이미 WP 로켓으로도 할 수 있습니다. 페이지 편집 화면으로 가서«WP Rocket Options»메타 박스를 열고 Delay JS Execution 옵션을 끄면됩니다.

@roberthedlund 글쎄, 당신은 이미 WP 로켓으로도 할 수 있습니다. 페이지 편집 화면으로 가서«WP Rocket Options»메타 박스를 열고 Delay JS Execution 옵션을 끄면됩니다.

예를 들어 100 개 이상의 페이지에서 수동으로 수행하는 것은 이상적이지 않습니다.

모든 업데이트?

이 문제는 Android 용 Chrome 버전 3.8.6에서 계속 사용할 수 있습니다. 방금 Fying Scripts를 시도했지만이 두 번 클릭 버그가 발생하지 않았습니다. iOS의 경우 플라잉 스크립트를 사용하더라도 뷰어는 더블 클릭해야합니다.

모든 업데이트? 나는 당신이 여전히 WP-rocket 사용자들에게 문제에 대해 어떤 식 으로든 알리지 않았다는 것이 이상합니다. 사람들이 Delay JS 기능을 활성화하기 전에 경고 알림을 입력하는 것이 얼마나 어렵습니까? 여러 포럼에서 내가 그들에게 연락하기 전에 자신이 문제로 고통 받고 있음을 아직 알지 못하는 많은 사용자를 보았습니다. 그것은 꽤 큰 문제이고 당신이 그것에 대해 경고해야한다고 생각합니다.

@socialpreneur iOS의 경우 시뮬레이션이 아닌 실제 모바일에서 시도하고 있습니까?

내가 질문하는 이유는 무엇입니까?

내 개인 iPhone 8에서 다시 시도하고 우리 웹 사이트를 포함하여 Delay JS가있는 모든 웹 사이트를 두 번 클릭 할 필요가 없습니다.

@GeekPress 나와 내 고객의 전화를 포함한 실제 모바일에서 Delay JS를 완전히 비활성화해야했습니다. Flying Scripts도 작동하지 않았으므로 현재 iOS 제한 사항이라고 생각합니다.

추가됨 :이 문제를 일으키는 외부 또는 내부 스크립트가있는 것 같습니다. WP Rocket 또는 Flying Scripts의 Delay JS를 사용하는 모든 사이트에 이러한 두 번 클릭 증상이있는 것은 아닙니다. 지금까지이 문제가없는 두 사이트는 애드 센스를 사용하지 않습니다. 원인을 파악하려면 더 많은 사례를 수집해야 할 것 같습니다.

@GeekPress

@socialpreneur iOS의 경우 시뮬레이션이 아닌 실제 모바일에서 시도하고 있습니까?

내가 질문하는 이유는 무엇입니까?

내 개인 iPhone 8에서 다시 시도하고 우리 웹 사이트를 포함하여 Delay JS가있는 모든 웹 사이트를 두 번 클릭 할 필요가 없습니다.

Delay JS를 사용하는 많은 웹 사이트에서 시도해 보았고 실제 전화에서도 시도했습니다. iPhone 8, iPhone SE, iPhone 11 등 모두이 문제가있었습니다. 때로는 첫 번째 "클릭"에서 작동하고 나머지는 완전히 작동하지 않습니다. 그래서 문제는 진짜입니다.

@socialpreneur 저희 웹 사이트 (https://wp-rocket.me)를 사용해 보셨습니까? 내가 말했듯이 몇 개의 웹 사이트에서 시도한 후에도 문제를 재현 할 수 없습니다.

사용중인 iOS 버전을 알 수 있습니까?

@GeekPress 당신이 보는 모든 것이 진실은 아닙니다. 적어도 한 명의 WP Rocket 사용자에게 문제가있는 경우 문제를 해결하기 위해 모든 작업을 수행해야합니다. 내 iOS는 14.4이고 클라이언트에게 iOS 버전을 물어볼 것입니다. 내가 말했듯이, 특정 스크립트가있는 특정 사이트의 모든 Delay JS 플러그인 (WP Rocket, Flying Scripts, Perfmatters)에서 이런 일이 발생하기 때문에 이것이 당신의 원인 만이 아닙니다.

브라우저 일 수도 있지만이 두 번 클릭 문제를 보면 iOS뿐 아니라 Android와 Chrome에도 문제가 있으므로 iOS 나 Safari 문제 만있는 것이 아닙니다. 특정 사이트에서이 문제를 우회하기 위해 약간의 해킹이나 추가 functions.php를 만들 수 있기를 바랍니다.

뭔가 찾으면 알려 드리겠습니다.

추가됨 1 : 좋습니다. 여기에 문제가있는 세 번째 사이트가 있습니다. 일반적인 스크립트의 범위를 좁힐 수 있습니다.

추가 2 : 지금까지 Delay JS를 활성화하는 것만으로는이 문제가 발생하지 않습니다.

하지만 스크립트를 설정하면 더블 클릭 / 탭이 발생합니다.

추가 3 : 알겠습니다. 여기에 제가 찾은 내용이 있습니다. "목차"를 추가하면 두 번 클릭하는 것이 트리거됩니다. 이것을보고하는 다른 모든 사용자에게 동일하지는 않을 수 있지만 지금까지 이것은 키워드 중 하나입니다. 목차 Plus는 플러그인 이름입니다.

추가 4 : 여기 좋은 소식이 있습니다. 같은 문제가있는 다른 사이트도 TOC Plus를 사용하고 있습니다. @GeekPress ,이 플러그인을 활성화 한 상태에서 테스트하십시오. 그리고 모든 지원 담당자에게 동일한 문제가있는 사용자가 자신의 사이트에서도이 플러그인을 사용하고 있는지 확인하도록합니다. 최대한 빨리.

추가 5 : TOC Plus 스크립트를 지연시키지 않음으로써 사이트 중 하나 에서이 문제를 해결했습니다. 그러나 동일한 솔루션이 다른 사이트에서는 작동하지 않았으므로 지연되지 않는 스크립트가 더 많이있는 것 같습니다.

추가 6 : jquery 버전 이이 문제의 일부를 차지하고 있다고 생각합니다. 한 작업 사이트는 최신 버전을 사용하고 다른 작업 사이트는 이전 버전 (/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp)을 사용합니다. 추가 디버깅 중 ...

@GeekPress TOC Plus 외에도 애드 센스가 더블 클릭 / 탭의 원인이라는 것을 발견했습니다. 몇 개의 사이트에서 테스트했는데 테마 / 플러그인이 다른 모든 사이트가 동일합니다. 이것은 아래의 애드 센스 키워드에서 발생합니다.

• googlesyndication
• adsbygoogle
• adsbygoogle.js

재현하려면

1. 스크롤없이 볼 수있는 부분이든 아니든 어디에서나 애드 센스로 테스트 사이트를 구축하십시오.
2. 페이지를 새로 고침하고 헤더 로고 / 텍스트 또는 모바일 메뉴 아이콘을 탭합니다. 이 시점에서 애드 센스가로드되지만 한 번의 탭으로 메뉴가 열리지 않습니다.

해결책

이것이 애드 센스 스크립트가 어떻게 디자인되었는지 잘 모르겠습니다. 해결 방법은 다음과 같습니다.

1. 항상 1 초 후에 애드 센스를로드합니다. 따라서 대부분의 사용자는이 문제에 직면하지 않습니다.
2. 마우스 오버시 애드 센스 미리로드 (모바일 탭에서 작동하는지 확실하지 않음)
3. 사용자에게 애드 센스로 수익을 창출하지 말라고 말하면 사이트가 훨씬 빨라집니다.

@GeekPress 내 웹 사이트는 celmetro.com이며 Delay Javascript Execution을 활성화 할 때 동일한 두 번 클릭 문제가 발생합니다. 목록에 지연 할 스크립트가 없어도 상관 없습니다.

관련 : https://secure.helpscout.net/conversation/1458853194/249184?folderId=3864740
그들은 TOC Plus와 애드 센스를 사용합니다.
수정 됨 : 영향을받는 사이트의 화면 녹화와 함께 @socialpreneur의 추가 정보입니다.

내 웹 사이트에서 Chrome 모바일을 통해 문제를 확인할 수 있습니다 (또한 Chrome 데스크톱을 통해 웹 개발 도구를 모바일로로드하도록 설정).