แก้เว็บโหลดช้า วิธีลับที่ Digital Page Speed ใช้

เว็บโหลดช้า ผมทำงานด้านการสร้างเว็บไซต์ และ ปรับปรุงเว็บ มาหลาย 10 ปีแล้ว ผมเคยได้ทำเว็บไซต์มากกว่า 300 เว็บมาแล้ว และ ได้ช่วยลูกค้าจำนวนมาก ทุกวันวันละหลาย ๆ ครั้งใน และ ผมมักจะได้รับคำถามนี้บ่อยมาก

“ทำไมเว็บโหลดช้า ” “ต้องเพื่ม ขนาด Server+Network ไหม

เริ่มต้นเราขอบอกว่า Server 1 ตัว 1 CPU, Ram 4 GB สามารถ รับคนได้เป็น หมื่นๆ คนพร้อมๆกัน หรือ รองรับคนเข้าเป็นล้านคน ต่อวันได้ หากเรา Opimise Application ของเราดี เรามองว่า Hardware เป็นเพียงแค่ 10% ของทั้งหมด อีก 90% Code ล้วนๆ ที่ทำให้ช้า

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

ผมเองถนัดการทำเว็บด้วย WordPress โดย WordPress สามารถทำเป็นเว็บแนวไหนก็ได้มากกว่า 90% ของความสามารถมัน สามารถเป็นได้ทุกอย่างบนโลกใบนี้ โดยพื้นฐาน WordPress มีความเร็วที่สุดยอดอยู่แล้ว หากคุณพึ่งติดตั้งมันใหม่ แต่พอใช้ไปซักพัก มันก็จะอืดขึ้น สาเหตุหลัก 50% มาจาก 3 สาเหตุนี้

  1. หน้าเว็บมีจำนวนโหลดไฟล์เยอะ
  2. ปัจจัยภายนอกจาก Plugin อื่นๆ
  3. ภาพขนาดใหญ่เกินความจำเป็น

แต่อีก 50% มาจากด้าน Code Performance ด้วยที่เป็นเรื่องด้านของการใช้ Code ที่จำเป็นต้องใช้ไหม ในตัวเว็บ อันไหนไม่จำเป็นต้องตัดออก และจะตัดออกยังไง เราช่วยคุณได้ เราอยากจะบอกว่า ถึงแม้คุณจะปรับปัจจัย 3 ข้อด้านบนแล้ว ให้เหลือจากหน้าละ 3 Mb หรือ 300 Kb ก็ตาม ยังไงก็ต้องเพิ่ม Performance ด้าน Code อีกอยู่ดี

ผมต้องรับผิดชอบต่อไซต์ที่เรากำลังสร้างและตระหนักถึงผลกระทบโดยตรงต่อความเร็วที่เรามี ด้วยคะแนน Pagespeed Insights ที่เราจะยึดเป็นเกณฑ์หลักที่ต้องมากกว่า 90 คะแนน ยังไงคุณก็ต้องทำเว็บใหม่

คุณสามารถเลือก Design ที่เราออกแบบไว้ได้ที่ https://store.pagespeed.digital/

หน้าเว็บที่เร็วมีลักษณะอย่างไร

  1. เว็บต้อง โหลด ต่ำกว่า 2 วินาที หรือ เปิดปุ๊บมาปั๊บ แม้จะเป็นเน็ต 3G
  2. เว็บต้อง Render หน้าเพจได้เร็ว (มองเห็นโครงสร้างได้ไว) หรือ LCP (Large Content Paint) ต่ำกว่า 2.5 วินาที
  3. TTFB ต่ำว่า 200 ms หรือ ควรจะ 50-60 ms
  4. หากมีผู้ใช้งานเว็บ เป็นคนต่างประเทศด้วย ต้องมี การทดสอบผ่านต่ำว่า 200 ms ทุกทวีป โดยใช้ เครื่องมือที่เราแนะนำทดสอบ

อะไรคือส่วนผสมของหน้าเว็บ?

