Web Performance หน้าบทความ ก็สำคัญนะ
วันนี้พามาโฟกัสที่ หน้า บทความ เพราะเป็นตัวเรียกแขกของเว็บเลยล่ะ
- เว็บไซต์ทั้งหมดในบทความนี้ ทำด้วย WordPress
- ที่โฟกัสการทำเนื้อหา ใช้รูปภาพเยอะ (ที่ optimize แล้ว)
เพราะอยากให้ user เห็นแล้ว … อ๋อ เข้าใจละ
- หลายคนกังวลว่า ใช้ CMS จะไม่ลื่น โหลดไม่เร็วเท่าเขียนโค้ดเอง
- หลายคนกังวลว่า ใช้ Elementor แล้วเว็บจะอืด โหลดช้า
- ใดๆ แล้ว อยู่ที่การ optimize เอเวอรี่ติงนะ
- สำคัญมากๆ คือ การเลือกใช้ Web Hosting + Theme + Plugin
// สำหรับเว็บไซต์ที่ใช้ระบบอื่น framework ตัวอื่น หรือ hand coding เอง อาจจะนำไอเดียไปปรับใช้ได้นะคะ
เว็บไซต์ 1 : Chita Creation
เล่าให้ฟังสั้นๆ ก่อนว่าเว็บไซต์ chitacreation.com พี่ยุ้ย redesign มา 3 รอบ รอบล่าสุดใช้ธีมเดียวกับที่สอนนักเรียนเลยค่ะ ธีมฟรี Astra เป็นธีมที่ สวย clean และ เบามาก และใช้ Elementor (เวอร์ชั่นฟรี) ทำ design เอง (ก็ตัวเดียวกับที่ใช้สอนในคอร์สอีกเหมือนกัน อิอิ)
ก็ปรับจูน ลองนู่นลองนี่จนได้ คะแนน 96/100 ถึงนอนหลับสบายใจ … โดนตัวเลขสะกดจิตเข้าไปอ่ะนะฮะ แต่หน้า Home ยังคะแนน 80+ อยู่นะ ปล่อยไปก่อนได้ เพราะ Google ปัจจุบันให้ความสำคัญกับ landing page คือเข้าตรงไปที่หน้าของปลายทาง keyword ที่ user ค้นหาเลย (พูดง่ายๆ ว่า คลิกจาก Google แล้วเข้าหน้านั้นเลย)
พอพี่ยุ้ยว่างก็กลับมาปรับจูนใหม่ จนได้คะแนน 90+ คืออยากให้มันติดสีเขียวไง เท่ดี ฮ่าๆ (คะแนนเท่าไหร่ถึงปลอดภัย เดี๋ยวอ่านไปเรื่อยๆ จะเจอคำตอบฮ่ะ)
chitacreation.com เป็นเว็บที่พี่ยุ้ยทำขึ้นเพื่อใช้ลงระบบคอร์สเรียนออนไลน์ ตอนแรกว่าจะ move บทความทั้งหมดไปด้วย
แต่จากการทดลองและเก็บ feedback มาประมาณ 1 ปี สรุปว่าใช้ webmonsterlab.com เหมือนเดิม เวิร์คกว่าค่ะ ทั้งด้านแบรนด์ดิ้ง การจัดการเว็บไซต์ และแน่นอน SEO ของ Webmonster Lab ดีมากอยู่แล้ว ก็ม๊อนสะเตอร์กันไปยาวๆ ฮ่ะ
// chitacreation.com ย้ายไปที่ course.webmonsterlab.com โดยสมบูรณ์แล้ว
เว็บไซต์ 2 : Webmonster Lab
webmonsterlab.com เว็บนี้พี่ยุ้ยทำมานานแล้วล่ะค่ะ ตอนนี้ใช้ธีมพรีเมี่ยม BeThem ก็ได้ Core Web Vitals ผ่าน สบายๆ ไม่ต้องทำเอง อิอิ
// Core Web Vitals คือ ตัววัดมาตรฐานใหม่ของ Google เน้นไปที่ประสิทธิภาพเกี่ยวกับประสบการณ์ของผู้ใช้ (UX User Experience)
แต่ Speed ยังอยู่ที่ คะแนน 80+
ก็ไม่เป็นไรค่ะ (นี่ก็เร็วกว่ากระพริบตาแล้ว) … เว็บไซต์ Desktop 60-70 คะแนนขึ้นไป ถือว่าใช้ได้แล้วค่ะ อยากให้เราวัดจากความรู้สึกในฐานะ “มนุษย์” นะคะ ว่ามันช้าเกินไปรึเปล่า ถ้าไม่… ก็เอาพลังงานไปทำอย่างอื่นต่อดีกว่า ยังมีหลายสิ่งที่เราต้องจัดการเพื่อให้เว็บไซต์บรรลุวัตถุประสงค์หลัก
แต่ถ้าความเร็วเท่าเต่าคลาน ช้าจนรู้สึกได้
แบบนี้ก็ต้องหาทางปรับจูนให้เร็วขึ้นจ้า ไม่งั้น user ออกไปดูเว็บอื่นแน่นวลเลย
Mobile จะทำยากกว่า Desktop
พี่ยุ้ยเองยังได้คะแนน mobile ไม่เท่าไหร่นะ แต่โฟกัสที่การทำ content ให้มีประโยชน์ และน่าอ่านมากกว่า ก็เลยตั้งใจกับรูปภาพมาก (หลักๆ พี่ยุ้ยจะโดนข้อให้ลดขนาดรูปภาพ และให้ใช้ .webp ซึ่งถ้ามองภาพรวมพี่ยุ้ยใช้ .jpg .png แล้วบริหารจัดการได้คล่องตัวกว่า ก็เลยยังไม่เปลี่ยน … แล้วก็พวก JavaScript, DOM ก็ขอตอบอย่างภาคภูมิใจว่า ทำไม่เป็น ฮ่าๆๆ
โอเค เราได้เห็นคะแนนประสิทธิภาพของเว็บไซต์กันไปแล้ว ทีนี้มาดูว่า หน้าบทความ สำคัญยังไง นะคะ
ทำไมต้องหน้าบทความ
ในแต่ละวันจะมีคนเข้ามาอ่าน บทความ/blog เยอะกว่า homepage ซะอีก เพราะเวลาที่ใครสักคนอยากรู้เรื่องอะไร หรือกำลังหาข้อมูลเกี่ยวกับอะไร เค้าจะไม่ได้พิมพ์ชื่อเว็บไซต์ของเราตรงๆ (ถ้าเราไม่ใช่แบรนด์ดังเจ้าใหญ่) แต่เค้าจะค้นหาใน Google ด้วย keyword หรือประโยคสั้นๆ แล้วก็จะเจอผลการค้นหาที่เป็น “หน้าเว็บที่ตรงกับ keyword นั้นเลย” (Google ไม่ได้พาไปหน้า home นะ ยกเว้น keyword นั้นตรง)
เราก็เลยจะใช้ บทความ/blog นี่ล่ะ เป็นพระนางในการเรียกแขกให้ผู้คนเข้ามาที่เว็บไซต์ของเรา ฉะนั้นแต่ละ Single Post มันก็ต้องเบาหวิวและโหลดเร็วเพื่อให้คนอ่านเค้า feel good กับเว็บเรานะ 😀
ถ้าเป็นเว็บไซต์ขายสินค้า พระเอกก็คือ “หน้ารายละเอียดสินค้าชิ้นนั้นๆ”
… แต่ก็ยังขอแนะนำให้ทำบทความที่มีประโยชน์ต่อลูกค้าไปด้วยนะฮะ
หน้า home = สำคัญ!
ใช่เลย ถูกต้องแล้วค่ะ
แต่ว่า หน้าบทความ หรือหน้า content (( คนเข้าเยอะกว่ามากๆ ))
รู้ได้จากเราติดตั้ง “เครื่องมือวิเคราะห์การใช้งานเว็บไซต์” ไว้ที่ตัวเว็บไซต์ของเรา พี่ยุ้ยและคนทำเว็บ (น่าจะทุกคน) ใช้ Google Analytics และ Google Search Console ยืน 1 ไว้ก่อน ส่วนเครื่องมือตัวอื่นๆ ก็แล้วแต่ความจำเป็นของแต่ละท่านนะฮะ
วัดผลประสิทธิภาพเว็บไซต์ หน้า home แล้ว
ก็อย่าลืมวัดผล หน้าไฮไลท์ หรือ หน้าทีเด็ด ของเราด้วยนาจา
ก็ลองเอาเว็บไซต์ของเราไป วัดผลความเร็ว และ Web Performance (หรือจะส่องเว็บของชาวบ้านก็ได้นะ) โดยพิมพ์คำค้นหาใน Google ด้วยคีย์เวิร์ดนี้ Google PageSpeed Insights แล้วเอา link ของเว็บไปวาง แล้วกดปุ่ม Analyze ได้เลยค่ะ
หน้าตาแบบนี้นะ
ส่วนใหญ่เราใช้ Google PageSpeed Insights นะคะ และที่นิยมตัวอื่นๆ ใช้ดูเสริมได้ค่ะ เช่น GTmetrix และ Pingdom Tools ลอง test 2-3 ตัวแล้วดูว่าได้ผลการวิเคราะห์ประสิทธิภาพของเว็บไซต์ไปในทิศทางเดียวกันมั้ย หรือมีอะไรที่ควรปรับแก้ทันที หรือยังไม่ต้องก็ได้ (tools ของแต่ละเจ้า ก็มีเกณฑ์การวัดผล การประมวลผล แตกต่างกัน)
สำหรับ Web Performance ในส่วนอื่นๆ
อยากให้ดูที่ Google Search Console เป็นประจำด้วยนะคะ จะมีบอกข้อมูลเชิงลึก เช่น
- หน้าไหนบ้างที่มีรูปภาพ หรือ object ล้นหน้าจอ
- หน้าไหนบ้างที่แสดงผลบน mobile ยังไม่ดี
เครื่องมือเค้าก็จะแนะนำว่า ขนาดตัวอักษรเล็กไปนะ – เราก็ปรับให้ใหญ่ขึ้น - หรือบางเว็บอาจจะเป็น ระยะห่างระหว่างบรรทัดน้อยเกินไป – เราก็ไปเพิ่ม
พอเราแก้ไขเสร็จแล้ว ก็ไปกดปุ่ม Validate Fix แค่นี้ก็เรียบร้อยค่ะ (ถ้าไม่กด Fix พอถึงรอบที่ Google เข้ามาตรวจสอบเว็บไซต์ มันจะ auto ให้เองค่ะ)
ด้านเทคนิค ทั้ง 2 เว็บนี้
www.chitacreation.com
www.webmonsterlab.com
🚀 … พี่ยุ้ยใช้ Web Hosting สเปคเดียวกัน
🚀 … ใช้ WordPress เวอร์ชั่นเดียวกัน
🚀 … Optimize สิ่งอย่าง แนวทางเดียวกัน
🚀 … ใช้ Plugin พื้นฐานเหมือนกัน
🚀 … แต่ใช้ Theme คนละตัว
อยากมีเว็บไซต์ High Performance ต้องทำไง?
ทางเลือก 1 คือ จ้างคนเก่งๆ ทำให้ 🦸♂️
ค่าจัดทำ/ค่าบริการ ราคาสูงกว่าทำเว็บไซต์ธรรมดา (อันนี้เป็นเรื่องปกติ) เพราะใช้สกิลสูงกว่า ใช้พลังงานและเวลาในการดูแลมากกว่า
ทางเลือก 2 ถ้าไม่อยากจ่าย รายเดือน/รายปี ราคาสูง
ก็ต้องเรียนรู้ แล้วทำเอง 🦸♂️
ช่องทางการเรียนรู้
ก็มี YouTube มีบทความสอนฟรี! เยอะมากๆ
- และเพราะว่ามันเยอะมากไง เราก็จะ งงๆ ก่งก๊ง
- เอาอันไหนดี ต้องเริ่มจากตรงไหนก่อน
- อันนี้จบแล้ว ไปต่อคลิปไหนอีกนะ
- (ทุกคนจะเจอปัญหานี้ ยุ้ยก็เจอมาก่อนค่ะ แหะแหะ)
ทีนี้ เราอยากทำเป็นอย่างเร็วไง พี่ยุ้ยก็แนะนำว่าให้หาคนสอนนะคะ เลือกเรียนกับอาจารย์ท่านไหนก็ได้ ที่วิธีการสอนของเค้า เราเข้าใจ (พี่ยุ้ยเอง ช่วงแรกๆ ก็ลงคอร์สเรียนค่ะ กับซื้อหนังสือมาอ่านแล้วทำตาม)
ตอนเริ่มแรกที่เพิ่งเรียนรู้ เราอาจจะรู้สึกว่าเยอะสิ่งจัง แต่พอเริ่มคุ้นเคย เราก็จะไปต่อได้ค่ะ กับอาศัยประสบการณ์ คือ ต้องซ้อมต้องทำเยอะๆ ทั้งทำแล้วสำเร็จ ทีเดียวได้เลย และก็ทั้งต้องเจอปัญหาค่ะ (เจอแน่ๆ ฮ่าๆ) แต่นั่นไม่ใช่สิ่งที่จะทำให้เราทำไม่ได้ค่ะ อยากบอกว่า “เมื่อเราแก้ไขปัญหาที่เราเจอได้ เราจะเก่งขึ้นตามปัญหาที่เจอค่ะ”
ทำครั้งแรกๆ มันอาจจะไม่ได้อย่างที่เราตั้งใจ ก็ไม่เป็นไรนะ … ค่อยๆ เรียนรู้กันไป หรือถ้าต้องไล่ step กันใหม่ ก็อย่างเพิ่งท้อล่ะ ยิ่งทำบ่อยก็ยิ่งคล่องค่ะ … พี่ยุ้ยเป็นกำลังใจให้ทุกคนนะคะ : )
Tips : ทำทุกอย่างแล้ว แต่ยังไม่เร็วพอ ทำไงดี ?
- บางที เราก็แค่ต้องรอให้เวอร์ชั่นเค้าอัปเดตนะ
- ก่อนอัปเดตใดๆ ให้เช็คด้วยนะคะว่า เวอร์ชั่นของทั้งหมดนี้รองรับ ใช้ด้วยกันได้แล้วใช่ไหม
WordPress / Theme / Plugin / Hosting / PHP / Database- และอย่าลืม Backup ก่อนทำอะไรยิ่งใหญ่ด้วยจ้า
บทความ/รูปภาพ : Webmonster Lab | Yui Kanchita
