Haruskah saya mengaktifkan atau menonaktifkan javascript?

Chris Ashton adalah Pengembang yang bekerja untuk Layanan Digital Pemerintah. Ketika dia tidak sibuk membuat kode, dia menikmati bernyanyi sebagai penyanyi tenor di BBC Symphony Chorus. Selengkapnya tentang Chris ↬

Buletin Email

Kiat mingguan tentang front-end & UX
Dipercaya oleh 200.000+ orang

• 
  Sistem Desain yang Sukses

• 
  Front-End SmashingConf 2023

• 
  Bersiaplah untuk peran komunikasi hari ini MS Northwestern dalam Desain Informasi

• 
  Pola Desain Antarmuka Cerdas, kursus video 9 jam

• 
  Pola Desain Antarmuka Cerdas, kursus video 9 jam

Artikel ini adalah bagian dari seri di mana saya mencoba menggunakan web di bawah berbagai batasan, yang mewakili demografi pengguna tertentu. Saya berharap dapat mengangkat profil kesulitan yang dihadapi oleh orang-orang nyata, yang dapat dihindari jika kita merancang dan mengembangkan dengan cara yang bersimpati dengan kebutuhan mereka. Minggu ini, saya menonaktifkan JavaScript

Mengapa noscript_ Penting

Pertama, untuk memperjelas, ada perbedaan antara mendukung pengalaman noscript dan menggunakan tag noscript. Secara umum, saya tidak menyukai tag noscript, karena tag tersebut memecah halaman web Anda menjadi versi JavaScript dan non-JavaScript daripada bekerja dari dasar konten yang sama, sehingga pengalaman menjadi berantakan dan hal-hal menjadi terlewatkan

Anda mungkin memiliki banyak konten berguna di dalam tag noscript Anda, tetapi jika saya menggunakan browser yang mendukung JavaScript, saya tidak akan melihat semua itu — saya akan terjebak menunggu pengalaman JS untuk diunduh. Ketika saya mengacu pada pengalaman 'noscript', yang saya maksud adalah pengalaman menggunakan halaman web tanpa JavaScript, daripada penggunaan tag secara eksplisit

API MIDI Web. Mulai

Apakah mungkin menggunakan alat musik digital sebagai input browser? . Bagian terbaiknya adalah, ini cukup cepat dan mudah diterapkan dan bahkan membuat proyek yang sangat menyenangkan. Baca artikel →

Jadi, siapa yang peduli dengan pengguna yang tidak memiliki JavaScript?

Yah, mereka memang ada, meski dalam jumlah kecil. kira-kira 0. 2% pengguna di Inggris telah menonaktifkan JavaScript. Tetapi melihat jumlah pengguna yang secara eksplisit menonaktifkan JavaScript tidak ada gunanya

Saya teringat akan kutipan dari Jake Archibald ini

“Semua pengguna Anda bukan JS saat mereka mengunduh JS Anda. ”

Bayangkan para pengguna yang mengaktifkan JavaScript tetapi tidak mendapatkan pengalaman JavaScript, karena sejumlah alasan, termasuk pemblokiran perusahaan atau lokal atau pengupasan elemen JavaScript, kesalahan JavaScript yang ada di browser dari add-on dan toolbar browser, jaringan . BuzzFeed baru-baru ini mengungkapkan bahwa sekitar 1% permintaan untuk waktu habis JavaScript mereka, setara dengan 13 juta permintaan gagal per bulan

Lebih banyak setelah melompat. Lanjutkan membaca di bawah ↓

Temui Smashing Online Workshops di front-end & UX, dengan takeaway praktis, sesi langsung, rekaman video, dan tanya jawab yang ramah. Pada sistem desain, UX, kinerja web, dan CSS/JS. Dengan Brad Frost, Stephanie Troeth, dan banyak lainnya

Terkadang masalahnya bukan pada pengguna tetapi dengan CDN yang mengirimkan JavaScript. Ingat pada Februari 2017 ketika server Amazon mati?

