About MeAll Entries

 
สวัสดีครับ 
 
เอนทรี่ที่แล้วเขียนแล้วมันมือไปหน่อย ยาวเหยียดจนไม่มีคนอ่าน เอนทรี่นี้เลยทำให้อ่านง่ายๆ ดีกว่า 
 
แต่ก่อนอะไรทั้งหมด กด Ctrl+F5 ด้วยครับ แก้นู่นนี่เยอะเหมือนกัน
 
 
 
(อินโทรสั้นลงไปทุกวัน XP)
 
 
 
 
ใครๆ ก็ชอบบล็อกที่โหลดเร็วๆ
ถึงแม้ว่าเนื้อหาจะน่าสนใจขนาดไหนก็ตาม ถ้าต้องรอนานๆ ความน่าสนใจก็จะลดลงอย่างมากมายมหาศาล
 
อีกอย่างนึงคืออินเตอร์เน็ตเป็นโลกที่ทุกคนดูจะรีบร้อนเหมือนแมงสาบตื่นสาย อยู่เฉยๆ แค่สองนาทียังทำไม่ค่อยได้ ยิ่งสำหรับบล็อกแล้ว ครึ่งนาทีก็เกินความอดทน
 
เราจึงต้องทำบล็อกให้โหลดเร็วๆ
เพราะอะไรน่ะหรือ?
 
กลับไปอ่านข้างบนอีกรอบเถอะ 
 
 
ปัจจัยหลักที่มีผลต่อความเร็วในการโหลดคือ "รูป"
 
เทียบให้ฟังง่ายๆ คือทุกครั้งที่เราเปิดบล็อก (หรือเว็บอะไรก็แล้วแต่) แล้วต้องโหลดรูป ก็เหมือนกับเรา "สั่ง" ตัวอะไรซักตัว บอกชื่อไฟล์พร้อมที่อยู่ไป เช่น "Header.jpg ที่ photobucket.com"
 
 
แล้วเจ้าตัวนี้ก็รับหน้าที่วิ่งไปที่เซิร์ฟเวอร์ (ที่อยู่ที่ให้ไป)
 
 
ในที่นี้คือ photobucket.com ซึ่งรับหน้าที่เป็น "ร้านถ่ายเอกสาร"
 
 
เจ้าตัวนี้ก็บอกสิ่งที่ต้องการกับเจ้าของร้าน
 
 
เจ้าของร้านก็จะถ่ายเอกสารรูปภาพนั้นๆ ให้ เจ้าตัวนี้ก็จะวิ่งกลับมาหาเรา
 
 
แล้วก็เอารูปภาพมาส่ง (โดยสวัสดิภาพ)
 
 
แฮปปี้เอนดิ้ง~♥
 
 
เราเรียกกระบวนการนี้ว่า HTTP Request
 
และจุดมุ่งหมายของเราก็คือทำให้เจ้าตัวนี้ (ที่ไม่มีชื่อ) เอารูปภาพมาส่งให้เราให้เร็วที่สุด ฮาวทูนี้จึงบังเกิด!!
 
 
*เสียงแตร รัวกลอง*
 
 
1. รูปเยอะเกินก็โหลดช้าสิ
 
 
อันนี้แน่นอนอยู่แล้ว ยิ่งรูปเยอะ บล็อกคุณก็ยิ่งโหลดช้า ถ้าเป็นไปได้เวลาจะใช้รูปพื้นหลังอะไรควรนึกดูก่อนว่าจะใช้ CSS แทนได้มั้ย อย่างถ้ารูปพื้นหลังนั้นมีแค่กรอบสีแดงบนพื้นสีขาว ก็ลองใช้ border: แทนการใช้รูปภาพ
 
เพราะการมีรูปภาพเยอะๆ หมายถึงเจ้าตัวนั้นต้องแบกกองภาพสูงเท่าเขาหิมาลัยชุบแป้งทอด และนั่นไม่ใช่เบาๆ เลย สงสารเขา (เธอ? มัน?) บ้างสิ 
 
 
 
 
2. รูปใหญ่ไปก็โหลดช้าสิ
 
 
ถึงจะมีแค่สองสามรูป ถ้าแต่ละรูปใหญ่เป็นแป้งชุบเขาหิมาลัยทอด (ได้เรอะ!?) มันก็หนักพอกัน
 
