สิ่งเล็กๆ ที่ต้องมี favicon.ico เพิ่มความเร็ว page load timeได้อีกนิด

favicon หรือ Site Icon สิ่งเล็กๆ ที่ต้องมี

favicon คืออะไร หลายคนรู้ และมีคำตอบในใจแล้ว แต่หลายคนก็ไม่รู้ว่าสิ่งที่เคยเห็นบ่อยๆ จนชินตา เรียกว่า favicon ถ้าลองเข้า web browser สักตัวหนึ่ง แล้วเปิดหน้าเว็บขึ้นมาสักเว็บหนึ่ง เอาง่ายๆ เว็บ 9wit.com ที่กำลังอ่านอยู่นี่แหละ บน tab ด้านบน จะมี icon เล็กๆ แสดงตัวอักษร 9w อยู่ ซึ่งสิ่งนี้แหละ เราเรียกมันว่า favicon

หน้าตาของ favicon บน browser tab ของ 9wit.com
หน้าตาของ favicon บน browser tab ของ 9wit.com

หลายคนที่ทำเว็บไซต์ ด้วย WordPress อาจจะไม่รู้ , หลงลืม หรือแม้ักระทั่งละเลย ที่จะใส่ icon เล็กๆ นี้มากับเว็บไซต์ด้วย เพราะเห็นว่าไม่สำคัญอะไร ซึ่งการใส่เจ้า favicon เข้ามาเป็นส่วนหนึ่งของเว็บไซต์ด้วย จะช่วยเพิ่มความเร็วในการโหลดหน้าเล็กน้อย เพราะ hosting ต้องเสียเวลาค้นหาไฟล์นี้ใน root directory เพื่อที่จะพบว่ามันไม่มี แล้วแจ้งกลับมาที่ browser และมันทำให้เกิดปัญหา error 404 กับเว็บไซต์ของเรา เพราะ browser หาไฟล์นี้ไม่เจอด้วย ไฟล์เล็กๆ ทำง่ายๆ ใส่ไว้เถอะครับ ไม่เสียหายอะไร แต่กลับมีผลดีต่อเว็บไซต์ของเรานะ

หน้าเว็บไซต์ ที่ไม่มีไฟล์ favicon.ico ที่ root directory
หน้าเว็บไซต์ ที่ไม่มีไฟล์ favicon.ico ที่ root directory

ไฟล์ favicon.ico เป็นไฟล์รูปภาพเล็กๆ ที่ใส่ไว้ใน root directory ของ เว็บไซต์เรา ซึ่งโดยปกติก็จะเป็น public_html โดยที่เราไม่ต้องระบุ หรือใส่ค่าใดๆ ไว้ในหน้าเว็บของเราเลย ตัว Browser จะจัดการเรียกใช้งานเอง ทุกๆ ครั้งที่เราเปิดหน้าเว็บไซต์ ซึ่งไฟล์นี้ควรจะมีขนาดที่เล็กมาก เพื่อจะได้ไม่เสียเวลาโหลด และส่วนมากจะแนะนำกันเอาไว้ที่ขนาดประมาณ 1 K เท่านั้น

เรียกไฟล์ตรงๆ จะพบกับ error แบบนี้
เรียกไฟล์ตรงๆ จะพบกับ error แบบนี้

ถ้าเว็บไซต์ของเราไม่มีไฟล์ favicon ระบุไว้ที่ไหนเลย ไม่ว่าจะ Root directory หรือในไฟล์ html ของหน้าเว็บเรา hosting จะส่งค่า error กลับมาที่ browser ซึ่งขึ้นอยู่กับ hosting นั้นๆ ด้วย อย่างของผม จะขึ้นเป็น error แบบนี้ แต่ status เป็น 200 คือ พบไฟล์นี้ เพียงแต่ว่า มันไม่ใช่ไฟล์ที่ browser ต้องการ เป็นการจัดการของ hosting เพื่อป้องกันปัญหา error 404 กับเว็บไซต์ของเรา ที่ไม่มีไฟล์ favicon ซึ่งจริงๆ มันไม่เกี่ยวกับเนื้อหา หรือบทความบนเว็บไซต์ของเราเลย

ใช้เวลาตามหา favicon ไปถึง 449.5ms
ใช้เวลาตามหา favicon ไปถึง 449.5ms

