เพราะเหตุใดและอะไร
คุณคงเคยได้ยินสิ่งดีๆ มากมายที่เทคนิค Progressive Web App ทำให้เว็บไซต์ของคุณได้ คุณอาจจะอยากเข้าร่วมและเพิ่มฟีเจอร์ของ PWA โดยตรง แบบนั้นเป็นไปได้ แต่คุณจะ ดีขึ้นมากหากใช้ฟีเจอร์ "PWA แบบพร้อมใช้งาน" ก่อน
ไม่มีเวทมนตร์ของ PWA จะแก้ปัญหาอย่างการบล็อก JavaScript หรือภาพที่ไม่ชัดได้ PWA ต้องมีรากฐานที่มั่นคง
แล้วคุณจะตรวจสอบประสิทธิภาพของเว็บไซต์ได้อย่างไร ขั้นตอนแรกคือการตรวจสอบเว็บไซต์ นั่นคือการตรวจสอบที่เป็นกลางว่าสิ่งใดทำงานได้ดีและสิ่งใดที่ควรปรับปรุงและส่วนใด (และวิธี) ที่ควรปรับปรุง
การตรวจสอบเว็บไซต์หรือแอปจะช่วยให้คุณสร้างประสบการณ์ที่มีความยืดหยุ่นและมีประสิทธิภาพสูง รวมถึงช่วยเน้นถึงชัยชนะเล็กๆ น้อยๆ ที่นําไปใช้ได้โดยมีการรับรองเพียงเล็กน้อย นอกจากนี้การตรวจสอบยังเป็นพื้นฐานสําหรับการพัฒนาที่ขับเคลื่อนโดยข้อมูลอีกด้วย การเปลี่ยนแปลงทำให้สิ่งต่างๆ ดีขึ้นไหม เว็บไซต์ของคุณเป็นอย่างไร เมื่อเทียบกับคู่แข่ง คุณจะได้เมตริกต่างๆ เพื่อจัดลำดับความสำคัญด้านความพยายาม และหลักฐานที่เป็นรูปธรรมสำหรับนำไปอวดหลังจากที่ได้ปรับปรุงประสิทธิภาพแล้ว
หากคุณมีเวลาเพียง 5 นาที...
เรียกใช้ Lighthouse ในหน้าแรกและบันทึกข้อมูลรายงาน คุณจะได้รับเกณฑ์พื้นฐานเชิงปริมาณและรายการสิ่งที่ต้องทำสำหรับการปรับปรุงประสิทธิภาพ การช่วยเหลือพิเศษ ความปลอดภัย และ SEO
หากคุณมีเวลาเพียง 30 นาที...
Lighthouse อาจยังเป็นจุดเริ่มต้นที่ดีที่สุด แต่คุณสามารถบันทึกผลลัพธ์จากเครื่องมืออื่นๆ ได้หากมีเวลาเพิ่มขึ้นอีกเล็กน้อย
- แผงความปลอดภัยของ Chrome DevTools: การใช้งาน 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 ต่างๆ ไม่ใช่แค่ประสบการณ์การโหลดครั้งแรก