$type=grid$c=3$m=0$rm=0$cate=0$sn=0$tbg=rainbow$show=home

วิธีทำให้เว็บโหลดเร็วขึ้นด้วยการลดขนาดไฟล์ภาพสำหรับ Wordpress



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

ปัญหาแรกที่หลายคนเจอกันก็คือค่า config ดั้งเดิมมักจำกัดให้อัพโหลดไฟล์รูปขนาดไม่เกิน 2 MB ซึ่งหลายครั้งมันก็ไม่สะดวก ดังนั้นสิ่งที่ผมทำก็คือแก้ค่า config ส่วนนี้... ถ้าทำไม่เป็นลองติดต่อทางโฮสที่ใช้บริการดูครับ

แต่หลังจากที่แก้ค่าอัพโหลดให้เกิน 2 MB สิ่งที่ตามมาก็คือไฟล์ที่ใหญ่เกินไป และสิ่งเบื้องต้นที่ทำได้ก็คือการ resize ขนาดความกว้างยาวของรูป ซึ่งช่วยได้ดีนักล่ะ แม้ว่าที่ถูกที่ควรคือการ resize ก่อนทำการอัพโหลด แต่ก็อย่างที่บอกล่ะครับบางทีมันก็ไม่สะดวก ดังนั้นวิธีง่ายๆ ที่ผมแนะนำก็คือติดตั้ง plugin Imsanity

ตัวนี้เกิดมาเพื่อ resize ภาพโดยเฉพาะและใช้ง่ายมาก ก็แค่ตั้งขนาดภาพใหญ่สุดที่เราต้องการแล้วเราก็ใช้งานเหมือนเดิมทุกอย่าง ที่เหลือ Imsanity จัดการให้เองครับ



จะเห็นว่ามันมีตัวเลือก Convert PNG To JPG เพราะบ่อยครั้งที่ไฟล์ png ก็มีขนาดไฟล์ใหญ่จนน่าตกใจ แต่พอแปลงเป็น jpg ก็ลงลงเหลือไม่กี่ KB แต่ถ้าเป็นไปได้ก็ควรแปลงไฟล์ก่อนอัพโหลดอีกนั่นแหละ จะได้ไม่เปลืองแรงเซิฟเวอร์

หลังจากที่รู้จักตัวช่วย resize แล้วต่อมาก็เป็นการ optimize ด้วยการบีบอัดลดขนาดไฟล์ ซึ่งผมหมายถึงรูปยังมีขนาดกว้างยาวเท่าเดิม แต่ใช้พื้นที่น้อยลงโดยที่คุณภาพใกล้เคียงของเดิม ซึ่งตัวที่ผมเคยใช้และชอบก็คือ EWWW Image Optimizer เพราะมันฟรีและลดขนาดได้จริง



วิธีใช้ก็ตั้งค่า setting ให้เรียบร้อยตามชอบ ซึ่งผมแนะนำว่าไม่ควรให้มัน optimize PNG เพราะจะใช้เวลานานมาก และข้อเสียของ EWWW Image Optimizer ก็คือมันจะทำการ optimize ตอนที่เราอัพโหลดรูปทันที ทำให้ใช้เวลาประมวลผลนานกว่าปรกติก่อนที่จะกด insert รูปลงบทความได้ และในกรณีที่มีรูปเก่าๆ ที่ยังไม่ได้ลดขนาดก็มีตัว Bulk optimizer ไว้จัดการลดขนาดรูปแบบทั้งเว็บเลย

อีกสิ่งที่เป็นทั้งข้อดีและข้อเสียก็คือเวอร์ชั่นฟรีจะประมวลผลบนเซิฟเวอร์ของเรา ซึ่งต้องดูว่าโฮสรองรับพวก library ต่างๆ ด้วยรึเปล่า และถ้าต้องการให้ประสิทธิภาพดีขึ้นก็มีเวอร์ชั่นเสียเงินให้ใช้ด้วยราคาตามตารางนี้



จะเห็นว่ามันคิดเงินตั้งแต่รูปแรกเลย ประเด็นก็คือการอัพรูปบน Wordpress มันจะถูกแตกแยกย่อยอย่างน้อย 4 ไฟล์คือ
  1. Original
  2. Thumbnail
  3. Medium
  4. Large
แต่กรณีที่มี plugin ก็อาจแยกย่อยเยอะกว่านี้ นั่นหมายความว่าการอัพโหลด 1 รูป จะต้อง optimize อย่างน้อย 4 รูปเพื่อให้ได้ผลลัพธ์ที่ดีที่สุด ซึ่งถ้าคิดจะใช้แบบเสียเงินก็มีค่ายอื่นๆ ให้เลือกพอตัว ที่ดังหน่อยก็อย่าง TinyPNG ซึ่งเจ้านี้ให้ฟรี 500 รูปแรก