สมัยนี้ ความไวของเว็บไซต์ วัดกันเป็นเสี้ยววินาที ดังจะเห็นได้จากภาพนี้ ความเร็วของการตามหาไฟล์ favicon เพื่อจะพบว่า ไม่มีไฟล์นี้ใน root directory ของเรา ใช้เวลาไปเกือบครึ่งวินาที

ดูความเร็วกันชัดๆ ใช้เวลาไป 449.5ms
ดูความเร็วกันชัดๆ ใช้เวลาไป 449.5ms

ดูเวลาที่ใช้ตามหา favicon ที่ไม่มีตัวตนอีกครั้ง ใช้เวลาไปถึง 449.5ms เลยทีเดียว ใช้เวลาไปไม่ใช่น้อยๆเลย

hosting บางแห่ง ส่งค่ากลับมาเป็น error 404 แบบนี้
hosting บางแห่ง ส่งค่ากลับมาเป็น error 404 แบบนี้

Hosting บางแห่ง จะไม่มีการจัดการตรงนี้ เมื่อ browser ร้องของไฟล์ favicon.ico เมื่อโหลดเนื้อหาทุกๆ อย่างของเว็บเรามาแล้ว ก็จะถามหาไฟล์นี้ แต่ hosting ตอบกลับมาว่าไม่มี จึงกลายเป็น error 404 Not found แบบนี้ ข้างต้นเป็นตัวอย่างจากเว็บอื่น จึงขอปิดบัง URL เอาไว้

เปิดดูด้วย gtmatrix.com แดงเลยบรรทัดนี้
เปิดดูด้วย gtmatrix.com แดงเลยบรรทัดนี้

เมื่อทดสอบความเร็วด้วย gtmetrix.com ก็จะพบบรรทัดแดงๆ แบบนี้ เพราะ ระบบไม่สามารถหาไฟล์ favicon เจอ แต่ใช้เวลาตอบกลับว่าไม่เจอ เพียงแค่ 298.2ms เท่านั้น ซึ่งจะดีกว่านี้ถ้ามี favicon ทำให้ไม่มี error 404 ด้วย

favicon แบบแรก สร้างไฟล์ favicon.ico ไว้ที่ root directory
favicon แบบแรก สร้างไฟล์ favicon.ico ไว้ที่ root directory

ถ้าเว็บไซต์ของเรา ยังไม่มี favicon เลย เราจะมีตัวเลือกในการใส่ icon เล็กๆนี้ไว้ในเว็บไซต์ของเราแบบง่ายๆ 2 วิธี ซึ่งเราจะพูดถึงวิธีแรกก่อน นั่นก็คือ สร้างไฟล์ชื่อ favicon.ico แล้วนำไปวางไว้ที่ root directory ของเว็บเรา

เริ่มจากทำรูปโลโก้ของเว็บไซต์เรา เป็นสี่เหลี่ยมจตุรัสที่ขนาด 32×32 พิกเซล แล้ว save เป็นไฟล์ .gif เอาไว้ จากนั้นก็ค้นหาเว็บด้วย keyword : gif to favicon ซึ่งจะพบกับเว็บไซต์ที่ให้บริการอยู่มากมาย ลองเลือกเอาตามชอบ แล้วแปลงรูปไอคอนของเราเป็น .ico ซะ จากนั้นก็ใช้โปรแกรม FTP นำไฟล์ที่แปลงได้ ไปใส่ไว้ใน root directory ของเว็บไซต์เรา ซึ่งปกติก็จะเป็น public_html แต่ถ้าเว็บใครมี sub directory ด้วย ก็ต้องวางไว้ให้ถูกที่ถูกทางด้วย

สำหรับไฟล์ไอคอน favicon.ico ที่เรานำไปวางไว้เรียบร้อยแล้วนั้น เราไม่จำเป็นที่จะต้องใส่ code อะไรใดๆ ไว้ที่ไหนเลย เพราะเป็นหน้าที่ของ browser ที่จะจัดการกับไฟล์นี้เอง เพราะถ้าตัว browser ดึงข้อมูลเว็บไซต์ของเรา ไปจนครบทั้งหน้าแล้ว และไม่พบว่ามีการประกาศไอคอน ไว้ที่ไหนเลยในหน้านั้น browser ก็จะถามหาไฟล์ favicon.ico เอง โดยอัตโนมัติ ซึ่งเราได้เตรียมเอาไว้ให้แล้ว ก็จะไม่เกิด error 404 อีกเลย