Pikirkan juga tentang pasar global yang sedang berkembang; . Atau pikirkan pasar yang mapan, di mana bahkan iPhone X pada koneksi 4G tidak kebal terhadap efek halaman web yang dimuat sebagian yang terganggu oleh kereta mereka yang masuk ke terowongan

Web adalah lingkungan yang bermusuhan dan tidak dapat diprediksi, itulah sebabnya banyak pengembang mengikuti prinsip peningkatan progresif untuk membangun situs mereka dari pengalaman inti HTML semantik, lapisan CSS dan JavaScript yang tidak mencolok di atas semua itu. Saya ingin melihat berapa banyak situs yang menerapkan ini dalam praktiknya. Apa cara yang lebih baik daripada menonaktifkan JavaScript sama sekali?

Cara Menonaktifkan JavaScript

Jika Anda ingin membuat ulang eksperimen saya untuk diri Anda sendiri, Anda dapat menonaktifkan JavaScript dengan membuka setelan di Chrome

• Buka Alat Pengembang (Chrome -> Lihat -> Alat Pengembang, atau ⌥⌘I di keyboard)
• Buka submenu pengembang (tiga titik di sebelah ikon tutup pada Alat Pengembang)
• Pilih 'Pengaturan' dari submenu ini
• Temukan bagian 'Debugger' dan centang kotak 'Nonaktifkan JavaScript'

Atau, seperti saya, Anda dapat menggunakan Ekstensi Chrome Toggle JavaScript yang luar biasa yang memungkinkan Anda menonaktifkan JS dalam satu klik

Membuat Posting WordPress Dengan JavaScript Dinonaktifkan

Setelah menonaktifkan JavaScript, panggilan pertama saya adalah pergi ke situs portofolio pribadi saya — yang berjalan di WordPress — dengan tujuan untuk menuliskan pengalaman saya secara real time

WordPress sebenarnya sangat ramah noscript, jadi saya dapat mulai menulis posting ini tanpa kesulitan, meskipun ada beberapa fitur pemformatan teks dan penyematan media yang biasa saya gunakan.

Mari bandingkan layar posting WordPress dengan dan tanpa JavaScript

Saya merasa cukup nyaman tanpa bilah alat sampai saya perlu menyematkan tangkapan layar di pos saya. Tanpa tombol 'Tambahkan Media', saya harus membuka layar terpisah untuk mengunggah file saya. Ini masuk akal, karena konten 'mengunggah latar belakang' membutuhkan Ajax, yang membutuhkan JavaScript. Tapi saya cukup terkejut bahwa layar media terpisah juga membutuhkan JavaScript

Untungnya, ada tampilan fallback

Setelah mengunggah gambar, saya harus secara manual menulis tag HTML img di posting saya dan menyalin dan menempelkan URL gambar ke dalamnya. Tidak ada cara untuk menentukan URL gambar mini dari gambar yang diunggah, dan keterangan apa pun yang saya tulis juga harus disalin secara manual. Saya segera muak dengan pendekatan ini dan berencana untuk kembali keesokan harinya dan memasukkan kembali semua gambar ketika saya membiarkan diri saya menggunakan JavaScript lagi

Saya memutuskan untuk melihat bagaimana kinerja front-end situs saya

Melihat Situs Saya Tanpa JavaScript

Saya sangat terkejut bahwa situs saya sebagian besar tampak sama tanpa JS

Mari kita lihat lebih dekat embed Twitter itu

Di bawah paro situs saya, saya juga menyematkan beberapa konten Instagram, yang sesuai dengan pengalaman noscript

Akhirnya, saya memiliki embed GitHub di situs saya. GitHub tidak menawarkan penyematan asli, jadi saya menggunakan Kartu GitHub tidak resmi oleh Hsiaoming Yang

Saya setengah berharap untuk mengejutkan Anda dengan statistik sebelum dan sesudah (megabita JS untuk embed kecil. Akhir zaman. Mari tinggalkan JavaScript. ), dan setengah berharap hanya ada sedikit perbedaan (peningkatan progresif. Memimpin dengan memberi contoh. Saya seorang pengembang yang baik. )

Mari bandingkan bobot halaman dengan dan tanpa JavaScript. Pertama, dengan JavaScript

