ปรับแต่งเว็บไซต์ยังไงให้โหลดเร็ว

16 February 2020 / on Project / by paipure

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

ความเร็วการโหลดเว็บไซต์นั้นส่งผลยังไง

  • ถ้าเว็บไซต์โหลดเร็ว Google จะจัดอันดับให้อยู่หน้าแรกๆ
  • ถ้าเว็บโหลดช้า ก็ส่งผลจะทำให้ Bouce rate สูง (Bouce rate คือเปอร์เซ็นต์ของคนที่เข้ามาชมเว็บ แล้วปิดหน้าไป โดยไม่ได้คลิกไปหน้าไหนต่อเลย)
  • ถ้าเว็บของคุณใช้เวลาโหลด 5 วิ Bouce rate อาจจะเพิ่มสูงขึ้นถึง 90% และ ถ้าใช้เวลา 10 วิ Bouce rate อาจจะเพิ่มสูงขึ้นถึง 123%!
  • เมื่อเว็บไซต์โหลดช้า คนก็จะเข้าเว็บน้อยลง ผลก็คือให้ทำให้สินค้า หรือธุรกิจของคุณขายได้น้อยลงตามมา

Google ระบุว่าเว็บไซต์ที่ดีควรโหลดเร็วกว่า 3 วินาที

PageSpeed insight

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

สาเหตุหลักๆที่ทำให้เว็บโหลดช้า

  • โฮสต์
  • รูปภาพ
  • CSS และ JS
  • Third party Code

สรุปวิธีปรับเว็บไซต์ให้โหลดเร็ว

1. โฮสต์

  • แต่ละโฮสต์จะมีความเร็วในการส่งข้อมูลที่เร็ว/ช้าแตกต่างกัน
  • แน่นอนว่า Private hosting และ Cloud hosting จะเร็วกว่า Share hosting
  • แต่ถ้าคุณไม่อยากจ่ายตังค์ค่าโฮสต์เพิ่ม แนะนำให้ลง Cloudflare เว็บก็จะโหลดเร็วขึ้น เพราะมันจะเก็บ cache ของเว็บไว้ ที่สำคัญคือฟรี แถมได้ SSL ฟรีๆด้วย วิธีการใช้งาน cloudflare
  • หรือถ้าคุณไม่ใช้ cloudflare ก็ลง plugin cache เช่น W3 Total Cache ก็ได้

2. รูปภาพ

  • ลด quality และขนาดของภาพ โดยใช้ tool เช่น Tinypng หรือถ้าใช้ wordpress ก็แนะนำ Tinypng plugin(ฟรี 500 ภาพต่อเดือน), Smush(ทดลองฟรี premium 4 วัน), resize image after upload (ฟรี)
  • ภาพไม่ควรจะใหญ่เกินกว่า 2000px และขนาดไฟล์ภาพไม่ควรจะใหญ่เกินไป เช่น ถ้าเห็นว่าภาพไหนไฟล์ใหญ่กว่า 500KB ให้ลองเช็คดูว่าไฟล์ผิดนามสกุลมั้ย (png/jpg/svg) บางทีแค่แปลงสกุลไฟล์ก็ทำให้ไฟล์ขนาดลดลงได้อย่างไม่น่าเชื่อ
  • ไม่แนะนำให้ใช้ไฟล์ gif บนเว็บเพราะไฟล์มันใหญ่ แต่ควรจะแปลงไฟล์เป็น mp4 มากกว่า แต่ถ้าอยากใช้ไฟล์ gif จริงๆก็ลองลดขนาดไฟล์โดยใช้เว็บนี้
  • lazyload เป็นสิ่งที่ต้องทำ โดย lazyload คือการที่เรา scroll ลงมาเนื้อหาด้านล่าง แล้วภาพค่อยๆโหลด ซึ่งข้อดีคือเว็บเราจะไม่ต้องโหลดภาพทั้งหมดทีเดียว โดยเฉพาะเว็บที่ภาพเยอะๆ สิ่งนี้ช่วยได้มาก พวกเราใช้ตัวนี้ Smush (ฟรี)
  • Google แนะนำให้ใช้ webp แต่โดยส่วนตัวยังคิดว่าไม่ควร เพราะ safari ยังไม่รองรับ (Feb 2020) ซึ่งถ้าทำก็จะต้องทำ fall back คิดว่ายุ่งยากนะ
  • ถ้าคุณมีความรู้เรื่อง html และมีเวลาในการปรับปรุงเว็บ ก็สามารถกำหนดให้โชว์ภาพที่แตกต่างกันในแต่ละหน้าจอ โดยใช้ <picture> แทน <img> โดยกำหนดให้ภาพขนาดใหญ่ โชว์เฉพาะบน desktop และภาพขนาดเล็กโชว์เฉพาะ mobile ลองอ่านวิธีดูจากลิงก์นี้