วางไฟล์ favicon.ico ไว้ที่ root directory แล้ว icon ก็จะปรากฏบน tab ด้านบนแบบนี้
วางไฟล์ favicon.ico ไว้ที่ root directory แล้ว icon ก็จะปรากฏบน tab ด้านบนแบบนี้
เปิด tab ใหม่บน browser firefox จะเห็น top sites icon เว็บ 9wit.com ด้วย
เปิด tab ใหม่บน browser firefox จะเห็น top sites icon เว็บ 9wit.com ด้วย

เมื่อเราเปิด tab ใหม่ไม่ว่า browser ไหนๆ เดี๋ยวนี้จะมี top sites หรือ เว็บที่เราเปิดดูบ่อยๆ ขึ้นเป็น icon ไว้ให้เราด้วย เพื่อให้เราคลิกเข้าไปดูได้เลย ไม่ต้องมานั่งพิมพ์ชื่อ URL ยาวๆ ให้เสียเวลา ซึ่ง favicon ของเราที่ใส่เข้าไป ก็จะมาปรากฏด้วย ในภาพนี้ จะเห็นว่า icon ของ 9wit.com ดูแตกๆ นั่นก็เพราะตัว browser ใช้ไฟล์ขนาด 32×32 แต่ผมสร้างไฟล์ favicon.ico ไว้ที่ 16×16 เพราะต้องการให้มีขนาดประมาณ 1k เพื่อความเร็วในการ load ไฟล์ ซึ่งขนาดไฟล์จริงๆ อยู่ที่ 1.1k และถ้าใครไม่คิดว่าการโหลดเว็บไซต์ได้เร็วๆ ไม่สำคัญ ก็พิจารณาตามความเหมาะสมนะครับ

ส่วน icon ข้างๆ นั้น เป็นเว็บไซต์ที่หลายคนรู้จักอยู่แล้ว ซึ่ง icon ใหญ่เต็มที่ โดดเด่นกว่า icon ของ facebook ข้างๆ อีกนั่นก็เพราะว่า เว็บไซต์นี้ ไม่ได้ใช้ไฟล์ favicon.ico และมีขนาดไฟล์ถึง 100×100 พิกเซล เดี๋ยวจะมาพูดถึงวิธีสร้าง icon ใหญ่ๆ เต็มตา แบบนี้อีกที

เมื่อใส่ favicon.ico ไว้ในเว็บไซต์ 9wit.com แล้ว
เมื่อใส่ favicon.ico ไว้ในเว็บไซต์ 9wit.com แล้ว
load time สำหรับ icon เล็กๆ นี้ลดลงแล้ว
load time สำหรับ icon เล็กๆ นี้ลดลงแล้ว

เมื่อเราใส่ไฟล์ favicon.ico ไว้ในเว็บไซต์เราเรียบร้อยแล้วก็จะไม่เกิด error 404 อีกเลย และเวลาที่ใช้ไป ก็เหลือเพียง 188.3ms จากตอนแรกที่เราไม่มีไฟล์ favicon แล้วปล่อยให้ browser เคว้งคว้าง ไม่ได้อะไรกลับไป ใช้เวลาโหลดความว่างเปล่าถึง 449ms

วิธีใส่ Site Icon ใน WordPress
วิธีใส่ Site Icon ใน WordPress

การใส่ favicon อีกแบบนึงใน WordPress ซึ่งง่ายไม่แพ้กัน เพราะตัว WordPress เองได้เตรียมความพร้อมเอาไว้ให้เราแล้ว แต่เราจะต้องเตรียมรูป icon ของเว็บไซต์เราไว้ให้พร้อมก่อน และคำแนะนำของ WordPress คือให้เตรียมไฟล์ขนาด 512×512 ซึ่งเป็นขนาดภาพที่ใหญ่มาก และขนาดไฟล์ก็น่าจะโตพอสมควรทีเดียว

ถ้าหากจะเจาะลึกลงไปถึงขนาดภาพที่เหมาะสม จะต้องพูดถึง Browser ของค่ายต่างๆ iphone และ android อีก ซึ่ง icon เล็กๆ ตัวนี้ จะเป็นเพียงแค่ไอคอน แต่ปัญหาเรื่องการนำไปใช้ ความเข้ากันมีไม่น้อยเลย บางเว็บไซต์ก็จะลงทุนลงแรง ปรับ icon ให้เข้ากับความต้องการของ มือถือ และ browser ต่างๆ แบบสุดๆ แต่อีกไม่น้อย ที่เลือกไม่ใส่ใจ ขอแค่มี icon เว็บไซต์บ้างก็พอแล้ว อย่าง 9wit.com เป็นต้น ซึ่งรายละเอียดลึกๆ เหล่านั้น ขอไม่กล่าวถึง เนื่องจากเนื้อหาจะเกินขอบเขตการเรียนรู้แบบค่อยๆ ก้าว (เนื้อหาก้าวกระโดด เราจะไม่กล่าวถึง)

