วิธีสร้างคำขอ HTTP น้อยลงใน WordPress (11 เคล็ดลับ)

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

โชคดีที่มันเป็นไปได้ที่จะลดจำนวนลง ซึ่งนี่คือเนื้อหาของโพสต์นี้

ข้อมูลเบื้องต้นเกี่ยวกับคำขอ HTTP

เมื่อใดก็ตามที่ผู้ใช้เยี่ยมชมเว็บไซต์ของคุณ เบราว์เซอร์ของพวกเขาจะต้องดาวน์โหลดทรัพยากรจากเซิร์ฟเวอร์ของคุณ ในการสื่อสารกับเบราว์เซอร์จะส่งคำขอด้วย HTTP (Hypertext Transfer Protocol)

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

ต่อไปนี้เป็นขั้นตอนที่เกี่ยวข้องเมื่อมีคนท่องอินเทอร์เน็ต:

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

ทำไมคุณอาจต้องการให้ไซต์ WordPress สร้างคำขอ HTTP น้อยลง

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

ตามกฎคร่าวๆ คำขอ HTTP จำนวนมากจะทำให้ความเร็วของหน้าเว็บช้าลง หากมีแหล่งข้อมูลเพิ่มเติมให้ดาวน์โหลดก่อนที่จะแสดงเพจ ผู้ใช้จะต้องรอนานเพื่อดูเนื้อหา

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

เรื่องจริงนั้นซับซ้อนกว่าเล็กน้อย เนื่องจากคำขอ HTTP ไม่เท่ากันทั้งหมด คำขอ HTTP ขนาดใหญ่และโหลดช้า 1 รายการอาจมีผลกระทบมากกว่าคำขอ HTTP ขนาดเล็ก 5 รายการที่โหลดเร็ว แต่ตามกฎคร่าวๆ – คำขอ HTTP น้อยลง = เว็บไซต์โหลดเร็วขึ้น

การลดคำขอ HTTP บนเว็บไซต์จะช่วยปรับปรุง Core Web Vitals โดยเฉพาะคะแนน Largest Content Paint (LCP) ในทางกลับกัน สิ่งนี้สามารถปรับปรุงประสบการณ์ผู้ใช้ (UX) เนื่องจากผู้เข้าชมจะเห็นเนื้อหาได้รวดเร็วยิ่งขึ้น

วิธีทดสอบคำขอ HTTP ของเว็บไซต์ของคุณ

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

ในการทำเช่นนี้ คุณสามารถใช้เครื่องมือวิเคราะห์ประสิทธิภาพ เช่น GTmetrix เริ่มต้นด้วยการป้อน URL เว็บไซต์ของคุณแล้วกด Test your site :

คุณจะได้รับรายงานประสิทธิภาพที่มีข้อมูลเกี่ยวกับขนาดหน้าเว็บของคุณและจำนวนคำขอทั้งหมด หากต้องการดูข้อมูลนี้ ให้เลื่อนลงไปที่ Page Details :

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

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

ดังที่คุณเห็นในแผนภูมิด้านบน คำขอ HTTP แต่ละรายการมีขนาดแตกต่างกันและใช้เวลาในการโหลดต่างกัน

หากคุณต้องการผลตอบแทนสูงสุดจากความพยายามของคุณ ให้พยายามเน้นที่การกำจัดคำขอ HTTP ที่ใหญ่ที่สุดและช้าที่สุด

นอกจากนี้ คุณควรมุ่งเน้นที่การลบคำขอ HTTP ของบุคคลที่สาม ( ทรัพยากรที่ไซต์ของคุณโหลดจากเซิร์ฟเวอร์ของผู้อื่น เช่น สคริปต์ Google Analytics ) คำขอของบุคคลที่สามเหล่านี้ต้องการการค้นหา DNS เพิ่มเติมและมีข้อเสียด้านประสิทธิภาพอื่นๆ