ถ้าเป็นไปได้ให้ใช้พื้นหลังแบบ repeat แทนภาพใหญ่ๆ ภาพเดียว (แต่ถ้า repeat ออกมาแล้วไม่สวยก็ใช้รูปใหญ่ได้ แต่พยายามจำกัดขนาดหน่อย)
 
เรื่องพื้นหลังแบบต่างๆ ผมเคยอธิบายไว้แล้วใน Howto แต่งกล่องคอมเม้นต์ (หัวข้อ "เก็บเกี่ยว") 
 
 
 
(เห็นหลายๆ บล็อกมีรูปเผาๆ อยู่ตรงหัวบล็อกแล้วเขียนว่า "เฮดชั่วคราว"... ชั่วคราวมาสามชั่วอายุคนแล้ว )
 
 
3. ใช้หลายโฮสก็โหลดช้าสิ
 
 
อันนี้เห็นหลายบล็อกอยู่เหมือนกัน พื้นหลังเอาไปฝากเว็บนึง รูป sidebar เอาไปฝากอีกเว็บนึง รูปเฮดก็เอาไปฝากอีกเว็บนึง ตระเวนฝากไปทั่วเหมือนนักร้องทัวร์คอนเสิร์ตชุบแป้งทอด (ยังชุบไม่เลิก...)
 
มันทำให้เว็บโหลดช้าลงเยอะเลย
ถ้าเทียบง่ายๆ ก็เหมือนกับว่าคุณจะไปจ่ายตลาด ซื้อของมาทำข้าวเย็น คุณไปซื้อไข่ที่ตลาดบางนา ซื้อปลาที่จตุจักร ซื้อผักทีสีลม แวะซื้อขนมแถวดอนเมือง
 
กลับถึงบ้านไข่คงฟักเป็นตัวก่อน...
 
พอฟักเป็นตัวแล้วต้องเอามาทำอะไรรู้มั้ย?
 
ใช่แล้ว ชุบแป้งทอด
 
 
 
4. ใช้โฮสกากก็โหลดช้าสิ
 
 
นอกจากจะใช้โฮสเดียวแล้ว โฮสที่ใช้นั้นก็ต้องเป็นโฮสคุณภาพ เพราะโฮสกากๆ จะทำให้การรับส่งข้อมูลช้า ทำให้รูปโหลดช้าตามมา
 
สองโฮสที่แนะนำมาตลอดก็คือ photobucket และ imageshack ถึงแม้ว่า photobucket จะจำกัดแบนวิธ และ imageshack จะส่งกบแช่แข็งมาให้ดูต่างหน้าเป็นบางครา สองโฮสนี้ก็น่าเชื่อถือเสมอ น่าเชื่อถือยิ่งกว่ากุ้งชุบแป้งทอด (เป็นคำเปรียบเปรยที่กากมาก...)
 
จะว่าไปโฮสกากก็เหมือนกับ...
 
ไม่น่าเชื่อถือเลยใช่มั้ย...
 
 
5. Jpeg มากไปก็โหลดช้าสิ
 
 
นามสกุล .jpg เป็นอะไรที่แพร่หลายมากๆ เวลาพูดถึงรูป ถ้าเทียบกับการเมืองก็เหมือนกับนามสกุลชื่อดังอย่าง *อุ๊บบบบ โดนอุ้ม*
 
 
แต่ .jpg นั้นก็เหมาะสำหรับภาพถ่าย แต่มันกากมากเมื่อเอามาใช้กับการแต่งบล็อก เพราะ อย่างแรก jpg เป็นการบีบอัดแบบเสียคุณภาพ ถ้าเทียบกับ png ซึ่งเป็นการบีบอัดแบบไม่เสียคุณภาพ (loseless)
 