ดังนั้น เพื่อไม่ให้ขนาดไฟล์ใหญ่เกินไป ขอใช้ขนาดภาพเพียง 100×100 ก็พอ เพราะ browser firefox ใช้ icon ขนาด 96 พิกเซล สำหรับ top site ส่วน browser อื่นๆ ขอเลือกที่จะมองข้าม เพราะส่วนตัวเห็นว่าไฟล์ 100×100 ก็ใหญ่พอแล้วสำหรับ icon ตัวนี้

จากหน้าจัดการเว็บไซต์ เมนูด้านซ้ายมือ ไปที่ Appearance -> Customize -> Site Identity ก็จะพบกับ Site Icon ให้เรา เลือกรูป icon ของเรา เพื่อ upload ภาพได้เลย ง่ายมากเลยใช่ไหมล่ะ

เอาขึ้นเว็บไปเรียบร้อยแล้ว Site Icon ขนาด 100x100 พิกเซล
เอาขึ้นเว็บไปเรียบร้อยแล้ว Site Icon ขนาด 100×100 พิกเซล
ที่อยู่ URL ของไฟล์ Site Icon ของเรา เรียกดูตรงๆ ได้เลย
ที่อยู่ URL ของไฟล์ Site Icon ของเรา เรียกดูตรงๆ ได้เลย

เมื่อเราใส่ Site Icon หรือ favicon ของเว็บไซต์เราด้วยวิธีนี้ WordPress ก็จะแทรก code html ลงในหน้าเว็บของเราด้วย เพื่อบอกให้ Browser รู้ว่า ถ้าต้องการไฟล์ icon ให้ดึงภาพนี้ไปใช้งานได้เลย ดังนั้น Browser ก็จะไม่ถามหา favicon.ico อีกเลย ซึ่งถ้าเราไม่ได้สร้างไฟล์นี้เอาไว้ใน root directory ก็ไม่ต้องกังวลไปว่าจะเกิด error 404 อีก

กลายเป็น icon ใหญ่ๆ โดดเด่นแล้ว
กลายเป็น icon ใหญ่ๆ โดดเด่นแล้ว

เมื่อเราทำภาพ icon ที่มีขนาดใหญ่แล้ว ตัว Browser จะย่อลงมาเป็นขนาดที่ต้องการเอง เราไม่ต้องกังวลเลย ดังนั้น ถ้าใครจะสร้างภาพขนาด 512×512 ตามคำแนะนำของ WordPress ก็ดีเลย ถ้าไม่กลัวความเร็วในการ Load เว็บไซต์นะ ลองชั่งใจแล้วเลือกดูตามความชอบ แต่บอกไว้นิดนึงว่า google เอง ก็มีเพียงแค่ favicon.ico ขนาด 32×32 พิกเซลเท่านั้นเอง ดังนั้น เลือกให้ดี อยากใช้แบบไหน ก่อนลงมือ

ใช้เวลาโหลด Site Icon 172.1ms
ใช้เวลาโหลด Site Icon 172.1ms

เพื่อเพื่มความสับสนให้กับการเลือกใช้อีก 1 ข้อ โดยใช้กราฟ Waterfall ของ gtmetrix.com มาอ้างอิง จะเห็นความเร็วในการโหลด และขนาดภาพ เนื่องจากภาพ Site Icon ของเรามีขนาด 100×100 พิกเซล และเป็นไฟล์ PNG มีขนาดเล็กเพียง 854Byte ไม่ถึง 1K ด้วยซ้ำ ทำให้ใช้เวลาในการโหลดสั้นลงกว่า favicon.ico ขนาด 32×32 ก่อนหน้านี้อีก ทีนี้ตัดสินใจได้รึยังเอ่ย ว่าจะใช้ภาพแบบไหน สำหรับเว็บไซต์ครับ

Leave a Comment

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องที่ต้องการถูกทำเครื่องหมาย *

11 − three =

This site uses Akismet to reduce spam. Learn how your comment data is processed.