นี่คือองค์ประกอบหลักของหน้าเว็บ:

  • HTML นี้เป็นโครงสร้างของไซต์ของคุณ โดยปกติจะก่อให้เกิดน้ำหนักหน้าน้อยที่สุด
  • CSS ควบคุมรูปแบบและการออกแบบไซต์ – สี ฯลฯ 
  • JavaScript ส่วนใหญ่ใช้สำหรับองค์ประกอบแบบโต้ตอบเช่นตัวเลื่อนการแชทออนไลน์ภาพเคลื่อนไหวและอื่น ๆ
  • รูปภาพ
  • แบบอักษร Font เช่น Google Fonts, Typekit ฯลฯ
  • วิดีโอ และสื่ออื่น ๆ
  • เนื้อหาภายนอก / บุคคลที่สาม ไฟล์และเนื้อหาของคุณส่วนใหญ่จะโฮสต์จากโดเมนของคุณเอง แต่เนื้อหาภายนอกหรือของบุคคลที่สามคือเมื่อไฟล์ถูกโฮสต์จากโดเมนอื่นที่คุณไม่ได้เป็นเจ้าของ ตัวอย่างทั่วไปคือ Google Analytics หรือ Google Fonts ซึ่งโฮสต์บนโดเมนที่ควบคุมโดย Google หรือ Google Adsense แบบเนอร์โฆษณาที่คุณติด

โดยทุกอย่างที่เราบอกไป มีส่วนหมด ที่จะทำให้เว็บโหลดช้า

อะไรเป็นที่ทำให้ เว็บโหลดช้า

  • ขนาดหน้า (รวมของส่วนประกอบทั้งหมด)
  • JavaScript
  • เนื้อหาของบุคคลที่สาม 

โดยเราต้อง กำจัดมัน หรือ คงเหลือไว้ เท่าที่จำเป็นต่อการดำเนินงาน

ถ้าคงเหลือไว้ ควรมีเท่าไรจึงจะดี ไม่ส่งผลให้ เว็บโหลดช้า

ที่นี่อาจมีตัวแปรได้หลายตัวดังนั้นจึงควรถือเป็นแนวทางคร่าวๆ

สมมติว่าคุณมี Server ที่ดี และโดยทั่วไป ผู้ใช้มือถือของคุณใช้การเชื่อมต่อมือถือที่รวดเร็วหลักเกณฑ์บางประการมีดังนี้

  • ขนาดหน้าทั้งหมด: 1 MB หรือน้อยกว่า
  • JavaScript : น้อยกว่า 150KB จึงจะเหมาะ 
  • เนื้อหาของบุคคลที่สาม : 25% หรือน้อยกว่า
  • โฆษณาของบุคคล : ให้น้อยที่สุด !

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

บนมือถือ การโหลด และ Render หน้าเว็บจะใช้เวลานานขึ้น

เราจึงต้อง ออกแบบเว็บให้ Mobile First หากคุณเข้าไปดู Analytic ของคุณ คุณก็ทราบอยู่แล้วว่า มือถือเกิน 50% ของ Desktop สิ่งที่เราต้องคำนึงถึงสินแรกคือ

  • Mobile มักใช้การเชื่อมต่อที่ช้ากว่า Desktop เว้นแต่เน็ตอัลลิมิต ก็ถือว่าไม่เป็นปัญหา
  • CPU ของมือถือ ช้ากว่า Desktop เยอะ

เราเองได้ออกแบบการสร้างเว็บที่เบาบาง ซึ่งเป็นเรื่องที่ยากมากกว่า การออกแบบเยอะๆ แบบ Lazada Shopee Sanook Kapook เราว่าการออกแบบเว็บแบบนั้นเป็นเรื่องที่เราทำได้สบายมาก แต่คุณต้องแลกกับ Performance นะ คุณลอง เอาคะแนนไปเทสที่เพจสปีดสิ คะแนนอยู่ไม่เกิน 30

ตรวจสถานะปัจจุบันของเว็บไซต์ของคุณ

ตอนนี้คุณรู้แล้วว่าคุณกำลังมองหาอะไรอยู่นี่คือวิธีค้นหาสถานะปัจจุบันของเพจของคุณ

คุณสามารถใช้เครื่องมือทดสอบความเร็วฟรีเพื่อตรวจสอบสถิติที่สำคัญสำหรับเพจของคุณได้อย่างง่ายดาย

ขนาดหน้าของคุณมีขนาดไฟล์ โหลดเท่าไร

ขนาดหน้านั้นง่ายต่อการระบุในรายงาน GT Metrix

ขนาดของ Page Speed 352KB