วิธีสร้างคำขอ HTTP น้อยลงใน WordPress และเพิ่มความเร็วไซต์ของคุณ (11 เคล็ดลับ)

เมื่อคุณทดสอบเว็บไซต์ของคุณแล้ว ก็ถึงเวลาลดคำขอ HTTP

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

1. ลบปลั๊กอินที่ไม่จำเป็น
2. DEFER-BLOCKING JAVASCRIPT และ/หรือ DELAY JAVASCRIPT EXECUTION
3. สคริปต์โหลดแบบมีเงื่อนไข
4. ลดคำขอของบุคคลที่สาม
5. เพิ่มประสิทธิภาพภาพของคุณ
6. ใช้การโหลดแบบขี้เกียจ
7. ใช้กองแบบอักษรของระบบ
8. รวม CSS และ JAVASCRIPT
9. ใช้ CSS SPRITES เพื่อรวมรูปภาพ
10. ลดรหัสไซต์ของคุณให้เล็กลง
11. ปิดการใช้งานอีโมจิ

1. ลบปลั๊กอินที่ไม่จำเป็น

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

หากต้องการวิเคราะห์คำขอปลั๊กอิน ให้ค้นหา "ปลั๊กอิน" ในรายงาน GTmetrix Waterfall สิ่งนี้จะแสดงเฉพาะคำขอ HTTP ที่มาจากโฟลเดอร์ wp-content/plugins ของคุณ:

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

2. เลื่อน JavaScript ที่ปิดกั้นการเรนเดอร์ และ/หรือ ชะลอการทำงานของ JavaScript

หากคุณต้องการส่งคำขอ HTTP น้อยลงและเพิ่มประสิทธิภาพคำขอ HTTP ของคุณ การเน้นที่ JavaScript ก็เป็นอีกกลยุทธ์ที่ยอดเยี่ยม

มีสองวิธีหลักในการเพิ่มประสิทธิภาพการโหลด JavaScript ของไซต์ของคุณ:

1. เลื่อน JavaScript ที่ปิดกั้นการแสดงผล
2. ชะลอการทำงานของ JavaScript

เลื่อน JavaScript ที่ปิดกั้นการแสดงผล

การเลื่อน JavaScript ที่ปิดกั้นการเรนเดอร์จะไม่ลบคำขอ HTTP ด้วยตัวเอง แต่จะทำให้แน่ใจว่าการโหลด JavaScript ของไซต์ของคุณไม่ได้ปิดกั้นคำขอ HTTP ที่สำคัญกว่า

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

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

ในการดำเนินการนี้ คุณสามารถใช้ปลั๊กอินเฉพาะคุณลักษณะ เช่น ปลั๊กอิน Async JavaScript ฟรี

หรือปลั๊กอินประสิทธิภาพ/การแคชทั่วไปจำนวนมากก็มีคุณสมบัตินี้เช่นกัน รวมถึง WP Rocket และ FlyingPress

คุณยังสามารถตั้งค่านี้ด้วยตนเองในโค้ดของไซต์ของคุณ หากคุณสะดวกใจที่จะทำเช่นนั้น

หากต้องการใช้แอตทริบิวต์ defer คุณเพียงแค่ต้องเปิดไฟล์ functions.php และค้นหาแท็ก <script> สำหรับทรัพยากร ที่นี่ แทรกแอตทริบิวต์เลื่อน:

 <script src="resource.js" defer></script>

นี่คือลักษณะของแอตทริบิวต์ async:

 <script src="resource.js" async></script>

โดยทั่วไป วิธีที่ดีที่สุดคือใช้แอตทริบิวต์ async อย่างไรก็ตาม คุณจะต้องใช้แอตทริบิวต์ defer เมื่อสคริปต์ใช้สคริปต์อื่น

ชะลอการทำงานของ JavaScript

