ฉันใช้เว็บเป็นเวลาหนึ่งวันโดยที่ JavaScript ปิดอยู่
เผยแพร่แล้ว: 2022-03-10บทความนี้เป็นส่วนหนึ่งของชุดข้อมูลที่ฉันพยายามใช้เว็บภายใต้ข้อจำกัดต่างๆ ซึ่งแสดงถึงข้อมูลประชากรของผู้ใช้ที่กำหนด ฉันหวังว่าจะเพิ่มรายละเอียดของความยากลำบากที่คนจริงต้องเผชิญ ซึ่งสามารถหลีกเลี่ยงได้หากเราออกแบบและพัฒนาในลักษณะที่เห็นอกเห็นใจต่อความต้องการของพวกเขา สัปดาห์นี้ฉันกำลังปิดการใช้งาน JavaScript
ทำไม noscript
เรื่อง
ประการแรก เพื่อชี้แจง มีความแตกต่างระหว่างการสนับสนุนประสบการณ์ noscript
และการใช้แท็ก noscript
โดยทั่วไปแล้ว ฉันไม่ชอบแท็ก noscript
เนื่องจากมันแยกส่วนหน้าเว็บของคุณออกเป็น JavaScript และเวอร์ชันที่ไม่ใช่ JavaScript แทนที่จะทำงานจากเนื้อหาพื้นฐานเดียวกัน ซึ่งทำให้ประสบการณ์ยุ่งเหยิงและสิ่งต่างๆ ถูกมองข้ามไป
คุณอาจมีเนื้อหาที่มีประโยชน์มากมายในแท็ก noscript
ของคุณ แต่ถ้าฉันใช้เบราว์เซอร์ที่เปิดใช้งาน JavaScript ฉันจะไม่เห็นสิ่งนั้น — ฉันจะต้องรอให้ดาวน์โหลดประสบการณ์ JS เมื่อฉันอ้างถึงประสบการณ์ 'noscript' ฉันมักหมายถึง ประสบการณ์ในการใช้หน้าเว็บโดยไม่มี JavaScript มากกว่าการใช้แท็กอย่างชัดแจ้ง
Web MIDI API: เริ่มต้นใช้งาน
เป็นไปได้ไหมที่จะใช้เครื่องดนตรีดิจิทัลเป็นอินพุตของเบราว์เซอร์? ด้วย Web MIDI API คำตอบคือใช่! ส่วนที่ดีที่สุดคือ มันค่อนข้างเร็วและง่ายต่อการใช้งาน หรือแม้แต่สร้างโครงการที่สนุกจริงๆ อ่านบทความ →
แล้วใครสนใจเกี่ยวกับผู้ใช้ที่ไม่มี JavaScript บ้าง? ผู้ใช้ noscript
ดังกล่าวมีอยู่แล้วหรือไม่?
พวกมันมีอยู่จริงแม้ว่าจะมีจำนวนน้อย: ผู้ใช้ประมาณ 0.2% ในสหราชอาณาจักรปิดการใช้งาน JavaScript แต่การดูจำนวนผู้ใช้ที่ปิดใช้งาน JavaScript อย่างชัดเจนนั้นไม่มีประเด็น
ฉันนึกถึงคำพูดนี้โดย Jake Archibald:
“ผู้ใช้ทั้งหมดของคุณไม่ใช่ JS ในขณะที่พวกเขากำลังดาวน์โหลด JS ของคุณ”
ลองนึกถึงผู้ใช้ที่เปิดใช้งาน JavaScript แต่ไม่ได้รับประสบการณ์ JavaScript ด้วยเหตุผลหลายประการ รวมถึงการบล็อกขององค์กรหรือในเครื่อง หรือการแยกองค์ประกอบ JavaScript ข้อผิดพลาด JavaScript ที่มีอยู่ในเบราว์เซอร์จากส่วนเสริมของเบราว์เซอร์และแถบเครื่องมือ เครือข่าย ผิดพลาด เป็นต้น เมื่อเร็วๆ นี้ BuzzFeed เปิดเผยว่าประมาณ 1% ของคำขอสำหรับ JavaScript หมดเวลา เท่ากับ 13 ล้านคำขอที่ล้มเหลวต่อเดือน
บางครั้งปัญหาไม่ได้อยู่ที่ผู้ใช้ แต่อยู่ที่ CDN ที่ส่ง JavaScript จำได้ไหมว่าเมื่อเดือนกุมภาพันธ์ 2017 เซิร์ฟเวอร์ของ Amazon ล่ม? ไซต์หลายล้านแห่งที่อาศัย JavaScript ที่ส่งผ่าน CDN ของ Amazon ประสบปัญหาใหญ่ ทำให้บริษัทต่างๆ ในดัชนี S&P 500 มีต้นทุน 150 ล้านดอลลาร์ในช่วงหยุดทำงาน 4 ชั่วโมง
คิดถึงตลาดโลกเกิดใหม่ด้วย ประเทศต่างๆ ยังคงต่อสู้เพื่อสร้างเครือข่ายอินเทอร์เน็ตที่รวดเร็ว โดยประชากรไม่สามารถซื้อฮาร์ดแวร์ที่รวดเร็วเพื่อเรียกใช้ JavaScript ที่เน้น CPU หรือลองนึกถึงตลาดที่จัดตั้งขึ้น ซึ่งแม้แต่ iPhone X ในการเชื่อมต่อ 4G ก็ไม่สามารถป้องกันผลกระทบจากหน้าเว็บที่โหลดบางส่วนซึ่งถูกขัดจังหวะโดยรถไฟของพวกเขาที่กำลังเข้าไปในอุโมงค์
เว็บเป็นสภาพแวดล้อมที่ไม่เป็นมิตรและคาดเดาไม่ได้ ซึ่งเป็นสาเหตุที่นักพัฒนาหลายคนปฏิบัติตามหลักการของการปรับปรุงแบบก้าวหน้าเพื่อสร้างไซต์ของตนจากประสบการณ์หลักของ HTML เชิงความหมาย การจัดเลเยอร์ CSS และ JavaScript ที่ไม่เป็นการรบกวน ฉันต้องการดูจำนวนไซต์ที่ใช้สิ่งนี้ในทางปฏิบัติ อะไรจะดีไปกว่าการปิดการใช้งาน JavaScript โดยสิ้นเชิง?
วิธีปิดการใช้งาน JavaScript
หากคุณต้องการสร้างการทดลองของฉันขึ้นมาใหม่ คุณสามารถปิดใช้งาน JavaScript ได้โดยเข้าไปที่การตั้งค่าใน Chrome:
- เปิดเครื่องมือสำหรับนักพัฒนา (Chrome -> View -> Developer Tools หรือ ⌥⌘I บนแป้นพิมพ์)
- เปิดเมนูย่อยของนักพัฒนา (จุดสามจุดถัดจากไอคอนปิดบนเครื่องมือสำหรับนักพัฒนา)
- เลือก 'การตั้งค่า' จากเมนูย่อยนี้
- ค้นหาส่วน 'ดีบักเกอร์' และทำเครื่องหมายที่ช่อง 'ปิดใช้งาน JavaScript'
หรืออย่างฉัน คุณสามารถใช้ Toggle JavaScript Chrome Extension ที่ยอดเยี่ยม ซึ่งให้คุณปิดการใช้งาน JS ได้ในคลิกเดียว
การสร้างโพสต์ WordPress โดยปิดการใช้งาน JavaScript
หลังจากปิดการใช้งาน JavaScript พอร์ตการโทรครั้งแรกของฉันคือไปที่ไซต์พอร์ตส่วนตัวของฉัน ซึ่งทำงานบน WordPress โดยมีวัตถุประสงค์เพื่อเขียนประสบการณ์ของฉันในแบบเรียลไทม์
จริงๆ แล้ว WordPress เป็นมิตรกับ noscript มาก ดังนั้นฉันจึงสามารถเริ่มเขียนโพสต์นี้ได้โดยไม่ยาก แม้ว่าจะขาดคุณสมบัติการจัดรูปแบบข้อความและการฝังสื่อบางอย่างที่ฉันเคยใช้
มาเปรียบเทียบหน้าจอโพสต์ของ WordPress ที่มีและไม่มี JavaScript:

