Page Speed คืออะไร แนะนำวิธีปรับ Page Speed ให้เร็วขึ้นแบบติดเทอร์โบ!

Page Speed

เว็บไซต์ใครทำงานช้า ใช้เวลาโหลดน๊านนานต้องอ่าน! เพราะวันนี้ “น้องฮิปโปว” ได้รวบรวมเอาวิธีการเพิ่มความเร็วเว็บไซต์ หรือวิธีการปรับ Page Speed มาฝากกันแบบละเอียดยิบ โดยในที่นี้น้องฮิปโปวจะขอเน้นไปที่การใช้ WordPress เป็นหลักแล้วกันนะ!

ดังนั้น ใครที่ทำเว็บไซต์อยู่แล้วอยากปรับให้เว็บไซตฺมีประสบการณ์การใช้งานที่ดีขึ้น ไปพร้อมกับการปรับปรุงการทำ SEO เพื่อให้ติดอันดับบน SERPs ต้องอย่าลืมทำความเข้าใจว่า Page Speed คืออะไร พร้อมกับนำวิธีการปรับ Page Speed เหล่านี้ไปใช้ด้วย

ถ้าพร้อมแล้วตามไปดูรายละเอียดพร้อมกันได้เลยนะคะ

Page Speed คืออะไร

Page Speed คือ ความเร็วของการโหลดเว็บไซต์ในแต่ละหน้าเว็บไซต์ ที่คนทำ SEO หรือคนทำเว็บไซต์ต้องใส่ใจและทำความเข้าใจ เพราะความเร็วของเว็บไซต์เป็นปัจจัยหนึ่งที่ Google ใช้เพื่อดูว่า เว็บไซต์นั้นมีคุณภาพหรือไม่ ซึ่งองค์ประกอบที่ทำให้เว็บไซต์โหลดเร็วหรือช้านั้นก็มีหลายปัจจัย เช่น การเลือก Hosting, การเลือกใช้รูปภาพ, การเขียนโค้ด, อุปกรณ์ที่ใช้เข้าชมเว็บไซต์ ฯลฯ เดี๋ยวน้องฮิปโปวจะมาพูดถึงในหัวข้อต่อๆ ไปว่ามีอะไรบ้างที่ทำให้เว็บไซต์มีความเร็วเพิ่มขึ้น รวมถึงจะปรับยังไงหาก Page Speed ของเว็บไซต์ยังช้าอยู่

ปรับ Page Speed ไปเพื่ออะไร

การเพิ่มความเร็วเว็บไซต์ เป็นปัจจัยหนึ่งที่ช่วยทำให้ประสิทธิภาพด้านการใช้งานเว็บไซต์ดีมากยิ่งขึ้น ว่าแต่…ยังมีอะไรอีกบ้างที่จะได้จากการปรับ Page Speed เว็บไซต์ให้ดีขึ้น ลองมาดูข้อดีของการปรับปรุงความเร็วเว็บไซต์ไปพร้อมๆ กันเลยดีกว่านะเมี้ยว

ช่วยเพิ่ม Conversion Rate และลด Bounce Rate ให้กับเว็บไซต์

Thinkwithgoogle เคยกล่าวเอาไว้ว่า ผู้เข้าชมเว็บไซต์ 32% มีโอกาสออกจากหน้าเว็บไซต์ของคุณทันทีโดยไม่ทำอะไรเลย หากเว็บไซต์ของคุณใช้เวลาโหลดเพิ่มขึ้นจาก 1 วินาที เป็น 3 วินาที และจะเพิ่มขึ้นเป็น 90% เมื่อปล่อยให้พวกเขารอนานถึง 5 วินาที นั่นหมายความว่า หากเว็บไซต์ของคุณมี Page Speed ที่ดี ทำการโหลดได้ไวก็จะช่วยลดโอกาสในการเกิด Bounce Rate ที่เป็นอัตราของการมีผู้ใช้งานเข้ามาในเว็บไซต์ของคุณแล้วกดออกได้มากขึ้น