ง่ายๆ คือถ้าเซฟเป็น jpg คุณภาพจะแย่กว่า png
 
สองคือ jpg ขนาดใหญ่กว่า ถ้าคุณภาพเท่ากัน (เทียบกับ png)
 
เพราะฉะนั้นเปลี่ยนมาใช้ png กันเถิด~~
 
 
สเต็ปนี้ใส่มุกชุบแป้งทอดไม่ได้ 
 
 
แต่หากทำตามหลักง่ายๆ ห้าข้อนี้ บล็อกของคุณก็จะโหลดเร็วขึ้นอย่าง (น่าจะ) แน่นอน (ละมั้ง)!!
 
 
 
 
 
 
 
ฮะๆ ช่วงนี้บ้าเขียนฮาวทูแฮะ แป้กมั่งไม่แป้กมั่ง หวังว่าคงยังไม่เบื่อกัน 
 
 
เจอกันเอนทรี่หน้าครับ 
 
 
ปล. เอนทรี่นี้มีภาคต่อนะ XD
ปล 2. วงกลมวาดยากมาก...
ปล 3. สัจธรรม: วงกลมที่สวยไม่ใช่วงกลมที่กลม หากคือวงกลมที่ออกสามเหลี่ยมนิดๆ ต่างหาก!
ปล 4. เอนทรี่นี้เหมือนจะสาระนะ... ไปๆ มาๆ ก็รั่ว orz
 
 

Comment

Comment:

Tweet

Hot!
ขอบคุณมากค่ะ 

#91 By cнσcσʟαтε . on 2012-10-07 14:15

double wink double wink double wink

#90 By hy92h on 2012-03-24 17:00

ขอบคุณค่่าาาาาาา
เเต่มันยากจริงๆเนอะwink

#89 By Kii_ii on 2012-02-19 15:27

งึกๆsad smile sad smile

#88 By Unichr❉me on 2011-12-07 18:29

ขอบคุณมากนะคะมีประโยชน์มากมาย big smile

#87 By โจโบ 囧 on 2011-11-24 00:32

อ้ะ

#86 By Admin on 2011-11-13 00:09

ใช้ png ได้ด้วยเหรอครับ พึ่งรู้ก็เี่ยแหละsad smile

#85 By on 2011-08-01 20:13

ถ้าแต่ละรูปใหญ่เป็นแป้งชุบเขาหิมาลัยทอด (ได้เรอะ!?) < ฮามากค่ะ 5555555 Hot! Hot! Hot!

#84 By KUSO_DD on 2011-05-10 12:43

ขอบคุณสำหรับคำแนะนำค่ะ
Hot! Hot! Hot!

#83 By จุด on 2011-05-03 20:40

Hot! Hot! Hot!
สุดยอดดด

#82 By Syprus on 2011-05-01 00:39

Hot! Hot! Hot! Hot!

เพิ่งรู้ว่าภาพ png ดีกว่า jpg ขอบคุณมากๆนะคะ

#81 By NOBUTAN on 2011-04-25 11:54

เข้าใจว่าjpgเบากว่าpng มาตลอดเลยค่ะ O _ O"" เพิ่งรู้นะเนี่ย
ปกติใช้ save for web jpg high น่ะค่ะ มันจะหนักไปรึเปล่า แล้วถ้าใช้png สีจะเพี้ยนจากเดิมมั้ยคะHot! Hot!

แล้วพวก flash จะทำให้บลอคโหลดช้าด้วยรึเปล่าคะ แล้วมากมั้ย
(คือรู้สึกว่ามันอืดกว่ามากๆๆๆเลยถ้าเปิดบลอคที่มีพวกลูกเล่นเยอะๆโดยเฉพาะ flash)

ตามดูเฉยๆน่ะค่ะ เผื่อเอาไปปรับใช้กับการแต่งบลอคบ้าง^^ขอบคุณมากค่ะ
เราก็พยายามลดไฟล์พอดีๆเเล้วล่ะ ^ ^ พอดีๆนี่ดีที่สุดเเล้วเนอะ~~Hot! Hot! Hot!

