เหตุผลและสิ่งที่ควรทำ
คุณอาจเคยได้ยินเกี่ยวกับข้อดีทั้งหมดที่เทคนิค Progressive Web App มอบให้เว็บไซต์ คุณอาจอยากลองเพิ่มฟีเจอร์ PWA เลย เป็นไปได้ แต่คุณจะได้รับประโยชน์มากกว่าหาก "พร้อมใช้งาน PWA" ก่อน
ไม่ว่า PWA จะวิเศษเพียงใดก็ไม่สามารถแก้ปัญหาต่างๆ เช่น การบล็อก JavaScript หรือรูปภาพที่มีขนาดมากเกินไป PWA ต้องมีรากฐานที่มั่นคง
คุณตรวจสอบประสิทธิภาพของเว็บไซต์ได้อย่างไร ขั้นตอนแรกคือการทําการตรวจสอบเว็บไซต์ ซึ่งเป็นการตรวจสอบอย่างเป็นกลางว่าสิ่งใดทํางานได้ดีและควรปรับปรุง (และอย่างไร)
การตรวจสอบเว็บไซต์หรือแอปจะช่วยสร้างประสบการณ์การใช้งานที่มีประสิทธิภาพและยืดหยุ่น รวมถึงไฮไลต์แนวทางปฏิบัติที่ได้ผลเร็วซึ่งสามารถใช้งานได้โดยต้องได้รับการอนุมัติเพียงเล็กน้อยเท่านั้น นอกจากนี้ การตรวจสอบยังช่วยให้คุณมีข้อมูลพื้นฐานสําหรับการพัฒนาโดยอิงตามข้อมูล การเปลี่ยนแปลงทำให้ดีขึ้นไหม เว็บไซต์ของคุณเป็นอย่างไรเมื่อเทียบกับคู่แข่ง คุณจะได้รับเมตริกเพื่อจัดลําดับความสําคัญของงาน และหลักฐานที่เป็นรูปธรรมไว้อวดเมื่อทําการปรับปรุงแล้ว
หากคุณมีเวลาเพียง 5 นาที
เรียกใช้ Lighthouse ในหน้าแรกและบันทึกข้อมูลรายงาน คุณจะได้รับข้อมูลพื้นฐานที่วัดผลได้และรายการสิ่งที่ต้องทําเพื่อปรับปรุงประสิทธิภาพ การช่วยเหลือพิเศษ ความปลอดภัย และ SEO
หากคุณมีเวลาเพียง 30 นาที…
Lighthouse ยังคงเป็นเครื่องมือเริ่มต้นที่ดีที่สุด แต่หากมีเวลาเพิ่มขึ้นอีกนิด คุณก็สามารถบันทึกผลลัพธ์จากเครื่องมืออื่นๆ ได้ด้วย
- แผงความปลอดภัยของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome: การใช้ HTTPS
- แผงเครือข่ายของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome: ช่วงเวลาที่โหลด ขนาดทรัพยากร และจํานวนคําขอสําหรับ HTML, CSS, JavaScript, รูปภาพ, แบบอักษร และไฟล์อื่นๆ
- เครื่องมือจัดการงานของ Chrome: หากเว็บไซต์ใช้ CPU จำนวนมากหรือหน่วยความจํามากกว่าแอปอื่นๆ อย่างต่อเนื่อง คุณอาจต้องแก้ไขปัญหาหน่วยความจํารั่ว งานที่ทํางานอยู่ หรือปัญหาการโหลดทรัพยากร อย่าลืมทดสอบเว็บไซต์ในอุปกรณ์ที่แสดงถึงผู้ใช้ของคุณ
- WebPagetest: ประสิทธิภาพของสถานที่ตั้งและประเภทการเชื่อมต่อต่างๆ, การแคช, เวลาในการรับข้อมูลไบต์แรก, การใช้ CDN
- PageSpeed Insights: ประสิทธิภาพการโหลด ค่าใช้จ่ายของอินเทอร์เน็ต และการใช้ทรัพยากร รวมถึงข้อมูลรายงานประสบการณ์ของผู้ใช้ Chrome ที่ไฮไลต์สถิติประสิทธิภาพในชีวิตจริง
- ตารางสรุปสถิติความเร็วและเครื่องคำนวณผลลัพธ์: เปรียบเทียบความเร็วเว็บไซต์กับคู่แข่ง และประเมินโอกาสในการสร้างรายได้ที่อาจเกิดขึ้นจากการปรับปรุงความเร็วเว็บไซต์
อย่าลืมทดสอบเว็บไซต์ในมุมมองของผู้ใช้ครั้งแรก เปิดเว็บไซต์ในหน้าต่างที่ไม่ระบุตัวตน (ส่วนตัว) หรือใช้เครื่องมือของเบราว์เซอร์เพื่อปิดใช้แคชและล้างพื้นที่เก็บข้อมูล วิธีนี้ช่วยให้มั่นใจว่าระบบจะดึงข้อมูลชิ้นงานทุกรายการจากเครือข่าย ไม่ใช่จากแคชในเครื่อง คุณจึงเห็นภาพรวมที่ถูกต้องของประสิทธิภาพในการโหลดครั้งแรก
ไม่มีอะไรดีไปกว่าการทดสอบในชีวิตจริง ลองใช้เว็บไซต์ด้วยอุปกรณ์และการเชื่อมต่อเดียวกับผู้ใช้ และบันทึกประสบการณ์ส่วนตัวของคุณ
หากเครื่องมือมีมากมายจนคุณสับสน…
โปรดดูคู่มือวิธีคิดเกี่ยวกับเครื่องมือด้านความเร็ว
หากไม่พบปัญหาอื่นใด ให้ใช้ Lighthouse เพื่อตรวจสอบสิ่งต่อไปนี้
- HTTPS: ทุกเว็บไซต์ควรแสดงชิ้นงานทั้งหมดผ่าน HTTPS
- การตั้งค่าเซิร์ฟเวอร์: เว็บเซิร์ฟเวอร์หรือ CDN ควรใช้การบีบอัดอย่างถูกต้อง ใช้ HTTP/2 และระบุส่วนหัวที่เหมาะสมเพื่อให้เบราว์เซอร์แคชทรัพยากรได้
- องค์ประกอบสคริปต์ที่ย้ายไปไว้ที่ด้านล่างของหน้าเว็บได้ และ/หรือมีแอตทริบิวต์ async หรือ defer
- JavaScript และไลบรารีที่นําออกได้
- CSS ที่ไม่ได้ใช้ และ JavaScript ที่ไม่ได้ใช้
- รูปภาพที่บันทึกได้ด้วยการบีบอัดที่สูงขึ้นหรือขนาดพิกเซลที่เล็กลง
- ไฟล์รูปภาพที่จะมีขนาดเล็กลงเมื่อบันทึกโดยใช้รูปแบบอื่น เช่น รูปภาพที่บันทึกเป็น PNG
กลุ่มเป้าหมาย ผู้มีส่วนเกี่ยวข้อง บริบท
ลำดับความสำคัญของการปรับโครงสร้างใหม่จะขึ้นอยู่กับผู้ชม เนื้อหา และฟังก์ชันการทำงาน ใครเข้าชมเว็บไซต์ของคุณ ผู้ใช้ใช้ฟีเจอร์นี้อย่างไรและทำไม งบประมาณด้านประสิทธิภาพของคุณคืออะไร หากไม่แน่ใจว่าจะตอบคำถามเหล่านี้อย่างไร ให้ลองทำแบบฝึกหัดรวบรวมข้อมูลความต้องการจากแหล่งข้อมูลการฝึกอบรม PWA ของเรา ได้แก่ กลุ่มเป้าหมายและเนื้อหาของคุณ และออกแบบสำหรับผู้ใช้ทุกคน
ผู้มีส่วนเกี่ยวข้องของคุณคือใคร และพวกเขาให้ความสําคัญกับสิ่งใด ซึ่งจะส่งผลต่อวิธีจัดโครงสร้าง นำเสนอ และแชร์ข้อมูลการตรวจสอบ
หากตรวจสอบทั้งเว็บไซต์ไม่ได้ ให้ดูข้อมูลวิเคราะห์ของหน้าเว็บเพื่อดูว่าควรมุ่งเน้นที่ส่วนใด อัตราตีกลับสูง เวลาในการเข้าชมหน้าเว็บต่ำ และหน้าออกที่ไม่คาดคิดอาจเป็นตัวบ่งชี้ที่ดีว่าควรเริ่มต้นที่ใด รวมถึงเมตริกทางธุรกิจ เช่น ค่าใช้จ่ายโฮสติ้ง การคลิกโฆษณา และ Conversion รับภาพรวมจากกลุ่มผู้มีส่วนเกี่ยวข้องเกี่ยวกับข้อมูลที่สําคัญต่อพวกเขา
ทดสอบ บันทึก แก้ไข ทำซ้ำ
บันทึกสถานะของเว็บไซต์ก่อนทำการเปลี่ยนแปลงใดๆ เพื่อค้นหาปัญหาและกำหนดจุดเริ่มต้นสำหรับการปรับปรุงหรือการทำงานซ้ำ ซึ่งจะช่วยให้คุณมีข้อมูลเพื่อพิสูจน์และตอบแทนความพยายามในการพัฒนา
อย่าลืมทดสอบหน้าเว็บหลายประเภทภายในเว็บไซต์ ไม่ใช่แค่หน้าแรก สําหรับแอปแบบหน้าเดียว ให้ทดสอบคอมโพเนนต์ เส้นทาง และขั้นตอน UX ต่างๆ ไม่ใช่แค่ประสบการณ์การโหลดครั้งแรก