ทำความรู้จัก Page Experience กับการวัดผลบนหน้าเว็บไซต์

15 Sep 2021

“สิ่งแรกที่ควรคำนึงก่อนการทำเว็บไซต์คือการวางโครงสร้างที่ดี”

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

การออกแบบเว็บไซต์ที่ดีนั้นจึงจำเป็นอย่างยิ่งที่จะต้องมีการวางโครงสร้างให้ดี สิ่งสำคัญที่จะเป็นตัวแปรให้เว็บไซต์มีโครงสร้างที่ดีทำให้หน้าเว็บไซต์ของเราติดอยู่ในอันดับแรกๆ ของการค้นหาใน Google ก็คือการทำ SEO (Search Engine Optimization) ศัพท์ยอดฮิตในวงการของการทำเว็บไซต์ที่หลายคนอาจจะคุ้นเคยกันดี

โดยครั้งนี้จะขอพูดถึงปัจจัยสำคัญที่ Google ได้มีการประกาศออกมาเกี่ยวกับการวัดผลประสบการณ์หน้าเว็บไซต์ หรือเรียกกันว่า “Page Experience” ที่เป็นส่วนหนึ่งในการจัดอันดับ SEO หากเว็บไซต์มีลักษณะเนื้อหาที่คล้ายกัน การใช้ Page Experience เป็นตัวชี้วัดที่ส่งผลให้การจัดอันดับเป็นได้อย่างมีประสิทธิภาพมากขึ้น เช่น เนื้อหาในเว็บ A และ เว็บ B เหมือนกันทั้งคู่ แต่ประสบการณ์ผู้ใช้งานที่ใช้เว็บ B รู้สึกว่าโหลดช้าไม่สามารถตอบสนองได้ทันทีเมื่อเทียบกับเว็บ A

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

5 องค์ประกอบของ Page Experience ที่จะช่วยสร้างโอกาสให้ผู้ใช้งานเข้าไปยังเว็บไซต์ของเรา

  1. Core Web Vital: ประสิทธิภาพความเร็วของการโหลดหน้าเว็บไซต์ ซึ่งแบ่งออกเป็น 3 หัวข้อย่อย
  • LCP (Largest Contentful Paint): การวัดผลรูปภาพหรือข้อความที่มีขนาดใหญ่ที่สุดในเว็บไซต์ว่าสามารถโหลดเสร็จภายในกี่วินาที ซึ่งค่า LCP ที่ดีไม่ควรเกิน 5 วินาที โดยการโหลดช้าหรือเร็วขึ้นอยู่กับปัจจัยที่ควบคุมไม่ได้ เช่น ความเร็วอินเทอร์เน็ตของผู้ใช้งาน ส่วนปัจจัยที่ควบคุมได้ คือสิ่งที่เจ้าของเว็บไซต์มีอำนาจในการจัดการตั้งแต่คุณภาพเซิฟเวอร์ไปจนถึงขนาดรูปภาพที่ใช้ในเนื้อหาของเว็บไซต์ เราจึงควรคำนึงถึงการจัดการ asset ต่างๆ ที่ถูกใส่เข้าไปในหน้าเว็บเพจให้เหมาะสมอยู่เสมอ
  • FID (First Input Delay): การวัดผลความเร็วในการตอบสนองระหว่างที่ผู้ใช้งานกับเว็บไซต์ไม่ว่าจะเป็นเรื่องการการแสดงข้อมูล หรือการตอบสนองของปุ่มต่างๆ โดยค่าความเร็วควรจะอยู่ต่ำกว่า 1 วินาที ซึ่งถือเป็นการตอบสนองที่เกิดขึ้นอย่างรวดเร็ว ตัวอย่างเปรียบเทียบให้เข้าใจง่ายๆ เช่น เวลาเราใช้งานเครื่องคิดเลข หากเราใส่สูตรเรียบร้อยและพร้อมที่จะคำนวนหาผลลัพธ์ สิ่งที่เราคาดหวังคือผลลัพธ์ที่ถูกคำนวนออกมาจะต้องแสดงผลให้เราเห็นได้ทันที หากช้าหรือใช้เวลานาน เราคงจะเปลี่ยนไปใช้เครื่องคิดเลขอื่นแทน เป็นต้น
  • CLS (Cumulative Layout Shift): การวัดผลเรื่องความเสถียรของภาพที่แสดงผลบนเว็บไซต์ เช่น การที่ผู้ใช้งานพยายามอ่านข้อความบางอย่าง แล้วข้อความนั้นๆถูกดันให้เคลื่อนที่จากตำแหน่งเดิม ส่งผลให้การอ่านไม่ปะติดปะต่อหรือทำได้ยาก เพราะจะต้องคอยจับบรรทัดในอ่านใหม่อยู่บ่อยครั้ง หรือปุ่มที่ผู้ใช้งานพยายามจะกด กลับเคลื่อนที่ออกจากตำแหน่งที่ผู้ใช้งานตั้งใจกด ส่งผลให้ผู้ใช้งานกดผิดปุ่มและสร้างความหงุดหงิดได้ จากที่กล่าวมาข้างต้นถือเป็นการสร้างประสบการณ์ที่ไม่ดีต่อผู้ใช้งาน ดังนั้นค่าความเสถียรที่ดีควรจะต่ำกว่า 1
  1. Mobile First: จากผลสำรวจปัจจุบันพบว่าผู้ใช้งานเข้าเว็บไซต์ผ่านมือถือเป็นหลัก จึงจำเป็นอย่างยิ่งที่ผู้พัฒนาเว็บไซต์ควรให้ความสำคัญกับการออกแบบบนมือถือแทนที่จะเป็นเดสก์ท็อป เพราะปัญหาที่สามารถพบเจอได้บ่อยคือ การแสดงผลเว็บไซต์ในรูปแบบมือถือมักจะติดขัดเรื่องการแสดงผลเนื้อหาต่างๆ ที่ไม่ได้ถูกปรับให้เหมาะสมกับการใช้งานผ่านมือถือ อย่างเช่น ขนาดตัวอักษร การจัดวาง หรือขนาดของปุ่มต่างๆ รวมถึงฟีเจอร์ที่ใช้งานได้ปรกติบนเดสก์ท็อป แต่กลับไม่ทำงานหรือทำงานได้ไม่ดีบนมือถือ หากเรามีการวางโครงสร้างการออกแบบที่ชัดเจนง่ายต่อการใช้งาน ก็จะสามารถช่วยเพิ่มโอกาสให้ผู้ใช้งานกลับเข้ามายังเว็บไซต์อีกครั้ง ที่สำคัญการออกแบบต้องขึ้นอยู่กับบริบทของเว็บไซต์ เพราะบางเว็บถูกออกแบบมาเพื่อใช้การฟีเจอร์ครบครันได้เฉพาะเดสก์ท็อป และเว็บบนมือถือนั้นจะซัพพอร์ทเฉพาะบางฟีเจอร์ใช้งานบ่อย
  2. Safe Browsing: ความปลอดภัยของเว็บไซต์ที่จะต้องไม่มีเนื้อหาที่หลอกลวงผู้ใช้งาน หรือ malware ที่จะเข้าไปฝังอยู่ในเครื่องคอมพิวเตอร์หรือมือถือของผู้ใช้งาน ซึ่งเจ้าของเว็บควรมีการตรวจเช็คความผิดปกติของเว็บไซต์อยู่เป็นประจำ เพื่อป้องกันและเพิ่มความปลอดภัยต่อผู้ใช้งาน และตัวเว็บไซต์เองอีกด้วย
  3. Https: สัญลักษณ์ที่แสดงออกว่าเว็บไซต์ของเรามีความปลอดภัย ทำให้ผู้ใช้งานเกิดความเชื่อมั่นที่เข้ามาเว็บไซต์ของเรา สังเกตได้ง่ายๆ จะเห็นว่าตรงลิ้งค์ที่เข้าไปเว็บไซต์ที่มีระบบป้องกันความปลอดภัยจะมีคำว่า Https ขึ้นอยู่ด้านหน้า
  4. No Intrusive Interstitials: การบดบังเนื้อหาบางอย่างในเว็บไซต์ เช่น เวลาที่เราคลิกเพื่อดูเนื้อหาเพิ่มเติมจะมี pop up ขนาดใหญ่ที่ทำให้ไม่สามารถอ่านรายละเอียดได้ ซึ่งสร้างปัญหาให้กับผู้ใช้งานที่เข้าไปยังเว็บไซต์ ดั้งนั้นควรจะต้องเช็คขนาดรูปภาพที่จะเป็น pop upให้มีความเหมาะสมต่อผู้ใช้งานด้วย