การปรับ Page Speed ให้เร็วขึ้น นอกจากจะช่วยลด Bounce Rate ได้แล้ว ยังมีส่วนช่วยเพิ่ม Conversion Rate ของเว็บไซต์ให้มีมากขึ้นได้ด้วย ลองสมมติง่ายๆ ว่า ถ้าหากคุณเข้าเว็บไซต์เพื่อทำการซื้อของสักชิ้น แต่เวลากดเข้าตะกร้าเว็บกลับช้า ตอนกดจ่ายเงินด้วยบัตรเครดิตก็รอนาน แบบนี้จะทำให้คุณอยากที่จะทนรอซื้อสินค้าจากเว็บไซต์แบบนี้หรือเปล่า?

คำตอบก็คงจะเป็นคำว่า ‘ไม่’ ดังนั้น การปรับความเร็วเว็บไซต์ให้โหลดไวขึ้นจึงเป็นช่วยที่ช่วยเพิ่มยอด  Conversion Rate ที่ช่วยสร้างรายได้ให้เพิ่มมากยิ่งขึ้นด้วยเช่นเดียวกัน

ดีต่อประสบการณ์ของผู้ใช้เว็บไซต์

การรอเว็บไซต์โหลดนานๆ จะทำให้ User รู้สึกเครียด อ้างอิงได้จากผลการวิจัยของ Ericsson Mobility Report ที่ระบุไว้ว่า คนที่รอการแสดงผลเว็บไซต์บนมือถือนั้นมีระดับความเครียดที่สูงสูสีกับการดูหนังสยองขวัญและการแก้โจทย์คณิตศาสตร์เลยทีเดียว

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

Bot ของ Google ทำงานง่ายขึ้น

การที่เว็บไซต์ของคุณมี Page Speed จะช่วยทำให้ Google เห็นว่า คุณสามารถจัดการไฟล์ต่างๆ ไปจนถึงจัดการโค้ดบนเว็บไซต์อย่าง CSS หรือ Javascript ได้อย่างมีประสิทธิภาพ ซึ่งส่งผลดีต่อการทำงานของบอท (Bot) ของ Search Engineเป็นอย่างมาก เพราะบอทจะเข้ามารวบรวมข้อมูลหน้าเว็บและไฟล์ในหน้าเว็บในระยะเวลาที่น้อยลง แถมยังไม่เกิดปัญหาหน้าบางหน้าตกหล่นและไม่ได้ถูกทำการจัดทำดัชนี (Indexing) อีกด้วย

Page Speed เกี่ยวข้องอย่างไรกับการทำ SEO

Page Speed คือ อีกหนึ่งเกณฑ์สำคัญที่ Google ให้คะแนนสำหรับการทำ SEO โดยมีกฎที่เรียกว่า Core Web Vitals ซึ่ง Google ประกาศออกมาแล้วว่าจะเป็นอีกหนึ่งเปัจจัยที่จะนำมาใช้ในการพิจารณาคุณภาพของเว็บไซต์ว่า สามารถสร้าง Experience ที่ดีให้กับผู้ใช้งานได้จริงหรือไม่ โดยเกณฑ์ Core Web Vitalsที่ใช้ในการพิจารณาจะมีอยู่ด้วยกัน 3 องค์ประกอบหลักด้วยกัน ได้แก่

ที่มาภาพ: akshayranganath

1. Largest Contentful Paint (LCP)  คือ ค่าที่ใช้วัดความเร็วในการโหลดคอนเทนต์ที่ใหญ่ที่สุด โดยควรที่จะใช้เวลาโหลดไม่เกิน 2.5 วินาที
2. First Input Delay (FID) คือ ค่าที่ใช้ในการวัดความเร็วของการตอบสนองคำสั่งต่างๆ บนหน้าเว็บไซต์ ยกตัวอย่างเช่น การคลิกปุ่มต่างๆ ที่ต้องสังเกตว่ามีการดีเลย์หรือเปล่า ฯลฯ ซึ่งค่า FID ที่ดีนั้นไม่ควรใช้เวลาเกิน 0.1 วินาทีในการตอบสนอง (โดยในที่นี้ไม่รวมกับการซูม หรือ scroll เลื่อนจอ)
3. Cumulative Layout Shift (CLS) คือ เกณฑ์ที่วัดว่าเว็บไซต์กระตุกหรือเปล่า มีความเสถียรแค่ไหน มีอะไรบนหน้าเว็บผิดปกติหรือเปล่า โดยจะวัดจากการจัดวางเลย์เอาท์บนหน้าเว็บไซต์ในช่วง 5 วินาทีแรกที่หน้าเว็บมีการเคลื่อนไหวมากที่สุด (สำหรับค่ามาตรฐานก็ควรที่จะได้ไม่เกิน 0.1)

