WordPress Performance #1: อัพโหลดรูปภาพเรื่องกล้วยๆ แค่ต้องรู้!

by sme2web admin 15 December 2014   WordPress Performance

สวัสดีครับ วันนี้ผมจะมาแนะนำการเพิ่มประสิทธิภาพในการทำเว็บไซต์ด้วย WordPress เป็นเรื่องง่ายๆ ที่มั่นใจได้เลยว่า ทุกคนนึกไม่ถึงกัน คือ เรื่องของการอัพโหลดไฟล์ภาพขึ้นบนเว็บไซต์ที่พัฒนาด้วย WordPress ผมขอเสนอไอเดียในการทำเว็บ ทำบล๊อก ทำรีวิว หรือจะขายสินค้าด้วย WordPress หรือเว็บต่างๆ ที่ทำด้วย WordPress และมีการอัพโหลดรูปภาพขึ้นไปในบน Post / Page / Custom Post Type หรือ Media ล้วนแล้วแต่มีแนวคิดที่ไม่ต่างกัน และเกี่ยวข้องกับสิ่งที่ผมกำลังอธิบายต่อไปนี้ทั้งหมด

แนวคิดของ WordPress

เมื่อคุณอัพโหลดรูปภาพเข้าไป 1 รูปบนเว็บไซต์ WordPress จะทำการย่อขนาดรูปภาพเป็นจำนวน 3 ขนาดด้วยกัน คือ ภาพ Thumbnail , Medium , Large และภาพขนาดปกติ ซึ่งตามหลักความเป็นจริงนั้นเราไม่ได้ใช้ทุกภาพของ WordPress เราใช้เพียงแค่บางขนาดรูปภาพเท่านั้น บางคนกำลังพูดว่า ฉันใช้ทุกขนาดที่เธอว่ามา  เอาหละครับทีนี้ผมขออนุญาติ ยกตัวอย่าง ให้เห็นภาพมากขึ้น ในมุมที่หลายๆคนนึกไม่ถึง

อัพโหลดรูป wordpress

ภาพแสดงขนาดเมื่อเราอัพโหลดไฟล์ภาพไปที่ WordPress

จากตัวอย่างด้านบนเป็น Case ปกติ ผมถือว่า ยังไม่ร้ายแรงเท่าไหร่ นั่นคือเป็นการ Generate รูปภาพรอเอาไว้ ถึง 3 ขนาดด้วยกัน ภาพที่อัพโหลด คือภาพใหญ่บนสุด ขนาดใหญ่ 1100 x 700 px ขนาด 800 kb (สมมุติมาได้ใหญ่มาก ซึ่งจริงๆแล้วพ่อแม่ พี่น้อง ทั่วไป ก็มักจะยัดภาพลงไปโดยที่ไม่ได้ ย่อขนาดกันก่อนนำขึ้นเว็บ ทำให้ภาพเริ่มต้น มีขนาดใหญ่เกินความจำเป็น ขนาดที่ โอเค จะอยู่ที่ 100-300 kb สำหรับภาพที่เราอัพโหลดเข้าไปครับ) ส่งผลให้ภาพที่ WP ย่อภาพลงมา ขนาดของรูปก็ยังใหญ่อยู่ดี

ยังไม่จบแค่นั้น เรามาดูกันต่อครับ

ถ้าคุณขายสินค้า และมีการใช้งานปลั๊กอิน WooCommerce เจ้าปลั๊กอินตัวนี้ จะ Generate ภาพใช้ส่วนตัวของปลั๊กอินเองอีก 3 รูปภาพ รวมกับของเดิมที่ WordPress Generate เอาไว้ อีก 3 ภาพ รวมเป็น 6 รูปภาพ ที่เกิดขึ้นในระบบของ WordPress แล้ว

รับทำเว็บไซต์ wordpress

ยังไม่พอ มาดูเรื่องจริงกันต่อครับ

ผมเชื่อว่าทุกคนต้องใช้ที่ทำเว็บไซต์ด้วย WordPress จะต้องใช้งาน Theme ไม่ว่าจะ Theme ฟรี หรือ Theme ที่ซื้อมา ไม่ว่าเจ้าดัง หรือไม่ดัง ก็จะมีรูปแบบที่ไม่ต่างกัน นั่นคือการใช้งานฟังก์ชั่นเพิ่มการ Resize รูปภาพ เพื่อให้เข้ากับ Theme ที่เจ้าของแต่ละเจ้าสร้างพัฒนาขึ้นมา ซึ่งจะใช้ชื่อฟังก์ชั่น ว่า

add_image size(‘ชื่อย่อ’,ความยาว,ความสูง,ครอบตัด);

