5 วิธีเพิ่มความเร็วให้เว็บไซต์ (Website Speed Optimization) 

5 วิธีเพิ่มความเร็วให้เว็บไซต์ (Website Speed Optimization) 


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

ซึ่งปกติแล้วเวลาในการโหลดเว็บควรอยู่ที่  2 วินาที คือ ระยะเวลาสูงสุดที่ผู้ใช้จะยอมรับได้สำหรับเว็บ E-Commerce แต่ที่ Google ตั้งเป้าให้โหลดต่ำกว่า 0.5 วินาที โดยรวมแล้วความเร็วเว็บควรจะอยู่ต่ำกว่า 3 วินาที ค่ะ 

ซึ่งการเพิ่มความเร็วจะทำให้การใช้งานเว็บไซต์ดีขึ้น โดยมีจุดมุ่งหมายให้ผู้ใช้งานเว็บไซต์มีความสะดวก ไม่ติดขัด เวลาเข้ามาเว็บไซต์ของตัวคุณเอง โดยวันนี้  D.assemble เลยมี 5 วิธีง่ายๆ ในการเพิ่มความเร็วให้กับเว็บไซต์มาฝากกัน 

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

เครื่องมือตัวแรก คือ PageSpeed Insight ซึ่งสามารถใช้งานได้ฟรีที่ https://developers.google.com/speed/pagespeed/insights/ โดยกรอก URL ของเว็บเราลงไป โปรแกรมก็จะแสดงผลว่าเว็บไซต์ของเราเร็วขนาดไหน และปรับปรุงอย่างไรได้บ้าง 

เครื่องมือตัวที่สอง คือ Lighthouse โดยโปรแกรม Lighthouse เป็นส่วนขยายของ Google Chrome ซึ่งดาวน์โหลดได้จาก Chrome Web Store วิธีใช้แค่เพียงเปิด Developer Tools ขึ้นมา เลือกแท็บ Audit แล้วกด Perform an audit โปรแกรมจะมีการวัดผลและแสดงคำแนะนำต่างๆ ออกมาให้เราแก้ไขต่อไป  

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

ก่อนอื่นควรย้าย (script) ลงด้านล่าง

1. ก่อนอื่นควรย้าย (script) ลงด้านล่าง 