หากคุณต้องการให้คำขอ HTTP น้อยลงสำหรับการโหลดหน้าเว็บครั้งแรก กลยุทธ์ยอดนิยมอีกวิธีหนึ่งคือการชะลอการดำเนินการ JavaScript บางส่วน/ทั้งหมดของไซต์ของคุณ จนกว่าผู้ใช้จะโต้ตอบ

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

การย้ายคำขอ HTTP เหล่านี้ไปที่การเข้าชมในภายหลัง คุณสามารถสร้างคำขอ HTTP น้อยลงสำหรับการโหลดครั้งแรก และเพิ่มความเร็วให้กับเมตริกที่เน้นประสบการณ์ผู้ใช้ เช่น Largest Contentful Paint

ในการตั้งค่านี้ คุณสามารถใช้หนึ่งในปลั๊กอินประสิทธิภาพเหล่านี้:

• ดับบลิวพี ร็อคเก็ต
• ฟลายอิ้งเพรส
• ประสิทธิภาพการทำงาน

ลักษณะที่ปรากฏใน FlyingPress มีดังนี้ คุณสามารถหน่วงเวลาสคริปต์ ทั้งหมด ของคุณยกเว้นสคริปต์ที่เลือกหรือหน่วงเวลา เฉพาะ สคริปต์ที่เลือก:

3. โหลดสคริปต์แบบมีเงื่อนไข

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

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

สำหรับตัวเลือกฟรี คุณยังสามารถพิจารณาปลั๊กอินการล้างข้อมูลสินทรัพย์

โหลดปลั๊กอินแบบมีเงื่อนไข จากนั้นเรียกใช้เว็บไซต์ของคุณผ่าน GTmetrix อีกครั้ง หากคุณยังสังเกตเห็นคำขอ HTTP ที่มากเกินไป ก็ถึงเวลาดำเนินการตามวิธีถัดไป

4. ลดคำขอของบุคคลที่สาม

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

ต่อไปนี้เป็นตัวอย่างสคริปต์ของบุคคลที่สาม:

• วิดีโอ YouTube แบบฝัง
• สคริปต์ติดตามของ Google Analytics
• Google แบบอักษร
• โฆษณาของบุคคลที่สาม

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

สำหรับบริการต่างๆ เช่น Google Analytics และ Google Fonts คุณสามารถลองโฮสต์บริการเหล่านี้ในเครื่องโดยใช้ปลั๊กอินเหล่านี้:

• OMGF – โฮสต์ Google Fonts ในเครื่อง
• CAOS – โฮสต์ Google Analytics ในเครื่อง

5. ปรับแต่งรูปภาพของคุณให้เหมาะสม

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

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

หนึ่งในเครื่องมือเพิ่มประสิทธิภาพภาพที่ดีที่สุดคือ Optimole ปลั๊กอิน freemium นี้นำเสนอคุณสมบัติการปรับแต่งภาพที่รวมทุกอย่างไว้ในหนึ่งเดียว ได้แก่:

• ให้บริการภาพที่ปรับเปลี่ยนได้ซึ่งปรับให้เหมาะกับอุปกรณ์ของผู้ใช้แต่ละคน
• การบีบอัดภาพ
• การปรับขนาดรูปภาพ
• การแปลงรูปภาพเป็นรูปแบบที่เหมาะสมที่สุด
• การแสดงภาพผ่านเครือข่ายการส่งเนื้อหาในตัว (CDN)

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

6. ใช้การโหลดแบบขี้เกียจ

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

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

WordPress 5.5 เพิ่มการโหลดแบบ Lazy Loading ในตัวสำหรับรูปภาพโดยใช้การโหลดแบบ Lazy Loading ของเบราว์เซอร์เนทีฟ

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

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

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

คุณยังสามารถปรับพฤติกรรมการโหลดแบบ Lazy Loading เพิ่มเติมจากการตั้งค่าของปลั๊กอิน

7. ใช้ชุดแบบอักษรของระบบ

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