ถ้าคุณเห็นแค่ไม่กี่ฟังก์ชั่นก็ไม่เท่าไหร่ แต่ถ้าเจอเป็นตับแบบนี้ละก็ สั่นนิดๆ แล้วหละครับ เพราะทุกรูปที่ใช้งานฟังก์ชั่นนี้ ไม่ว่าคุณจะอัพโหลดรูปที่ใด หน้าไหน สินค้า หรือภาพทั่วไป ระบบ WordPress เค้าก็จะ Resize รูปภาพให้ตามโค๊ดที่สั่งเข้ามาแบบนี้ตลอด ซึ่งจากตัวอย่าง จะเพิ่มขนาดรูปภาพมากอีก 11 รูป นำมารวมกับ WooCommerce (กรณีใช้ปลั๊กอิน WooCommerce) และ WordPress อีก 6 รูปก่อนหน้า  จะมีภาพทั้งหมด 17 รูปภาพ  ใช้เนื้อที่อย่างต่ำ 2 mb ต่อ 1 รูปภาพที่ใช้ในการอัพโหลด

15-12-2557 17-56-31

ถึงตรงนี้ตามกันทันไม๊ครับ  แล้วเราจะทำอย่างไรหละ ไปด่าเจ้าของปลั๊กอิน ไปด่าเจ้าของเทมเพลตดีไม๊ ทำไมถึงทำแบบนี้ บอกได้คำเดียวครับ  เสียเวลา!!   เพราะเค้าพยายามทุกอย่างให้ง่าย ให้สวยงาม ตามที่เค้าตั้งใจออกแบบเอาไว้ แต่เราไม่ได้ใช้ทุกรูปแน่ๆ ผมการันตีเลย นั่งอ่านกันถึงตรงนี้บอกได้เลย รีบกลับไปดูเว็บตัวเองได้เลยครับ

Case #1: ผมได้ทำการ Import สินค้า 18,000 ชิ้น ทุกๆ ชิ้น Generate ภาพแบบที่บอกมา ทั้งหมด 17 รูป

นั่นหมายความว่าผมมี 18,000 x 17 = 306,000 รูปที่เกิดขึ้นบนเว็บไซต์ผม

บอกตามตรงครับ น้ำตาไหล  ทำให้สูญเสียพื้นที่บน Server ไปหลาย Gigabyte เลยครับ T T

wordpress-image-management_04

บอกกับตัวเองว่า ฉิบหายแล้ว ทำไงหละทีนี้ มาดูสิ่งที่ผมทำกันครับ ว่าทำอย่างไร แก้ไขอย่างไร

 

wordpress-image-management_08

วิธีแก้ไขเบื้อต้น

สิ่งแรกที่เข้ามาถึง ผมจะเข้าไปที่ Setting-> Media และทำการตั้งค่าให้ระบบไม่ทำการสร้างรูปภาพในขนาดที่ไม่ต้องการ โดยใส่ค่าเป็น 0 ทั้ง 2 ช่อง

*** ทั้งนี้ จะปิดการสร้างภาพขนาดไหน ก็อยู่ที่ความเหมาะสม และการใช้งานของแต่ละคน ซึ่ง ของผมจะปิดในส่วนของ Medium size เพราะ Thumbnail จะนำไปใช้เป็น Featured Image และ ขนาด Large Size ผมจะทำการตั้งให้ความกว้างเท่ากับเนื้อหาที่หน้าเว็บไซต์ และปล่อยอีกช่องเป็น 0 เพื่อให้ Freesize

wordpress-media-setting

เมื่อตั้งค่าเรียบร้อยแล้ว ผมจึงทำการทดสอบ โดยการ อัพโหลดภาพใหญ่ๆ เข้าไป 1 ภาพ ผลที่ได้ คือ ระบบ

wordpress-media-setting2

 

การปิดไม่ให้ Theme Resize โดยไมจำเป็น

ถ้าต้องการปิด Function ใน Theme เพียงแค่ใส่ // ไว้หน้าฟังก์ชั่น จะได้แบบนี้ครับ

//add_image size(‘ชื่อย่อ’,ความยาว,ความสูง,ครอบตัด); 

เพื่อบอกให้ WordPress ไม่ต้อง Resize รูปภาพในขนาดนี้

 

 

ปลั๊กอิน ช่วยดูว่าเว็บเรามีการ Resize ทั้งหมดกี่ภาพ

ถ้ายังยากไป ขี้เกียจเข้าไปปิดฟังก์ชั่น ผมขออนุญาติแนะนำปลั๊กอินที่ชื่อว่า Image sizes in admin dashboard! เป็นปลั๊กอินที่เอาไว้จัดการดูว่า ในระบบจะมีการ Generate ภาพขนาดเท่าไหร่บ้าง เราสามารถเปิด ปิดการใช้งานได้ครับ

15-12-2557 19-16-59

Download

 

หวังว่าตอนนี้จะเป็นประโยชน์ต่อผู้อ่านไม่มากก็น้อย ครับ

  Comments

Written by