วิธีกำจัด Render-Blocking Resources ใน WordPress [Plugins or Manually]

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

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

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

คุณกำจัดทรัพยากรที่อาจบล็อกเวลาในการโหลดเว็บไซต์ เช่น ไฟล์ CSS และ JavaScript

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

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

แสดงผลการปิดกั้นทรัพยากร

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

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

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

ประเภทของทรัพยากรการบล็อกการแสดงผล

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

นี่คือรายการของทรัพยากรการบล็อกการแสดงผล:

CSS สไตล์ชีต

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

ไฟล์ JavaScript ในส่วน

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

แบบอักษร

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

HTML นำเข้า

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

ทำไม Render-Blocking Resources ถึงแย่มากสำหรับเว็บเพจ

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

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

• Largest Contentful Paint: กำหนดระยะเวลาที่ใช้ในการโหลดเนื้อหาหลักของเพจ
• First Contentful Paint: เวลาที่เบราว์เซอร์ใช้ในการสร้างเนื้อหา Document Object Model (DOM) แรกบนเว็บไซต์ของคุณ
• เวลาบล็อกทั้งหมด: การประเมินนี้ใช้เวลาเท่าใดจาก Pianto เนื้อหาแรกเริ่มไปจนถึงระยะเวลาที่หน้าเว็บจะโต้ตอบได้ทั้งหมด

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

มาดูกันดีกว่าว่าเหตุใดการปิดกั้นการแสดงผลจึงเป็นปัญหาร้ายแรงสำหรับหน้าเว็บ:

เวลาโหลดหน้าช้า

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

การแสดงผลที่ถูกบล็อก

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

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

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

การมีส่วนร่วมของผู้ใช้ลดลง

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

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

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

กำจัด Render-Blocking Resources ด้วยตนเอง

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

#1. ระบุทรัพยากรการปิดกั้นการแสดงผล

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

• ไปที่ข้อมูลเชิงลึกของ Google PageSpeed
• ป้อน URL ของไซต์ของคุณในแถบค้นหา
• คลิกปุ่ม “วิเคราะห์” เพื่อรับข้อมูลเชิงลึกเกี่ยวกับเว็บไซต์ของคุณ

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

#2. การใช้แอตทริบิวต์ “Defer” & “Async” สำหรับ JS

หลังจากระบุทรัพยากรที่บล็อกการเรนเดอร์แล้ว ก็ถึงเวลากำจัดทรัพยากรเหล่านั้นเพื่อให้เว็บไซต์มีประสิทธิภาพดีขึ้น จากวิธีการที่หลากหลาย การใช้เมธอด “defer” หรือ “async” สำหรับไฟล์ JavaScript เป็นวิธีหนึ่งในการดำเนินการนี้

เมื่อพูดถึงแอตทริบิวต์ “defer” จะช่วยให้เบราว์เซอร์ดาวน์โหลดไฟล์ JS แล้วเรียกใช้งานได้ แต่จะเกิดขึ้นเมื่อหน้าโหลดเสร็จแล้วและพร้อมที่จะแสดงเนื้อหา

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

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

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

#3. การใช้แอตทริบิวต์ “สื่อ” สำหรับ CSS แบบมีเงื่อนไข

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

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

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

#4. การเลื่อน CSS ที่ไม่สำคัญออกไป

นอกจากการใช้แอตทริบิวต์ “สื่อ” สำหรับ CSS แบบมีเงื่อนไขแล้ว ให้ลองเลื่อน CSS ที่ไม่สำคัญออก สำหรับแนวทางนี้ คุณควรโหลด CSS ที่จำเป็นเป็นหลัก ถัดไป คุณโหลด CSS ที่เหลือเมื่อหน้าโหลด

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

#5. การลบ CSS & JS ที่ไม่ได้ใช้

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

ด้วยการลบไฟล์ CSS & JS ที่ไม่ได้ใช้ คุณสามารถลดจำนวนทรัพยากรการบล็อกการแสดงผลได้ คุณสามารถใช้เครื่องมือต่างๆ เช่น PurifyCSS หรือ UnusedCSS เพื่อลบไฟล์ CSS ที่ไม่ได้ใช้ออกจากเว็บไซต์ของคุณ