#79 By ShEEp_P@gE on 2011-04-24 23:02

มอบดาววคร๊าบ
Hot! Hot! Hot!

รูปประกอบน่ารักมากฮะ

ผมใช้แต่ jpg นี่สิ ต้องเปลี่ยนๆ

#78 By aRabez on 2011-04-24 21:16

สุโค่ยค่ะ

Hot! Hot! Hot! Hot! Hot!

#77 By Mekumi on 2011-04-24 16:06

big smile Hot! Hot! Hot!

#76 By i'am-toontoon on 2011-04-24 15:26

png นี่เอง
ขอบคุณค่ะ

#75 By S e t s u n a on 2011-04-24 08:43

Hot! Hot! Hot!
เจ๋งมากเลยจ้า!

#74 By PLA ;) on 2011-04-24 07:04

ทั้งได้ประโยชน์ทั้งฮา
ขอบคุณมากค่าาาาาา XD
Hot! Hot! Hot! Hot! Hot! Hot! Hot!

#73 By K@De เห็ดแดง on 2011-04-24 02:13

สาระมากค่ะ ต้องเปลี่ยนไปใช้ png บ้างซะแล้วสิ
Hot! Hot! Hot!

#72 By Melodii on 2011-04-24 01:52

เพิ่งรู้เรื่องpng เซฟเป็นjpeg มาทั้งชาติ เพราะเห็นว่าาส่วนมากเค้าใช้กัน
เก็ทจนได้งับ ขอบคุณมากมาย>_<
Hot! Hot! Hot!

#71 By KoonPoonk on 2011-04-24 00:59

เยี่ยมไปเลย ~ surprised smile Hot! Hot!

#70 By ✖ maii - まいさ - maisa ✖ on 2011-04-24 00:11

ดีจังค่ะ .. ขอบคุณนะคะ big smile

#69 By Initmate on 2011-04-23 23:49

สุโค่ยยยยยยHot! Hot! Hot!

#68 By จุด on 2011-04-23 23:19

โดนใจกับฮาวทูนี้จังค่าาาาา
แต่ก่อน สมัครบล็อกใหม่ๆ บ้าอัพรูปมากมาย จะแต่งบล็อกอะไร เอะอะก็ฝากไฟล์ แต่ตนนีเริ่มรู้แล้วค่ะว่าไปฝากไฟล์เอาไว้หลายเว็บมัทำให้บล็อกเรารีโหลดช้า ตอนนี้ใช้ภาพเพียงแค่อันเดียวในบล็อกค่ะ double wink

Hot! Hot! Hot!

#67 By Shinji-Yuri on 2011-04-23 21:45

Hot! Hot!
/ปาดาวใส่!!!

#66 By @ P.M. on 2011-04-23 20:49

ใช้แต่jpgจนชิน ต้องเปลี่ยนไปใช้pngสินะbig smile
Hot! Hot! Hot!

#65 By Black_Hare on 2011-04-23 20:30

ชอบรูปก่อน แฮปปี้เอนดิ้ง~♥ จริงๆ น่ารักมาก cry

ได้ผลลัพธ์อย่างที่คาดเลย big smile
อ่านง่ายขึ้น ก็เลยทำให้เข้าใจง่าย มีเปรียบเทียบได้เห็นภาพเลย ชอบๆๆ ~~~

ไม่เบื่อแน่นอน จะตามอ่านทุกเอนทรี่เลย~~~

ป.ล.บล็อกเราโหลดไวแน่นอน ก็มันไม่มีไรเลยไง ตามอ่านอย่างเดียว -.,-

Hot! Hot! Hot! Hot! Hot!

#64 By RACHE~OH!!! on 2011-04-23 19:57

Hot! Hot! Hot!
ความจริงเรื่องรูปไม่เป็นปัญหาสำหรับเรา แต่บางครั้งโหลดช้าเพราะตัวเว็บเอง = =

#63 By ปลาทอง on 2011-04-23 19:54

