Wp-rocket: Delay JS - Tautan perlu diklik dua kali di iOS / Safari

Saya memiliki klien yang melaporkan hal ini dengan plugin Flying Scripts juga.

Setelah mencari, saya menemukan bahwa ada masalah di iOS dengan Safari terkait dengan penggunaan touchstart atau touchmove tanpa menggunakan touchend yang membuat tautan masalah klik dua kali (Anda perlu mengklik titik mana pun dari layar sebagai klik pertama maka Anda dapat mengklik tautan apa pun)

tautan berikut mencoba untuk menyoroti masalah tersebut:
https://stackoverflow.com/a/10340968

Di situs pelanggan saya membuat perubahan berikut dan memecahkan masalah:
https://github.com/wp-media/wp-rocket/blob/7ec9d996f004707a57c4c8476090d5bd943051f0/assets/js/lazyload-scripts.js#L91 -L99
ganti touchmove dengan touchmove touchend
ganti touchstart dengan touchstart touchend

Setelah memeriksa dengan @hellofromtonya , dia berkata: -

Masalah khusus ini perlu penyelidikan lebih lanjut untuk mencari tahu alasannya. Daripada menambahkan tambalan ke kode untuk kasus tepi khusus ini, mengapa mereka memiliki masalah dan mengapa kombinasi khusus ini memperbaikinya?
Saya pikir "mengapa" di sini akan sangat berharga untuk memastikan kami tidak menyuntikkan masalah lain ke pelanggan lain.

jadi saya akan menambahkan kebutuhan: r & d label yang akan diteliti.

Kasus lain: https://secure.helpscout.net/conversation/1296370691/198532?folderId=377611
Pelanggan melaporkan hal itu terjadi di chome dan safari di ponsel

Tiket terkait: https://secure.helpscout.net/conversation/1296809928/198688/

Tiket terkait: https://secure.helpscout.net/conversation/1322836283/206594?folderId=2135277

Tiket terkait: https://secure.helpscout.net/conversation/1334490646/210819/

Tiket terkait: https://secure.helpscout.net/conversation/1336672544/211528/
Catatan dan perekaman layar di catatan. Masalahnya terjadi di browser Safari dan Chrome.

Setelah mencari, saya menemukan bahwa ada masalah di iOS dengan Safari terkait dengan penggunaan touchstart atau touchmove tanpa menggunakan touchend yang membuat tautan masalah klik dua kali (Anda perlu mengklik titik mana pun dari layar sebagai klik pertama maka Anda dapat mengklik tautan apa pun)

tautan berikut mencoba untuk menyoroti masalah tersebut:
https://stackoverflow.com/a/10340968

Di situs pelanggan saya membuat perubahan berikut dan memecahkan masalah:
https://github.com/wp-media/wp-rocket/blob/7ec9d996f004707a57c4c8476090d5bd943051f0/assets/js/lazyload-scripts.js#L91 -L99

ganti touchmove dengan touchmove touchend
ganti touchstart dengan touchstart touchend
Setelah memeriksa dengan @hellofromtonya , dia berkata: -

Masalah khusus ini perlu penyelidikan lebih lanjut untuk mencari tahu alasannya. Daripada menambahkan tambalan ke kode untuk kasus tepi khusus ini, mengapa mereka memiliki masalah dan mengapa kombinasi khusus ini memperbaikinya?
Saya pikir "mengapa" di sini akan sangat berharga untuk memastikan kami tidak menyuntikkan masalah lain ke pelanggan lain.

jadi saya akan menambahkan kebutuhan: r & d label yang akan diteliti.

Saya mencoba saran ini tetapi sayangnya tidak menyelesaikan masalah di iOS (setidaknya untuk saya).

Permasalahan yang sama. Mencoba fitur ini untuk pertama kalinya beberapa hari yang lalu dan segera mendapat laporan bahwa tautan di iOS tidak berfungsi dan mereka perlu ketuk dua kali agar berfungsi. Mencoba pada 2 x perangkat iOS 14 dan mengonfirmasi masalah ini sehingga dinonaktifkan untuk saat ini.

Ada pembaruan tentang ini?

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

Permasalahan yang sama. Ada pembaruan?

Mengalami bug yang sama dengan WP-Rocket dan Flying Scripts. Mengganti touchstart dan touchmove tidak membantu.

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