#6. กำลังโหลดแบบอักษรที่กำหนดเองในเครื่อง

แบบอักษรที่กำหนดเองยังสามารถรวมทรัพยากรที่จำกัดการแสดงผล แทนที่จะพึ่งพาแหล่งข้อมูลภายนอกเช่น Google Fonts คุณควรโหลดแบบอักษรที่คุณกำหนดเองในเครื่องเพื่อหลีกเลี่ยงการใช้ทรัพยากรเหล่านี้

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

#7. ย่อขนาด JS & CSS

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

หากต้องการย่อขนาดไฟล์ คุณอาจใช้เครื่องมือต่างๆ เช่น MinifyJS หรือ CSSNano เก็บสำเนาของไฟล์ต้นฉบับไว้เผื่อในกรณีที่คุณจำเป็นต้องแก้ไข

กำจัด Render-Blocking Resources ด้วย Plugin

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

#1. W3 แคชทั้งหมด

W3 Total Cache (W3TC) ปรับปรุงประสบการณ์ผู้ใช้ทั้งหมดของเว็บไซต์ WordPress มันกำจัดทรัพยากรที่ปิดกั้นการเรนเดอร์และปรับปรุง SEO, Core web Vitals และอื่นๆ ปลั๊กอินใช้คุณสมบัติต่างๆ เช่น การรวมเครือข่ายการส่งเนื้อหาเพื่อใช้แนวทางปฏิบัติที่ดีที่สุด

หากต้องการกำจัดทรัพยากรการปิดกั้นการแสดงผล ให้ติดตั้งและเปิดใช้งานปลั๊กอิน W3 Total Cache และทำตามขั้นตอนเหล่านี้:

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

• จากนั้นรวบรวมไฟล์ Javascript และ CSS ที่ปิดกั้นการแสดงผลทั้งหมดผ่าน Google PageSpeed ​​Insights
• ตามด้วยกลับไปที่ Performance > Minify
• ตอนนี้ ในส่วน js ขั้นแรกให้คลิก เปิดใช้งาน สำหรับการตั้งค่า JS Minify จากนั้นภายใต้ส่วนการดำเนินการในพื้นที่ เลือกไม่ปิดกั้นโดยใช้ประเภท “เลื่อน” สำหรับแท็กก่อน
• ตอนนี้ไปที่การจัดการไฟล์ JS เลือกธีมที่คุณเปิดใช้งานแล้วคลิกปุ่มเพิ่มสคริปต์ ตอนนี้รวบรวม Javascript URL ที่มีปัญหาในการสแกนโดย Google PageSpeed ​​Insights วาง URL ในช่องที่กำหนดตามที่ระบุไว้ในรูปภาพ

• ตอนนี้เลื่อนลงไปที่ส่วน CSS เลือกธีมของคุณจากเมนูแบบเลื่อนลงในส่วนการจัดการไฟล์ CSS แล้วคลิกเพิ่มสไตล์ชีต ตอนนี้คุณเพียงทำตามขั้นตอนก่อนหน้าและคัดลอกและวาง URL ที่รวบรวมจาก PageSpeed ​​Insight ที่มีปัญหา

• เนื่องจากการตั้งค่าทั้งหมดได้รับการกำหนดค่าแล้ว ให้คลิกปุ่ม บันทึกการตั้งค่าและล้าง เพื่อดำเนินการ

#2. JCH เพิ่มประสิทธิภาพ

JCH Optimize ช่วยเพิ่มประสิทธิภาพเว็บไซต์ WordPress ที่วัดโดยข้อมูลเชิงลึกของ Google PageSpeed ปลั๊กอินช่วยปรับปรุง First contentful paint (FCP), Largest Contentful paint (LCP), Speed ​​Index (SI), Cumulative Layout Shift (CLS), Time to Interactive (TTI) และอื่นๆ

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

หลังจากติดตั้งและเปิดใช้งาน JCH Optimize แล้ว ให้ปฏิบัติตามกระบวนการเหล่านี้เพื่อกำจัดทรัพยากรการปิดกั้นการแสดงผล:

• ไปที่การตั้งค่า>JCH Optimize เลื่อนลงมาเล็กน้อยแล้วไปที่การตั้งค่าคุณสมบัติพื้นฐาน

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

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