ทั้งหมดนี้ก็เป็นรายละเอียดของ Page Experience ที่ Google ได้มีการประกาศและนำมาเป็นส่วนหนึ่งในการให้คะแนนการจัดอันดับการค้นหาของเว็บไซต์ ซึ่งการวางโครงสร้างที่ดีทำให้เว็บไซต์ของเรามีชัยไปกว่าครึ่ง ดังนั้นการออกแบบหรือพัฒนาเว็บไซต์จะต้องศึกษารายละเอียดให้ชัดเจนเพื่อทำให้เว็บไซต์ของเรามีประสิทธิภาพและสร้างความรู้สึกที่ดีต่อผู้ใช้งาน

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

written by

Chalit Boontaveechok (Nefe)

Lead SEO Specialist, Code&Craft, Rabbit Digital Group

ชลิต ชายหนุ่มนักเดินทางตามเทคโนโลยีและกาลเวลา ปัจจุบันเป็น Enthusiast ที่สนใจเรื่อง SEO/Analytics โดยมีอดีตหลายรสชาติหลากบริบททั้ง UX Researcher, Strategic Planner หรือ OOH (Out of Home) Media Buyer/Trader หน้าแนวอาเจ่กจีนๆ พูดไทยล่าย อังกฤษก็พอใช้ และจีนแต้จิ้ว(ไว้ใช้แถวเยาวราช)

Related Blogs

ทำไมถึงไม่ควรทำ App สำหรับแบรนด์ของคุณ

ทุกวันนี้การสื่อสารของแบรนด์เพื่อทำการตลาดกับลูกค้าในรูปแบบของออนไลน์นั้นมีหลากหลายแพลตฟอร์มจึงจำเป็นอย่างยิ่งที่เราควรจะต้องศึกษารายละเอียดของแพลตฟอร

31 Aug 2021

มิติใหม่ที่จะช่วยเพิ่มยอดขายออนไลน์ให้มีประสิทธิภาพผ่านทาง E-Commerce

“สั่งของง่ายเพียงแค่ปลายนิ้ว” นี่ไม่ใช่คำเคลมใดๆ แต่เป็นเรื่องจริงในสถานการณ์ตอนนี้กับการช็อปปิ้งออนไลน์ เนื่องจากสถานการณ์การแพร่ระบาดของโควิด-19 ที่

10 Aug 2021

ทำเว็บทั้งทีคนหาไม่เจอก็ไม่มีประโยชน์

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

26 Jun 2021

Let’s Jump
Together

Request For Credential Presentation

Let’s Jump
Together

Request For Credential Presentation