วิธีกำจัด Render-Blocking Resources จากเว็บไซต์ WordPress ของคุณ

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

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

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

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

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

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

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

หากคุณต้องการติดตามวิดีโอ ลองดูคำแนะนำนี้ที่สร้างโดย WP Casts:

1. ระบุทรัพยากรการบล็อกการเรนเดอร์

ก่อนทำการเปลี่ยนแปลงใดๆ คุณต้องค้นหาทรัพยากรการบล็อกการแสดงผลก่อน วิธีที่ดีที่สุดในการทำเช่นนี้คือการทดสอบความเร็วออนไลน์ฟรี เช่น เครื่องมือ PageSpeed ​​Insights ของ Google วาง URL ของไซต์ของคุณแล้วคลิก วิเคราะห์

เมื่อการสแกนเสร็จสิ้น Google จะให้คะแนนความเร็วรวมแก่เว็บไซต์ของคุณ ตั้งแต่ 0 (ช้าที่สุด) ถึง 100 (เร็วที่สุด) คะแนนในช่วง 50 ถึง 80 เป็นคะแนนเฉลี่ย ดังนั้นคุณจะต้องลงจอดในส่วนบนของช่วงนี้หรือสูงกว่านั้น

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

ที่มาของภาพ

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

จดบันทึกไฟล์ใดๆ ที่ลงท้ายด้วยนามสกุล .css และ .js เนื่องจากเป็นไฟล์ที่คุณต้องการให้ความสำคัญ

2. กำจัดทรัพยากรที่ปิดกั้นการเรนเดอร์ด้วยตนเองหรือด้วยปลั๊กอิน

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

ปลั๊กอิน WordPress หลายตัวสามารถลดผลกระทบของทรัพยากรการบล็อกการเรนเดอร์บนเว็บไซต์ WordPress ฉันจะกล่าวถึงโซลูชันยอดนิยมสองรายการ ได้แก่ Autoptimize และ W3 Total Cache

วิธีกำจัด Render-Blocking Resources ด้วย Autoptimize Plugin

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

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

1. ติดตั้งและเปิดใช้งานปลั๊กอิน Autoptimize

2. จากแดชบอร์ด WordPress ของคุณ เลือก การตั้งค่า > ปรับ อัตโนมัติ

3. ภายใต้ JavaScript Options ให้ทำเครื่องหมายที่ช่องถัดจาก Optimize JavaScript code? .

4. ถ้าช่องถัดจาก รวมไฟล์ JS? ถูกตรวจสอบ ยกเลิกการเลือก

5. ภายใต้ CSS Options ให้ทำเครื่องหมายที่ช่องถัดจาก Optimize CSS Code? .

6. ถ้าช่องถัดจาก รวมไฟล์ CSS? ถูกตรวจสอบ ยกเลิกการเลือก

7. ที่ด้านล่างของหน้า ให้คลิก บันทึกการเปลี่ยนแปลง และ ล้างแคช

8. สแกนเว็บไซต์ของคุณด้วย PageSpeed ​​Insights และตรวจสอบการปรับปรุง

9. หาก PageSpeed ​​Insights ยังคงรายงานไฟล์ JavaScript ที่บล็อกการเรนเดอร์ ให้กลับไปที่ การตั้งค่า > ปรับให้เหมาะสมอัตโนมัติ และทำเครื่องหมายที่ช่องถัดจาก รวมไฟล์ JS? และ รวมไฟล์ CSS? . จากนั้นคลิก บันทึกการเปลี่ยนแปลง และ ล้างแคช แล้วสแกนอีกครั้ง

วิธีกำจัด Render-Blocking Resources ด้วย W3 Total Cache Plugin

W3 Total Cache เป็นปลั๊กอินแคชที่ใช้กันอย่างแพร่หลายซึ่งช่วยจัดการกับโค้ดที่ล้าหลัง วิธีกำจัด JavaScript ที่บล็อกการเรนเดอร์ด้วย W3 Total Cache:

1. ติดตั้งและเปิดใช้งานปลั๊กอิน W3 Total Cache

2. ตัวเลือก ประสิทธิภาพ ใหม่จะถูกเพิ่มในเมนูแดชบอร์ด WordPress ของคุณ เลือก ประสิทธิภาพ > การตั้งค่าทั่วไป

3. ในส่วน Minify ให้ทำเครื่องหมายที่ช่องถัดจาก Minify จากนั้นตั้งค่า โหมด Minify เป็น Manual

4. คลิก บันทึกการตั้งค่าทั้งหมด ที่ด้านล่างของส่วน ย่อ ขนาด