โปรดจำไว้ว่า 1MB หรือน้อยกว่านั้นเหมาะอย่างยิ่ง ยิ่งคุณไปสูงกว่านั้นประสิทธิภาพก็จะยิ่งลดลงโดยเฉพาะบนอุปกรณ์เคลื่อนที่

ตรวจสอบว่า Javascript มีขนาดเท่าไร

ใน GT Metrix ให้คลิกที่แท็บ Waterfall จากนั้นกรองผลลัพธ์โดยคลิกปุ่ม JS

ของ Pagespeed มีเพียง 1 ไฟล์ โดยเราฝัง Javascript ไปที่ inline Html หมดแล้ว

มีเนื้อหาของบุคคลที่สามมากแค่ไหน?

ในส่วน Content size by Domain จะบอกว่าเรามีการโหลดจากเว็บอื่นด้วยหรือเปล่า เราจะบอกคุณสั้นๆ ว่าทำไมไม่ควรมีเนื้อหาที่โหลดจากเว็บอื่น

  • มันเหมือนการเข้าเว็บอื่นๆ พร้อมๆ กับเรา แทนที่ Web Browser จะส่งไปหาข้อมูลเราเพียงโดเมนเดียว แต่กลับต้องไป รอ เจ้าอื่นอีกด้วย เหมือนคุณสั่ง Grab Food นั่นแหละ ที่ Order 1 Order จะต้องมาจากร้านเดียว ถ้าจะสั่งร้านอื่น มันก็เหมือน โดเมน อื่น ที่ทำให้ช้าลง
  • ทุกโดเมนต้องใช้เวลาในการเชื่อมต่อ อย่างต่ำ 200 ms แน่นอน หากคุณมี 10 others domain ก็กินเวลาเกือบ 2 วิในการค้นหาแล้ว แม้คุณจะ Preload ก็อาจช่วยได้บ้าง แต่ ควรจะเลิกใส่ ถึงจะดีที่สุด
  • หากคำขอหนึ่งล้มเหลวจะมีความสามารถในการทำลายไซต์ได้ ไม่ดีแน่ เราจะมั่นใจได้อย่างไรว่าเว็บอื่นจะ ส่งข้อมูลมาให้เราสมบรูณ์ หยุดการพึ่งพาคนอื่น และ มาออกแบบ Standalone ให้ทำงานได้เทียบเท่า บุคคลที่สาม

ที่นี่เว็บของคุณเป็นไงบ้าง หากต้องการให้เรารายงานให้ สามารถติดต่อได้ที่ หน้าขอใบเสนอราคา โดยไม่มีค่าใช้จ่าย

ค้นหาไฟล์ที่แย่ ไฟล์ที่โหลดช้า ประเมินผลนาน เขียน Code มาไม่ดี

ตัดมันออกไป หรือ ถ้าตัดไม่ได้ก็มาคิดว่าจะเอายังไงกับมัน ให้มันทำงานดีขึ้น

  1. ในส่วนนี้ เราจะหาไฟล์ที่แย่รูปภาพ ไฟล์ไหนใหญ่ และ scale ใหญ่เกินไป ตัดออกซะ
  2. Javascript ไฟล์ไหนแย่ ตัดออกซะ ง่ายสุดใช้ Google Pagespeed Insights ตรวจได้
  3. Stackify ตรวจสอบ นี้คือวิธีที่เราใช้ Test ไฟล์ หรือ Database ตัวไหนที่ทำให้เกิดปัญหา

โดย เราลงทุนซื้อ License รายเดือนโดยเฉพาะ เพื่อการตรวจสอบเชิงคุณภาพ ทุ่นเวลาค้นหาปัญหาที่เกิดขึ้น

อย่างไรการตรวจสอบที่ทรงประสิทธิภาพที่สุด ยังคงเป็น Error Log จาก Web Server Log (Apache, NginX) อยู่ดี รวมไปถึง Application Log (จาก WordPress หรือ App ที่เราใช้)

สรุป

การตรวจสอบเว็บช้า สามารถ ตรวจสอบได้จาก ขนาดไฟล์ และ ปริมาณ และ ยังรวม ไปถึงใช้ การใช้ Software เพื่อตรวจสอบ การทำงานโดยเฉพาะ โดยคุณจะต้องติดตั้ง Stackify ลงไปใน Server เพื่อทำการ Monitoring

Table of Contents