Sekarang tanpa JavaScript

Demi tweet bergaya, embed GitHub, dan embed Instagram penuh lemak, situs saya tumbuh 600KB ekstra. Saya juga punya pelacakan analitik Google dan beberapa fitur interaktif tersembunyi kutu buku. Semua hal dipertimbangkan, 600KB tampaknya tidak berlebihan — meskipun saya sedikit terkejut dengan jumlah permintaan tambahan yang harus dilakukan browser agar semua itu terjadi

Semua konten masih ada tanpa JavaScript, semua menu masih dapat dinavigasi, dan kecuali embed Twitter, Anda akan kesulitan menyadari bahwa JavaScript dimatikan. Hasilnya, situs saya melewati tingkat validasi NOSCRIPT-5 — peringkat non-JavaScript terbaik yang mungkin

ashton. kode noscript_ peringkat. NOSCRIPT-5. ✅

Apa itu? . Ini adalah indikator kecil saya yang berguna tentang kegunaan situs tanpa JavaScript, dan dengan ekstensi, ini adalah indikator yang cukup bagus tentang seberapa bagus sebuah situs dalam meningkatkan kontennya secara progresif.

noscript_ Sistem Klasifikasi

Situs web — atau lebih tepatnya, laman individualnya — cenderung termasuk dalam salah satu kategori berikut

• NOSCRIPT-5
  Situs ini hampir tidak dapat dibedakan dari versi situs yang mendukung JavaScript
• NOSCRIPT-4
  Situs ini menyediakan paritas fungsionalitas untuk noscript, tetapi tertaut ke atau dialihkan ke versi situs yang terpisah untuk mencapainya
• NOSCRIPT-3
  Sebagian besar situs berfungsi tanpa JavaScript, tetapi beberapa fitur non-kunci tidak didukung atau terlihat rusak
• NOSCRIPT-2
  Situs ini menawarkan pesan yang mengatakan bahwa browser mereka tidak didukung
• NOSCRIPT-1
  Situs tampaknya memuat, tetapi pengguna tidak dapat menggunakan fungsionalitas kunci sama sekali
• NOSCRIPT-0
  Situs tidak memuat sama sekali dan tidak menawarkan umpan balik kepada pengguna

Mari kita lihat beberapa situs populer dan lihat bagaimana skornya

Amazon

Saya sudah lama memperhatikan penyedot debu robotik kecil. Sewa saya tidak mengizinkan hewan peliharaan apa pun, dan ini adalah hal terbaik berikutnya setelah Anda melihatnya dengan googly

Sekilas, Amazon melakukan pekerjaan cracking dengan solusi non-JavaScriptnya, meskipun gambar produk utamanya hilang

Jika diamati lebih dekat, beberapa hal agak rusak pada versi noscript. Saya ingin membahasnya satu per satu dan menyarankan solusi untuk masing-masing

Tidak Ada Gambar Galeri

Saya ingin melihat beberapa gambar produk, tetapi mengklik thumbnail tidak memberi saya apa-apa

Isu

Solusi Potensial

Alangkah baiknya jika thumbnail ini ditautkan ke gambar lengkap, dibuka di tab baru. Mereka kemudian dapat ditingkatkan secara progresif ke dalam galeri gambar dengan menggunakan JavaScript

• Membajak acara klik dari tautan thumbnail;
• Raih atribut noscript_6;
• Perbarui atribut noscript_7 dari gambar utama dengan nilai atribut noscript6

Tautan 'Laporkan Informasi Produk yang Salah' Hanya JavaScript

Apakah fitur ini benar-benar sangat umum digunakan sehingga perlu mengunduh byte tambahan JavaScript ke semua pengguna Anda agar terbuka sebagai modal terintegrasi di dalam halaman?

Isu

Solusi Potensial

Formulir modal terintegrasi Amazon membutuhkan JavaScript untuk bekerja. Saya akan menjadikan 'fitur laporan' sebagai formulir mandiri di URL terpisah, mis. g. noscript_0. Ini dapat ditingkatkan secara bertahap menjadi modal terintegrasi menggunakan Ajax untuk mengunduh HTML secara terpisah