เทคนิคนี้มาจากเมื่อ Browser พบ tag  (script ) นั้น Browser จะต้องโหลดและประมวลผล JavaScript ให้เสร็จก่อน จึงจะทำงานต่อไปได้ แม้เนื้อหาของเว็บโหลดเสร็จแล้วก็ต้องหยุดรอก่อน ทำให้คนเข้าเว็บของเราต้องนั่งจ้องหน้าจอสีขาว ซึ่งธีการเลี่ยงง่ายๆ คือนำ (script) ไปไว้ด้านล่างสุดก่อนปิด (/body เพื่อให้โหลดเนื้อหาของเว็บให้เสร็จเป็นอย่างแรก 

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

 ใช้ HTTP/2 เพิ่มท่อส่งขนาน

2. ใช้ HTTP/2 เพิ่มท่อส่งขนาน 

ปัจจุบัน Browser และ Web server จำนวนมากรองรับ HTTP/2 แล้ว จึงควรปรับเว็บไซต์ของเราให้ใช้ HTTPS และ HTTP/2 ได้ (HTTP/2 ไม่รองรับเว็บไซต์ที่เป็น HTTP ไม่เข้ารหัส ข้อดีของการใช้ HTTP/2 คือ สามารถโหลดข้อมูลคู่ขนานกันได้มากขึ้น สามารถลองดูตัวอย่างได้ที่ https://http2.akamai.com/demo ซึ่งจะเห็นว่า HTTP/2 โหลดได้เร็วกว่า HTTP/1.1 แบบเดิมอย่างเห็นได้ชัด 

สำหรับการใช้ HTTP/2 นั้นต้องปรับ web server ที่อยู่ด้านหน้าสุดเท่านั้น เช่น ถ้าหากแอพของเราเป็น Node.js แล้วมี nginx อยู่ด้านหน้าอีกทีหนึ่ง ให้ปรับที่ nginx เท่านั้น ไม่จำเป็นต้องปรับที่ Node.js โดยใน nginx config ให้ระบุบรรทัด listen ว่า listen 443 ssl http2; แล้ว reload 

และสำหรับ web server อื่นๆ นั้น ขณะนี้ Web server เจ้าแม่ตลาดแทบจะทุกเจ้า ไม่ว่าจะเป็น Apache, IIS, AWS ALB หรือ Google Cloud L7 Load Balancer ก็รองรับกันหมดแล้วค่ะ ซึ่งอาจจะต้องเข้าไปเปิดใช้งาน รวมถึงเซตเว็บให้เป็น HTTPS ก่อนจึงจะใช้งานได้ค่ะ

เลือกขนาดภาพให้เหมาะพร้อมทั้งบีบอัดรูป

3. เลือกขนาดภาพให้เหมาะพร้อมทั้งบีบอัดรูป 

เมื่อต้องใส่ภาพต่างๆ บนหน้าเว็บนั้น คุณควรใช้ไฟล์ภาพที่มีขนาดเหมาะสมกับจุดที่แสดงผล เช่น ถ้าหากจุดที่แสดงผลขนาด 300x200px แต่ภาพนั้นขนาด 1200x800px ก็จะทำให้ browser ต้องโหลดภาพขนาดใหญ่มาโดยไม่จำเป็น ดังนั้น เวลานำรูปเข้ามาใช้ควรจะ Crop หรือ Resize ให้ตรงกับขนาดที่ใช้งานจริงเสมอ 

อีกทางเลือกหนึ่งคือ หาวิธีลดขนาดไฟล์ภาพอัตโนมัติ คือ ควรลงปลั๊กอินที่จะทำหน้าที่ลดขนาดและบีบอีดไฟล์ให้อัตโนมัติเพื่อให้เว็บโหลดได้เร็วขึ้น เช่น TinyPNG หรือ Smush It ที่สามารถลดขนาดและบีบอัดไฟล์ภาพต้นฉบับลงได้ นอกจากนี้ เรายังสามารถบีบอัดภาพให้เล็กลงได้อีกโดยใช้โปรแกรม ImageOptim บน Mac, FileOptimizer บน Win ค่ะ 

ใช้ CDN 

4. ใช้ CDN

CDN ย่อมาจาก Content Delivery Network นั่นคือ การโหลดข้อมูล เช่น ภาพ, javascript, stylesheets จากเซิร์ฟเวอร์ที่อยู่ใกล้ลูกค้าของคุณมากที่สุด ทำให้เขาสามารถโหลดเว็บได้เร็วขึ้น เช่น เว็บไซต์ของคุณอยู่ในเซิร์ฟเวอร์ที่ประเทศไทย แต่ลูกค้ากำลังดูอยู่ที่ต่างประเทศ เช่น อเมริกา ระบบนี้ก็จะดึงข้อมูลจากเซิร์ฟเวอร์ที่อยู่ในอเมริกา (ใกล้กับจุดที่ลูกค้าอยู่) มาใช้เพื่อให้เว็บโหลดได้รวดเร็ว CDN สามารถใช้ได้กับทั้งการโฮสต์แบบ dedicated hosting และแบบอื่นๆ ถ้าคุณอยากใช้บริการสามารถติดต่อกับทางทีมซัพพอร์ตของผู้ให้บริการโฮสติ้งของคุณได้ แล้วนำมาลงในปลั๊กอิน W3TC

จัดการเรื่อง Lazy Loading Central Libraries, Compression ให้ลงตัว 

5. จัดการเรื่อง Lazy Loading Central Libraries, Compression ให้ลงตัว   

แพ็คเก็จ Speed Booster Pack มาพร้อมกับการจัดการกับ lazy loading, Google libraries และยังสามารถบบอัด javascript ได้ด้วย Lazy Loading คือ การโหลดเฉพาะบางส่วนของเพจ (ช่วงที่มีคนกำลังดูเท่านั้น) ไม่โหลดทั้งหน้าหรือไฟล์ที่ไม่จำเป็น เพื่อให้เว็บของคุณโหลดได้เร็วขึ้น ส่วน Google Libraries คุณสามารถทำให้เว็บไซต์ของคุณเร็วขึ้นได้เพราะจะใช้หลักการก็อปปี้ปลั๊กอินและธีมจากเว็บอื่น ซึ่งส่วนใหญ่ใช้ libraries เดียวกัน อย่างไรก็ตาม แน่นอนว่าคุณสามารถใช้ปลั๊กอินอื่นๆ ได้ เช่น  BJ Lazy Load  หรือ  Use Google Libraries แต่ทางเราแนะนำว่าควรใช้เฉพาะตอนที่ Speed ​​Booster Pack ไม่ทำงานเท่านั้น 

เมื่อคุณปรับปรุงเว็บแล้ว อย่าลืมวัดผลอีกครั้งด้วย Google PageSpeed Insight หรือ Lighthouse เพื่อยืนยันได้ว่า สิ่งที่ทำไปทั้งหมดได้ผลจริงๆ ค่ะ