ด้วยเหตุผลนี้ คุณควรจำกัดจำนวนฟอนต์แบบกำหนดเองที่คุณใช้อยู่

หรือคุณสามารถยึดติดกับชุดแบบอักษรของระบบ ซึ่งใช้แบบอักษรดั้งเดิมจากระบบปฏิบัติการของผู้เยี่ยมชม

ธีมบางอย่าง เช่น Neve, GeneratePress หรือ Astra ให้คุณเปลี่ยนกลับเป็นแบบอักษรของระบบ อย่างไรก็ตาม คุณยังสามารถเปลี่ยนกองฟอนต์ของคุณได้ด้วย CSS

8. รวม CSS และ JavaScript

อีกวิธีในการส่งคำขอ HTTP น้อยลงสำหรับไฟล์ CSS และ JavaScript คือการรวมไฟล์ CSS และ JavaScript แยกกันเป็นสไตล์ชีตหรือไฟล์เดียว

ด้วยปลั๊กอิน Autoptimize คุณจะสามารถรวมไฟล์ไซต์ได้อย่างง่ายดายในไม่กี่ขั้นตอน:

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

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

หมายเหตุ – ในขณะที่การรวม CSS และ JavaScript เป็นวิธีที่แน่นอนในการลดคำขอ HTTP แต่อาจไม่ส่งผลกระทบต่อประสิทธิภาพการทำงานจริง ทั้งนี้ขึ้นอยู่กับโฮสต์เว็บของคุณ

หากโฮสต์ของคุณใช้ HTTP/2 หรือใหม่กว่า (ซึ่งโฮสต์ส่วนใหญ่ใช้ในปัจจุบัน) การ ไม่ รวมไฟล์อาจดีกว่าเพราะ HTTP/2 รองรับการมัลติเพล็กซ์ (ซึ่งหมายความว่าสามารถดาวน์โหลดไฟล์หลายไฟล์จากเซิร์ฟเวอร์โดยไม่ต้องร้องขอเซิร์ฟเวอร์หลายรายการ)

หากคุณไม่แน่ใจว่าโฮสต์ของคุณใช้ HTTP/2 หรือไม่ คุณสามารถติดต่อฝ่ายสนับสนุนได้

9. ใช้ CSS sprites เพื่อรวมรูปภาพ

ในเว็บไซต์ WordPress ทั่วไป ทุกภาพจะเป็นไฟล์เดี่ยวๆ หากมีรูปภาพหลายรูปในหน้าเดียว เบราว์เซอร์จะส่งคำขอ HTTP หลายรายการ อย่างไรก็ตาม CSS sprite จะรวมรูปภาพเหล่านี้เป็นไฟล์เดียว

CSS Sprites Tool เป็นซอฟต์แวร์ฟรีสำหรับสร้างและปรับแต่ง CSS sprites ในการเริ่มต้น ให้วางภาพของคุณลงในช่องอัปโหลด:

เมื่อคุณสร้าง CSS sprite แล้ว ให้เพิ่มไปยัง WordPress Media Library จากนั้น คุณสามารถใช้โค้ด HTML และ CSS ที่สร้างขึ้นเพื่อวางแต่ละภาพบนเว็บไซต์ของคุณ

10. ลดขนาดโค้ดของไซต์ของคุณ

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

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

วิธีที่ง่ายที่สุดในการลดขนาดโค้ดของเว็บไซต์ WordPress คือการใช้ปลั๊กอิน เช่น ปลั๊กอิน Autoptimize ที่เรากล่าวถึงก่อนหน้านี้

ปลั๊กอินแคชของ WordPress ส่วนใหญ่ยังมีฟีเจอร์การย่อโค้ด เช่น WP Rocket, FlyingPress, WP Fastest Cache และอื่นๆ

หรือหากคุณใช้ CDN ของ Cloudflare คุณสามารถให้ Cloudflare ย่อขนาดโค้ดให้คุณได้

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

