จุดหลักสำคัญที่ฉุดคะแนน WordPress และความเร็วในการใช้งานจริงก็คือรูปภาพนี่ล่ะครับ ที่ผ่านมามีคนแนะนำวิธีการ Optimize Image มากมาย แต่วันนี้ผมขอแนะนำของดีและฟรีอย่าง Flying Images by WP Speed Matters
จุดเด่นของ Flying Images by WP Speed Matters
สิ่งที่ทำให้ Image Optimizer ตัวนี้น่าสนใจกว่าหลายๆ ตัวก็คือ
- แถมฟรี CDN ไม่จำกัด ด้วยการใช้บริการเบื้องหลังจาก Statically ซึ่งควบรวมเอา CDN หลายตัวเข้าด้วยกัน ได้แก่ Cloudflare + BunnyCDN + Fastly + CDN77 โดยจะเลือกให้ว่าตัวไหนที่เหมาะสมและเร็วที่สุด
- บีบอัดไฟล์รูปให้มีขนาดเล็กลงเพื่อให้โหลดเร็วขึ้น และจะแปลงเป็นไฟล์ WebP ให้อัตโนมัติสำหรับ Browser ที่รองรับ เพื่อเพิ่มความเร็วขึ้นไปอีกระดับ
- มีระบบ Adaptive Image ที่จะย่อขนาดรูปให้เหมาะกับหน้าจอที่มีขนาดแตกต่างกัน โดยจะเป็นการย่อขนาดไฟล์จริงๆ ไม่ใช่ย่อด้วย html หรือ css ทำให้เร็วและคะแนนดีกว่า
- รองรับการทำ Lazy Load ที่จะโหลดรูปต่อเมื่อเราเลื่อนหน้าจอไปยังส่วนที่ต้องแสดงผล เพื่อประสบการณ์ที่ดีกว่า โดยเลือกได้ทั้งแบบ Native และ JavaScript
- ไม่มีการแก้ไขไฟล์รูปต้นฉบับ เพราะมันจะทำการคัดลอกแล้วไปแก้ไขบน CDN
สิ่งที่ทำให้น่าสนใจกว่า Image Optimizer ตัวอื่น
Image Optimizer สำหรับ WordPress มีอยู่หลายตัว และบางตัวผมก็เคยเขียนรีวิวไว้เมื่อนานมาแล้ว และเพื่อให้เห็นภาพมากขึ้นผมขอโฟกัสที่ตัวเด่นๆ อย่าง ShortPixel และ Imagify ละกันครับ
ทั้ง ShortPixel และ Imagify เป็นของที่ไม่ฟรีแต่ก็มีให้ลองใช้งานได้นิดๆ หน่อยๆ ซึ่งถ้าเป็นเว็บที่ใช้งานจริงจังก็ต้องบอกว่าไม่เพียงพอ โดยเฉพาะเว็บที่มีการอัพเดทตลอดเวลา โดยทั้งคู่จะทำการบีบอัดไฟล์ให้มีขนาดเล็กลงและจะเอาไฟล์ที่ย่อแล้วไปแทนที่ของเดิม ส่วนไฟล์ต้นฉบับก็สามารถเลือกได้ว่าต้องการ Backup ไว้หรือไม่ ซึ่งประสบการณ์ส่วนตัวแล้วแนะนำว่าควรตั้งค่าให้มันทำ Backup ไว้ด้วยจะดีที่สุดครับ เพราะบางครั้งถ้ามันบีบเยอะไปแล้วคุณภาพไฟล์แย่ หรือต้องการ Create WebP ก็ต้องใช้ไฟล์ต้นฉบับด้วย
สมัคร ShortPixel ผ่านลิ้งนี้จะได้เพิ่มเดือนละ 100 เครดิต http://link.bacidea.com/T7opm
แม้ว่าทั้งคู่จะบีบไฟล์ให้เล็กลงกว่าเดิมได้เยอะพอตัว แต่ก็เป็นเพียงการบีบอัดและจัดเก็บไว้บน Server ของเราเท่านั้น ซึ่งเพียงพอสำหรับการใช้งานทั่วไปแต่ดีไม่พอสำหรับการรีดคะแนนในแง่ Performance ซึ่งถ้าอยากให้ดีกว่านั้นก็ต้องเพิ่มระบบ Adaptive Image และ CDN เข้าไปเพื่อให้มีการกระจายข้อมูลให้อยู่ใกล้เครื่องผู้ชมให้มากที่สุด บวกกับทำการเลือกแสดงผลภาพด้วยขนาดที่เหมาะสมกับหน้าจอแต่ละแบบ
ซึ่งถ้าอยากเพิ่มคุณสมบัติที่ว่าก็ต้องใช้ของอย่าง Optimole หรือ ShortPixel Adaptive Images ที่ราคาไม่ถูกเลย โดย Optimole จะคิดเงินตามจำนวนครั้งการเข้าเว็บต่อเดือน เริ่มต้นที่เดือนละ 25,000 visits ราคา 22.9 USD หรือราวๆ เดือนละ 720 บาท ส่วน ShortPixel Adaptive Images จะใช้เครดิตตัวเดียวกับ ShortPixel Image Optimizer โดยแยกนับรูปแต่ละขนาด ซึ่งผมเคยเปิดใช้ไม่ถึงสัปดาห์กับเว็บ BACIDEA ก็หมดไปราวๆ 20,000 เครดิต ถ้ารันเต็มทั้งเดือนก็คูณกันเข้าไปได้ …มีจุก
ซึ่งสิ่งที่ร่ายๆ มาเนี่ยไม่ต้องเสียเงินสักบาทถ้าใช้ Flying Images by WP Speed Matters และการตั้งค่าก็ทำได้ง่ายแบบที่มือใหม่ก็พอจะคลำๆ เองได้
เว็บแบบไหนที่เหมาะกับ Flying Images by WP Speed Matters
ถ้าถามว่าเว็บไหนที่เหมาะกับ Plug in ตัวนี้ ก็คงต้องบอกว่าทุกเว็บที่ไม่อยากจ่ายเงินเพิ่มในการ Optimize Image แต่อยากให้เว็บเร็วขึ้นในการใช้งานจริงแบบ Real Life ที่สัมผัสความต่างได้ และเร็วขึ้นในแง่คะแนน Benchmark ด้วย ซึ่งพวกคะแนนนี้มีผลต่อ SEO นั่นเอง
ผมได้ลองเอา Flying Images by WP Speed Matters มาใช้กับเว็บ eCommerce ที่มี 3 ภาษา รวมถึงเว็บข่าวสารและรีวิว ก็พบว่าคะแนนดีขึ้นมาก ถ้ามองในแง่ของพื้นที่ Server ก็ต้องบอกว่ารูปแบบนี้ประหยัดกว่าการใช้ Image Optimizer ที่บีบไฟล์แล้วเก็บลงบน Server เพราะแบบนั้นเป็นการเพิ่มการใช้งานพื้นที่ เนื่องด้วยต้องเก็บไฟล์ต้นฉบับไว้เป็น Backup หนึ่งชุดแล้วยังต้องเก็บไฟล์ที่บีบแล้วอีกชุดด้วย ดังนั้นการใช้ Plug in ตัวนี้จึงช่วยประหยัดต้นทุนได้ทั้งแง่ของค่า Server, Bandwidth และการ Optimize ด้วย
