วิธีตรวจสอบว่าฟังก์ชันการทำงานหลักของเว็บไซต์พร้อมใช้งาน เข้าถึงได้ ปลอดภัย ใช้งานได้ ค้นพบได้ และรวดเร็วเสมอ
หน้านี้มีคำแนะนำเพื่อช่วยให้มั่นใจว่าเว็บไซต์ของคุณพร้อมใช้งาน เข้าถึงได้ ปลอดภัย และทุกคนใช้งานได้ตลอดเวลา
คำแนะนำในหน้านี้มาจากกลุ่มทีมที่ทำงานข้ามสายงานภายใน Google ซึ่งกำลังเปลี่ยนจุดมุ่งหมายในระยะสั้นเพื่อสนับสนุนเว็บไซต์ที่ช่วยให้ผู้คนปลอดภัยในช่วงที่มีสถานการณ์โควิด-19 ผู้ใช้ Google เหล่านี้เห็นว่าไซต์ต่างๆ กำลังเผชิญกับความต้องการเพิ่มขึ้นอย่างที่ไม่เคยมีมาก่อนจากผู้ที่กำลังมองหาข้อมูลสำคัญ โดยส่วนใหญ่เป็นผู้เข้าชมน้อยหรือไม่เคยใช้เว็บมาก่อน การตรวจสอบว่าเว็บไซต์พร้อมใช้งานในช่วงเวลานี้และทุกคนเข้าถึงได้คงไม่ใช่เรื่องง่าย
คำแนะนำ
ความพร้อมใช้งาน ความเสถียร ความยืดหยุ่น และความเสถียร
หากเว็บไซต์มีการเข้าชมเพิ่มสูงขึ้นอย่างฉับพลันและเกิดข้อผิดพลาดหรือต้องการป้องกันไม่ให้เว็บไซต์ทำงานไม่สำเร็จ คำแนะนำด้านล่างจะช่วยให้คุณแก้ไขปัญหาหรือตรวจพบได้อย่างรวดเร็วก่อนที่ปัญหาจะกลายเป็นปัญหาใหญ่ได้
- โปรดอ่านแก้ปัญหาเซิร์ฟเวอร์ทำงานหนักเกินไปเพื่อดูวิธีตรวจหา บรรเทา และป้องกันปัญหาการรับส่งข้อมูลที่เพิ่มขึ้นอย่างรวดเร็ว
- นำรูปภาพ วิดีโอ สคริปต์ และแบบอักษรที่ไม่จำเป็นออก ตรวจสอบว่าแต่ละหน้ามุ่งเน้นเฉพาะการมอบฟังก์ชันที่ผู้คนที่ใช้เว็บไซต์ของคุณต้องการจริงๆ
- การเพิ่มประสิทธิภาพให้กับรูปภาพอาจลดการใช้แบนด์วิดท์ของเซิร์ฟเวอร์ได้อย่างมาก เนื่องจากรูปภาพเป็นแหล่งที่มาอันดับ 1 ของการขยายตัวบนเว็บ
- ลดจำนวนเนื้อหาคงที่ลงใน CDN ให้มากที่สุด รายละเอียดเพิ่มเติมจากผู้ให้บริการทั่วไป ได้แก่ AWS, Azure, Cloudflare, Google Cloud, Firebase
- ตรวจสอบว่า CDN มีการเพิ่มประสิทธิภาพที่เปิดได้ง่ายหรือไม่ เช่น การบีบอัดรูปภาพแบบไดนามิก การบีบอัดข้อความ หรือการลดขนาดโดยอัตโนมัติของทรัพยากร JS และ CSS
- การเพิ่มประสิทธิภาพการแคช HTTP สามารถลดความต้องการบนเซิร์ฟเวอร์ได้อย่างมากด้วยการเปลี่ยนแปลงโค้ดเพียงเล็กน้อย ดูแคช HTTP: ด่านแรกในการป้องกันเพื่อดูภาพรวม รวมถึงการแคช HTTP และแนวทางปฏิบัติแนะนำในการแคชคำแนะนำที่เจาะจง การตรวจสอบแสดงเนื้อหาแบบคงที่ด้วยนโยบายแคชที่มีประสิทธิภาพใน Lighthouse จะช่วยให้คุณตรวจหาทรัพยากรที่ไม่ได้แคชได้อย่างรวดเร็ว โปรดทราบว่าทรัพยากรแต่ละประเภทจะมีข้อกำหนดเรื่องความใหม่ที่ต่างกัน และจึงต้องใช้กลยุทธ์การแคชที่ต่างกันด้วย
- Service Worker เป็นอีกวิธีหนึ่งที่จะลดความต้องการบนเซิร์ฟเวอร์ได้อย่างมาก แต่อาจต้องใช้การลงทุนทางเทคนิคอย่างมาก และยังทำให้เว็บไซต์ทำงานแบบออฟไลน์ได้ ซึ่งช่วยให้คุณแสดงเวลาทำการ หมายเลขโทรศัพท์ และข้อมูลอื่นๆ แก่ผู้ใช้ที่กลับมาได้โดยไม่ต้องเชื่อมต่ออินเทอร์เน็ต Workbox
เป็นวิธีที่แนะนำสำหรับการเพิ่ม Service Worker ลงในเว็บไซต์เนื่องจากเป็นต้นแบบอัตโนมัติจำนวนมาก ทำให้ทำตามแนวทางปฏิบัติแนะนำได้ง่ายขึ้น และป้องกันข้อบกพร่องเล็กๆ น้อยๆ ที่พบบ่อยเมื่อใช้
ServiceWorker
API ระดับต่ำโดยตรง - หากเว็บไซต์มีการใช้งานที่เพิ่มขึ้นอย่างมาก ให้ตรวจสอบว่าคุณมีการป้องกันการโจมตี DDoS อย่างเพียงพอหรือไม่ เนื่องจากตอนนี้เว็บไซต์อาจเป็นเป้าหมายที่น่าสนใจมากขึ้น รายละเอียดเพิ่มเติมจากผู้ให้บริการทั่วไป ได้แก่ AWS, Azure, Cloudflare, Google Cloud
โปรดดูความเสถียรของเครือข่ายสำหรับคำแนะนำเพิ่มเติม
การช่วยเหลือพิเศษ
การมุ่งเน้นที่การช่วยเหลือพิเศษเป็นสิ่งที่สำคัญกว่าที่เคย เพราะผู้คนจำนวนมากที่มีความต้องการหลากหลายอาจจะกำลังเข้าถึงเว็บไซต์ของคุณ ปฏิบัติตามหลักเกณฑ์ด้านล่างเพื่อให้แน่ใจว่าทุกคนจะเข้าถึงฟังก์ชันหลักของเว็บไซต์ได้
- การช่วยเหลือพิเศษคือการทำงานเป็นทีม และทุกคนล้วนมีบทบาท เริ่มด้วยการอ่านคู่มือการช่วยเหลือพิเศษสำหรับทีมของ Google และคู่มือทีมจากบริการดิจิทัลของสหรัฐอเมริกา คู่มือเหล่านี้จะอธิบายสิ่งที่สมาชิกในทีมแต่ละคน (ผู้จัดการผลิตภัณฑ์ วิศวกร นักออกแบบ QA และอื่นๆ) สามารถร่วมให้ข้อมูลได้
- ทำการตรวจสอบการช่วยเหลือพิเศษเพื่อดูว่าสิ่งใดทำงานได้ดีและสิ่งใดที่ต้องปรับปรุง ส่วนขยายเบราว์เซอร์ WAVE จะช่วยแนะนำคุณตลอดขั้นตอนการตรวจสอบการช่วยเหลือพิเศษในเว็บไซต์ด้วยตนเอง
- อ่านคำแนะนำเกี่ยวกับการช่วยเหลือพิเศษเพื่อทำความเข้าใจหัวข้อหนึ่งๆ ให้ดียิ่งขึ้น เช่น การไปยังส่วนต่างๆ ด้วยแป้นพิมพ์และการสนับสนุนโปรแกรมอ่านหน้าจอ
- เรียกใช้การตรวจสอบ Lighthouse เพื่อตรวจหาปัญหาการช่วยเหลือพิเศษที่พบบ่อย รายงานนี้มีรายการของการตรวจสอบโดยเจ้าหน้าที่ซึ่งคุณดำเนินการเพื่อปรับปรุงความสามารถในการทำงานของเว็บไซต์ได้ โปรดทราบว่าคะแนนการเข้าถึงที่ 100 ไม่ได้รับประกันว่าเว็บไซต์ของคุณสามารถเข้าถึงได้ มีปัญหาสำคัญหลายอย่างที่ Lighthouse ไม่สามารถทดสอบในรูปแบบอัตโนมัติได้ ดังนั้นการตรวจสอบโดยเจ้าหน้าที่จึงเป็นเรื่องสำคัญ ซึ่งเครื่องมือตรวจสอบอัตโนมัติอื่นๆ ได้แก่ WAVE API และส่วนขยาย AXE
- ศึกษาหลักสูตรเริ่มสร้างเว็บแอปพลิเคชันที่เข้าถึงได้ง่ายในวันนี้ที่ egghead.ioหรือลองไปที่หลักสูตร Web Accessibility ใน Udacity
- ดูเพลย์ลิสต์ A11ycast สำหรับเคล็ดลับง่ายๆ เพิ่มเติมเกี่ยวกับหัวข้อด้านการช่วยเหลือพิเศษที่เฉพาะเจาะจง
ข้อมูลระบุตัวตน ความปลอดภัย และความเป็นส่วนตัว
คุณอาจจะอยากใช้ทางลัดเพื่อแก้ไขปัญหานี้ แต่ต้องระมัดระวังอยู่เสมอว่าคุณไม่ได้เปิดช่องโหว่ในการรักษาความปลอดภัยเพื่อดำเนินการดังกล่าว ผู้คนจำเป็นต้องเข้าถึงเนื้อหาในหัวข้อที่เป็นส่วนตัวอย่างมาก เว็บไซต์ต้องปกป้องข้อมูลที่ละเอียดอ่อนของผู้ใช้นี้ในทุกระดับและทำให้ผู้คนเชื่อว่าข้อมูลส่วนบุคคลที่ระบุตัวบุคคลนั้นได้ (PII) ของตนปลอดภัย
- ทำความเข้าใจสาเหตุที่ทุกเว็บไซต์ควรได้รับการปกป้องด้วย HTTPS ไม่ใช่แค่เว็บไซต์ที่จัดการข้อมูล PII ที่ละเอียดอ่อนเท่านั้น
- เปลี่ยนไปใช้ผู้ให้บริการโฮสติ้งที่ใช้ HTTPS โดยค่าเริ่มต้น หรือใช้ Let's Encrypt หรือบริการที่คล้ายกันเพื่อเปิดใช้ HTTPS บนเซิร์ฟเวอร์
- อ่านคําอธิบายเกี่ยวกับคุกกี้ SameSite เพื่อดูวิธีทำให้การใช้คุกกี้ปลอดภัยยิ่งขึ้น โปรดทราบว่าเราได้เปลี่ยนการบังคับใช้การติดป้ายกำกับคุกกี้ SameSite ชั่วคราวแล้ว
โปรดดูคำแนะนำเพิ่มเติมในปลอดภัยหายห่วง
ความสามารถในการใช้งาน, UI และ UX
ผู้คนพึ่งพาเว็บมากขึ้นเพื่อตอบสนองความต้องการพื้นฐาน คนเหล่านี้จึงไม่ได้ใช้เว็บบ่อย ควรตรวจสอบความสามารถในการใช้งานฟังก์ชันหลักของเว็บไซต์ และดูว่าเรียบง่ายและใช้ง่ายที่สุดเท่าที่จะทำได้
- ลองเพิ่มแบนเนอร์ที่โดดเด่น (สามารถนำออกได้ด้วยปุ่ม X) ที่ด้านบนของเว็บไซต์ซึ่งอธิบายการอัปเดตบริการอย่างชัดเจน ใช้คำกระตุ้นให้ดำเนินการ (Call-To-Action) ในแบนเนอร์เพื่อนำผู้ใช้ไปยังแหล่งข้อมูลที่เฉพาะเจาะจงมากขึ้น ลองใช้สีและแบบอักษรที่แตกต่างและโดดเด่นจากเนื้อหาอื่นๆ ของหน้าเว็บ เขียนด้วยความเห็นอกเห็นใจ มุ่งเน้นที่ความต้องการของผู้คน และโปร่งใสเกี่ยวกับประเภทของบริการที่คาดว่าจะได้รับ
- มองหาโอกาสในการลดการโต้ตอบทางกายภาพในเส้นทางของผู้ใช้ที่สำคัญ (CUJ) และแนะนำการเปลี่ยนแปลงดังกล่าวให้ทีมผลิตภัณฑ์ เช่น หากบริการจัดส่งของร้านของคุณต้องใช้ลายเซ็นเป็นประจำ ให้ดูว่ามีวิธีที่จะช่วยแก้ปัญหานี้หรือไม่
- ตรวจสอบอีกครั้งว่า CUJ ของคุณใช้งานง่ายและสะดวกที่สุด และแนะนำการเปลี่ยนแปลงกับทีมผลิตภัณฑ์หากคุณเห็นโอกาสในการปรับปรุง
- ดูหลักการออกแบบอุปกรณ์เคลื่อนที่ที่ดีและลองใช้ CUJ บนอุปกรณ์เคลื่อนที่ต่างๆ เพื่อให้แน่ใจว่าไม่มีปัญหาใดๆ ชัดเจน คนที่ไม่ได้ใช้เว็บบ่อยแต่จู่ๆ ก็พบว่าตัวเองต้องพึ่งพาเว็บมากขึ้นก็มักจะเข้าถึงเว็บไซต์ของคุณจากอุปกรณ์เคลื่อนที่
- เปลี่ยนโครงสร้างเว็บไซต์ให้ใช้รูปแบบการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ให้ได้มากที่สุด
- ตรวจสอบว่าแบบฟอร์มมีประสิทธิภาพและออกแบบมาอย่างดี
SEO
ผู้คนกำลังมองหาข้อมูลที่สำคัญและเกี่ยวข้องกับงานด้านสุขภาพ การทำให้เครื่องมือค้นหาทั้งหมดค้นพบเว็บไซต์ของคุณ เป็นเรื่องที่สำคัญ การตรวจสอบ SEO ของ Lighthouse ช่วยให้คุณตรวจจับปัญหาพื้นฐานได้ ติดตามบล็อกอย่างเป็นทางการของเครื่องมือค้นหาเพื่อดูคำแนะนำและอัปเดตล่าสุด: Google, Bing, Baidu, DuckDuckGo, Yandex โพสต์ล่าสุดที่เกี่ยวข้องกับโควิด-19:
- วิธีเปลี่ยนกิจกรรมออนไลน์ในขณะเดียวกันก็ลดผลกระทบต่อการปรากฏของ Google Search
- พร็อพเพอร์ตี้ใหม่สำหรับกิจกรรมออนไลน์ กิจกรรมที่ถูกเลื่อนออกไป และกิจกรรมที่ถูกยกเลิก
- Bing ใช้มาร์กอัป schema.org สำหรับประกาศพิเศษสำหรับโควิด-19
- เพิ่มข้อมูลที่มีโครงสร้างลงในประกาศเกี่ยวกับสถานการณ์โควิด-19
- การช่วยองค์กรด้านสุขภาพทำให้ข้อมูลเกี่ยวกับ โควิด-19 เข้าถึงได้มากขึ้น
- แนวทางปฏิบัติแนะนำทั่วไปสำหรับ Search สำหรับเว็บไซต์ด้านสุขภาพและเว็บไซต์ของรัฐบาล
ดูคำแนะนำเพิ่มเติมได้ในค้นพบได้
การแสดง
ISP บางราย (เช่น ในอินเดีย) พบว่าการใช้งานอินเทอร์เน็ตในบ้านเพิ่มขึ้นอย่างรวดเร็ว และไม่มีโครงสร้างพื้นฐานเพื่อตอบสนองความต้องการที่เพิ่มขึ้น ในสถานการณ์เช่นนี้ ความเร็วเว็บไซต์อาจช้าลงโดยไม่ใช่ความผิดของคุณ การเพิ่มประสิทธิภาพการโหลดอาจเป็นวิธีชดเชยอุปสรรคจากแบนด์วิดท์ที่ลดลง กล่าวคือ การลดจำนวนไบต์ที่ต้องส่งผ่านเครือข่ายเพื่อโหลดหน้าเว็บจะช่วยลดผลกระทบด้านประสิทธิภาพของแบนด์วิดท์ที่ลดลงได้
- รูปภาพเป็นสาเหตุอันดับหนึ่งของการขยายตัวบนเว็บ คุณอาจลดการใช้แบนด์วิดท์ของเว็บไซต์อย่างมากได้โดยการเพิ่มประสิทธิภาพรูปภาพ Squoosh เป็นเครื่องมือบีบอัดรูปภาพแบบโอเพนซอร์สที่ใช้งานง่าย ซึ่งจะช่วยให้คุณบีบอัดรูปภาพได้อย่างรวดเร็ว
- เรียกใช้ WebPageTest หรือ Lighthouse เพื่อค้นหาโอกาสในการปรับปรุงประสิทธิภาพสูงสุด
- เปิดใช้การบีบอัดข้อความเพื่อลดขนาดเครือข่าย ของทรัพยากรข้อความ ซึ่งมักทำได้ง่ายดาย โดยต้องใช้การลงทุนทางเทคนิคเพียงเล็กน้อย
- อ่านการแก้ไขความเร็วเว็บไซต์ข้ามสายงานเพื่อดูวิธีทำงานร่วมกันและรับความเห็นชอบจากแผนกอื่นๆ
- ใช้การโหลดแบบ Lazy Loading มาตรฐานสำหรับรูปภาพเพื่อลดจำนวนคำขอรูปภาพที่ผู้คนอาจไม่เคยเห็นจริงๆ ความเข้ากันได้กับเบราว์เซอร์ไม่ใช่ 100% แต่ฟีเจอร์นี้ถือเป็นการเพิ่มประสิทธิภาพแบบต่อเนื่องได้ กล่าวคือ หากบางเบราว์เซอร์ไม่รองรับการโหลดแบบ Lazy Loading ให้เป็นมาตรฐาน รูปภาพก็ควรโหลดตามปกติ
- ตรวจสอบว่าเว็บไซต์มีสคริปต์การทดสอบ A/B หรือสคริปต์การปรับเปลี่ยนในแบบของคุณที่โหลดแบบไม่พร้อมกันมากขึ้นหรือไม่ หรือสคริปต์มีฟังก์ชันที่ไม่สำคัญในสคริปต์ที่ปิดใช้ได้หรือไม่ การทดสอบ A/B และสคริปต์การปรับเปลี่ยนในแบบของคุณมักจะโหลดแบบไม่พร้อมกันโดยสมบูรณ์เพราะสคริปต์ดังกล่าวต้องทำงานก่อนที่เนื้อหาในหน้าเว็บจะโหลด แต่อาจมีโอกาสในการโหลดสคริปต์บางส่วนแบบไม่พร้อมกันมากขึ้น ดูเส้นทางการแสดงผลที่สำคัญเพื่อทำความเข้าใจความแตกต่างพื้นฐานระหว่างสคริปต์แบบซิงโครนัส (หรือที่เรียกว่าสคริปต์การบล็อกการแสดงผล) โดยทั่วไปกับเวลาในการโหลดหน้าเว็บ จากนั้นตัดสินใจว่าต้องจัดลำดับความสำคัญของสคริปต์ที่บล็อกการแสดงผลมากกว่าเวลาในการโหลดหน้าเว็บ หรือกลับกัน
- โค้ดของบุคคลที่สามคิดเป็นประมาณครึ่งหนึ่งของคำขอทั้งหมดสำหรับเว็บไซต์ส่วนใหญ่ ลองพิจารณาoptimizingหรือนำโค้ดของบุคคลที่สามออกชั่วคราวซึ่งไม่เกี่ยวข้องกับการทำงานของเว็บไซต์ออก
- หากการเปิดตัวฟีเจอร์ถูกลดลำดับความสำคัญ นี่อาจเป็นเวลาที่เหมาะสมสำหรับการล้างข้อมูล นำแท็กออกจากเครื่องจัดการแท็ก ล้าง CSS และ JS ที่มากเกินไป และนำฟีเจอร์หรือโค้ดที่เลิกใช้งานแล้วออก แท็บการครอบคลุม
ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome และคลาส
Coverage
ใน Puppeteer จะช่วยให้คุณตรวจหาโค้ดที่ไม่ได้ใช้ได้
โปรดดูเวลาในการโหลดที่รวดเร็วสำหรับคำแนะนำเพิ่มเติม
รูปภาพหลักโดย NASA ใน Unsplash