noscript
ซึ่งประกอบด้วยการป้อนข้อความพื้นฐานสองรายการ 
ฉันรู้สึกสบายใจเมื่อไม่มีแถบเครื่องมือจนกระทั่งต้องฝังภาพหน้าจอในโพสต์ หากไม่มีปุ่ม "เพิ่มสื่อ" ฉันต้องไปที่หน้าจอแยกต่างหากเพื่ออัปโหลดไฟล์ สิ่งนี้สมเหตุสมผลเนื่องจากเนื้อหา 'การอัปโหลดพื้นหลัง' ต้องใช้ Ajax ซึ่งต้องใช้ JavaScript แต่ฉันค่อนข้างแปลกใจที่หน้าจอสื่อที่แยกจากกันนั้นต้องใช้ JavaScript ด้วย!
โชคดีที่มีมุมมองทางเลือก:

noscript
ของส่วน Media ในแบ็กเอนด์ของผู้ดูแลระบบ ฉันได้รับคำเตือนว่าไม่รองรับมุมมองกริดหากไม่มี JavaScript 
หลังจากอัปโหลดรูปภาพ ฉันต้องเขียนแท็ก HTML img
ด้วยตนเองในโพสต์ของฉัน แล้วคัดลอกและวาง URL ของรูปภาพลงในนั้น ไม่มีวิธีกำหนด URL รูปย่อของรูปภาพที่อัปโหลด และคำบรรยายใดๆ ที่ฉันเขียนจะต้องคัดลอกด้วยตนเอง ไม่นานฉันก็เบื่อกับแนวทางนี้และวางแผนที่จะกลับมาในวันถัดไปและแทรกรูปภาพทั้งหมดอีกครั้งเมื่อฉันอนุญาตให้ตัวเองใช้ JavaScript อีกครั้ง
ฉันตัดสินใจที่จะดูว่าส่วนหน้าของไซต์ของฉันเป็นอย่างไร
การดูไซต์ของฉันโดยไม่ใช้ JavaScript
ฉันประหลาดใจมากที่ไซต์ของฉันดูเหมือนเดิมมากโดยไม่มี JS:


ลองมาดูที่ Twitter ที่ฝังไว้อย่างละเอียดยิ่งขึ้น:

noscript
'ขีด' เป็น PNG ภายนอก (แหล่งที่มา) 
ที่ครึ่งหน้าล่างของไซต์ของฉัน ฉันยังฝังเนื้อหา Instagram บางส่วนซึ่งรองรับประสบการณ์ noscript
ได้ดี


ในที่สุด ฉันมี GitHub ฝังบนเว็บไซต์ของฉัน GitHub ไม่ได้เสนอการฝังแบบเนทีฟ ดังนั้นฉันจึงใช้การ์ด GitHub ที่ไม่เป็นทางการโดย Hsiaoming Yang