Ulasan Hanya Terlihat Sebagian Secara Default

Isu

Solusi Potensial

Mengapa tidak menampilkan seluruh ulasan secara default dan kemudian menggunakan JavaScript untuk memotong teks ulasan dan menambahkan tautan 'Baca lebih lanjut'?

Perlu diperhatikan bahwa judul ulasan adalah tautan ke ulasan di halaman mandiri, jadi setidaknya masih mungkin untuk membaca kontennya

Secara keseluruhan, saya sangat terkejut betapa bagusnya situs ini bekerja tanpa JavaScript. Itu bisa dengan mudah menjadi halaman putih kosong. Namun, kurangnya gambar produk berarti kami kehilangan fitur yang sangat penting — menurut saya penting untuk dapat melihat apa yang Anda beli. - jadi sayang sekali kami tidak bisa menambahkan lapisan gula pada kue dan memberinya peringkat NOSCRIPT-5

Peringkat Amazon noscript_. NOSCRIPT-3. 🤷‍

Saya masih belum memutuskan produk mana yang ingin saya beli, jadi saya beralih ke Camel Camel Camel, pelacak harga Amazon

Unta Unta Unta

Saya ingin memutuskan antara iLife V3s Pro versus iLife A4s, jadi buka https. //uk. untacamelcamel. com/. Pada awalnya, situs tersebut tampak tidak dapat dibedakan dari versi yang mendukung JavaScript

Sayangnya, grafik riwayat harga tidak ditampilkan. Itu memang memberikan fallback teks alt, tetapi teks alt tidak memberi saya ide apakah tren harga naik atau turun atau tidak

Saran umum. menyediakan teks alternatif yang berarti setiap saat. Saya tidak perlu melihat bagan, tetapi saya akan menghargai ringkasan dari apa yang ada di dalamnya. Mungkin, dalam hal ini, mungkin “Bagan riwayat harga Amazon menunjukkan bahwa harga item ini sebagian besar tidak berubah sejak Maret 2017. Namun secara otomatis membuat ringkasan seperti itu memang sulit dan rawan anomali

Saran khusus untuk kasus penggunaan ini. menunjukkan gambar. Bagan pada versi skrip situs sebenarnya adalah gambar yang berdiri sendiri, jadi tidak ada alasan mengapa itu tidak dapat ditampilkan pada versi noscript

Tetap saja, konten inti di bawah bagan memberi saya informasi yang perlu saya ketahui

Tabel tersebut memberikan paritas fitur yang diperlukan untuk mengamankan peringkat NOSCRIPT-5. Aku angkat topi untukmu, Camel Camel Camel

Unta Unta Unta noscript_ peringkat. NOSCRIPT-5 ✅

Produk Google

Pada titik ini di hari saya, saya tiba-tiba menerima panggilan telepon. Seorang teman menelepon saya dan bertanya tentang pertemuan minggu ini. Jadi saya pergi ke Kalender Google untuk memeriksa ketersediaan saya. Google punya ide lain

Saya kecewa karena tidak ada noscript fallback — Google biasanya cukup bagus dalam hal semacam ini

Saya tidak berharap dapat menambah/mengedit/menghapus entri ke kalender saya, tetapi seharusnya dimungkinkan untuk memberikan tampilan hanya-baca dari kalender saya sebagai konten inti

Kalender Google noscript_ peringkat. NOSCRIPT-0 🔥

Tertarik untuk melihat bagaimana Google mengelola produk lain, saya melihat sekilas Google Spreadsheets

Dalam hal ini, situs gagal jauh lebih anggun. Saya setidaknya bisa membaca konten spreadsheet, meskipun saya tidak bisa mengeditnya. Mengapa kalender tidak menawarkan solusi fallback yang sama?

Saya tidak punya saran untuk meningkatkan Google Spreadsheets. Itu berfungsi dengan baik dalam memberi tahu pengguna jika fungsionalitas inti hilang dari pengalaman noscript

Spreadsheet Google noscript_ peringkat. NOSCRIPT-2 😅

