ฉันใช้เว็บเป็นเวลาหนึ่งวันโดยที่ JavaScript ปิดอยู่

บทความนี้เป็นส่วนหนึ่งของชุดข้อมูลที่ฉันพยายามใช้เว็บภายใต้ข้อจำกัดต่างๆ ซึ่งแสดงถึงข้อมูลประชากรของผู้ใช้ที่กำหนด ฉันหวังว่าจะเพิ่มรายละเอียดของความยากลำบากที่คนจริงต้องเผชิญ ซึ่งสามารถหลีกเลี่ยงได้หากเราออกแบบและพัฒนาในลักษณะที่เห็นอกเห็นใจต่อความต้องการของพวกเขา สัปดาห์นี้ฉันกำลังปิดการใช้งาน JavaScript

ทำไม noscript เรื่อง

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

คุณอาจมีเนื้อหาที่มีประโยชน์มากมายในแท็ก noscript ของคุณ แต่ถ้าฉันใช้เบราว์เซอร์ที่เปิดใช้งาน JavaScript ฉันจะไม่เห็นสิ่งนั้น — ฉันจะต้องรอให้ดาวน์โหลดประสบการณ์ JS เมื่อฉันอ้างถึงประสบการณ์ 'noscript' ฉันมักหมายถึง ประสบการณ์ในการใช้หน้าเว็บโดยไม่มี JavaScript มากกว่าการใช้แท็กอย่างชัดแจ้ง

แล้วใครสนใจเกี่ยวกับผู้ใช้ที่ไม่มี 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:

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

โชคดีที่มีมุมมองทางเลือก:

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

ฉันตัดสินใจที่จะดูว่าส่วนหน้าของไซต์ของฉันเป็นอย่างไร

การดูไซต์ของฉันโดยไม่ใช้ JavaScript

ฉันประหลาดใจมากที่ไซต์ของฉันดูเหมือนเดิมมากโดยไม่มี JS:

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

ที่ครึ่งหน้าล่างของไซต์ของฉัน ฉันยังฝังเนื้อหา 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 แบบไบต์พิเศษให้กับผู้ใช้ทั้งหมดของคุณเพื่อที่จะเปิดขึ้นเป็นโมดอลที่ผสานรวมภายในหน้าเว็บหรือไม่

ปัญหา

โซลูชั่นที่มีศักยภาพ

รูปแบบโมดอลที่ผสานรวมของ 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 ทางเลือก — โดยปกติแล้ว Google ค่อนข้างจะทำได้ดีในเรื่องนี้

ฉันไม่ได้คาดหวังว่าจะต้องสามารถเพิ่ม/แก้ไข/ลบรายการในปฏิทินของฉันได้ แต่ควร ให้มุมมองแบบอ่านอย่างเดียวของปฏิทินของฉันเป็นเนื้อหาหลัก

การจัดอันดับ noscript ของ Google ปฏิทิน: NOSCRIPT-0

สนใจที่จะดูว่า Google จัดการผลิตภัณฑ์อื่นๆ อย่างไร ฉันได้ลองดูที่ Google สเปรดชีต:

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

ฉันไม่มีข้อเสนอแนะในการปรับปรุง Google สเปรดชีต! มันทำงานได้ดีใน การแจ้งให้ผู้ใช้ทราบหากฟังก์ชันหลักหายไป จากประสบการณ์ noscript

การให้คะแนน noscript ของ Google สเปรดชีต: NOSCRIPT-2

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

กลับไปที่การซื้อของ Amazon ที่เป็นไปได้ของฉัน ฉันต้องการดูรีวิวของบุคคลที่สามก่อนตัดสินใจซื้อ

การค้นหาของ Google ทำงานได้ดีโดยไม่ต้องใช้ JavaScript มันดูเก่าไปหน่อย เหมือนกับไซต์เดสก์ท็อปอย่างเดียวแบบเก่าที่มีความละเอียดคงที่

มุมมองภาพดูแตกต่างมากยิ่งขึ้น และจริงๆ แล้วฉัน ชอบ ในสองสามวิธี — เวอร์ชันนี้โหลดเร็วมาก และแสดงรายการขนาดและขนาดภาพเป็นกิโลไบต์ใต้ภาพขนาดย่อแต่ละภาพ:

การให้คะแนน noscript ของ Google Search: NOSCRIPT-5

ผลการค้นหารายการหนึ่งพาฉันไปรีวิวบน YouTube ฉันคลิกไม่คาดหวังมาก ฉันถูกที่จะไม่ตื่นเต้น:

ฉันไม่ได้คาดหวังให้ไซต์อย่าง 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 เพื่อรับการแก้ไขข่าว

เมนูดูแปลกไปเล็กน้อย และคอลัมน์ค่อนข้างแคบ (แน่นอนว่ารูปแบบที่ฉันเห็นในหลายๆ เว็บไซต์ — ทำไม "ไม่มี 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 ใด แจ้งให้เราทราบในความคิดเห็น!