krumontree200x75
isangate com 200x75
ppor 200x75
isangate net 200x75
01582031
Today
Yesterday
This Week
Last Week
This Month
Last Month
All days
115
143
946
8733
2749
3444
1582031

Your IP: 54.81.69.220
2019-07-20 14:53

ติดปีกให้เว็บไซต์ของคุณ

แม้ความเร็วของการให้บริการอินเทอร์เน็ตในปัจจุบันจะมีมากมายกว่าเมื่อ 20 ปีก่อนมาก แต่... อย่าลืมว่า ในยุคปัจจุบันนี้ผู้ชมสามารถเข้าชมเว็บไซต์ของเราผ่านทางอุปกรณ์มือถือ หรือที่เรียกกันว่า Mobile Devices กันค่อนข้างมาก ซึ่งอุปกรณ์พวกนี้ก็จะมีข้อจำกัดด้านความเร็วอยู่เหมือนกัน เช่น ความเร็วที่ใช้ไปเกินกว่าปริมาณข้อมูลในโปรโมชั่น จะถูกลดความเร็วลงมาในระดับที่ดูเว็บไซต์ที่มีภาพ หรือสื่อมัลติมีเดียแทบไม่แสดงผลเลยก็มี เราจึงควรออกแบบเว็บไซต์ให้สนองตอบต่อคนกลุ่มนี้ด้วย โดยเทคนิคเก่าๆ ที่ผู้เขียนเคยใช้ในสมัยใช้อินเตอร์เน็ตหมุนผ่านโมเด็มและสายโทรศัพท์ 20 ปีก่อน มาดูกันว่ามีอะไรบ้าง

สมัยนี้ สิ่งที่ผมค่อนข้างหงุดหงิดกับเว็บไซต์ข่าวประเภท "เรียกยอดวิว" เพื่อค่าโฆษณามากๆ ทั้งป็อบอัพกวนตา โฆษณาอภิมหาจำนวนมากบนหัวเว็บก่อนเนื้อหา ซึ่งถ้าเจอก็จะไม่ทนดูหรอกครับปิดไปเลย เบื่อๆ นั่นเอง ถ้าคุณทำเว็บไซต์ดีๆ ก็ไม่ควรจะมีข้อจำกัดเหล่านี้ใช่ไหม ทุกปัญหาย่อมมีทางออกเสมอ จริงไหมครับ เรามาดูกันว่า จะทำให้เต่าของเรากลายเป็นกระต่าย (ที่แสดงผลเร็วๆ) หรือพญาเหยี่ยวติดปีกได้อย่างไร? เรียกว่าถ้าไม่ได้ด้วยเล่ห์ ก็ขอล่อเอาด้วยกล (วิธี) ก็แล้วกัน

ขั้นแรกเรามาดูกันที่องค์ประกอบของเว็บเพจเสียก่อนว่า "สิ่งใดน่าจะเป็นตัวการถ่วงเวลา ในการโหลดมากที่สุดลดหลั่นกันลงไป" แล้วค่อยหาวิธีแก้กันไปทีละเปลาะครับ

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

ถึงเวลาที่จะจัดการกับสาเหตุเหล่านี้กันแล้วครับ จากหลักการที่ว่า ความเร็วในการใช้แสดงผลเว็บเพจขึ้นอยู่กับขนาดของไฟล์แต่ละหน้า (Text + รูปภาพ) ถ้าอยากให้แสดงผลได้เร็ว ผลรวมของไฟล์ไม่ควรเกิน 100-200 KB เอาล่ะครับเรามาแก้ปัญหาเรียงลำดับไปทีละข้อกันเลย

1. ลดขนาดรูปภาพให้เล็กลง (สวยคงเดิม)

ขนาดของรูป (เมื่อไม่คิดถึงวิธีการบีบอัดข้อมูล) ก็จะมีขนาดจากผลคูณของความกว้าง ความยาว และจำนวนสีของรูป จากสมการ

ขนาดที่ใช้ในการเก็บข้อมูลรูปภาพ = กว้าง x ยาว x จำนวนสี

ขนาดกว้างยาวของรูปคือสิ่งที่เราต้องการกำหนดให้แน่นอนสำหรับเว็บเพจ ส่วนจำนวนสีขึ้นอยู่กับจำนวนบิต (bit) ของสีที่ใช้ในการจัดเก็บ ยิ่งจำนวนบิตมาก ขนาดของรูปก็จะมากตาม ดังแสดงในตาราง

จำนวนบิต จำนวนสี ขนาดไฟล์
24 bits 16.7 million 900 KB
8 bits 256 196 KB
7 bits 128 162 KB
6 bits 64 128 KB
5 bits 32 102 KB
4 bits 16 77 KB
3 bits 8 60 KB
2 bits 4 44 KB
1 bit 2 26 KB