Peringkat ini sebenarnya tidak seburuk itu. Tidak semua situs dapat menawarkan pengalaman noscript, tetapi setidaknya jika mereka terbuka dan jujur ​​(saya. e. mereka akan mengatakan "ya, kami tidak akan mencoba memberi Anda apa pun") yang mempersiapkan Anda — pengguna noscript — ketika gagal. Anda tidak akan membuang beberapa detik yang berharga untuk mencoba mengisi formulir yang tidak akan pernah dikirimkan, atau mulai membaca artikel yang kemudian harus menggunakan Ajax untuk mengambil sisa isinya

Sekarang, kembali ke potensi pembelian Amazon saya. Saya ingin melihat beberapa ulasan pihak ketiga sebelum melakukan pembelian

Pencarian Google bekerja dengan sangat baik tanpa JavaScript. Itu hanya terlihat sedikit kuno, seperti situs desktop lama dengan resolusi tetap

Tampilan gambar terlihat lebih berbeda, dan saya sebenarnya lebih menyukainya dalam beberapa hal — versi ini memuat dengan sangat cepat dan mencantumkan dimensi dan ukuran gambar dalam kilobyte di bawah setiap thumbnail

Peringkat Google Penelusuran noscript_. NOSCRIPT-5 ✅

Salah satu hasil pencarian membawa saya ke review di YouTube. Saya mengklik, tidak berharap banyak. Saya benar untuk tidak bersemangat

Saya tidak berharap situs seperti YouTube berfungsi tanpa JavaScript. YouTube membutuhkan kemampuan streaming yang canggih, belum lagi itu akan terbuka untuk pencurian salinan jika menyediakan unduhan MP4 mandiri sebagai cadangan. Bagaimanapun, tidak ada situs yang terlihat rusak. Saya menatap layar ini selama beberapa detik sebelum menyadari bahwa tidak ada lagi yang akan terjadi

Saran. Jika situs Anda tidak dapat memberikan solusi fallback untuk noscript pengguna, minimal Anda harus memberikan pesan peringatan noscript

Peringkat YouTube noscript_. NOSCRIPT-0 🔥

Yang?

Saya mengklik beberapa tautan ulasan lagi. Yang mana?

Ini adalah halaman yang sepertinya dimuat dengan baik, tetapi hanya ketika Anda membaca kontennya Anda akan menyadari bahwa Anda benar-benar kehilangan beberapa informasi penting. Informasi kunci itu benar-benar inti dari tujuan halaman, dan saya tidak bisa mendapatkannya. Oleh karena itu, sayangnya, itu adalah pelanggaran NOSCRIPT-1

Saran. Jika situs Anda berisi konten Ajax, konten tersebut ada di URL lain. Berikan tautan ke konten tersebut untuk noscript pengguna Anda. Anda selalu dapat menyembunyikan tautan ketika Anda berhasil melakukan Ajax dengan JavaScript

Yang? . NOSCRIPT-1 😫

Facebook

Akhirnya, saya mengakui bahwa saya tidak mampu membeli ruang hampa saat ini. Jadi, saya memutuskan untuk melompat ke media sosial

Facebook menolak memuat tanpa JavaScript, tetapi menawarkan opsi fallback. Inilah contoh pertama NOSCRIPT-4 kami — situs yang menawarkan versi terpisah dari kontennya untuk noscript atau pengguna ponsel menengah

Versi seluler dimuat secara instan. Kelihatannya jelek, tapi sepertinya saya mendapatkan konten yang sama seperti biasanya. Yang terpenting, saya memiliki paritas fitur. Saya dapat mencapai hal yang sama di sini seperti yang saya bisa di situs utama

Peringkat Facebook noscript_. NOSCRIPT-4 🤔

Halaman dimuat dengan kecepatan kilat

Saya hanya dapat melihat 7 item di umpan berita pada satu waktu, tetapi saya dapat mengeklik "Lihat Lebih Banyak Cerita", yang membawa saya ke halaman baru, menggunakan teknik penomoran halaman tradisional