11. ปิดใช้งานอิโมจิ

โดยค่าเริ่มต้น อีโมจิของ WordPress จะเพิ่มคำขอ HTTP พิเศษให้กับไซต์ของคุณ หากต้องการกำจัดคำขอ HTTP อีกหนึ่งรายการ คุณสามารถปิดใช้งานอีโมจิของ WordPress ได้

สำหรับตัวเลือกที่ง่ายที่สุด คุณเพียงแค่ติดตั้งปลั๊กอิน Disable Emojis แบบน้ำหนักเบา

หรือคุณสามารถเพิ่มโค้ดนี้ในไฟล์ functions.php ของธีมลูกของคุณหรือปลั๊กอินตัวจัดการโค้ด เช่น Code Snippets:

 /** * Disable the emojis */ function disable_emojis() { remove_action( 'wp_head', 'print_emoji_detection_script', 7 ); remove_action( 'admin_print_scripts', 'print_emoji_detection_script' ); remove_action( 'wp_print_styles', 'print_emoji_styles' ); remove_action( 'admin_print_styles', 'print_emoji_styles' ); remove_filter( 'the_content_feed', 'wp_staticize_emoji' ); remove_filter( 'comment_text_rss', 'wp_staticize_emoji' ); remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' ); add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' ); add_filter( 'wp_resource_hints', 'disable_emojis_remove_dns_prefetch', 10, 2 ); } add_action( 'init', 'disable_emojis' ); /** * Filter function used to remove the tinymce emoji plugin. * * @param array $plugins * @return array Difference betwen the two arrays */ function disable_emojis_tinymce( $plugins ) { if ( is_array( $plugins ) ) { return array_diff( $plugins, array( 'wpemoji' ) ); } else { return array(); } } /** * Remove emoji CDN hostname from DNS prefetching hints. * * @param array $urls URLs to print for resource hints. * @param string $relation_type The relation type the URLs are printed for. * @return array Difference between the two arrays. */ function disable_emojis_remove_dns_prefetch( $urls, $relation_type ) { if ( 'dns-prefetch' == $relation_type ) { /** This filter is documented in wp-includes/formatting.php */ $emoji_svg_url = apply_filters( 'emoji_svg_url', 'https://sworg/images/core/emoji/2/svg/' ); $urls = array_diff( $urls, array( $emoji_svg_url ) ); } return $urls; }

หลังจากปฏิบัติตามคำแนะนำเหล่านี้แล้ว คุณควรมีไซต์ที่มีคำขอ HTTP น้อยลง!

สร้างคำขอ HTTP น้อยลงบนเว็บไซต์ของคุณ 🎯

ตามกฎคร่าวๆ ยิ่งเว็บไซต์ของคุณมีคำขอ HTTP มากเท่าใด ก็ยิ่งโหลดช้าลงเท่านั้น สิ่งนี้อาจส่งผลเสียต่อประสบการณ์ผู้ใช้ (UX) ของไซต์ของคุณ ทำให้ผู้เข้าชมออกไปโดยไม่อ่านเนื้อหาหรือซื้อผลิตภัณฑ์ของคุณ

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

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

👉 อย่างไรก็ตาม โปรดจำไว้ว่าการเพิ่มประสิทธิภาพคำขอ HTTP ของไซต์ของคุณเป็นเพียงส่วนหนึ่งของปริศนาประสิทธิภาพเท่านั้น คุณยังต้องการโฮสติ้ง WordPress ที่มีคุณภาพ หากคุณต้องการให้ไซต์ของคุณโหลดเร็ว – ตรวจสอบบทสรุปโฮสติ้ง WordPress ที่ดีที่สุดของเราเพื่อดูตัวเลือกอันดับต้น ๆ

คุณมีคำถามใดๆ เกี่ยวกับการลดจำนวนคำขอ HTTP ใน WordPress หรือไม่? ถามเราในส่วนความคิดเห็นด้านล่าง!