และนี่จึงเป็นเหตุผลว่า ทำไมต้องปรับ Page Speed เพื่อให้ดีต่อการทำ SEO

อะไรบ้างที่ทำให้ Page Speed ร่วง

แล้วมีปัจจัยอะไรบ้างล่ะที่ทำให้ Page Speed ตก? น้องฮิปโปวลองสรุปสาเหตุที่ทำให้เว็บไซต์ของคุณช้าลงโดยมีปัจจัยหลักๆ ดังนี้

1. ขนาดของรูปภาพหรือวิดีโอใหญ่มากเกินไป

ใครที่ชื่นชอบการใส่ภาพหรือใส่วิดีโอบนเว็บไซต์เยอะๆ โดยที่ไม่รู้วิธีการจัดการขนาดของไฟล์ให้มีคุณภาพ มักจะเจอกับปัญหาเว็บโหลดช้าด้วยเช่นกัน เพราะรูปภาพที่มีขนาดใหญ่คือ สาเหตุที่ทำให้หลายเว็บไซต์เจอปัญหากับ Page Speed ตก ทำให้เว็บไซต์โหลดช้า เนื่องจากต้องใช้เวลาในการแสดงผลภาพนั่นเอง

2. มีปัญหาเรื่อง Tecnical เกี่ยวกับเว็บไซต์

ปัญหาเรื่องของ Coding ต่างๆ มีส่วนที่ทำให้เกิดปัญหาเว็บไซต์โหลดช้าด้วยเช่นเดียวกัน ยกตัวอย่างเช่นปัญหาเรื่องของการเลือกใช้ Hosting เช่น เลือกใช้ Hosting ที่ไม่ได้คุณภาพ  มีโค้ด CSS หรือ Javascript ที่ไม่จำเป็นอยู่เยอะมากเกินไป ฯลฯ และเรื่องเหล่านี้ล้วนส่งผลทำให้เกิดปัญหา Page Speed ตกได้เช่นเดียวกัน

ที่มาภาพ: www.tiredsg.dev

3. ใส่ Effect บนหน้าเว็บไซต์มากเกินไป

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

4. ติดตั้ง Plug-in จำนวนมาก

ใครที่ใช้ CMS อย่าง WordPress ในการทำเว็บไซต์ แล้วทำการติดตั้งปลั๊กอินต่างๆ เพื่ออำนวยความสะดวกให้กับการทำเว็บไซต์อยู่บ่อยๆ ต้องรู้ไว้ก่อนนะว่า การติดตั้ง Plug-in ก็เป็นสาเหตุหนึ่งที่ทำให้เว็บโหลดช้าได้ด้วย ดังนั้น จึงควรเลือกติดตั้งเฉพาะปลั๊กอินที่สำคัญที่ช่วยทำให้เว็บไซต์ทำงานสะดวกก็พอแล้ว ไม่ต้องติดเยอะมากจนเกินไป

5. ใช้ Web Fonts เยอะเกินไป

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

วิธีเพิ่มความเร็วเว็บไซต์ ปรับ Page Speed แบบติดจรวด

มาถึงหัวข้อที่ทุกคนรอคอยกับวิธีปรับ Page Speed เว็บไซต์ให้เร็วขึ้น น้องฮิปโปวคิดว่า น่าจะเป็นส่วนที่หลายๆ คนได้เจอปัญหาอยู่บ่อยๆ และน้องฮิปโปวก็ได้รวบรวมวิธีการมาให้แล้ว ลองอ่านวิธีการแล้วทำตามดูได้เลยนะฮะ