Saya terkesan bahwa saya memiliki opsi untuk 'bereaksi' terhadap komentar Facebook, meskipun ini adalah tugas multilayar

Tidak ada yang menghentikan Facebook membuat menu 'reaksi' melayang di non-JavaScript, tetapi untuk bersikap adil ini ditujukan untuk perangkat seluler yang tidak dapat melayang

Saran. Berkreasilah dengan CSS. Anda mungkin menemukan bahwa Anda tidak memerlukan JavaScript sama sekali

Tak lama kemudian, item video muncul di umpan berita saya. (Pada titik ini, saya sadar betapa lebih sedikit konten video yang saya lihat di versi seluler dibandingkan dengan Facebook normal, artinya saya benar-benar melihat status orang daripada video acak yang mereka 'sukai' — peningkatan besar . )

Saya benar-benar berharap video tidak berfungsi ketika saya mengkliknya, tetapi mengklik thumbnail akan membuka video di tab baru

Saya sangat terkejut bahwa semua fungsi tampaknya ada di versi noscript situs ini. Namun, akhirnya, saya menemukan satu fitur yang terlalu kikuk dan rumit untuk dilihat sampai akhir. pembuatan album

Saya ingin mengunggah album foto ke Facebook, tetapi di noscript-tanah ini adalah tugas yang berat. Ini melibatkan mengunggah satu foto pada satu waktu, melewati dua atau tiga layar untuk setiap unggahan. Saya mati-matian mencoba dan gagal menemukan opsi unggahan massal

Kesusahan ini menghampiri saya setelah foto nomor tiga (album saya akan berisi lebih banyak lagi), jadi saya memutuskan untuk menghentikannya dan kembali lagi besok ketika saya sudah mendapatkan JavaScript

Twitter

Segalanya menjadi aneh ketika saya terbang ke Twitter

Saya tertarik dengan mekanisme ini, jadi gali kode sumbernya, yang sebenarnya sangat sederhana

<noscript><meta http-equiv="refresh" content="0; URL=https://mobile.twitter.com/i/nojs_router?path=%2F"></noscript>

Sesederhana solusi ini, saya menemukan pengalamannya cukup kikuk karena dalam sekejap sebelum saya dialihkan, saya melihat bahwa salah satu orang yang saya ikuti di Twitter telah bertunangan. Tweetnya tidak muncul di bagian atas versi 'seluler', jadi saya harus mencarinya

Saran. Bangun dalam masa tenggang ke dalam logika sisi server Anda sehingga pengalihan dan penyegaran yang ceroboh tidak kehilangan tweet yang menarik sebelum Anda sempat membacanya

Saya tidak dapat mengingat pegangan Twitter teman saya. Pencarian agak rumit — saya mulai sangat merindukan saran isi otomatis

Untungnya, halaman hasil pencarian memunculkan akunnya, dan saya dapat menemukan tweetnya. Aku bahkan bisa membalas

Peringkat Twitter noscript_. NOSCRIPT-4 🤔

Ini mungkin tampak seperti skor yang murah hati, mengingat kesan kikuk, tetapi ingat bahwa kuncinya di sini adalah paritas fitur. Tidak harus terlihat cantik

Saya mencoba beberapa situs media sosial lagi, yang, tidak seperti Twitter, tidak mencapai tingkat kepatuhan NOSCRIPT-4 yang memusingkan

Jejaring Sosial Lainnya

LinkedIn memiliki layar pemuatan yang bagus dan dipesan lebih dahulu. Tapi itu tidak pernah dimuat, jadi yang bisa saya lakukan hanyalah menatap logonya

Peringkat noscript_ LinkedIn. NOSCRIPT-0 🔥

Instagram benar-benar tidak memberi saya apa-apa. Sebuah halaman kosong. Rasa lain dari NOSCRIPT-0

Peringkat Instagram noscript_. NOSCRIPT-0 🔥🔥🔥

Saya terkejut Instagram gagal secara spektakuler di sini, mengingat penyematan Instagram bekerja dengan sempurna di situs portofolio saya. Saya kira dengan penyematan Anda tidak pernah tahu apa ekspektasi dukungan browser dari pihak ketiga, tetapi karena saya mengunjungi situsnya secara langsung, Instagram dengan senang hati menelepon untuk membatalkan dukungan

