วิธีลด HTTP Requests เพื่อให้หน้า WordPress โหลดเร็วขึ้น

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

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

❶ ตรวจว่าหน้าเว็บเรียกไฟล์อะไรบ้าง

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

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

① ตรวจคำขอที่เกิดก่อนเนื้อหาหลักแสดง

ไฟล์ CSS, JavaScript หรือฟอนต์บางรายการอาจทำให้หน้าเว็บรอก่อนแสดงเนื้อหาสำคัญ ให้เริ่มตรวจคำขอที่เกิดในช่วงต้นของการโหลด

② ตรวจแหล่งที่มาของไฟล์

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

③ แยกไฟล์จำเป็นกับไฟล์ที่ไม่ใช้

อย่าลบไฟล์เพียงเพราะมีรายการเยอะ ตรวจว่าหน้าหรือฟังก์ชันใดต้องใช้ไฟล์นั้นก่อนเสมอ

❷ จำกัดไฟล์ของปลั๊กอินไว้เฉพาะหน้าที่ใช้

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

① ตรวจปลั๊กอินที่เพิ่มฟังก์ชันเฉพาะหน้า

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

② ปิดปลั๊กอินที่ไม่ใช้งานอย่างปลอดภัย

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

③ ทดสอบหน้าอื่นหลังจำกัดไฟล์

การจำกัดไฟล์ผิดหน้าอาจทำให้ฟังก์ชันหายไป ตรวจหน้าอื่นที่ใช้ปลั๊กอินเดียวกันด้วยหลังปรับ

❸ ลดรูปภาพและไฟล์ที่ไม่จำเป็นในช่วงแรก

รูปภาพจำนวนมากอาจสร้างคำขอเพิ่ม โดยเฉพาะภาพที่อยู่ด้านล่างของหน้าและยังไม่จำเป็นต่อการเห็นเนื้อหาส่วนแรก

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

① ใช้ขนาดภาพให้ตรงตำแหน่ง

เลือกภาพที่เหมาะกับพื้นที่แสดงผล ไม่โหลดภาพขนาดใหญ่เต็มไฟล์หากตำแหน่งนั้นใช้ภาพขนาดเล็ก

② ตรวจภาพที่ซ้ำกัน

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

❹ ลดการเรียกใช้บริการภายนอก

แชตออนไลน์ แผนที่ วิดีโอฝัง โฆษณา เครื่องมือวิเคราะห์ และฟอนต์จากภายนอก อาจเพิ่มคำขอและการเชื่อมต่อไปยังโดเมนอื่น

① ทบทวนบริการที่ใช้งาน

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

② จำกัดบริการไว้เฉพาะหน้าที่ต้องใช้

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

③ โหลดเนื้อหาภายนอกเมื่อผู้ใช้ต้องการ

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

❺ ลดฟอนต์และรูปแบบตัวอักษรที่โหลดเกินจำเป็น

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

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

❻ อย่ารวมไฟล์ CSS และ JavaScript โดยไม่ทดสอบ

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

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

❼ ตั้งแคชเพื่อลดการขอไฟล์ซ้ำ

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

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

❽ ลำดับลด HTTP Requests อย่างปลอดภัย

① เลือกหน้าที่ต้องการปรับ

เริ่มจากหน้าที่มีผู้เข้าชมมากหรือมีปัญหาชัดเจน

② ตรวจรายการคำขอและแหล่งที่มา

ระบุไฟล์ที่ไม่จำเป็น โหลดช้า หรือมาจากปลั๊กอินและบริการภายนอก

③ ลดคำขอที่ไม่เกี่ยวกับหน้านั้น

จำกัดไฟล์ของปลั๊กอิน บริการภายนอก และฟอนต์ไว้เฉพาะหน้าที่ใช้

④ ทดสอบหน้าเดิมหลังปรับ

เปรียบเทียบผลก่อนและหลัง โดยใช้เครื่องมือและเงื่อนไขใกล้เคียงกัน

⑤ ตรวจฟังก์ชันสำคัญ

ทดสอบเมนู แบบฟอร์ม วิดีโอ แผนที่ และส่วนอื่นที่อาจพึ่งพาไฟล์ที่เปลี่ยน

ComSiam แนะนำให้ปรับทีละกลุ่มและเก็บผลการทดสอบไว้ หากลดจำนวนคำขอได้แต่หน้าเว็บทำงานผิดปกติ ให้ย้อนการเปลี่ยนแปลงล่าสุดก่อนดำเนินการต่อ

❾ สรุป: ลดคำขอที่ไม่จำเป็น ไม่ใช่ไล่ลดทุกคำขอ

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

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