Saya mengalami ini di browser iOS Chrome daripada Safari. Adakah yang bisa mengonfirmasi?

Kami telah menghentikan plugin WP Rocket untuk saat ini, masalah ini sudah terbuka selama 3 bulan dan saya tidak merasa ini akan diperbaiki dalam waktu dekat dengan jumlah masalah terbuka saat ini (+400).

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

Berharap WP-roket segera menambahkan "perbaikan" :)

Adakah pembaruan dari pengembang? Apakah Anda sedang mengerjakannya?

@ wp-media / dev Karena kita melihat lebih banyak dan lebih banyak lagi dan karena bug membuat fitur ini tidak dapat digunakan, saya pikir kita perlu memprioritaskannya. Saya telah menambahkannya ke sprint berikutnya untuk melihat apakah kita dapat menemukan solusinya. 🙏

@ wp-media / dev Karena kita melihat lebih banyak dan lebih banyak lagi dan karena bug membuat fitur ini tidak dapat digunakan, saya pikir kita perlu memprioritaskannya. Saya telah menambahkannya ke sprint berikutnya untuk melihat apakah kita dapat menemukan solusinya. 🙏

Kedengarannya bagus. Fitur ini membuat perbedaan besar untuk situs web saya dalam hal kecepatan, ingin sekali mengaktifkannya lagi =)

@arunbasillal tidak, masalah ini ditandai sebagai perlu R&D, tidak bisa menjadi bagian dari sprint. Agar masalah menjadi bagian dari sprint, itu harus dipersiapkan sepenuhnya terlebih dahulu.

@ wp-media / dev Karena kita melihat lebih banyak dan lebih banyak lagi dan karena bug membuat fitur ini tidak dapat digunakan, saya pikir kita perlu memprioritaskannya. Saya telah menambahkannya ke sprint berikutnya untuk melihat apakah kita dapat menemukan solusinya. 🙏

Terima kasih! Saya sangat menyukai fitur ini - akan luar biasa jika dapat digunakan di semua situs web saya!

@ wp-media / productrocket Beberapa masukan dari tim tentang ini:

• Ini rumit karena cara kerja iOS.
• Masalahnya adalah layar sentuh tidak benar-benar memiliki alternatif hover yang bagus, selain mungkin sentuh-dan-tahan - tetapi setidaknya pada perangkat iOS, yang memiliki signifikansinya sendiri (memuat bingkai pratinjau dari tujuan tautan).
• Ahmed mendalami hal ini sebelumnya, satu-satunya solusi adalah menggunakan batas waktu seperti skrip terbang

Karena tidak ada perbaikan untuk itu tanpa perubahan signifikan pada cara kerja fitur ini saat ini, maka perlu pemikiran lebih lanjut sebelum melangkah lebih jauh.

Need dan acara mouseWheel dan setTimeOut. Pada skrip mouseweel seperti Infinite Scroll dan skrip lainnya, berfungsi tidak benar, tidak memuat halaman berikutnya jika hanya mousewhell. Secara umum, ini berlaku untuk semua skrip, dan itu penting.
Delay JS tanpa setTimeOut juga menimbulkan masalah, selain link perlu di klik dua kali. Contoh: Di segmen Rusia, mesin pencari Yandex. Penghitung dapat menggunakan webviewer, ini adalah catatan tindakan pengguna. Karenanya, skrip tidak boleh ditunda: karena saat melihat tindakan pengguna, skrip balasan di situs harus dimuat. Dan secara alami tidak memuat karena tidak ada tindakan, tidak ada 'keydown', 'mouseover', 'touchmove', 'touchstart' terjadi di penampil.

Saya benar-benar ingin tahu bagaimana tim WP Rocket mempertimbangkan hal ini, tetapi setidaknya opsi muat otomatis skrip setelah x detik adalah suatu keharusan sampai iOS memperbaiki masalah tersebut.

@ wp-media / productrocket Beberapa masukan dari tim tentang ini:

• Ini rumit karena cara kerja iOS.
• Masalahnya adalah layar sentuh tidak benar-benar memiliki alternatif hover yang bagus, selain mungkin sentuh-dan-tahan - tetapi setidaknya pada perangkat iOS, yang memiliki signifikansinya sendiri (memuat bingkai pratinjau dari tujuan tautan).
• Ahmed mendalami hal ini sebelumnya, satu-satunya solusi adalah menggunakan batas waktu seperti skrip terbang

