สัปดาห์ที่ผ่านมาผมพยายามปรับปรุง imooh.com ให้เร็วขึ้น จะได้ช่วยเพื่อนๆ (ถึงจะน้อยนิดแต่เราก็ใส่ใจนะจ๊ะ) ที่สนใจเข้ามาอ่านบทความไม่ต้องเสียเวลารอเว็บโหลดนานๆ แล้วเริ่มจากตรงไหนดีล่ะ เข้าไปที่ GoogleSpeed Insight ก่อนเลยครับ จะได้รู้ว่าเราต้องปรับปรุงตรงไหนบ้าง เพื่อจะได้ส่งมอบเนื้อหาได้เร็วขึ้น ^^
ผลจากการรัน GoogleSpeed Insight จะขึ้นอยู่กับแต่ละเว็บไซต์นะครับ ว่าเหลืออะไรที่เราสามารถปรับปรุงได้บ้าง อย่าง imooh.com ผมจะมีการทำ caching, minify css & js ไว้แล้ว ที่เหลือที่ต้องปรับปรุงก็จะมีเรื่องของ รูปภาพ กับ CDN ครับ
คำแนะนำเกี่ยวกับรูปภาพ
- เลือกใช้ขนาดของรูปให้เหมาะสม (Properly size images) เช่น แสดงรูป 300×300 แต่ดันไปใช้รูปขนาดเต็ม 1024×1024 ก็ไม่ไหว ต้องโหลดนานแถมเปลืองเน็ตอีกต่างหาก
- ใช้ชนิดของรูปที่ทันสมัยหน่อย (Serve images in next-gen format) และเพราะมีการบีบอัดข้อมูล (compression) ที่ดีกว่า ทำให้รูปมีขนาดเล็กลงช่วยให้โหลดได้เร็วขึ้น
- โหลดรูปภาพเมื่อจำเป็นหรือเมื่อผู้อ่านเลื่อนมาถึงตำแหน่งของรูปก่อน (Defer offscreen images) หรือที่เรียกกันติดปากว่า lazy-loading นั่นแหละครับ
ต่อมาก็เรื่องของ CDN หรือ Content Delivery Network ถ้าพูดให้เข้าใจง่ายๆ ก็เหมือนกับข้อมูลบนหน้าเว็บเราไม่ว่าจะเป็นรูปภาพ javascript css เปรียบเหมือนน้ำเปล่าที่เราต้องการเทลงในแก้ว (หน้าเว็บของเรา) ถ้าเราเทน้ำจากหลายๆ ขวดพร้อมกัน น้ำก็จะเต็มแก้วเร็วขึ้นนั่นแหละครับ
แล้วมันเกี่ยวอะไรกับ Jetpack กันล่ะ จริงๆ แล้ว Jetpack เป็น plugin ของ WordPress ที่ช่วยในเรื่องของความปลอดภัย (Security) และประสิทธิภาพ (Performance) ของ WordPress เองโดยเฉพาะ มีฟีเจอร์เยอะมาก แต่วันนี้ขอยกแค่เรื่องของการจัดการรูปภาพด้วย CDN ผ่าน Jetpack ไปก่อน
ซึ่งตอนแรกก็ไม่คิดว่ามันจะง่ายขนาดนี้นะ เราแค่ติดตั้ง Jetpack เหมือนที่เราติดตั้ง Plugin อื่นของ WordPress นั่นแหละครับ แล้วก็ลงทะเบียนกับเว็บ WordPress.com
พอเปิดใช้งาน Jetpack plugin ก็เข้าไปตั้งค่าเกี่ยวกับ Performance
หลังจากตั้งค่าเสร็จสำหรับใครที่มี Caching ก็อย่าลืมลบ Cache ก่อนนะครับ แล้วก็ลองเข้าไปเช็คดูหน่อยว่าลิงค์ของรูปภาพหรือ js กับ css บนเว็บเราเปลี่ยนโดเมนไปเป็น wp.com หรือเปล่า
เท่านี้ก็เรียบร้อยครับ กับการใช้งาน CDN สำหรับรูปภาพ ไฟล์ js และ css ด้วย Jetpack ไม่ต้องเสียเวลากับการสร้าง CDN เอง แถมติดตั้งง่ายๆ แป๊บเดียวเสร็จ ^^