เพิ่ม Loading Icon ให้เว็บไซต์ดูโหลดไม่นาน ทำได้อย่างไร ?

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

คำว่า Loading คืออะไร

Loading Screen คือ หน้าจอที่ขึ้นมาก่อน เพื่อแสดงให้เห็นว่า เว็บของเรากำลังโหลดอยู่ ก่อนที่เนื้อหาเว็บจริง จะแสดงขึ้นมาครับ ซึ่งสามารถที่จะแสดงเป็น ICON หรือ Progress Bar หรือ ตัวเลขเป็น เปอร์เซ็นก็ได้ครับ

เริ่มทำ Loading Screen

ในระบบ WordPress เอง ไม่มี Feature ที่ชื่อว่า Loading Screen โดยตรงครับ ดังนั้น เราจะใช้ Plugin เสริม ในการทำ Loading Screen ครับ

ปลั๊กอินนี้ชื่อว่า Loading Page with Loading Screen ครับ
https://wordpress.org/plugins/loading-page/

เวลาที่เราค้นหาใน WordPress ให้้ใช้คำว่า Loading Page ครับก็จะเจอกับ Plugin ตัวนี้ครับ

ตั้งค่า Loading Page Plugin

ต่อมาให้เราตั้งค่า เปิดใช้งาน plugins ก่อนครับ ค่าที่สำคัญมีดังนี้ครับ

Enable loading screen

เป็นการเปิดใช้งาน Loading Screen

Display a close screen button

แสดงปุ่มปิด Loading Screen

Display the loading screen on

ให้แสดง Loading Screen ที่จอขนาดไหนบ้าง ถ้าเราอยากให้แสดงเฉพาะ Desktop ก็ให้เลือก Greather than

Display the loading screen

การแสดง Loading Screen ว่าจะแสดงเมื่อไรบ้าง ให้แสดงตลอด หรือ ครั้งเดียวต่อ Session เป็นต้น

Display loading screen in

ให้แสดง Loading Screen ที่หน้าไหนบ้าง เช่น หน้า Homepage อย่างเดียว หรือว่า หน้า Pages อย่างเดียว หรือว่า เฉพาะหน้าที่ต้องการ คือ Specific Pages แบบนี้เราต้องระบุ ID ที่เป็นตัวเลขลงไปครับ

Exclude loading screen from

ไม่ต้องแสดง Loading Screen ที่หน้าไหนบ้าง ตรงนี้เราก็ต้องระบุ ID ของหน้าที่ต้องการเช่นกัน โดยคั่นด้วย คอมม่า (,) ครับ

Select the loading screen

ตัวเลือกนี้สำคัญมากครับ เพราะเป็นการเลือกรูปแบบที่จะแสดง Loading Screen ขึ้นมาครับ ถ้าเราเลือกเป็น Logo Screen ก็จะมี Icon ให้เราเลือกอีกทีหนึ่งครับ แต่ถ้าเราเลือกเป็น Bar Screen เราก็จะใช้เป็น Progress Bar แทนครับ นอกจากนั้น ถ้าเราเลือกเป็น Logo Screen เรายังสามารถที่จะอัพโหลด Logo ของเราเข้าไปได้อีกด้วยครับ

Select background color

เราสามารถเลือกสี Background ของ Loading Screen ได้ และ ถ้าเราเลือก Apply Transparency เราก็จะได้พื้นหลังที่ใสได้อีกด้วยครับ

Select image as background

เช่นเดียวกัน เราสามารถเลือกรูปที่เป็น Background ได้ครับ แล้วสามารถที่จะเลือกได้ว่า ให้แสดงแบบใด เช่น เราสามารถให้แสดงเป็นการเอารูปมาต่อกัน หรือว่า จะแสดงเป็นภาพเดียวใหญ่อยู่ตรงกลางก็ได้ครับ

Select foreground color

เราสามารถที่จะเลือกสีของตัวอักษร เปอร์เซ็นที่แสดงได้ตรงนี้ครับ

Additional seconds

ถ้าเราต้องการให้ Loading Screen แสดงต่อ เราสามารถที่จะใส่ วินาทีเพิ่มที่นี่ได้ครับ ส่วนมาก Options นี้เราจะใช้กับการทดสอบครับ

Include an ad, or your own block of code

เราสามารถใส่ Code ป้ายโฆษณาของเราลงไปได้ครับ ใส่เป็น Code HTML ได้เลย

Apply the effect on page

แสดง Effect ตอนโหลดเสร็จแล้ว ว่าจะให้หน้าที่โหลดเข้าจอมาอย่างไร ใน Version Free เลือกได้อันเดียวเท่านั้น

Display loading percent

ข้อนี้ตรงตัว ก็คือ เราสามารถที่จะเลือกได้ว่า เราจะให้แสดง เปอร์เซ็นหรือไม่

Disable the search in deep

ถ้ามีปัญหา เรื่อง Loading Screen ค้าง ให้เราเลือกตัวนี้เอาไว้ครับ

ทดสอบ Loading Screen

เมื่อเราตั้งค่าเสร็จแล้ว ก็อย่าลืมกด Save เพื่ออัพเดทการตั้งค่า จากนั้นไปที่หน้าที่เราต้องการจะทดสอบ แล้วกด Reload ได้เลยครับ

เทคนิคคือ เวลาที่เราทดสอบ เราควรจะใส่ Additional Seconds เอาไว้ด้วย เพราะว่า เราจะมองไม่ทันครับ

สรุป

การทำ Loading Screen ใน WordPress ทำได้ง่ายนิดเดียวครับ โดยการติดตั้ง Plugin ตัวเดียวเท่านั้นก็สามารถที่จะ ทำได้แล้ว และ ตัว Loading Screen ยังทำให้ผู้ใช้งาน รู้สึกว่าเว็บไซต์ของเรา มีการเคลื่อนไหว อยู่ตลอดเวลาด้วยครับ