Page Speed ตัวช่วยสุดเจ๋งเพื่อเพิ่มความเร็ว

ความเร็วในการโหลดหน้าเว็บ (Page Speed) เป็นสิ่งที่มองข้ามไม่ได้ในการทำ SEO แต่ก็เป็นเรื่องซับซ้อนและมีเทคนิคเฉพาะไม่น้อย แต่คุณไม่ต้องกังวล เพราะเรามีเคล็ดลับเพิ่มความเร็วของ Page Speed มาบอกคุณถึงที่

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

การโหลดหน้าเว็บ

เริ่มจากผู้ใช้งานเข้ามายังเบราว์เซอร์ แล้วพิมพ์ชื่อเว็บไซต์ของคุณลงไปในช่องค้นหา DNS (Domain Name Server) ก็จะช่วยแสดงผลเว็บไซต์และทำให้เว็บของคุณมีความเสถียร หลังจากนั้น การอ่านชื่อโดเมนและไฟล์งานจากเซิร์ฟเวอร์ก็จะเริ่มต้นขึ้น DOM  (Document Object Model) จะเริ่มโหลด HTML CCS และ JavaScript จากเว็บไซต์ของคุณ 

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

ปัจจัยที่ทำให้การโหลดหน้าเว็บช้า

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

1. สาเหตุสำคัญคือรูปภาพ ยิ่งรูปมีขนาดใหญ่มากเท่าไร หน้าเว็บก็จะยิ่งโหลดช้ามากขึ้นเท่านั้น
2. ความผิดปกติของโฮสต์หรือคอมพิวเตอร์เครื่องหลัก
3. ปลั๊กอิน แอปพลิเคชั่น และวิทเจ็ท โปรแกรมเสริมต่างๆ ล้วนส่งผลให้หน้าเว็บโหลดนานกว่าปกติ
4. ธีมคอมพิวเตอร์ที่คุณใช้ หรือไฟล์ขนาดใหญ่ต่างๆ ก็ทำให้การโหลดหน้าเว็บใช้เวลามากขึ้น
5. Redirect Website หรือการตั้งค่าเพื่อเปลี่ยนเส้นทางของเว็บไซต์อัตโนมัติ
6. JavaScript ก็เป็นอีกสาเหตุที่ทำให้หน้าเว็บโหลดได้ช้าเช่นกัน

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

เครื่องมือที่ช่วยเพิ่มความเร็วในการโหลดหน้าเว็บ

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

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

Chrome User Experience Report
นี่คือเมตริกที่แสดงประสบการณ์ของผู้ใช้งานอย่างแท้จริง มีแค่เว็บไซต์ที่ได้รับความนิยมสูงเท่านั้นที่จะใช้เครื่องมือนี่ได้ แต่คุณก็ยังสามารถเก็บเกี่ยวข้อมูลดีๆ จากเมตริกนี้ได้ นอกจากนี้ คุณควรมีความรู้พื้นฐานเกี่ยวกับคำสั่ง SQL เสียก่อน เพราะเมตริกนี้อยู่ในฟีเจอร์ BigQuery

Lighthouse
Lighthouse เปิดให้ใช้งานโดยตรงบน Google Dev Tools หรือส่วนขยายของ Google Chrome คุณสามารถคลิก Inspect Element บนหน้าเว็บไซต์ของคุณ แล้วกดเปิด Google Dev Tools หลังจากนั้นให้มองหาแท็บที่ชื่อว่า Audit คุณก็จะเปิดใช้งาน Lighthouse บนเว็บไซต์ของคุณได้ทันที

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

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

เครื่องมือจากแหล่งอื่น
นอกจากเครื่องมือของ Google แล้ว Pingdom และ GTmetrix ก็เป็นเครื่องมือที่มีประสิทธิภาพเช่นกัน และยังมีเครื่องมืออื่นๆ อยู่ในเว็บไซต์ testmysite.thinkwithgoogle.com โดยเป็นเครื่องมือที่ทดสอบความเร็วเว็บไซต์ผ่านทางโทรศัพท์ และยังประมวลผล ROI หรืออัตราส่วนผลตอบแทนจากการลงทุนในธุรกิจของคุณให้อีกด้วย