5. ในเมนูแดชบอร์ด เลือก ประสิทธิภาพ > ลด ขนาด

6. ในส่วน JS ถัดจาก การตั้งค่าการลด ขนาด JS ตรวจสอบให้แน่ใจว่าได้เลือกช่อง เปิดใช้งาน แล้ว จากนั้น ภายใต้ Operations in areas ให้เปิดเมนูแบบเลื่อนลง ประเภทการฝัง รายการแรก และเลือก Non-blocking using “defer”

7. ภายใต้ การจัดการไฟล์ JS เลือกธีมที่ใช้งานของคุณจากดร็อปดาวน์ ธีม

8. อ้างอิงกลับไปที่ผลลัพธ์ PageSpeed ​​Insights จากการสแกนครั้งก่อนของคุณ สำหรับแต่ละรายการภายใต้ กำจัดทรัพยากรการปิดกั้นการแสดงผลที่ ลงท้ายด้วย .js ให้คลิก เพิ่มสคริปต์ จากนั้น คัดลอก URL แบบเต็มของทรัพยากร JavaScript จาก PageSpeed ​​Insights แล้ววางลงในช่อง File URI

9. เมื่อคุณวางทรัพยากร JavaScript ที่บล็อกการแสดงผลทั้งหมดที่รายงานโดย PageSpeed ​​Insights แล้ว ให้คลิก บันทึกการตั้งค่า & ล้างแคช ที่ด้านล่างของส่วน JS

10. ในส่วน CSS ถัดจาก การตั้งค่าการลด ขนาด CSS ให้ทำเครื่องหมายที่ช่องถัดจาก การตั้งค่าการลดขนาด CSS และตรวจสอบให้แน่ใจว่าได้ตั้งค่า วิธีการลดขนาด เป็น รวมและลด ขนาด

11. ภายใต้ การจัดการไฟล์ CSS เลือกธีมที่ใช้งานอยู่ของคุณจากดร็อปดาวน์ ธีม

12. สำหรับแต่ละรายการภายใต้ กำจัดทรัพยากรการปิดกั้นการแสดงผลที่ ลงท้ายด้วย .css ในผลลัพธ์การสแกน PageSpeed ​​Insights ของคุณ ให้คลิก เพิ่มสไตล์ชีต จากนั้น คัดลอก URL แบบเต็มของทรัพยากร CSS จาก PageSpeed ​​Insights แล้ววางลงในช่อง File URI

13. เมื่อคุณวางทรัพยากร CSS ที่บล็อกการแสดงผลทั้งหมดที่รายงานโดย PageSpeed ​​Insights แล้ว ให้คลิก บันทึกการตั้งค่า & ล้างแคช ที่ด้านล่างของส่วน CSS

14. สแกนเว็บไซต์ของคุณด้วย PageSpeed ​​Insights และตรวจสอบการปรับปรุง

วิธีกำจัด Render-Blocking JavaScript ด้วยตนเอง

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

ในการทำเช่นนี้ ค้นหาแท็ก <script> ในไฟล์เว็บไซต์ของคุณสำหรับทรัพยากรที่ระบุในการสแกน PageSpeed ​​Insights ของคุณ พวกเขาจะมีลักษณะดังนี้:

 
<script src="https://blog.hubspot.com/marketing/resource.js">

แท็ก <script> บอกให้เบราว์เซอร์โหลดและเรียกใช้สคริปต์ที่ระบุโดยแอตทริบิวต์ src (แหล่งที่มา) ปัญหาของกระบวนการนี้คือการโหลดและการดำเนินการนี้ทำให้เบราว์เซอร์แยกวิเคราะห์หน้าเว็บล่าช้า ซึ่งส่งผลต่อเวลาในการโหลดโดยรวม:

ที่มาของภาพ

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

 
<script src="https://blog.hubspot.com/marketing/resource.js" async>
 <script src="https://blog.hubspot.com/marketing/resource.js" defer>

แม้ว่าจะมีผลต่อเวลาในการโหลดที่คล้ายคลึงกัน แต่แอตทริบิวต์เหล่านี้จะบอกให้เบราว์เซอร์ทำสิ่งต่างๆ ที่แตกต่างกัน

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

ที่มาของภาพ

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

ที่มาของภาพ

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

3. เรียกใช้การสแกนไซต์อีกครั้ง

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

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

4. ตรวจสอบเว็บไซต์ของคุณเพื่อหาจุดบกพร่อง

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

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

ปรับแต่งไซต์ WordPress ของคุณเพื่อประสิทธิภาพ

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

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