1. บีบอัดขนาดรูปภาพเพื่อทำให้เว็บไซต์เบาขึ้น

อย่างที่บอกว่า ไฟล์ภาพที่ใหญ่ทำให้เว็บโหลดช้า วิธีแก้ก็ต้องทำให้ไฟล์ภาพเล็กและเบาขึ้น ว่าแต่จะทำได้ยังไงบ้าง?

• แนะนำให้ทำการย่อไฟล์ของรูปด้วยโปรแกรมบีบอัดไฟล์ หรือสำหรับใครที่ใช้ WordPress ในการทำเว็บก็ติดตั้ง Plug-in ที่ช่วยลดขนาดหรือเปลี่ยนสกุลของไฟล์ภาพจาก Jpeg หรือ Png เป็น Webp หรือ AVIF ที่เบากว่าได้ ยกตัวอย่างโปรแกรม เช่น https://tinypng.com/ (ซึ่งขนาดไฟล์ภาพที่แนะนำ สำหรับรูปภาพที่สำคัญ เช่น รูปปกต่างๆ แนะนำให้ใช้ไฟล์ไม่เกิน 300 KB ส่วนรูปไม่สำคัญ เช่นรูปประกอบสินค้าเล็กๆ ในหน้า Product ใช้ไฟล์ไม่เกิน 100 KB ก็เพียงพอแล้ว)

วิธีการใช้งานก็แค่โยนไฟล์ภาพที่ต้องการปรับลงไป แล้วดาวน์โหลดมาใช้ในเว็บไซต์แทนภาพเดิมที่มีขนาดใหญ่

ส่วนไฟล์ภาพจะใหญ่ที่สุดได้แค่ไหน? ก็อาจจะทำไว้ไม่ให้ใหญ่เกิน 250 KB หรือถ้าให้แน่ใจจริงๆ แนะนำให้ใช้เครื่องมือวัดความเร็วเว็บไซต์ว่า ไฟล์ภาพที่ใช้ในเว็บใหญ่แค่ไหนแล้วควรปรับเป็นขนาดเท่าไหร่ก็ได้เช่นกัน

• ใช้รูปภาพขนาดจริงเท่ากับที่แสดงบนหน้าเว็บไซต์ ยกตัวอย่างเช่น เว็บไซต์ของคุณแสดงภาพกว้างประมาณ 1,200 x 630 pixel แต่คุณทำไฟล์ใหญ่มากกว่านี้ไปเยอะ ก็จะทำการแสดงผลก็จะช้า เพราะสุดท้ายก็ต้องปรับขนาดให้แสดงอยู่ที่ 1,200 x 630 pixel อยู่ดี

2. ฝังฟอนต์ลงบนเว็บตรงๆ หรือใช้ Google Fonts

