[SEO] โหลด web ไวแสงด้วย webp file

ทำไมต้องเป็น WebP ?

หากคุณต้องการทำ SEO หนึ่งในจุดสำคัญคือความเร็วในการแสดงผล content
แล้วเราค้นพบว่า website ของเรายังช้าอยู่เพราะมีรูป JPEG size มโหฬาร อยู่ใน web ของเรา

ทางแรกเราเราคือ ตรวจสอบ size รูปให้เหมาะสม เช่น logo อันน้อยของเรานั้น

มี Size ที่ต้องการใช้อยู่ที่ 32x32 px เท่านั้น แต่ Load รูปถึง 640x640px ซึ่ง ขนาดไฟล์รูปนั้นอยู่ที่ 61,877 bytes

จึงทำการย่อรูปให้เหมาะสมกับที่ใช้เป็น 32x32px ขนาดไฟล์เหลือเพียง 3,127 bytes

แต่นั้นยังไม่พอ !! อยากได้มากกว่านี้

เริ่มจากเข้าไปที่ https://developers.google.com/speed และเราก็ได้พบกัน~

ผลลัพธ์ค่อนข้างน่าสนใจ

เอาหละ WebP คือคำตอบสุดท้าย !! ไปก๊านนนนน ~~

Installation — เปิด Terminal ของคุณขึ้นมาเลย

Window
https://developers.google.com/speed/webp/download

MacOS
brew install webp

Check — มาเทสกันหน่อยว่าใช้ได้ไหม

cwebp -version

Run converter (Single file)

cwebp ./image.png -o ./image.webp

เหลือเพียง 770 bytes เท่านั้น
แต่ทำที่ละไฟล์น่าจะตายยยยยยยย~ จัดไปทำ script แปลงทั้ง Folder ไปเลย !!

Run converter (Multiple files)

Result

จาก 62KB เป็น 14KB

จาก 55KB เป็น 5KB

References
https://developers.google.com/speed/webp