หรือถ้าเป็น Kraken ก็จะใช้วิธีคิดเงินแบบรายเดือนโดยคิดตามขนาดไฟล์ ต่างจาก EWWW Image Optimizer และ TinyPNG ที่คิดตามจำนวนรูป




ที่จริงมันก็มีให้เลือกหลายเจ้าเลยล่ะ แต่ต้องดูรายละเอียดดีๆ ด้วยเพราะบางอันมัน optimize เฉพาะ jpg อย่างเดียวหรืออาจจะจำกัดขนาดของไฟล์ แต่ถ้าคิดจะเสียเงินแล้วตัวที่ผมชอบที่สุดคือ ShortPixel เพราะค่อนข้างเปิดกว้างและราคาถูก

ข้อดีของมันคือฟรี 100 รูปทุกเดือนและมันมีแพคเกจให้เลือก 2 แบบตามใจชอบ คือจ่ายรายเดือนหรือจะซื้อแบบ one-time ก็ได้ ...ผมเลือกซื้อแบบ one-time และมันก็ฟรีอีก 100 รูปทุกเดือนเหมือนกัน



การตั้งค่าก็มีให้เลือกทั้งการบีบอัดลดขนาดแบบ Lossy และ Lossless ซึ่งถ้าคิดจะลดขนาดไฟล์แล้วล่ะก็เลือกแบบ Lossy เถอะครับ คุณภาพอาจจะเสียไปบ้างเล็กน้อยแต่ลดขนาดไฟล์ไปเยอะ



และแนะนำให้เลือกหัวข้อ Thumbnail ด้วยเพราะมันคือการ optimize ไฟล์ขนาดต่างๆ ที่ถูก Wordpress สร้างเพิ่มนอกจากตัว Original ซึ่งพวก Thumbnail นี่แหละที่ถูกใช้จริงบนหน้าเว็บ ส่วน Image Backup ก็สำหรับคนที่ต้องการเก็บไฟล์ต้นฉบับไว้แต่ผมไม่เก็บครับ มันเปลืองพื้นที่โฮส

อีกส่วนก็คือการ Resize ... พูดง่ายๆ ว่าใช้ ShortPixel ตัวเดียวก็ไม่จำเป็นต้องมี Imsanity อีกแล้วล่ะ ทีนี้มาดูตัวอย่าง report ว่ามันช่วยลดขนาดไฟล์ไปเท่าไรกันบ้าง

จะเห็นว่าบางไฟล์ถูกบีบอัดลดขนาดลงไปราว 50% เลยทีเดียว และข้อดีของ ShortPixel ก็คือถ้ารูปไหนที่ optimize ได้น้อยกว่า 5% เค้าจะไม่นับให้เสียโควตาครับ ...จัดอยู่ในกลุ่ม Bonus processing

และ ShortPixel มันมีระบบ Referral คือถ้าแนะนำให้เพื่อนสมัครก็ได้จะได้โควตาใช้ฟรีอีก 100 รูปทุกเดือนทั้งคนชวนและคนถูกชวนครับ ฉะนั้นถ้าสนใจก็สมัครผ่านลิ้งนี้ครับ ShortPixel ...ได้โควตาเพิ่ม 100 รูปในทุกเดือน

แต่ถ้าอยากประหยัดงบสุดๆ ก็ลองหาโปรแกรมมาลงบนเครื่องแล้ว optimize ก่อนที่จะอัพโหลดครับ ลองดูจากบทความนี้ได้ครับ และแม้ว่าดูจาก Report มันอาจลดขนาดไปไม่เยอะมาก แต่สำหรับ Wordpress ซึ่งมีจำนวนรูปมหาศาลเนี่ยมันเห็นผลมากครับ อย่างเว็บ bacidea.com ที่อ่านอยู่เนี่ย ก็ลดขนาดไปราว 1.5 GB เลย

COMMENTS

[Featured]_$type=sticky$count=4$cate=1$tbg=rainbow$hide=home

Name