ฉันหวังว่าครึ่งหนึ่งจะทำให้คุณตกใจด้วยสถิติก่อนและหลัง ( เมกะไบต์ของ JS สำหรับการฝังขนาดเล็ก! End of the world! Let's ditch JavaScript! ) และครึ่งหนึ่งหวังว่าจะมีความแตกต่างเพียงเล็กน้อย ( การปรับปรุงแบบก้าวหน้า! นำโดยตัวอย่าง ฉันเป็นนักพัฒนาที่ดี! )
มาเปรียบเทียบน้ำหนักหน้าแบบมีและไม่มี JavaScript ประการแรกด้วย JavaScript:

ตอนนี้ไม่มี JavaScript:

เพื่อประโยชน์ของทวีตที่มีสไตล์ การฝัง GitHub และการฝัง Instagram แบบเต็ม ไซต์ของฉันจึงขยายเพิ่มอีก 600KB ฉันยังมีการติดตามการวิเคราะห์ของ Google และคุณลักษณะเชิงโต้ตอบที่ซ่อนอยู่บางส่วน เมื่อพิจารณาจากทุกสิ่งแล้ว 600KB นั้นไม่ได้ดูเกินเลย — แม้ว่าฉันจะแปลกใจเล็กน้อยกับจำนวนคำขอเพิ่มเติมที่เบราว์เซอร์ต้องทำเพื่อให้ทุกสิ่งเกิดขึ้น
เนื้อหาทั้งหมดยังคงอยู่โดยไม่มี JavaScript เมนูทั้งหมดยังคงนำทางได้ และยกเว้นการฝัง Twitter คุณจะรู้สึกลำบากใจที่จะรู้ว่า JavaScript ถูกปิดอยู่ ด้วยเหตุนี้ ไซต์ของฉันจึงผ่านการตรวจสอบระดับ NOSCRIPT-5 ซึ่งเป็นเรตติ้งที่ไม่ใช่ JavaScript ที่ดีที่สุดเท่าที่เป็นไปได้
ashton.codes คะแนน noscript
: NOSCRIPT-5
นั่นอะไร? คุณไม่เคยได้ยินเกี่ยวกับระบบการจำแนก noscript
? ฉันจะแปลกใจมากถ้าคุณมีเพราะฉันเพิ่งสร้างมันขึ้นมา เป็นตัวบ่งชี้เล็กๆ น้อยๆ ที่มีประโยชน์ของฉันเกี่ยวกับความสามารถในการใช้งานของไซต์ที่ไม่มี JavaScript และโดยการขยาย ก็เป็นตัวบ่งชี้ที่ดีทีเดียวว่าไซต์นั้นปรับปรุงเนื้อหาได้ดีเพียงใด
ระบบการจำแนก noscript
เว็บไซต์ — หรืออย่างแม่นยำยิ่งขึ้น หน้าแต่ละหน้า — มักจะจัดอยู่ในประเภทใดประเภทหนึ่งต่อไปนี้:
- NOSCRIPT-5
ไซต์นี้แทบจะแยกไม่ออกจากเวอร์ชันที่เปิดใช้งาน JavaScript ของไซต์ - NOSCRIPT-4
ไซต์มีฟังก์ชันการทำงานที่เท่าเทียมกันสำหรับ noscript แต่ลิงก์ไปยังหรือเปลี่ยนเส้นทางไปยังไซต์ เวอร์ชันอื่น เพื่อให้บรรลุเป้าหมายนั้น - NOSCRIPT-3
ไซต์ส่วนใหญ่ทำงานได้โดยไม่ต้องใช้ JavaScript แต่คุณลักษณะที่ไม่ใช่คีย์บางอย่างไม่ได้รับการสนับสนุนหรือดูใช้งานไม่ได้ - NOSCRIPT-2
ไซต์มีข้อความแจ้งว่าเบราว์เซอร์ของตนไม่ได้รับการสนับสนุน - NOSCRIPT-1
ดูเหมือนว่าไซต์จะโหลด แต่ผู้ใช้ไม่สามารถใช้ฟังก์ชันหลักได้เลย - NOSCRIPT-0
ไซต์ไม่โหลดเลยและไม่มีข้อเสนอแนะใดๆ ต่อผู้ใช้
ลองดูไซต์ยอดนิยมบางไซต์และดูว่าพวกเขาทำคะแนนได้อย่างไร
อเมซอน
ฉันเคยดูหุ่นยนต์ดูดฝุ่นมาซักพักแล้ว สัญญาเช่าของฉันไม่อนุญาตให้มีสัตว์เลี้ยงใด ๆ และนี่คือสิ่งที่ดีที่สุดถัดไปเมื่อคุณใส่ใจกับมัน
ในแวบแรก Amazon ทำงานแคร็กด้วยโซลูชันที่ไม่ใช่ JavaScript แม้ว่าอิมเมจผลิตภัณฑ์หลักจะหายไป


ในการตรวจสอบอย่างใกล้ชิด มีบางสิ่งที่เสียหายเล็กน้อยในเวอร์ชัน noscript
ฉันต้องการอธิบายทีละขั้นตอนและแนะนำวิธีแก้ปัญหาสำหรับแต่ละรายการ
ไม่มีรูปภาพแกลลอรี่
ฉันต้องการดูภาพผลิตภัณฑ์บางส่วน แต่การคลิกที่รูปขนาดย่อไม่ได้ช่วยอะไรฉันเลย
ปัญหา

โซลูชั่นที่มีศักยภาพ
คงจะดีถ้าภาพขนาดย่อเหล่านี้เป็น ลิงก์ไปยังรูปภาพเต็ม โดยเปิดในแท็บใหม่ จากนั้นจะค่อยๆ ปรับปรุง ในแกลเลอรีรูปภาพได้เรื่อยๆ โดยใช้ JavaScript:
- จี้เหตุการณ์การคลิกของลิงก์ภาพขนาดย่อ
- คว้าแอตทริบิวต์
href
; - อัปเดตแอตทริบิวต์
src
ของรูปภาพหลักด้วยค่าแอตทริบิวต์href
ลิงก์ 'รายงานข้อมูลผลิตภัณฑ์ไม่ถูกต้อง' เป็น JavaScript เท่านั้น
คุณลักษณะนี้ใช้บ่อยมากจนคุ้มค่าที่จะดาวน์โหลด JavaScript แบบไบต์พิเศษให้กับผู้ใช้ทั้งหมดของคุณเพื่อที่จะเปิดขึ้นเป็นโมดอลที่ผสานรวมภายในหน้าเว็บหรือไม่

ปัญหา

javascript://
ซึ่งเปิดรูปแบบโมดอลรวมโซลูชั่นที่มีศักยภาพ
รูปแบบโมดอลที่ผสานรวมของ Amazon ต้องใช้ JavaScript เพื่อทำงาน ฉันจะ ทำให้ 'คุณสมบัติการรายงาน' เป็นแบบสแตนด์อโลนใน URL แยกต่างหาก เช่น /report-product?product-id=123
สิ่งนี้สามารถปรับปรุงให้ดีขึ้นเรื่อย ๆ ในโมดอลแบบรวมโดยใช้ Ajax เพื่อดาวน์โหลด HTML แยกกัน
รีวิวจะมองเห็นได้เพียงบางส่วนโดยค่าเริ่มต้น
ปัญหา

โซลูชั่นที่มีศักยภาพ
ทำไมไม่ แสดงบทวิจารณ์ทั้งหมดโดยค่าเริ่มต้น แล้วใช้ JavaScript เพื่อตัด ข้อความบทวิจารณ์และเพิ่มลิงก์ 'อ่านเพิ่มเติม'
ควรสังเกตว่าชื่อบทวิจารณ์เป็นลิงก์ไปยังบทวิจารณ์บนหน้าแบบสแตนด์อโลน ดังนั้นอย่างน้อยก็ยังสามารถอ่านเนื้อหาได้
โดยรวมแล้ว ฉันรู้สึกประหลาดใจจริงๆ ที่ไซต์ทำงานโดยไม่มี JavaScript ได้ดีเพียงใด อาจเป็นหน้าขาวเปล่าได้ง่ายๆ อย่างไรก็ตาม การไม่มีรูปภาพผลิตภัณฑ์หมายความว่าเราพลาดคุณสมบัติหลักจริงๆ — ฉันขอยืนยันว่าการสามารถดูสิ่งที่คุณกำลังซื้อเป็นสิ่งสำคัญ! — น่าเสียดายที่เราไม่สามารถใส่ไอซิ่งบนเค้กและให้คะแนนเป็น NOSCRIPT-5
คะแนน noscript
ของ Amazon: NOSCRIPT-3
ฉันยังตัดสินใจไม่ได้ว่าต้องการซื้อผลิตภัณฑ์ใด ฉันจึงหันไปใช้ Camel Camel Camel เครื่องมือติดตามราคาของ Amazon
อูฐ อูฐ อูฐ
ฉันต้องการตัดสินใจระหว่าง iLife V3s Pro กับ iLife A4s ดังนั้นตรงไปที่ https://uk.camelcamelcamel.com/ ในตอนแรก ไซต์ดูไม่แตกต่างจากเวอร์ชันที่เปิดใช้งาน JavaScript


ขออภัย แผนภูมิประวัติราคาไม่แสดงผล มันมีข้อความแสดงแทนทางเลือกสำรอง แต่ข้อความแสดงแทนไม่ได้ให้ความคิดแก่ฉันว่าแนวโน้มราคาจะขึ้นหรือลงหรือไม่


คำแนะนำทั่วไป: จัดเตรียมข้อความแสดงแทนที่มีความหมายตลอดเวลา ฉันไม่จำเป็นต้องดูแผนภูมิเสมอไป แต่ฉันจะขอบคุณมากหากสรุปสิ่งที่อยู่ในแผนภูมินั้น บางที ในกรณีนี้ อาจเป็น "แผนภูมิประวัติราคา Amazon ที่แสดงให้เห็นว่าราคาของรายการนี้ยังคงไม่เปลี่ยนแปลงอย่างมากตั้งแต่เดือนมีนาคม 2017" แต่การสร้างสรุปโดยอัตโนมัติเช่นนั้นเป็นเรื่องยากและมีแนวโน้มที่จะเกิดความผิดปกติ
คำแนะนำเฉพาะสำหรับกรณีการใช้งานนี้: แสดงรูปภาพ แผนภูมิบนเวอร์ชันสคริปต์ของไซต์เป็นรูปภาพแบบสแตนด์อโลน ดังนั้นจึงไม่มีเหตุผลใดที่จะไม่สามารถแสดงบนเวอร์ชัน noscript
ได้!
ถึงกระนั้น เนื้อหาหลักด้านล่างแผนภูมิก็ให้ข้อมูลที่ฉันจำเป็นต้องรู้

ตารางนี้แสดงความเท่าเทียมกันของคุณลักษณะที่จำเป็นในการรักษาความปลอดภัยการจัดระดับ NOSCRIPT-5 ฉันถอดหมวกให้คุณ Camel Camel Camel!
Camel Camel Camel คะแนน noscript
: NOSCRIPT-5
ผลิตภัณฑ์ Google
ณ จุดนี้ในสมัยของฉัน ฉันได้รับโทรศัพท์โดยไม่ได้ตั้งใจ: เพื่อนคนหนึ่งโทรหาฉันและถามเกี่ยวกับการนัดพบในสัปดาห์นี้ ดังนั้นฉันจึงไปที่ Google ปฏิทินเพื่อตรวจสอบความพร้อมของฉัน Google มีแนวคิดอื่น!

noscript
ฉันรู้สึกผิดหวังที่ไม่มี noscript
ทางเลือก — โดยปกติแล้ว Google ค่อนข้างจะทำได้ดีในเรื่องนี้
ฉันไม่ได้คาดหวังว่าจะต้องสามารถเพิ่ม/แก้ไข/ลบรายการในปฏิทินของฉันได้ แต่ควร ให้มุมมองแบบอ่านอย่างเดียวของปฏิทินของฉันเป็นเนื้อหาหลัก
การจัดอันดับ noscript
ของ Google ปฏิทิน: NOSCRIPT-0
สนใจที่จะดูว่า Google จัดการผลิตภัณฑ์อื่นๆ อย่างไร ฉันได้ลองดูที่ Google สเปรดชีต:

ในกรณีนี้ เว็บไซต์ล้มเหลวอย่างงดงามมากขึ้น อย่างน้อยฉันก็สามารถอ่านเนื้อหาในสเปรดชีตได้ แม้ว่าจะแก้ไขไม่ได้ก็ตาม เหตุใดปฏิทินจึงไม่เสนอโซลูชันสำรองแบบเดียวกัน
ฉันไม่มีข้อเสนอแนะในการปรับปรุง Google สเปรดชีต! มันทำงานได้ดีใน การแจ้งให้ผู้ใช้ทราบหากฟังก์ชันหลักหายไป จากประสบการณ์ noscript
การให้คะแนน noscript
ของ Google สเปรดชีต: NOSCRIPT-2
เรตติ้งนี้ไม่ได้แย่ขนาดนั้น! ไม่ใช่ทุกไซต์จะสามารถนำเสนอประสบการณ์ที่ไม่ noscript
แต่อย่างน้อยหากพวกเขาตรงไปตรงมาและซื่อสัตย์ (กล่าวคือพวกเขาจะพูดว่า “ใช่ เราจะไม่พยายามให้อะไรคุณ”) ที่เตรียมคุณ — ผู้ใช้ noscript
— สำหรับเมื่อมันล้มเหลว คุณจะไม่เสียเวลาอันมีค่าเพียงไม่กี่วินาทีในการกรอกแบบฟอร์มที่ไม่เคยส่ง หรือเริ่มอ่านบทความที่ต้องใช้ Ajax เพื่อดึงเนื้อหาที่เหลือ
กลับไปที่การซื้อของ Amazon ที่เป็นไปได้ของฉัน ฉันต้องการดูรีวิวของบุคคลที่สามก่อนตัดสินใจซื้อ
การค้นหาของ Google ทำงานได้ดีโดยไม่ต้องใช้ JavaScript มันดูเก่าไปหน่อย เหมือนกับไซต์เดสก์ท็อปอย่างเดียวแบบเก่าที่มีความละเอียดคงที่


noscript
มีตัวเลือกการค้นหาพิเศษทางด้านซ้าย (หรือซ่อนอยู่ในการตั้งค่าในเวอร์ชัน JS) — และไม่มีแบนเนอร์ความเป็นส่วนตัว (อาจเป็นเพราะ 'การติดตาม' ไม่เกี่ยวข้องกับผู้ใช้ noscript
?) 
มุมมองภาพดูแตกต่างมากยิ่งขึ้น และจริงๆ แล้วฉัน ชอบ ในสองสามวิธี — เวอร์ชันนี้โหลดเร็วมาก และแสดงรายการขนาดและขนาดภาพเป็นกิโลไบต์ใต้ภาพขนาดย่อแต่ละภาพ:

noscript
: สังเกตข้อมูลเมตาของรูปภาพซึ่งไม่ได้ระบุไว้ในเวอร์ชันสคริปต์! 
noscript
การให้คะแนน noscript
ของ Google Search: NOSCRIPT-5
ผลการค้นหารายการหนึ่งพาฉันไปรีวิวบน YouTube ฉันคลิกไม่คาดหวังมาก ฉันถูกที่จะไม่ตื่นเต้น:

noscript
มากนักฉันไม่ได้คาดหวังให้ไซต์อย่าง YouTube ทำงานโดยไม่มี JavaScript YouTube ต้องการความสามารถในการสตรีมขั้นสูง ไม่ต้องพูดถึงว่าจะเปิดตัวเองขึ้นมาเพื่อคัดลอกขโมยหากมีการดาวน์โหลด MP4 แบบสแตนด์อโลนเป็นทางเลือกสำรอง ไม่ว่าในกรณีใด ไซต์ใดไม่ควรดูเสียหาย ฉันจ้องไปที่หน้าจอนี้สองสามวินาทีก่อนที่จะรู้ว่าจะไม่มีอะไรเกิดขึ้นอีก
คำแนะนำ : หากไซต์ของคุณไม่สามารถให้โซลูชันทางเลือกสำหรับผู้ใช้ noscript
ได้ อย่างน้อย คุณควรระบุข้อความเตือน noscript
การให้คะแนน noscript
ของ YouTube: NOSCRIPT-0
อย่างไหน?
ฉันคลิกลิงก์ตรวจสอบอีกสองสามลิงก์ ซึ่ง? ไซต์คำแนะนำล้มเหลวอย่างสมบูรณ์

นี่เป็นหน้าที่ดูเหมือนโหลดได้ดี แต่เมื่อคุณอ่านเนื้อหาเท่านั้น คุณจะรู้ว่าจริงๆ แล้วคุณต้องพลาดข้อมูลสำคัญบางประการ ข้อมูลสำคัญนั้นเป็นแก่นแท้ของวัตถุประสงค์ของหน้า และฉันรับไม่ได้ ดังนั้น น่าเสียดาย นั่นเป็นการละเมิด NOSCRIPT-1
คำแนะนำ : หากไซต์ของคุณ Ajaxes ในเนื้อหา เนื้อหานั้นจะมีอยู่ที่ URL อื่น ระบุลิงก์ไปยังเนื้อหานั้นสำหรับผู้ใช้ noscript
ของคุณ คุณสามารถซ่อนลิงก์ได้ตลอดเวลาเมื่อคุณ Ajaxed ด้วย JavaScript สำเร็จ
อย่างไหน? ตรวจสอบคะแนน noscript
ของไซต์: NOSCRIPT-1
เฟสบุ๊ค
ในที่สุด ฉันยอมรับว่าตอนนี้ฉันไม่สามารถซื้อเครื่องดูดฝุ่นได้จริงๆ ดังนั้นฉันจึงตัดสินใจกระโดดเข้าสู่โซเชียลมีเดีย

Facebook Flat-out ปฏิเสธที่จะโหลดโดยไม่มี JavaScript แต่มีตัวเลือกทางเลือกสำรอง นี่คือตัวอย่างแรกของเราสำหรับ NOSCRIPT-4 — ไซต์ที่นำเสนอเนื้อหาเวอร์ชันแยกต่างหากสำหรับผู้ใช้ noscript
หรือฟีเจอร์โฟน

เวอร์ชั่นมือถือโหลดได้ทันที มันดูน่าเกลียด แต่ดูเหมือนว่าฉันได้รับเนื้อหาเหมือนเดิมตามปกติ สิ่งสำคัญคือ ฉันมี คุณสมบัติเท่าเทียมกัน : ฉันสามารถทำสิ่งเดียวกันนี้ให้สำเร็จได้เช่นเดียวกับที่ทำในไซต์หลัก
คะแนน noscript
ของ Facebook: NOSCRIPT-4
หน้าโหลดด้วยความเร็วสูง:

ฉันสามารถเห็นรายการในฟีดข่าวได้ครั้งละ 7 รายการเท่านั้น แต่ฉันสามารถคลิกเพื่อ "ดูเรื่องราวเพิ่มเติม" ซึ่งจะพาฉันไปที่หน้าใหม่โดยใช้เทคนิคการแบ่งหน้าแบบเดิม
ฉันพบว่าตัวเองประทับใจที่มีตัวเลือกในการ 'ตอบสนอง' ต่อความคิดเห็นบน Facebook แม้ว่าจะเป็นงานแบบหลายหน้าจอ:


ไม่มีอะไรหยุด Facebook ในการสร้างเมนู 'ปฏิกิริยา' แบบโฮเวอร์ในรูปแบบที่ไม่ใช่ JavaScript แต่เพื่อความเป็นธรรม สิ่งนี้มุ่งเป้าไปที่อุปกรณ์พกพาที่ไม่สามารถโฮเวอร์ได้
คำแนะนำ : สร้างสรรค์ด้วย CSS คุณอาจพบว่าคุณไม่จำเป็นต้องใช้ JavaScript เลย
ไม่นานก็มีรายการวิดีโอปรากฏขึ้นในฟีดข่าวของฉัน ( ณ จุดนี้ ทำให้ฉันนึกขึ้นได้ว่าเนื้อหาวิดีโอที่ฉันเห็นในเวอร์ชันมือถือน้อยกว่ามากเพียงใดเมื่อเทียบกับ Facebook ปกติ หมายความว่าฉันได้เห็นสถานะของผู้คนจริงๆ มากกว่าวิดีโอสุ่มที่พวกเขา 'ชอบ' — การปรับปรุงครั้งใหญ่ เท่าที่ฉันกังวล!)

ฉันคาดหวังอย่างเต็มที่ว่าวิดีโอจะไม่ทำงานเมื่อฉันคลิก แต่การคลิกที่ภาพขนาดย่อจะเป็นการเปิดวิดีโอในแท็บใหม่:

ฉันประหลาดใจมากที่ฟังก์ชันทั้งหมดปรากฏอยู่ในไซต์เวอร์ชัน noscript
นี้ อย่างไรก็ตาม ในที่สุด ฉันพบคุณลักษณะหนึ่งที่ยุ่งยากและยุ่งยากเกินกว่าจะดูจนจบ นั่นคือ การสร้างอัลบั้ม
ฉันต้องการอัปโหลดอัลบั้มรูปภาพไปที่ Facebook แต่ใน noscript
-land นี่เป็นงานสัตว์ร้าย มันเกี่ยวข้องกับการอัปโหลดภาพครั้งละหนึ่งภาพ โดยต้องผ่านหน้าจอสองหรือสามหน้าจอสำหรับการอัปโหลดแต่ละครั้ง ฉันพยายามอย่างยิ่งและไม่พบตัวเลือกการอัปโหลดจำนวนมาก

ความอุตสาหะของสิ่งนี้มาถึงฉันหลังจากรูปภาพที่สาม (อัลบั้มของฉันจะมีอีกมาก) ดังนั้นฉันจึงตัดสินใจเรียกมันว่าวันนี้และกลับมาในวันพรุ่งนี้เมื่อฉันมี JavaScript
ทวิตเตอร์
สิ่งต่าง ๆ เริ่มแปลกเมื่อฉันบินไปที่ Twitter


ฉันรู้สึกทึ่งกับกลไกนี้ เลยขุดลงไปในซอร์สโค้ด ซึ่งจริงๆ แล้วเรียบง่ายอย่างน่าประหลาดใจ:
<noscript><meta http-equiv="refresh" content="0; URL=https://mobile.twitter.com/i/nojs_router?path=%2F"></noscript>
เรียบง่ายและสวยงามเหมือนวิธีแก้ปัญหานี้ ฉันพบว่าประสบการณ์นั้นค่อนข้างจะอืดๆ เพราะในพริบตาก่อนที่ฉันจะถูกเปลี่ยนเส้นทาง ฉันเห็นว่าหนึ่งในคนที่ฉันติดตามบน Twitter ได้หมั้นหมายแล้ว ทวีตของเขาไม่ปรากฏที่ด้านบนสุดของเวอร์ชัน 'มือถือ' ดังนั้นฉันจึงต้องไปหามัน
คำแนะนำ : สร้างในช่วงเวลาผ่อนผันลงในตรรกะฝั่งเซิร์ฟเวอร์ของคุณ เพื่อที่การเปลี่ยนเส้นทางและการรีเฟรชที่ไม่ระมัดระวังจะไม่สูญเสียทวีตที่น่าสนใจก่อนที่คุณจะมีโอกาสได้อ่าน
ฉันจำชื่อ Twitter ของเพื่อนไม่ได้ การค้นหาค่อนข้างยุ่งยาก — ฉันเริ่มพลาดคำแนะนำในการป้อนอัตโนมัติ!

โชคดีที่หน้าผลการค้นหาทำให้บัญชีของเขาปรากฏขึ้น และฉันก็พบทวีตของเขาได้ ฉันยังตอบได้

การจัดอันดับ noscript
ของ Twitter: NOSCRIPT-4
นี่อาจดูเหมือนเป็นคะแนนที่เอื้อเฟื้อ เมื่อรู้สึกอึดอัด แต่จำไว้ว่าสิ่งสำคัญที่นี่คือความเท่าเทียมกันของคุณลักษณะ ไม่จำเป็นต้องดูสวยงาม
ฉันลองใช้ไซต์โซเชียลมีเดียอีกสองสามไซต์ ซึ่งไม่เหมือนกับ Twitter ที่การปฏิบัติตาม NOSCRIPT-4
เครือข่ายโซเชียลอื่น ๆ
LinkedIn มีหน้าจอการโหลดที่ดี แต่มันไม่เคยโหลดเลย ฉันทำได้แค่จ้องที่โลโก้

การจัดอันดับ noscript
ของ LinkedIn: NOSCRIPT-0
Instagram ไม่ได้ให้อะไรกับฉันอย่างแท้จริง หน้าว่าง. รสชาติอื่นๆ ทั้งหมดของ NOSCRIPT-0

คะแนน Instagram noscript
: NOSCRIPT-0
ฉันรู้สึกประหลาดใจที่ Instagram ล้มเหลวอย่างน่าทึ่งที่นี่ เนื่องจากอินสตาแกรมที่ฝังนั้นทำงานได้อย่างไม่มีที่ติบนไซต์ผลงานของฉัน ฉันเดาว่าด้วยการฝังคุณไม่มีทางรู้เลยว่าเบราว์เซอร์รองรับความคาดหวังของบุคคลที่สามอย่างไร แต่ในขณะที่ฉันเข้าชมเว็บไซต์โดยตรง Instagram ยินดีที่จะยกเลิกการสนับสนุน
ข่าวจากบีบีซี
ฉันไปที่ BBC เพื่อรับการแก้ไขข่าว

noscript
ให้สังเกตคอลัมน์ที่แคบและเรื่องเดียวที่มีภาพขนาดย่อ 
เมนูดูแปลกไปเล็กน้อย และคอลัมน์ค่อนข้างแคบ (แน่นอนว่ารูปแบบที่ฉันเห็นในหลายๆ เว็บไซต์ — ทำไม "ไม่มี JavaScript" หมายถึง "อุปกรณ์เคลื่อนที่"?) แต่ ฉัน สามารถเข้าถึงเนื้อหาได้
ฉันคลิกที่แท็บ 'อ่านมากที่สุด' ซึ่งจะพาฉันไปยังส่วนอื่นของหน้า ด้วยการเขียนสคริปต์ ลิงก์ Anchor นี้ได้รับการปรับปรุงแบบค่อยเป็นค่อยไปเพื่อให้เกิดการทำงานของแท็บจริง ซึ่งเป็นตัวอย่างที่น่ารักของการสร้างจากแกน HTML ที่มั่นคง

จนถึงตอนนี้ นี่เป็นเพียงตัวอย่างเดียวของลิงก์สมอที่ฉันพบในการทดสอบของฉัน ซึ่งเป็นเรื่องน่าละอายเพราะเป็นเทคนิคที่ดีที่ช่วยประหยัดการโหลดหน้าเพิ่มเติม และบันทึกการแตกแฟรกเมนต์ไซต์ลงในไมโครเพจจำนวนมาก
มันดูแปลก ๆ เล็กน้อยแม้ว่า CSS ของรายการที่ได้รับคำสั่งหมายความว่าเรามีข้อผิดพลาดในการกำหนดหมายเลขสองครั้งที่นี่ ฉันคลิกที่เรื่องใดเรื่องหนึ่ง

ฉันไม่สามารถเข้าถึงเนื้อหาวิดีโอได้ แต่เนื่องจากปัญหาด้านสิทธิ์ ฉันสงสัยว่า BBC ไม่สามารถให้วิดีโอแบบสแตนด์อโลนแยกจาก Facebook ได้ แม้ว่าทรานสคริปต์จะดี — และมีประโยชน์มากกว่าผู้ใช้ noscript
คำแนะนำ : ระบุข้อความทางเลือกสำหรับเนื้อหาภาพและเสียง
เพื่อความเป็นธรรม เนื้อหาของบทความโดยพื้นฐานแล้วจะสรุปเนื้อหาที่ปรากฏในวิดีโอ ดังนั้นฉันจึงไม่พลาดข้อมูลจริงๆ
หน้าบทความและดัชนีโหลดเร็วปานสายฟ้า ที่ประมาณ 300KB (ส่วนใหญ่เป็นรูปภาพ) ฉันคิดถึงภาพขนาดย่อของบทความอื่นๆ บนหน้า และความสามารถในการใช้ประโยชน์จากพื้นที่หน้าจอของฉันได้อย่างเต็มที่ — แต่นั่นไม่ควรขัดขวางการให้คะแนน
คะแนนของ BBC noscript
: NOSCRIPT-5
GitHub
GitHub มีลักษณะเกือบ เหมือนกัน ทุกประการกับคู่หูที่เปิดใช้งาน JavaScript ว้าว! แต่ฉันเดาว่านี่คือไซต์ที่พัฒนาโดยนักพัฒนา สำหรับนักพัฒนา


ฉันทำความสะอาด GitHub เล็กน้อย โดยดูรอบๆ repos และลบสาขาเก่า ฉันลืมไปเลยว่าเคยใช้เวอร์ชันที่ไม่ใช่ JavaScript อยู่พักหนึ่ง จนกระทั่งเจอข้อผิดพลาดเล็กๆ น้อยๆ ตัวหนึ่ง:

จากนั้นฉันก็สงสัยว่า "GitHub จะจัดการกับการใช้ป้ายกำกับกับปัญหาอย่างไร" ดังนั้นฉันจึงให้ไป

ฉันไม่สามารถสร้างปัญหาและเพิ่มป้ายกำกับพร้อมกันได้ อันที่จริง ฉันไม่สามารถหาวิธีเพิ่มป้ายกำกับได้แม้ว่าจะสร้างปัญหาเปล่าแล้วก็ตาม น่าเสียดายที่ไซต์ตกในอุปสรรคสุดท้าย เพราะมันเกือบจะเปรียบเทียบได้อย่างราบรื่นกับเวอร์ชันสคริปต์
การจัดอันดับ noscript
GitHub: NOSCRIPT-3
แม้ว่า GitHub จะดู น่าเหลือเชื่อ — ฉันไม่เคยรู้เลยว่า JavaScript ของฉันถูกปิด — ไม่สามารถใช้งานฟังก์ชั่นหลักแบบเดียวกันได้เนื่องจากเวอร์ชันสคริปต์นั้นคนเกียจคร้าน แม้แต่ไซต์ noscript
ที่ดูน่าเกลียดก็ยังได้รับคะแนนสูงกว่า เนื่องจากฟังก์ชันการทำงานสำคัญกว่ารูปแบบ
ธนาคารออนไลน์
หากมีที่ใดที่ฉันคาดว่าจะต้องใช้ JavaScript ก็คือที่เว็บไซต์ NatWest Bank ฉันผิดไป.

ไม่เพียงแค่ใช้งานได้ แต่ยังแยกความแตกต่างจากไซต์ปกติได้ยากอีกด้วย หน้าจอเข้าสู่ระบบจะเหมือนกัน ความแตกต่างเพียงอย่างเดียวคือโฟกัสไม่ดำเนินการผ่านแต่ละฟิลด์โดยอัตโนมัติเมื่อคุณทำเสร็จ
การจัดอันดับของ NatWest: noscript
-5
เบ็ดเตล็ด
ฉันเจอไซต์อื่นอีกสองสามแห่งตลอดทั้งวัน
FreeAgent — ไซต์ซอฟต์แวร์ภาษีที่ฉันใช้สำหรับงานฟรีแลนซ์ — ไม่ได้ลองใช้ทางเลือก noscript
ด้วยซ้ำ แต่เดี๋ยวก่อน ดีกว่าแสดงเว็บไซต์ที่เสียหาย

การจัดอันดับ noscript
FreeAgent: NOSCRIPT-2
และ CodePen ที่ค่อนข้างเข้าใจได้ต้องเป็น NOSCRIPT-2 ด้วย

การให้คะแนน noscript
ของ CodePen: NOSCRIPT-2
Tonik ผู้ให้บริการด้านพลังงานไม่อนุญาตให้ฉันเข้าสู่ระบบ แต่ดูเหมือนว่าจะเป็นการกำกับดูแลมากกว่าการตัดสินใจโดยเจตนา:

การจัดอันดับ Tonik noscript
: NOSCRIPT-1
M&S Energy ให้ฉันเข้าสู่ระบบ — เพียงบอกฉันว่าต้องใช้ JavaScript เพื่อทำสิ่งที่มีประโยชน์จากระยะไกล

การให้คะแนนของ M&S: noscript
-1
ตอนนี้ฉันมาที่ภาพหน้าจอที่ฉันโปรดปรานในวันนี้
เพื่อนร่วมงานคนหนึ่งของฉันเคยแนะนำหลักสูตรการช่วยสำหรับการเข้าถึงสำหรับการออกแบบเว็บ ซึ่งฉันบุ๊กมาร์กไว้ ฉันตัดสินใจดูวันนี้ และหัวเราะเยาะข้อความแสดงแทนที่ประชดประชัน:

ด้วยข้อความแสดงแทนของ “Personas: Accessibility for Web Design” ฉันไม่แน่ใจเหมือนกันว่าขาดอะไรไป นี่คือรูปภาพใช่หรือไม่ วิดีโอ? PDF? หลักสูตรตัวเอง?
คำแนะนำ : จริงๆ แล้วมันเป็นวิดีโอ แม้ว่าคุณจะต้องลงชื่อเข้าใช้เพื่อรับชม
ข้อความแสดงแทนไม่สนับสนุนวัตถุประสงค์จริงๆ ส่วนหนึ่งเป็นเพราะข้อความเติมโดยอัตโนมัติ เราในฐานะชุมชนนักพัฒนาซอฟต์แวร์จำเป็นต้องพัฒนาสิ่งนี้ให้ดีขึ้น ฉันไม่คิดว่าฉันได้อ่านข้อความแสดงแทนที่เป็นประโยชน์ในวันนี้
สรุป
ฉันเริ่มการทดลองนี้โดยมีเป้าหมายเพื่อดูว่ามีการใช้งานไซต์กี่แห่งโดยใช้การปรับปรุงแบบก้าวหน้า ฉันเคยเยี่ยมชมเว็บไซต์เพียงไม่กี่แห่งที่นี่ ส่วนใหญ่เป็นชื่อใหญ่ที่มีงบประมาณสูง ดังนั้นจึงเป็นเรื่องที่น่าสนใจที่จะเห็นรูปแบบที่หลากหลายในการรองรับ no-JavaScript
เป็นเรื่องที่น่าสนใจที่จะเห็นว่าไซต์ที่ค่อนข้างง่าย — โดยเฉพาะ Instagram และ LinkedIn — มีการสนับสนุน noscript
ที่ไม่ดีเช่นนี้ ฉันเชื่อว่าส่วนหนึ่งเป็นผลมาจากความนิยมที่เพิ่มขึ้นเรื่อยๆ ของเฟรมเวิร์ก JavaScript เช่น React, Angular และ Vue ขณะนี้นักพัฒนาซอฟต์แวร์กำลังสร้าง "แอปพลิเคชันบนเว็บ" แทนที่จะเป็น "เว็บไซต์" โดยมีเป้าหมายเพื่อสร้างรูปลักษณ์และความรู้สึกของแอปที่มาพร้อมเครื่องขึ้นใหม่ และการใช้ JavaScript เพื่อจัดการ DOM เป็นวิธีที่จัดการได้มากที่สุดในการสร้างประสบการณ์ดังกล่าว
มีความเสี่ยงที่เว็บไซต์จำนวนมากขึ้นเรื่อยๆ ที่ต้องใช้ JavaScript เพื่อแสดงผลเนื้อหาใดๆ เลย โชคดีที่โดยปกติแล้วคุณสามารถสร้างเนื้อหาของคุณในลักษณะเดียวกัน เป็นมิตรกับนักพัฒนา แต่แสดงผลบนเซิร์ฟเวอร์ เช่น โดยใช้ Preact แทน React การตัดสินใจอย่างมีสติในการดูแล noscript
ทำให้เกิดประโยชน์จากประสบการณ์หลักตามที่อธิบายไว้ในตอนต้นของบทความนี้ และทำให้เวลาในการโหลดเร็วขึ้นเช่นกัน
การคิดเกี่ยวกับแอปพลิเคชันตั้งแต่ต้นอาจเป็นเรื่องที่ค่อนข้างยากลำบาก แต่ประสบการณ์หลักที่ดีนั้นมักจะเป็นไปได้และจริงๆ แล้วเกี่ยวข้องกับการปรับแต่งอย่างง่ายในหลายๆ กรณีเท่านั้น ประสบการณ์หลักที่ดีจะบ่งบอกถึงหน้าเว็บที่มีโครงสร้างที่ดี ซึ่งในทางกลับกัน ก็เป็นสัญญาณที่ดีสำหรับ SEO และสำหรับการเข้าถึง โดยปกติแล้วจะเป็นหน้าเว็บที่ ออกแบบมา อย่างดี เนื่องจากนักออกแบบและนักพัฒนาได้ใช้เวลาและความพยายามในการคิดว่าอะไรคือแก่นแท้ของประสบการณ์ที่ได้รับ การปรับปรุงที่ก้าวหน้าหมายถึงประสบการณ์ที่แข็งแกร่งยิ่งขึ้น โดยมีข้อบกพร่องในการผลิตน้อยลงและข้อบกพร่องของเบราว์เซอร์แต่ละตัวน้อยลง เนื่องจากเราปล่อยให้แพลตฟอร์มทำงานแทนการพยายามเขียนทั้งหมดตั้งแต่เริ่มต้น
ไซต์ของคุณสอดคล้องกับคะแนน noscript
ใด แจ้งให้เราทราบในความคิดเห็น!