3. CSS และ JS

  • ถ้าเว็บของคุณเป็นเว็บไม่ใหญ่มาก แนะนำให้รวมไฟล์ CSS หรือ JS ทุกไฟล์ ให้อยู่ในไฟล์เดียว ( css แยกกับ js นะ) เพราะการเรียกไฟล์แต่ละครั้งใช้เวลาการโหลด (แต่ต้องระวังการรวมไฟล์ไม่ให้โค้ดมันตีกันด้วย)
  • Minimise ไฟล์ การ minimise ก็เป็นเหมือนการใส่ zip ที่ทำให้โหลดได้เร็วขึ้น
  • พยายามอย่าใช้ plugin ที่จะมีการโหลดไฟล์ css, js เยอะๆ แม้กระทั่งว่าเป็นการโหลดไฟล์จาก cdn ก็ไม่ควร
  • ปรับใช้ framework ให้เหมาะสม เช่น ถ้าหากใช้ bootstrap ก็อาจจะเลือกเฉพาะส่วนที่เราใช้จริงๆ เช่น grid แต่ส่วนไหนที่เราไม่ได้ใช้ก็ควรตัดออก เช่น ของ bootstrap สามารถทำได้แบบนี้
  • จะมีเครื่องมือของ chrome ตัวนึงชื่อ coverage ที่จะทำให้รู้ว่าเราใช้โค้ดของ js หรือ css ที่โหลดมาบนหน้าเว็บเยอะแค่ไหน อันไหนไม่จำเป็นก็ตัดออก
  • หรือถ้าไฟล์ไหนจำเป็น แต่ไม่จำเป็นต้องโหลดก่อน ก็ให้ใส่ไว้ใน footer แล้วกำหนดให้เป็น defer หรือ async Browser จะโหลดไฟล์นั้นทีหลัง ทำให้คะแนนเราดีขึ้น

4. Third party Code

  • เป็นสาเหตุสำคัญของความเร็วเว็บไซต์ที่หลายคนมองข้าม แต่มีการศึกษามาว่าเวลา 57% ของ การโหลด JS มาจาก Third party Code สรุปคือไม่ว่าเราจะ optimize เว็บของเรามากแค่ไหน เจอ Third party Code ทีเดียวคะแนนตก
  • เว็บไซต์นี้จะแสดงเวลาการโหลดของแต่ละ Third party แบ่งตามหมวดหมู่ ตัวอย่างเช่น wix ใช้เวลา 5 วิในการโหลด หรือ youtube ใช้เวลา 1.6 วิในการโหลด ซึ่งนับว่าสูงมาก แล้วยิ่งหน้าเว็บเราใช้หลายตัว ยิ่งโหลดนานไปกันใหญ่
  • ดังนั้นการใช้ lazyload จึงจำเป็นมาก เพราะจะทำให้เว็บไม่ต้องโหลดในทีเดียว แต่ปัญหาของ lazyload plugin คือจะใช้ได้กับ ภาพหรือวิดีโอเท่านั้น แต่ Third party Code จะไม่รองรับ
  • เคยลงปลักอิน Chat ของ Facebook แล้วทำให้คะแนนลดจาก 99 เหลือ 60 หายไป 40 คะแนน!

ทดสอบเว็บไซต์อื่นๆ

เรามาดูกันว่าแต่ละเว็บไซต์ที่เรารู้จักกัน มีคะแนน PageSpeed insight เท่าไหร่ อันนี้จะแสดงเฉพาะ mobile เนื่องจาก desktop ส่วนใหญ่จะไม่มีปัญหา

Apple

Microsoft

Testa

Pantip

The cloud

The momentum

Sanook

Youtube

Google business

Google

สรุป

ความเร็วเว็บไซต์เป็นสิ่งสำคัญ เพราะหากเว็บไซต์ช้าคนก็จะปิดเว็บก่อนที่เว็บจะโหลดเสร็จเสียอีก Google มีเครื่องมือที่จะทดสอบความเร็วเว็บคือ PageSpeed insight โดยเราสามารถปรับแต่งเว็บไซต์ให้เร็วขึ้นได้โดยการปรับ โฮสต์, รูปภาพ, JS, CSS และ Third party Code

แต่เมื่อทดสอบพบว่าหลายเว็บเองก็ไม่ได้มีคะแนนที่สูงมาก ขนาดเว็บ Youtube และ Google Business คะแนนก็ยังประมาณ 60 ดังนั้นพอจะสรุปได้ว่าเราเลยอาจจะไม่จำเป็นซีเรียสกับคะแนนขนาดนั้น แค่ optimize ให้ดีที่สุดเท่าที่ทำได้ก็เพียงพอแล้ว อาจจะไม่จำเป็นต้องรื้อเขียนโค้ดใหม่ ส่วนตัวคิดว่าคะแนน mobile และ desktop เกิน 50 ก็เพียงพอแล้ว

paipure

Writer

เพียว,ไผ่เพียว,ไผ่, เพิร์ล, ปีย่า, พอล, ปิยวุฒิ เรียกอะไรก็ได้ตามสะดวกครับ