1More,2,3krung,1,7-Eleven,1,Acer,9,ACG Network,1,Acoustic Research,1,addidas,1,Adobe,9,Adonit,1,AIS,7,altron,1,amazon,1,AMD,5,AMD Ryzen Threadripper,1,ANA,1,Ananda,1,Anime,1,AnTuTu,1,apc,1,App War,1,Apple,42,Aruba,3,ASRock,4,ASUS,30,Audio Technica,1,Avita Liber,1,B&O,2,Bangkok Airways,1,Bangkok bank,1,Belkin,4,Blackberry,1,blackmagic,1,Blancco,1,Blizzard,1,Blog,12,Blogspot,4,bluespice,2,BMW,1,BNK48,4,boonthavorn,1,Brother,11,bts,1,canon,1,cat,1,Cathay Pacific,1,Central,1,Cheetah Mobile,1,China Southern Airlines,1,CHOETECH,1,Christopher Robin,1,Cisco,1,Code Geass,1,com7,1,Condo,1,coocaa,1,Cooler Master,1,CORSAIR,7,Cozistyle,5,cp all,1,CSC,3,D-Link,2,DDproperty,2,deep silver,1,Dell,8,DENON,1,dentsu X,1,Development,5,DHL,2,Disney,1,DJI,3,DSI,1,dtac,6,DxOMark,1,Dyson,1,E-Sports,1,eisa,1,eLTE,1,Emirates,3,Entertainment,24,Epson,1,ericsson,2,Essential,1,EVA Air,1,facebook,5,Fanslink,1,FATBOY JUMP,1,Featured,34,fingerprint quick action,1,Fitbit,2,flavor of youth,1,Flixer,1,Fluid,1,foldio,2,Food,14,fortnite,1,FRONTIS,1,Fuji Xerox,2,Full Frame Mirrorless,1,G Master,1,Galaxy Note8,1,Galaxy S8+/S8,1,Galaxy S9/9+,1,Gameloft,2,garena,1,Garmin,1,Garuda Indonesia,1,GC,1,ghoul,1,Girl Don't Cry,1,Gmail,1,goGame,1,Google,44,gopro,2,Grab,2,Hainan Airlines,1,Hakone,2,Harman,5,Health,2,HMD,11,honor,18,hostmaker,1,Hotel Transylvania,1,hotels.com,1,HP,10,htc,3,Huawei,96,Huawei Global Safe City Summit,1,huya,1,HyperX,2,IFTTT,2,IKEA,1,imazing,1,iMi,2,Incase,1,inet,1,Innergie,2,Insta360,3,Instagram,1,Intel,7,iPhone 8,1,iPhone 8 Plus,1,iPhone X,1,irpc,1,Jabra,1,JBL,10,JD,4,Jimu,1,JOOX,2,Just Mobile,1,K bank,2,Kika,1,kingston,2,KOHLER,1,KTC,2,Lazada,6,leica,3,Lenovo,11,LG,15,Lifelog,13,Lifestyle,19,Line,7,Linksys,1,Living,12,Logitech,2,Lufthansa,1,Magento,1,mahajak,6,Major Cineplex,1,Mamma Mia,1,Manfrotto,1,Maniac,1,Marvel,1,Mastercard,3,McLaren,1,MediaTek,4,Meitu,1,meizu,2,Mi,16,Microsoft,12,mio,1,Mission Impossible,1,Mobvoi,3,Motorola,8,Move It,1,msi,3,mu space,2,Neolution,1,Netflix,6,News,529,Nexon,1,NFC,1,Ninebot,1,Nokia,27,NSquared,1,nubia,9,Nvidia,2,olloClip,2,One Cut of the Dead,1,one31,1,oneplus,14,OPPLE,1,OPPO,53,Orimag,1,Palm,2,Palo Alto Networks,1,panasonic,3,Pantip,1,Philips,2,Photopea,1,Pioneer,2,Plantronics,10,pocophone,3,Powerbuy,2,Predator,1,PRO TANLE,1,Projector,1,Promotion,116,pubg,4,Qatar Airways,1,Qi,1,Qing Tao,1,qualcomm,11,rabbit LINE Pay,1,Ragnarok,1,Rayole,1,Razer,3,realme,8,RED,1,Remax,2,Resort World Genting,1,Ricoh,3,RICOH Pro C7200x / C7210x,1,RICOH Pro T7210,1,ROG,5,rtb,3,Safe City Compact,1,Samsung,53,sandisk,2,SANDMARC,1,SANSIRI,1,SCB,5,Schneider,2,searching,1,Segway,1,senheiser,1,Sennheiser,1,sharp,1,Shopee,8,ShortPixel,1,Shure,5,sigma,2,Singapore Airlines,1,skilllane,1,Skytrax,1,Snapchat,1,Snoppa,2,Society,39,Sony,63,Sony Xperia XZ2,1,Spigen,1,Story,18,Superrich,1,Sushi Hiro,1,Sylania,1,synology,1,Taobao,1,TCELS,1,Tech,156,TechOffside,1,TESF,1,Thai Airways,1,The First Purge,1,The Purge,1,the VOID,1,ticwatch,3,TIGERNU,3,Toshiba,2,TP-LINK,1,Transcend,5,Travel,9,True,28,twitter,1,Uber,2,Ubisoft,1,UOB,1,Vinsic,1,vivo,25,VoLTE,1,Wacom,1,WD,4,western digital,4,Wiko,9,winamp,1,Wordpress,1,Xerox,1,Xiaomi,33,Xiaoyi,1,Yakult,1,yamaha,1,Yi,2,Yongnuo,1,Yoobao,3,YouTube,3,Zebra connect,1,Zeiss,1,Zhiyun,3,zmi,1,Zotac,1,Ztylus,2,กสทช,1,ปัญจพล พร็อพเพอร์ตี้,1,มหาวิทยาลัยหอการค้าไทย,1,สีฟ้า,6,หนังผมไม่เล็กนะครับ,1,
ltr
item
BACIDEA: วิธีทำให้เว็บโหลดเร็วขึ้นด้วยการลดขนาดไฟล์ภาพสำหรับ Wordpress
วิธีทำให้เว็บโหลดเร็วขึ้นด้วยการลดขนาดไฟล์ภาพสำหรับ Wordpress
https://1.bp.blogspot.com/-hSSvFxh-LoU/WqzRE5N_-RI/AAAAAAADn-Q/a7yHGSyFbUEm8O9EEUroQWD1d0oLad-EgCK4BGAYYCw/s640/%25E0%25B8%25A7%25E0%25B8%2598%25E0%25B8%2597%25E0%25B8%25B3%25E0%25B9%2583%25E0%25B8%25AB%25E0%25B9%2580%25E0%25B8%25A7%25E0%25B8%259A%25E0%25B9%2582%25E0%25B8%25AB%25E0%25B8%25A5%25E0%25B8%2594%25E0%25B9%2580%25E0%25B8%25A3%25E0%25B8%25A7%25E0%25B8%2582%25E0%25B8%2599%25E0%25B8%2594%25E0%25B8%25A7%25E0%25B8%25A2%25E0%25B8%2581%25E0%25B8%25B2%25E0%25B8%25A3%25E0%25B8%25A5%25E0%25B8%2594%25E0%25B8%2582%25E0%25B8%2599%25E0%25B8%25B2%25E0%25B8%2594%25E0%25B9%2584%25E0%25B8%259F%25E0%25B8%25A5%25E0%25B8%25A0%25E0%25B8%25B2%25E0%25B8%259E%25E0%25B8%25AA%25E0%25B8%25B3%25E0%25B8%25AB%25E0%25B8%25A3%25E0%25B8%259A-wordpress-1200x565.jpg
https://1.bp.blogspot.com/-hSSvFxh-LoU/WqzRE5N_-RI/AAAAAAADn-Q/a7yHGSyFbUEm8O9EEUroQWD1d0oLad-EgCK4BGAYYCw/s72-c/%25E0%25B8%25A7%25E0%25B8%2598%25E0%25B8%2597%25E0%25B8%25B3%25E0%25B9%2583%25E0%25B8%25AB%25E0%25B9%2580%25E0%25B8%25A7%25E0%25B8%259A%25E0%25B9%2582%25E0%25B8%25AB%25E0%25B8%25A5%25E0%25B8%2594%25E0%25B9%2580%25E0%25B8%25A3%25E0%25B8%25A7%25E0%25B8%2582%25E0%25B8%2599%25E0%25B8%2594%25E0%25B8%25A7%25E0%25B8%25A2%25E0%25B8%2581%25E0%25B8%25B2%25E0%25B8%25A3%25E0%25B8%25A5%25E0%25B8%2594%25E0%25B8%2582%25E0%25B8%2599%25E0%25B8%25B2%25E0%25B8%2594%25E0%25B9%2584%25E0%25B8%259F%25E0%25B8%25A5%25E0%25B8%25A0%25E0%25B8%25B2%25E0%25B8%259E%25E0%25B8%25AA%25E0%25B8%25B3%25E0%25B8%25AB%25E0%25B8%25A3%25E0%25B8%259A-wordpress-1200x565.jpg
BACIDEA
https://www.bacidea.com/2015/10/wordpress.html
https://www.bacidea.com/
https://www.bacidea.com/
https://www.bacidea.com/2015/10/wordpress.html
true
7101991068115707229
UTF-8
โหลดเนื้อหาทั้งหมด ไม่พบข้อมูล ดูทั้งหมด อ่านต่อ ตอบ ยกเลิกการตอบ ลบ โดย Home PAGES POSTS ดูทั้งหมด เรื่องแนะนำ ARCHIVE SEARCH เนื้อหาทั้งหมด ไม่พบข้อมูลที่ต้องการ กลับหน้าหลัก Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow เนื้อหาส่วนนี้ต้องแชร์เพื่อแสดงข้อมูล ขั้นตอน 1: แชร์. 2:คลิกเพื่อปลดล็อก. คัดลอกทั้งหมด เลือกทั้งหมด ข้อความถูกคัดลอกแล้ว ไม่สามารถคัดลอกได้ ลองใช้วิธีกดปุ่ม CTRL+C หรือ CMD+C