คุณจะเห็นได้ว่า วิธีลดขนาดรูปที่ง่ายๆ ก็คือ ลดจำนวนสีลง คุณภาพของรูปจะลดไปไม่มากนัก มีคำถามว่าจะลดไปเหลือกี่สี พิจารณากันได้ง่ายๆ ครับ ถ้าเป็นรูปกราฟิกง่ายๆ ที่ทั้ง รูปมีสีแค่ 3-4 สี ก็อาจจะลดลงจนเหลือแค่ 3 บิตหรือ 8 สีก็ยังได้ แต่ถ้าเป็นรูปถ่ายของคน ทิวทัศน์ งานเทศกาล ฯลฯ ไม่ควรจะลดลงต่ำกว่า 8 บิต หรือ 256 สี ไม่เช่นนั้นจะทำให้รูปหมดสวยไปเลยก็ได้ ให้ทดลองดูครับ

การจัดเก็บไฟล์ด้วยฟอร์แมตที่แตกต่างกัน ก็จะได้ขนาดไฟล์ที่แตกต่างกัน ในเว็บเพจปัจจุบันเรานิยมใช้กันอยู่ 3 ฟอร์แมต คือ GIF, JPG และ PNG ซึ่งจะมีการบีบอัดข้อมูลให้มีขนาดเล็กลง แต่ถ้าเราใช้โปรแกรมช่วยบีบอัดลงอีกก็จะได้ขนาดเล็กลงไปอีก เช่น โปรแกรม Ulead Smart Saver Pro, JpegOptimizer หรือ GifClean เป็นต้น สำหรับท่านที่นิยมใช้โปรแกรม Photoshop ในการตกแต่งรูปภาพ ผมแนะนำให้อัพเกรดขึ้นเป็นเวอร์ชั่น 5.5 หรือสูงกว่า เพื่อจะได้ใช้คุณสมบัติของการบีบอัดภาพใช้ในเว็บเพจแบบเต็มร้อย รวมทั้งสนับสนุนการบีบอัดภาพในฟอร์แมต PNG ด้วย

image jpeg

ไฟล์สกุล *.jpg ขนาด 34.64 kb

images gif

ไฟล์สกุล *.gif ขนาด 9 kb

ส่วนใหญ่เราจะใช้แค่ 3 ฟอร์แมตนี้เท่านั้น ถ้าคุณสังเกตสักนิดว่า ไฟล์ที่มีขนาดเท่ากัน ไฟล์ GIF จะแสดงผลได้เร็วกว่า เพราะการคลายไฟล์ออกมาแสดงผลผ่านบราวเซอร์ทำได้เร็วกว่า ไฟล์ JPEG (ซึ่งมีกระบวนการบีบอัดที่ซับซ้อนกว่า) ดังนั้นถ้าไม่ใช่ไฟล์รูปภาพที่มีสีจำนวนมากแล้ว ให้จัดเก็บเป็นไฟล์ GIF จะดีที่สุดสำหรับโฮมเพจของคุณ แม้ว่าขนาดไฟล์จะโตกว่าไฟล์ JPEG ก็ตาม (รายละเอียดของภาพ (resolution) ไม่ควรเกิน 72 dpi)

image png 8

ไฟล์สกุล *.png-8 ขนาด 7.06 kb

image png 24

ไฟล์สกุล *.png-24 ขนาด 12.37 kb

สำหรับไฟล์ฟอร์แมต PNG เป็นการนำเอาคุณสมบัติที่ดีเด่นของไฟล์แบบ GIF + JPG มารวมกัน นั่นคือสนับสนุนสีได้มากกว่า 256 สีแบบ JPG แต่เทคโนโลยีการบีบอัดภาพให้ขนาดเล็กลงใช้แบบ GIF มีการแสดงผลแบบ Interlace และแน่นอนสามารถทำภาพแบบโปร่งใสได้ด้วย ที่นิยมใช้กันมีอยู่ 2 แบบคือ PNG-8, PNG-24 ต่างกันที่จำนวนบิตสีที่จัดเก็บ ลองเอาไปใช้กันดูนะครับ ในเว็บไซต์ของผมนี่ภาพที่แสดงผลในช่วงหลังๆ ก็มีแบบ PNG มากขึ้นแล้ว

2. จำกัดขนาดไฟล์ให้เหมาะสม

