วิธีตั้งค่า Preload ให้ไฟล์สำคัญบน WordPress โหลดก่อน

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

อย่างไรก็ตาม การตั้ง Preload ให้ไฟล์ทุกชนิดไม่ได้ทำให้เว็บไซต์เร็วขึ้นเสมอไป เพราะไฟล์ที่ไม่จำเป็นอาจแย่งแบนด์วิดท์จากทรัพยากรสำคัญอื่น บทความนี้อธิบายวิธีเลือกไฟล์และตั้งค่าอย่างระมัดระวังบน WordPress

❶ เลือกไฟล์ที่ควรตั้ง Preload

เริ่มจากตรวจว่าหน้าเว็บกำลังรอไฟล์ใดก่อนแสดงเนื้อหาหลัก แล้วเลือกเฉพาะไฟล์ที่จำเป็นต่อการแสดงผลช่วงแรก

① รูปภาพหลักที่เห็นทันที

รูปภาพเด่น แบนเนอร์ หรือภาพขนาดใหญ่ที่อยู่ด้านบนของหน้า อาจเหมาะกับการพิจารณา Preload หากเบราว์เซอร์ค้นพบภาพนั้นช้าหรือภาพมีผลต่อการแสดงผลส่วนแรกของหน้า

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

② ฟอนต์ที่ใช้กับข้อความส่วนแรก

ฟอนต์ที่จำเป็นต่อหัวเรื่องหรือข้อความหลักอาจเหมาะกับการโหลดล่วงหน้า โดยเฉพาะเมื่อฟอนต์ถูกเรียกผ่านไฟล์ CSS และเบราว์เซอร์ค้นพบไฟล์ได้ช้า

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

③ ไฟล์สำคัญอื่นตามผลตรวจ

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

❷ ตรวจหาไฟล์ที่โหลดช้าก่อนตั้งค่า

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

① ตรวจจากรายงานความเร็วเว็บไซต์

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

② ตรวจจาก Developer Tools

ในเบราว์เซอร์ เปิด Developer Tools แล้วดูรายการไฟล์ในแถบ Network โดยสังเกตว่าไฟล์ใดเริ่มโหลดช้า ใช้เวลานาน หรือถูกดาวน์โหลดซ้ำ การตรวจนี้ช่วยแยกได้ว่าไฟล์นั้นควรตั้ง Preload หรือควรแก้ที่ต้นเหตุ เช่น ขนาดไฟล์ ตำแหน่งเรียกใช้ หรือการตั้งค่าแคช

❸ ตั้งค่า Preload ใน WordPress

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

① ตรวจว่ามีการตั้งค่าเดิมหรือไม่

ก่อนเพิ่มการตั้งค่า ให้ตรวจในปลั๊กอินแคช ธีม และเครื่องมือเพิ่มประสิทธิภาพที่ใช้อยู่ หากมีหลายระบบสั่งให้โหลดไฟล์เดียวกัน อาจเกิดคำขอซ้ำหรือการจัดลำดับการโหลดที่ไม่เหมาะสม

เลือกจัดการจากระบบเดียวให้ชัดเจน และหลีกเลี่ยงการเพิ่มปลั๊กอินใหม่เพียงเพื่อใส่ Preload หากเครื่องมือเดิมทำหน้าที่นี้ได้อยู่แล้ว

② เพิ่มเฉพาะไฟล์ของหน้าที่ต้องการ

หากระบบรองรับการกำหนดไฟล์แยกตามหน้า ให้ตั้ง Preload เฉพาะหน้าที่ใช้ไฟล์นั้น เช่น ฟอนต์หรือภาพหลักของหน้าแรก ไม่ควรสั่งให้ทุกหน้าดาวน์โหลดไฟล์เดียวกันตั้งแต่ต้น หากมีเพียงบางหน้าที่จำเป็นต้องใช้

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

③ ตั้งชนิดทรัพยากรให้ตรงกับไฟล์

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

ถ้าไม่แน่ใจว่าปลั๊กอินจัดการรายละเอียดเหล่านี้ให้อัตโนมัติหรือไม่ ให้ตรวจเอกสารของปลั๊กอินและผลใน Network ก่อนใช้งานจริง

❹ ทดสอบหลังเปิด Preload

หลังเพิ่มการตั้งค่า ให้ล้างแคชแล้วทดสอบหน้าเดิมอีกครั้ง โดยเปรียบเทียบกับค่าก่อนปรับ ทั้งบนมือถือและคอมพิวเตอร์

① ตรวจว่าไฟล์โหลดเพียงครั้งเดียว

ดูใน Network ว่าไฟล์ที่ตั้ง Preload ถูกดาวน์โหลดก่อนเวลาที่จำเป็น และถูกนำไปใช้จริง หากพบว่าไฟล์เดียวกันถูกเรียกซ้ำ ให้ตรวจ URL ชนิดทรัพยากร และการตั้งค่าการร้องขอข้ามโดเมน

② เปรียบเทียบผลก่อนและหลัง

ตรวจเวลาโหลดและการแสดงผลส่วนแรกของหน้า รวมถึงรายงาน Core Web Vitals อย่าดูเพียงคะแนนรวม ให้สังเกตด้วยว่ารูปภาพหรือข้อความหลักแสดงเร็วขึ้นจริงหรือไม่

หากผลแย่ลง ให้ยกเลิกไฟล์ที่เพิ่มล่าสุด ล้างแคช แล้วทดสอบใหม่ทีละรายการ วิธีนี้ช่วยหาว่าการตั้งค่าใดเป็นสาเหตุ

❺ ข้อผิดพลาดที่ควรหลีกเลี่ยง

① ตั้ง Preload มากเกินไป

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

② โหลดไฟล์ที่ไม่ได้ใช้บนหน้านั้น

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

③ ใช้ Preload แทนการแก้ไฟล์ใหญ่

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

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