berita BBC

Saya pergi ke BBC untuk mendapatkan berita saya

Menu sedikit mati, dan kolomnya cukup sempit (pasti pola yang saya lihat di banyak situs - mengapa "tidak ada JavaScript" berarti "perangkat seluler"?) tetapi saya dapat mengakses konten

Saya mengklik tab 'Terbanyak Dibaca', yang membawa saya ke bagian lain halaman. Dengan scripting, link jangkar ini semakin ditingkatkan untuk mencapai perilaku tab yang sebenarnya, yang merupakan contoh yang bagus untuk membangun dari inti HTML yang solid

Sejauh ini, ini adalah satu-satunya contoh tautan jangkar yang saya temukan dalam percobaan saya, yang memalukan karena ini adalah teknik yang bagus yang menghemat pemuatan halaman tambahan dan menyimpan fragmentasi situs menjadi banyak halaman mikro

Memang terlihat agak aneh, daftar urutan CSS berarti kita memiliki kesalahan penomoran ganda di sini. Saya mengklik salah satu cerita

Saya tidak dapat mengakses konten video, tetapi karena masalah hak, saya menduga BBC tidak dapat menyediakan video mandiri yang terpisah seperti yang dilakukan Facebook. Namun, transkrip akan menyenangkan — dan bermanfaat bagi lebih dari sekadar noscript pengguna

Saran. Sediakan fallback tekstual untuk konten audio-visual

Agar adil, konten artikel pada dasarnya meringkas konten yang muncul di video, jadi saya tidak ketinggalan informasi.

Halaman artikel dan indeks memuat secepat kilat, sekitar 300KB (kebanyakan gambar). Saya merindukan gambar mini untuk artikel lain di halaman, dan kemampuan untuk memanfaatkan sepenuhnya ruang layar saya — tetapi itu tidak akan menghambat peringkat

Peringkat BBC noscript_. NOSCRIPT-5 ✅

GitHub

GitHub terlihat hampir persis sama dengan pasangannya yang mendukung JavaScript. Wow. Tapi saya kira ini adalah situs yang dikembangkan oleh pengembang, untuk pengembang. 😉

Saya melakukan sedikit pembersihan di GitHub, melihat-lihat repo dan menghapus cabang lama. Untuk sementara saya benar-benar lupa bahwa saya menggunakan versi non-JavaScript sampai saya menemukan satu bug kecil

Lalu saya bertanya-tanya, "Bagaimana GitHub menangani penerapan label pada masalah?"

Saya tidak dapat membuat masalah dan menambahkan label pada saat yang bersamaan. Nyatanya, saya tidak dapat menemukan cara untuk menambahkan label bahkan setelah membuat masalah kosong. Sayang sekali situs tersebut jatuh pada rintangan terakhir karena perbandingannya hampir mulus dengan versi skrip

Peringkat GitHub noscript_. NOSCRIPT-3 🤗

Sementara GitHub terlihat luar biasa — saya tidak akan pernah tahu JavaScript saya dimatikan — tidak bisa menggunakan fungsi kunci yang sama seperti versi skripnya mengecewakan. Bahkan situs noscript_ yang tampak jelek akan mendapat skor lebih tinggi karena fungsionalitas lebih penting daripada bentuk

Perbankan online

Jika ada satu tempat yang saya harapkan JavaScript diperlukan, itu ada di situs web bank NatWest. saya salah

Tidak hanya berfungsi, tetapi juga sulit dibedakan dari situs normal. Layar masuknya sama, satu-satunya perbedaan adalah bahwa fokus tidak secara otomatis berkembang melalui setiap bidang saat Anda menyelesaikannya

NatWest noscript peringkat. NOSCRIPT-5 ✅

Aneka ragam

Saya menemukan beberapa situs lagi sepanjang hari

FreeAgent — situs perangkat lunak pajak yang saya gunakan untuk pekerjaan lepas saya — bahkan tidak mencoba noscript fallback. Tapi hei, itu lebih baik daripada menampilkan situs web yang rusak