การปรับฟอนต์ (FontsX เพื่อให้เว็บไซต์สามารถโหลดได้เร็วขึ้น ส่วนใหญ่จะใช้วิธีเรียกฟอนต์จาก Google Font หรือนำฟอนต์ฝังลงบนเว็บไซต์โดยตรง รวมถึงควรที่จะเลือกใช้ฟอนต์ให้น้อยที่สุด หรือไม่เกิน 2 ตัว จะดีที่สุด

ตัวอย่างฟอนต์จาก Google Font

และใครที่ใช้ WordPress อยู่แล้ว ก็สามารถลงฟอนต์ผ่านการใช้ปลั๊กอินได้ง่ายๆ โดยใช้ปลั๊กอินที่ชื่อว่า Use Any Font (ใครที่ใช้เวอร์ชันฟรีจะได้แค่ฟอนต์เดียว แต่ถ้าซื้อฟอนต์เพิ่มจะมีค่าใช้จ่ายประมาณ 9.99us ต่อ 1 เว็บไซต์) หรือจะลองใช้ปลั๊กอิน Seed Fonts เพื่อเรียก Google Fonts มาใช้งานได้อย่างสะดวกก็ได้เช่นเดียวกัน

3. ทำ Caching

การทำ Caching คือ วิธีการช่วยลดภาระของเซิร์ฟเวอร์ในการโหลดเว็บไซต์ เพราะการทำ Caching เปรียบเสมือนตัวเก็บข้อมูลที่ไม่ค่อยมีการเปลี่ยนแปลง และใช้งานบ่อยๆ ให้สามารถนำกลับมาใช้งานซ้ำได้ ซึ่งวิธีการใช้ Caching ที่ง่ายที่สุดเ คือ การติดตั้ง Plug-in เช่น WP Fastest Cache, WP Super Cache, WP Rocket, LiteSpeed Cache เป็นต้น

4. ใช้ Lazy Load

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

ที่มาภาพ: web.dev

สำหรับวิธีใช้งาน Lazy Load สามารถทำได้ง่ายๆ โดยการติดตั้ง Plug-in บน WordPress ได้เลย ยกตัวอย่างปลั๊กอินที่นิยมใช้ เช่น LazyLoad, WP Rocket, BJ Lazy Load เป็นต้น

5. ใช้ Cloudflare

Cloudflare เป็น CDN เปิดเข้าเว็บไซต์จากทุกที่ทั่วโลกได้เร็วขึ้น ซึ่งสามารถติดตั้งลงบน WordPress ได้ ส่วนวิธีการนำมาใช้งานนั้นจะเป็นยังไง ลองดูวิธีการใช้งานได้ในคลิปด้านล่างนี้ได้เลยนะเมี้ยว

6. ย้าย Hosting ให้มีคุณภาพ

Hosting ที่ไม่ทันสมัย ไม่มีการอัปเดต หรือมีคุณภาพต่ำ เช่น มี Sever Stack ไม่ดี ฯลฯ มีส่วนทำให้เว็บไซต์ทำงานช้าลงได้ ทางที่ดีควรที่จะเลือกใช้ Hosting ที่มีคุณภาพ ซึ่งในปัจจุบันก็มีให้เลือกใช้ทั้งโฮสติ้งไทยและต่างประเทศ ยกตัวอย่างโฮสติ้งไทย เช่น Hostatom, Rukcom เป็นต้น

Page Speed ให้ดีควรอยู่ที่เท่าไหร่

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

สรุปวิธีปรับ Page Speed ควรทำยังไง และตรวจสอบได้จากไหน

สุดท้ายนี้ รู้แล้วนะว่า Page Speed คืออะไร แถมยังได้รู้แล้วด้วยว่า มีวิธีการปรับ Page Speed ได้ยังไงบ้างให้เว็บเร็วมากขึ้น ทั้งการปรับรูปภาพ, ฟอนต์, วิดีโอ ไปจนถึงปรับ Coding ที่ไม่จำเป็นต่างๆ เพื่อทำให้เว็บไซต์เร็วขึ้นตามต้องการ

แต่ตอนนี้คุณอาจจะยังไม่รู้เลยว่า เว็บไซต์ที่ดีควรเร็วแค่ไหน? ไม่ต้องกังวลใจไป เพราะ Google มี Tool ให้ใช้งานเพื่อตรวจสอบความเร็วเว็บได้ด้วย โดยเครื่องมือที่สามารถใช้ตรวจสอบความเร็วของเว็บไซต์ พร้อมบอกด้วยว่า เว็บของคุณทำไมถึงช้า มีคะแนน Page Speed สรุปให้เรียบร้อย นั่นคือโปรแกรมที่เรียกว่า Pagespeed Insights ซึ่งเป็นเครื่องมือใช้งานฟรีจาก Google ลองเข้าไปใช้งานได้ที่ https://pagespeed.web.dev/

สรุปข้อดีของโปรแกรม Pagespeed Insights 

• ดูรายละเอียดของความเร็วเว็บไซต์แยกได้ทั้งในเวอร์ชัน Mobile และ Desktop
• มีรายละเอียดบอกครบว่า ประสิทธิภาพของเว็บไซต์เป็นอย่างไร และแก้ไขแบบไหนได้บ้าง
• ช่วยทดสอบ End-to-End จาก UX ได้
• ทำการทดสอบซ้ำๆ และ Debug ได้ง่ายขึ้น