พยายามจำกัดขนาดของไฟล์ให้พอเหมาะ โดยเฉพาะในเรื่องความยาวในแต่ละหน้า ถ้ามีหลายหัวข้อและแต่ละหัวข้อก็มีข้อความยาว และภาพประกอบอีกมากมาย คุณก็ควรจะแบ่งซอยให้แต่ละหัวข้อไปอยู่กันคนละหน้า โดยมีหน้าแรกเป็นตัวเชื่อมโยงไปยังหน้าอื่นๆ ตัวอย่าง ดังเช่นในหัวข้อเมนู "HTML" นี้ผมแบ่งย่อยออกเป็นหลายหน้าตามหัวข้อย่อย บางหัวข้อย่อยก็ยังซอยออกเป็นหลายหน้าอีก โดยให้หน้าที่ 1 (ไฟล์ html.html) เป็นหน้าหลักของชุด แล้วเชื่อมโยงไปยังหน้าอื่นๆ ในทุกๆ หน้าสามารถย้อนกลับมาที่หน้าที่ 1 ได้เสมอ

3. ปิด Tag บ่อยๆ อย่าปล่อยไว้ห่างเกินไป

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

4. กำหนด Tag ผิด หรืออ้างผิดชื่อ

ส่วนใหญ่จะเป็นการอ้างถึงพวกไฟล์รูปภาพภายในไซต์ แล้วอ้างอิงผิดทำให้โหลดภาพไม่ได้ ซึ่งเป็นได้หลายกรณีเช่น ใส่ชื่อไฟล์ผิด (ตัวอักษรตัวเล็ก/ใหญ่ไม่ถูกต้อง) ปัญหานี้จะไม่เกิดขึ้นในเครื่องของผู้เขียนที่ใช้โปรแกรมใน Windows แต่เมื่อนำไปฝากไว้ในเซอร์ฟเวอร์ที่เป็น UNIX จะเกิดปัญหาทันที เพราะในโฮสต์ที่เป็นยูนิกซ์นั้น การใช้ตัวอักษรตัวเล็ก/ใหญ่ จะมีความหมายที่แตกต่างกัน เช่น Picture.jpg ต่างจาก picture.jpg หรือ picture.JPG ต่างจาก picture.jpg ดังนั้น บราวเซอร์จึงไม่สามารถแสดงผลได้ อีกกรณีหนึ่งคือ การเก็บไฟล์ในโฟลเดอร์ เมื่ออ้างถึงไฟล์จะมีความแตกต่างจากใน Windows คือ ในวินโดว์ปกติจะใช้รูปแบบเป็น images\picture.jpg หรืออาจใช้ images/picture.jpg ก็แสดงผลได้ถูกต้อง แต่ในยูนิกซ์ใช้ได้เฉพาะตัวหลังเท่านั้น อีกปัญหาคือใช้ชื่อไฟล์เป็นภาษาไทย ควรหลีกเลี่ยงนะครับ ใช้เป็นตัวเลขหรือภาษาอังกฤษดีกว่านะ

5. Link ตาย หาไฟล์ไม่เจอ

ถ้าคุณคลิก Link แล้วเกิด Error โดยบราวเซอร์แจ้งว่า 404 Not found นั่นแสดงว่า ไม่มีเพจที่อ้างถึง แสดงว่าคุณเขียน URL ของลิงค์นั้นผิดตรงไหนสักที่หนึ่ง หรือถ้าเป็นไซต์อื่นเขาอาจ จะย้ายไปที่ URL อื่นแล้วก็ได้ ทำให้ผู้ชมเกิดอาการหัวเสียพอๆ กับคลิก เข้าไปแล้วพบแต่ภาพของ รถแทรกเตอร์ หรือคนขุดดินไม่มีสิ้นสุด พร้อมกับคำว่า Under Construction ทำให้คนที่หลงเข้าไปได้รับความรู้ใหม่ว่า เพจนี้ยังสร้างไม่เสร็จ (หรืออาจจะยังไม่เริ่มสร้างด้วยซ้ำ) คุณควรหลีกเลี่ยง การทำจุดเชื่อมโยงลักษณะนี้ ถ้ายังไม่เสร็จก็อย่าพึ่งสร้างลิงค์เข้าไปดีกว่า

6. เสียงเพลงสร้างความสุขสันต์ หรือทำลายฝัน

การใส่เสียงเพลงเป็นแบคกราวด์ประกอบอาจจะเป็นฝันร้ายของผู้เข้าชมก็ได้ โดยเฉพาะเว็บเพจที่มีสีสันและรูปภาพมากมายเป็นพิเศษ จะยิ่งทวีความช้าเป็นเท่าทวีคูณ ถ้าคุณอยากใส่เสียงเพลงจริงๆ ก็น่าจะใส่โดยการสร้าง Console ควบคุมให้ผู้ชมคลิกเปิดฟังเอง ไม่ให้เล่นโดยอัตโนมัติ เพราะมันจะช้ามาก ถ้าเขาไม่อยากฟังก็ผ่านไปดีกว่า

สนับสนุนให้ Easyhome in Thailand อยู่รับใช้ท่านตลอดไป ด้วยการคลิกแบนเนอร์ไปเยี่ยมผู้สนับสนุนของเราด้วยครับ