เป็นเรื่องดีที่ Google ได้เตรียมเครื่องมือไว้มากมายเพื่อช่วยคุณเพิ่มความเร็วในการโหลดหน้าเว็บ เพราะการโหลดที่ช้านั้น จะทำให้คุณเสียลูกค้าและความน่าสนใจไปมากทีเดียว

ขั้นตอนของการโหลดหน้าเว็บ

Google ได้ออกเมตริกใหม่เพื่อเอาไว้วัดการแสดงผลของเว็บไซต์โดยอ้างอิงจากประสบการณ์ของผู้ใช้งาน หรือ User-centric performance metrics ซึ่งเมตริกที่คุณควรเข้าใจมีดังต่อไปนี้

First Paint – เป็นด่านแรกที่ทำให้ผู้ใช้งานเห็นว่าระบบกำลังเริ่มทำงาน

First Contentful Paint – เริ่มเห็นโครงสร้างบางส่วนของเว็บ จนกระทั่งเนื้อหาแรกปรากฏขึ้นมา เนื้อหาที่ว่าอาจเป็นข้อความ ภาพ หรือเป็นแค่เลย์เอาท์ก็ได้

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

Time to Interactive – คือด่านสุดท้ายของการโหลดหน้าเว็บ สามารถมองเห็นทุกอย่างของหน้าเว็บได้แล้ว

DOM Content Loaded – เป็นระยะเวลาที่ HTML โหลดสำเร็จ และหน้าเว็บไซต์โหลดเสร็จสมบูรณ์ ปุ่มและองค์ประกอบอื่นๆ ในเว็บไซต์อยู่ในสถานะพร้อมใช้งาน

วิธีเพิ่มความเร็วในการโหลดหน้าเว็บ

HTTP/2
HTTP/2 คือสิ่งที่ช่วยเพิ่มความเร็วได้ดีเยี่ยม เพราะมีการตัดข้อมูลที่ไม่จำเป็นออก และถูกพัฒนาให้มีประสิทธิภาพสูงขึ้น แถมยังช่วยลด Latency และเพิ่ม Security ให้อีกด้วย

ลดขนาดรูปภาพ
อีกหนึ่งวิธีที่ง่ายที่สุดในการเพิ่มความเร็วการโหลดหน้าเว็บก็คือ การลดขนาดหรือบีบอัดรูปภาพ มีเครื่องมือหลายหลายที่สามารถช่วยคุณให้ลดขนาดรูปภาพได้ เช่น Optimizilla

Preconnect, Prefetch และ Preload
Preconnect คือ เบราว์เซอร์ทำการเชื่อมต่อกับโดเมนล่วงหน้า ซึ่งจะช่วยให้คุณลดเวลาการเชื่อมต่อเริ่มต้นได้ โดยปกติแล้วจะใช้กับเว็บ Third Party เช่น การโหลดฟอนต์จาก Google Fonts

Prefetch คือ การแจ้งให้เบราว์เซอร์โหลดเก็บแคชไว้ ก่อนที่จะเรียกใช้ไฟล์นั้นในหน้าถัดไป สามารถเรียกใช้งานได้ทั้ง Style, Script, Font และ Fetch 

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

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

เปิดการใช้งาน Cach และ Content Delivery Network (CDN)

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

และนี่ก็คือ เคล็ดไม่ลับเกี่ยวกับตัวช่วยและวิธีสุดเจ๋งเพื่อเพิ่มความเร็วในการโหลดหน้าเว็บ ที่เรานำมาบอกต่อกันอย่างไม่มีกั๊ก แต่ก็ยังมีอีกหลายวิธีเช่นกันที่จะช่วยคุณเพิ่มความเร็วได้ อย่าลืมล่ะ ว่าควรเลือกวิธีที่เหมาะสมกับเว็บไซต์ของคุณให้มากที่สุด

อ้างอิงจาก https://moz.com/blog/website-page-speed