Hot! Hot! Hot! Hot! Hot!

#61 By ๏Luvi๏`KunG on 2011-04-23 18:18

โอ้ ว้าว... นั่นสิ รู้สึกว่าที่บล็อกก็ใช้ jpeg ซะส่วนใหญ่ แต่ยอมรับว่า PNG ภาพรายละเอียดดีกว่ามากนะHot!

#60 By yo on 2011-04-23 17:53

Hot! Hot! Hot!
มาชุบแป้งทอดค่า //??

ตอนแรกคิดว่าไฟล์ png ใหญ่กว่า jpg ซะอีก =w=;;
เพราะมันละเอียดกว่า(?)

#59 By Sakujung on 2011-04-23 16:49

ขอบคุณสำหรับความรู้ดีๆ นะครับ cry
Hot! Hot! Hot! Hot! Hot!

ปล. เมนท์เมื่อกี้ขออภัยครับ เผลอกดก่อนพิมพ์เสร็จ orz

#55 By [ Toon ] on 2011-04-23 15:16

แต่ก่อนผมก็ใช้ .jpg เหมือนกัน เพราะคิดว่าไฟล์จะเบากว่า .png
(ปกติปรับให้เป็น quality maximum อยู่แล้วเลยไม่ได้คิดอะไรมาก)
พออ่านเอนทรี่นี้แล้วลองทำดู .jpg หนักกว่า .png จริง

#54 By [ Toon ] on 2011-04-23 15:14

เจ๋งไปเลยยย Hot! Hot! Hot!

#53 By Nammm' : Arch SU on 2011-04-23 15:01

Hot! Hot!

ได้ความรู้ดีๆขึ้นมากเลยค่ะ ><

#52 By [Davi] on 2011-04-23 14:41

Hot! Hot! Hot!
โห ที่เเท้ก็เเบบนี้นี่เอง
jpg หนักจริงดิ !!

#51 By hameii on 2011-04-23 14:30

Hot! Hot! Hot!

#50 By luluke on 2011-04-23 14:23

ทีแรกผมนึกว่าpngมันหนักกว่าjpegนะ แต่ว่าpngมันเบากว่าจริงๆแฮะ!

#49 By Wokurou on 2011-04-23 13:51

รูปน่ารัก เข้าใจง่ายค่ะopen-mounthed smile Hot! Hot! Hot!

(ปกติใช้ jpeg ตลอดเลยsad smile)

#48 By ICEgotcha! on 2011-04-23 13:50

Hot! Hot! Hot! Hot! Hot! Hot!

#47 By ananyafever on 2011-04-23 13:18

เข้าใจง่ายมากๆเลยค่ะ
ที่สำคัญรูปประกอบฮาวทูก็น่ารักมากๆ ><
เอาดาวชุบแป้งทอดไป...
Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!

#46 By Fudomyoo on 2011-04-23 13:10

โอ เข้าใจง่ายขึ้นมากมายเลยขอรับ >w<

(ปกติเวลาแต่งบล็อกก็ใช้ .png ตลอด lol)

#45 By Kurochan on 2011-04-23 13:06

ต้องหันมาเซฟเป็น png ซะแล้วHot! Hot! Hot!

#44 By pangnim on 2011-04-23 12:42

Hot! Hot! Hot!

#43 By ¥aoi Besuto on 2011-04-23 12:31

Hot! Hot! Hot! Hot! Hot! Hot! Hot! มอบให้เลย

ขอบคุณสำหรับความรู้ดี ๆ จ้า confused smile

#42 By Kefron Kerina on 2011-04-23 12:16

อ่านเข้าใจง่ายใช้ได้จริงต้องให้♥♥♥

Hot! Hot! Hot! Hot!

#40 By HineyHelsinki on 2011-04-23 11:55

ส่งกุ้งไปชุบแป้งทอด 555
ไม่ใช่แล้ว เดี๋ยวจะเปลี่ยนธีมคราวหน้าต้องใช้ png ซะแว้ว big smile big smile Hot!

#39 By GOD on 2011-04-23 11:53