Karena tidak ada perbaikan untuk itu tanpa perubahan signifikan pada cara kerja fitur ini saat ini, maka perlu pemikiran lebih lanjut sebelum melangkah lebih jauh.

Adakah jadwal untuk implementasi solusi batas waktu?

Memuat skrip setelah X detik bukanlah solusinya. Melakukan hal itu berlawanan dengan minat fitur ini. Jika kami dapat menemukan solusi tanpa melakukan itu, kami akan mencoba melanjutkan dengan cara ini.

@arunbasillal @ engahmeds3ed Bisakah Anda mengulangi beberapa tes?

Saya bertanya karena kami juga memiliki masalah yang sama dengan situs web kami. Tapi sejak minggu lalu, kami tidak punya masalah lagi. Apakah ini kebetulan merilis situs web baru kami, atau pembaruan iOS?

Adakah jadwal untuk implementasi solusi batas waktu?

Kami tidak dapat memberikan ETA apa pun.

@GeekPress Ketika saya melihat situs Anda dengan Chrome menggunakan ukuran jendela seluler yang disediakan oleh alat Dev (Apakah ada nama resmi untuk fitur ini? Mungkin pratinjau seluler?), Pengguliran dua jari tidak pernah memicu skrip yang tertunda termasuk analitik. Dan untuk masalah klik dua kali pada utas ini, halaman dan link manakah yang Anda uji? Halaman teratas?

@GeekPress Ketika saya melihat situs Anda dengan Chrome menggunakan ukuran jendela seluler yang disediakan oleh alat Dev (Apakah ada nama resmi untuk fitur ini? Mungkin pratinjau seluler?), Pengguliran dua jari tidak pernah memicu skrip yang tertunda termasuk analitik. Dan untuk masalah klik dua kali pada utas ini, halaman dan link manakah yang Anda uji? Halaman teratas?

Saya tidak berpikir pengujian dengan Pratinjau Seluler di Alat Pengembang Chrome memberikan hasil yang sama seperti pengujian sebenarnya pada perangkat iOS karena perbedaan dalam gerakan sentuh.

@Roboonl Anda benar, mereka harus berbeda. Dan saya tidak melakukannya. Saya hanya ingin tahu apakah OK untuk WP Rocket bahwa skrip tidak pernah dimuat dalam kondisi tertentu.

SetTimeOut diperlukan, atau lebih tepatnya.

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

Kasus terkait: https://secure.helpscout.net/conversation/1405169718/233859/

Browser: Safari dan chrome
Perangkat: iPhone 11 Pro

Menambahkan pemicu waktu tunggu juga akan menyelesaikan https://github.com/wp-media/wp-rocket/issues/3420

Menambahkan pemicu batas waktu juga akan menyelesaikan # 3420

@piotrbak Tidak yakin # 3420 terkait dengan masalah ini. Memperbaiki # 3454 haruskah menurut saya memperbaiki # 3420

@GeekPress Dari pemahaman saya, pengguna melihat-lihat halaman web dan Delay JS tidak terpicu. Skrip Google Analytics tidak dimuat saat itu.

Tampaknya Anda benar tentang https://github.com/wp-media/wp-rocket/issues/3454 ini juga terkait dengan ponsel. Mungkin salah satu dari masalah tersebut akan menyelesaikan https://github.com/wp-media/wp-rocket/issues/3420
Terima kasih

Perubahan apapun?

@arunbasillal Tidak
Seperti Flying Scripts, mereka bahkan memiliki opsi untuk mengecualikan JS Delay untuk halaman tertentu dengan kata kunci.

kasus lain:
https://secure.helpscout.net/conversation/1417928403/237257?folderId=2683093

Saya tidak berpikir pengujian dengan Pratinjau Seluler di Alat Pengembang Chrome memberikan hasil yang sama seperti pengujian sebenarnya pada perangkat iOS karena perbedaan dalam gerakan sentuh.

@Roboonl Ini telah diuji pada perangkat seluler nyata. Silakan coba situs web kami di seluler, Anda tidak perlu mengklik dua kali.

@roberthedlund Seharusnya saya melewatkan sesuatu, saya tidak menemukan cara dengan Flying Script untuk memiliki kata kunci berdasarkan halaman.