Peringkat FreeAgent noscript_. NOSCRIPT-2 ⛔

Dan CodePen, bisa dimengerti, harus menjadi NOSCRIPT-2 juga

CodePen noscript_ peringkat. NOSCRIPT-2 ⛔

Tonik, penyedia energi, tidak mengizinkan saya masuk, tetapi ini tampak seperti kekeliruan daripada keputusan yang disengaja

Peringkat Tonik noscript_. NOSCRIPT-1 ❌

M&S Energy memungkinkan saya masuk — hanya untuk memberi tahu saya bahwa JavaScript diperlukan untuk melakukan sesuatu yang berguna dari jarak jauh

Peringkat M&S ​​noscript. NOSCRIPT-1 ❌

Sekarang saya sampai pada tangkapan layar favorit saya hari ini

Salah satu kolega saya pernah merekomendasikan kursus Aksesibilitas untuk Desain Web, yang saya tandai. Saya memutuskan untuk melihatnya hari ini, dan menertawakan ironi teks alt

Dengan teks alternatif “Persona. Aksesibilitas untuk Desain Web,” Saya tidak terlalu yakin apa yang saya lewatkan di sini — apakah ini sebuah gambar?

Petunjuk. Ini sebenarnya adalah video, meskipun Anda harus masuk untuk menontonnya

Teks alt tidak benar-benar mendukung tujuannya, sebagian karena diisi secara otomatis. Kami sebagai komunitas pengembang perlu menjadi lebih baik dalam hal semacam ini. Sepertinya saya belum membaca teks alt yang berguna hari ini

Ringkasan

Saya memulai eksperimen ini dengan tujuan untuk melihat berapa banyak situs yang diimplementasikan menggunakan peningkatan progresif. Saya hanya mengunjungi segelintir situs di sini, kebanyakan dari mereka nama besar dengan anggaran besar, jadi menarik untuk melihat variasi luas dalam dukungan tanpa JavaScript

Sangat menarik untuk melihat bahwa situs yang relatif sederhana — khususnya Instagram dan LinkedIn — memiliki dukungan noscript yang buruk. Saya percaya ini sebagian karena popularitas framework JavaScript yang terus meningkat seperti React, Angular, dan Vue. Pengembang sekarang membangun "aplikasi web" daripada "situs web", dengan tujuan menciptakan kembali tampilan dan nuansa aplikasi asli, dan menggunakan JavaScript untuk mengelola DOM adalah cara yang paling mudah dikelola untuk membuat pengalaman seperti itu

Ada bahaya bahwa semakin banyak situs yang memerlukan JavaScript untuk merender konten apa pun. Untungnya, biasanya Anda dapat membangun konten Anda dengan cara yang sama, ramah-pengembang tetapi dirender di server, misalnya dengan menggunakan Preact alih-alih Bereaksi. Membuat keputusan sadar untuk peduli tentang noscript memberikan manfaat dari pengalaman inti seperti yang diuraikan di awal artikel ini, dan juga dapat mempersingkat waktu pemuatan yang dirasakan

Memikirkan aplikasi dari bawah ke atas bisa sangat menakutkan, tetapi pengalaman inti yang baik biasanya mungkin dan sebenarnya hanya melibatkan penyesuaian sederhana dalam banyak kasus. Pengalaman inti yang baik menunjukkan halaman web yang terstruktur dengan baik, yang, pada gilirannya, biasanya merupakan pertanda baik untuk SEO dan aksesibilitas. Ini biasanya halaman web yang dirancang dengan baik, karena perancang dan pengembang telah menghabiskan waktu dan upaya untuk memikirkan apa yang benar-benar inti dari pengalaman tersebut. Peningkatan progresif berarti pengalaman yang lebih kuat, dengan lebih sedikit bug dalam produksi dan lebih sedikit keanehan browser individual, karena kami membiarkan platform melakukan tugasnya daripada mencoba menulis semuanya dari awal

Apakah saya perlu mengaktifkan JavaScript?

Apa yang terjadi jika Anda mematikan JavaScript?