เริ่มต้นด้วย ระบุปัญหา และ วัดคะแนน
สิ่งแรกที่เราทำ คือ การระบุปัญหาของเว็บไซต์ที่ทำให้ช้า โดยการ list รายการต่างๆ ที่เราตรวจพบ และ แก้ไขไปทีละจุด โดยการทำเช่นนี้ จะทำให้เราเพิ่มประสิทธิภาพของเว็บไซต์ได้ตรงจุด และ ในเวลาที่กำหนด (14 วัน)
อย่างแรกที่เราทำคือ การตรวจคะแนน Pagespeed Insights ของ Google โดยเป็นเครื่องมือ Benchmark หลักของเรา และ เราตรวจพบว่าคะแนนของเว็ปไซต์ เพื่อนแท้ เงินด่วน – www.pueantae-ngernduan.com อยู่ที่ 74 คะแนน ซึ่งเป็นคะแนนที่เป็นระดับกลาง
โดยมีเกณฑ์ที่ผ่านอยู่ 2 อย่าง
- First Input Delay ที่ได้ 16 ms โดยเว็บนี้อยู่ในเกณฑ์ที่ดี คือ 91%
- Cumulative Layout Shift อยู่ที่ 0 ไม่มีปัญหา
โดยมีเกณฑ์ที่ไม่ผ่านอยู่ 2 อย่าง
- First Contentful Paint คือ ค่าเวลาที่ทำให้ Browser สามารถแสดงผล โดยเว็บนี้บล๊อกการแสดงผลแรกที่ 3.8 วินาที
- Largest Contentful Paint คือ ค่าเวลาที่แสดงผลทั้งหมด ที่ทำให้ Browser สามารถแสดงผลโดยเว็บนี้บล๊อกการแสดงผลแรกที่ 3.8 วินาที
โดยคะแนนทั้งหมดเรายึดจากคะแนนในส่วน Mobile เท่านั้น หากเป็นส่วน Desktop จะพบว่าเว็บนี้ทำคะแนนได้ถึง 92 คะแนน ซึ่งอยู่ในเกณฑ์ที่ดีแล้ว
สำหรับคนที่ไม่เข้าใจว่าเกณฑ์คะแนนเหล่านั้นคืออะไร สามารถอ่านเพิ่มเติมได้ที่ https://web.dev/vitals/
เริ่มการวิเคราะห์ Web Infrastructure
เมื่อเราได้ Username&Password เข้าสู่ระบบจัดการเว็บไซต์ เราจะเริ่มเข้าไปตรวจสอบ Web Infrastructure ของเว็บ หรือ แปลเป็นไทยก็คือ โครงสร้างพื้นฐานของเว็บ เพื่อตรวจสอบ และ ประเมินความยากง่ายของการปรับแก้ไข แล้วแจ้งราคาไปยังผู้ว่าจ้าง โดยเราจะรายงานเบื้องต้นถึงสาเหตุที่ทำให้ช้า โดยไม่มีค่าใช้จ่าย
กดหน้า ขอใบเสนอราคา ได้เลยหากคุณต้องการทราบราคา
สิ่งที่เราปรับปรุง
- เราได้ทำการเปลี่ยนแปลงจัดการเว็บ และ การอัปเกรด Server เป็น VPS โดยอัพเกรค ความถี่ CPU จาก 2.2 เป็น 3.7 Ghz
- การปรับโครงสร้างเว็บใหม่ หรือ เปลี่ยนธีมใหม่ แต่เป็น Design เดิม โดยการเปลี่ยนแปลง รูปแบบเว็บ ย่อมต้องเจอกับความไม่เหมือนกันอยู่บ้าง 100% แต่เราจะคงอยู่ 90% ขึ้นให้รูปแบบเหมือนเดิม โดยขั้นตอนนี้ เหมือนการ Renovate บ้านเลยก็ว่าได้ แน่นอน มันสามารถสวยได้กว่าเดิม หรือ จะเอาแบบเดิมก็ไม่มีปัญหา
- การตรวจสอบปลั๊กอิน หรือ 3rd Party ของเว็บ และ จัดทำการปรับให้เข้ากับธีมใหม่ และเลือกใช้ Plugin ที่เรา benchmark มา ว่าเร็วที่สุด
- การปรับฐานข้อมูล โดยทำการลบตารางขยะ ปรับปรุงการ Queryให้เร็วเพิ่มขึ้นกว่า 30% โดยจะส่งผลต่อ TTFB หรือ FCP
- เพิ่มประสิทธิภาพ หน้า และ javascript dom render โดยใช้ทักษะทาง Programming ของเรา ทำการตัด Function ที่ไม่จำเป็นต่อเว็บออก เช่า หากเว็บไม่มีการ Animation ใดๆ เราก็จะทำการลบ โค๊ดที่ใช้ Animation ออก
- จัดการระบบ Cache (Cache คือ Output เว็บที่ถูกบีบอัดมา) จากเดิมจัดเก็บที่ SSD ให้ปรับมาเป็นที่ Memory และ หากลูกค้ามี Request จากต่างประเทศ เราสามารถ Copy Cache ไปบน Server อีกตัวได้ ซึ่งมีค่าใช้จ่ายเพิ่ม
- การเพิ่มประสิทธิภาพ Font และ รูป และ สูตรลับพิเศษที่ทำให้รูปมีขนาดพอดีกับทุกอุปกรณ์ ซึ่งปกติภาพที่โหลดจะมีเพียงขนาดเดียว และ จะไม่สามารถแสดงขนาดได้ตรงกับอัตราส่วนหน้าจอของแต่ละอุปกรณ์
- ทุกอย่างที่เราใช้ เราผ่านการคัดกรอกมาแล้ว ว่าเร็ว และ เร็วที่สุดในบรรดาคู่แข่ง ฉะนั้น คุณไม่ต้องเสียเวลาทดลองเอง เพราะ ถึงแม้การที่คุณเจอสิ่งที่เร็วแล้วก็ใช้ว่าจะสามารถแสดงความเร็วออกมาได้อย่างเต็มที่ มันต้องควบคู่กันทั้งหมด เพื่อที่จะดึงศักยภาพ ออกมา หากเปรียบเทียบ มันก็เหมือน คอมพิวเตอร์ที่มีการ์จอแรง แต่ไม่ได้ดาว์นโหลด Firmware มาติดตั้ง
ผลลัพธ์จากการ Optimise
โดยผลลัทธ์นี้เป็นผลลัพธ์ที่เราใช้ตอนส่งมอบเว็บไซต์ โดยการคงไว้ซึ่งทุกอย่างของเว็บ ปัจจุบัน เทส คะแนนใหม่เมื่อ 1 กันยายน 2563 พบว่ามีคะแนน 92 โดยยังถือว่าผ่านคะแนนมาตรฐานของ Google Pagespeed Insights อยู่ โดยทางเราทราบมาว่าทางผู้ว่าจ้างได้มีการปรับแต่งเว็บเพิ่มเติมจากที่เราปรับแต่ง เลยทำให้คะแนนตก
และนี้คือคะแนน Web Vital