Saya tidak berpikir pengujian dengan Pratinjau Seluler di Alat Pengembang Chrome memberikan hasil yang sama seperti pengujian sebenarnya pada perangkat iOS karena perbedaan dalam gerakan sentuh.

@Roboonl Ini telah diuji pada perangkat seluler nyata. Silakan coba situs web kami di seluler, Anda tidak perlu mengklik dua kali.

@roberthedlund Seharusnya saya melewatkan sesuatu, saya tidak menemukan cara dengan Flying Script untuk memiliki kata kunci berdasarkan halaman.

https://ibb.co/qYVyhh6

@roberthedlund Nah, Anda sudah bisa melakukannya dengan WP Rocket juga. Anda baru saja masuk ke layar edit halaman Anda, buka metabox «WP Rocket Options», dan matikan opsi Delay JS Execution.

@roberthedlund Nah, Anda sudah bisa melakukannya dengan WP Rocket juga. Anda baru saja masuk ke layar edit halaman Anda, buka metabox «WP Rocket Options», dan matikan opsi Delay JS Execution.

Ya, tetapi tidak ideal untuk melakukannya secara manual pada 100+ halaman sebagai contoh.

Perubahan apapun?

Masalah ini masih tersedia dengan versi 3.8.6 dengan Chrome di Android. Saya baru saja mencoba Fying Scripts, maka bug double click ini tidak terjadi. Untuk iOS, bahkan dengan Skrip Terbang, pemirsa harus mengklik dua kali.

Perubahan apapun? Saya merasa aneh bahwa Anda masih belum memberi tahu pengguna WP-rocket tentang masalah ini. Seberapa sulit untuk memasukkan pemberitahuan peringatan sebelum orang mengaktifkan fitur Delay JS? Telah melihat begitu banyak pengguna di berbagai forum yang belum tahu bahwa mereka menderita masalah tersebut sebelum saya menghubungi mereka tentang masalah itu. Ini masalah yang cukup besar dan saya pikir Anda harus memperingatkannya.

@socialpreneur Untuk iOS, apakah Anda mencoba di perangkat seluler nyata, dan bukan dengan simulasi?

Mengapa saya mengajukan pertanyaan itu?

Saya mencoba lagi sendiri di iPhone 8 pribadi saya dan saya tidak perlu mengklik dua kali di semua situs web yang saya coba yang memiliki Delay JS termasuk situs web kami sendiri.

@GeekPress Di ponsel nyata, termasuk saya dan ponsel klien saya, jadi saya harus menonaktifkan Delay JS sepenuhnya. Flying Scripts juga tidak berfungsi, jadi saya rasa ini adalah batasan iOS sekarang.

Ditambahkan: Sepertinya ada skrip eksternal atau internal yang menyebabkan masalah ini. Tidak setiap situs yang menggunakan Delay JS dari WP Rocket atau Flying Scripts memiliki gejala klik ganda ini. Sejauh ini dua situs yang tidak mengalami masalah ini tidak menggunakan adsense. Saya pikir kita perlu mengumpulkan lebih banyak kasus untuk mencari tahu penyebabnya.

@Tokopedia

@socialpreneur Untuk iOS, apakah Anda mencoba di perangkat seluler nyata, dan bukan dengan simulasi?

Mengapa saya mengajukan pertanyaan itu?

Saya mencoba lagi sendiri di iPhone 8 pribadi saya dan saya tidak perlu mengklik dua kali di semua situs web yang saya coba yang memiliki Delay JS termasuk situs web kami sendiri.

Saya telah mencoba di banyak situs web yang menggunakan Delay JS, dan telah mencoba di ponsel sungguhan. iPhone 8, iPhone SE, iPhone 11 dan semuanya mengalami masalah ini. Kadang-kadang itu bekerja pada "klik" pertama kemudian yang lain benar-benar berhenti bekerja. Jadi masalahnya nyata.

@socialpreneur Sudahkah Anda mencoba di situs web kami (https://wp-rocket.me)? Seperti yang saya katakan, saya tidak dapat mereproduksi masalah tersebut setelah mencoba di beberapa situs web.

Bolehkah saya mengetahui versi iOS yang Anda gunakan?

@GeekPress Tidak semua yang Anda lihat adalah kebenaran. Jika setidaknya satu pengguna WP Rocket mengalami masalah, maka kami perlu melakukan segalanya untuk menyelesaikan masalah tersebut. IOS saya adalah 14.4, dan saya akan meminta klien saya untuk versi iOS-nya. Seperti yang saya katakan, karena ini terjadi pada setiap plugin Delay JS di luar sana (WP Rocket, Flying Scripts, Perfmatters) di situs tertentu dengan skrip tertentu, ini bukan hanya tujuan Anda.

Ini mungkin browser, tetapi ketika saya melihat masalah klik dua kali ini, itu bukan hanya iOS, tetapi saya memilikinya di Android saya dan Chrome-nya jadi jelas bukan hanya masalah iOS atau Safari. Saya hanya berharap kami dapat menemukan sedikit peretasan atau fungsi tambahan.php untuk mengatasi masalah ini di situs tertentu.

Saya akan memberi tahu Anda jika saya menemukan sesuatu.

Ditambahkan 1: Oke, inilah situs ketiga yang mengalami masalah. Mungkin saya bisa mempersempit beberapa skrip umum.

Ditambahkan 2: Sejauh ini hanya mengaktifkan Delay JS tidak akan memicu masalah ini.

Tetapi ketika saya mengatur beberapa skrip, klik / ketuk dua kali mulai terjadi.

Ditambahkan 3: Baiklah, ini yang saya temukan. Saat saya menambahkan "daftar isi", klik ganda akan terpicu. Ini mungkin tidak sama untuk semua pengguna lain yang melaporkan ini, tetapi sejauh ini ini adalah salah satu kata kunci. Daftar Isi Plus adalah nama plugin.

Ditambahkan 4: Inilah kabar baik. Situs lain yang mengalami masalah yang sama juga menggunakan TOC Plus. @GeekPress , silakan uji dengan plugin ini diaktifkan. Dan beri tahu semua staf dukungan Anda untuk mengonfirmasi apakah pengguna yang memiliki masalah yang sama juga menggunakan plugin ini di situs mereka. SECEPAT MUNGKIN.

Ditambahkan 5: Saya telah berhasil menyelesaikan masalah ini untuk salah satu situs dengan tidak menunda skrip TOC Plus. Tetapi solusi yang sama tidak berfungsi untuk situs lain, jadi tampaknya ada lebih banyak skrip yang tidak ramah penundaan.

Ditambahkan 6: Saya merasa versi jquery mungkin mengambil bagian dari masalah ini. Satu situs yang berfungsi menggunakan yang terbaru, dan situs lainnya yang tidak berfungsi menggunakan versi lama (/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp). Debugging lebih lanjut ...

@GeekPress Selain TOC Plus, saya juga menemukan bahwa adsense adalah penyebab double click / tap. Saya telah menguji dengan beberapa situs, dan semua situs dengan tema / plugin berbeda memiliki hal yang sama. Ini terjadi dengan kata kunci adsense di bawah ini.

• googlesyndication
• adsbygoogle
• adsbygoogle.js

Untuk mereproduksi

1. Buat situs uji dengan adsense di mana saja, di paro atas atau tidak.
2. Segarkan halaman, ketuk logo / teks header atau ikon menu seluler. Pada titik ini, adsense dimuat, tetapi tidak akan membuka menu dengan satu ketukan.

Larutan

Saya tidak yakin karena ini tampaknya bagaimana skrip adsense dirancang. Solusi yang cukup banyak adalah:

1. Selalu muat adsense setelah 1 detik. sehingga sebagian besar pengguna tidak akan menghadapi masalah ini.
2. Pramuat adsense dengan mouse hover (tidak yakin apakah ini akan bekerja pada mobile tap)
3. Beri tahu pengguna untuk tidak menghasilkan uang dengan adsense, sehingga situs menjadi lebih cepat ...

@GeekPress situs web saya adalah celmetro.com dan saya memiliki masalah klik ganda yang sama ketika saya mengaktifkan Delay Javascript Execution, tidak masalah jika tidak ada skrip yang tertunda dalam daftar.

Terkait: https://secure.helpscout.net/conversation/1458853194/249184?folderId=3864740
Mereka menggunakan TOC Plus dan adsense.
Diedit: ini adalah info tambahan dari @socialpreneur dengan rekaman layar di situs yang terpengaruh.

Saya dapat mengonfirmasi masalah di situs web saya melalui seluler Chrome (serta melalui Chrome Desktop menyetel alat pengembang web untuk memuat sebagai seluler)