วิธีการกำจัดทรัพยากรที่บล็อกการแสดงผลใน WordPress (ง่ายมาก)
การบล็อกทรัพยากรการเรนเดอร์อาจสร้างปัญหาให้กับบล็อกเกอร์ได้ Google เตือนให้กำจัดทรัพยากรเหล่านี้ออกไปอยู่เสมอ มีหลายวิธีที่จะกำจัดทรัพยากรเหล่านี้ออกไป แต่มีวิธีง่ายๆ อย่างหนึ่งที่ไม่ต้องเขียนโค้ด
การมีบล็อกหรือเว็บไซต์ที่รวดเร็วเป็นสิ่งสำคัญมาก เป็นสิ่งสำคัญหากคุณต้องการให้เว็บไซต์ของคุณติดอันดับสูงในเครื่องมือค้นหา หากเว็บไซต์ของคุณช้ามาก จะส่งผลเสียต่อ SEO อย่างแน่นอน
นอกจากนี้ เว็บไซต์ที่ช้ายังทำให้มีอัตราการตีกลับสูง ซึ่งจะส่งผลเสียต่อแบรนด์ของคุณในหลายๆ ทาง เว็บไซต์ที่ช้าอาจส่งผลต่อรายได้และการแปลง
ผู้ใช้ส่วนใหญ่มักใจร้อน หากเว็บไซต์ของคุณใช้เวลานานเกินไปในการโหลด พวกเขาจะละทิ้งและเปลี่ยนไปใช้ทางเลือกอื่นที่เร็วกว่า ซึ่งจะทำให้ลูกค้าหรือผู้สร้างรายได้ของคุณหายไป
หากคุณพยายามเพิ่มความเร็วเว็บไซต์ของคุณและคุณใช้เครื่องมือทดสอบเช่น Google PageSpeed Insightคำเตือนประการหนึ่งที่คุณอาจได้รับคือการกำจัดทรัพยากรที่บล็อกการเรนเดอร์
ในบทความนี้ คุณจะได้เรียนรู้วิธีการกำจัดทรัพยากรที่บล็อกการเรนเดอร์ได้อย่างง่ายดาย
ทรัพยากรการบล็อกการเรนเดอร์คืออะไร
ทรัพยากรที่บล็อกการเรนเดอร์คือ CSS และ JavaScript ที่ทำให้เวลาในการโหลดเว็บไซต์ช้าลงเนื่องจากจะต้องดาวน์โหลดโดยเว็บเบราว์เซอร์ก่อนจึงจะสามารถเรนเดอร์เนื้อหาของหน้าได้
เมื่อผู้เยี่ยมชมพยายามเข้าถึงเว็บไซต์ เบราว์เซอร์จะเริ่มอ่านเว็บไซต์จากบนลงล่างทันที หากมี CSS หรือ JavaScript เบราว์เซอร์จะหยุดอ่านจนกว่าจะดาวน์โหลดและประมวลผลไฟล์ ก่อนที่เบราว์เซอร์จะสามารถแสดงเนื้อหาในส่วนที่พับไว้ด้านบนได้ เบราว์เซอร์จะต้องดาวน์โหลดไฟล์ CSS หรือ JavaScript
ปลั๊กอินหรือธีมที่คุณติดตั้งสามารถเพิ่ม CSS และ JS เหล่านี้ได้ ปลั๊กอินหรือธีมบางอย่างไม่จำเป็นต้องโหลดก่อน แต่สามารถโหลดได้ในภายหลัง แต่เนื่องจากปลั๊กอินหรือธีมเหล่านี้อยู่ด้านบน จึงทำให้เว็บไซต์ของคุณทำงานช้าลง
ดังนั้นสิ่งที่ Google หมายถึงด้วยการ “กำจัดทรัพยากรที่บล็อกการเรนเดอร์” ก็คือ คุณลบทรัพยากรที่ไม่จำเป็นออกจากด้านบนของเว็บไซต์ เนื่องจากจะทำให้เนื้อหาเว็บไซต์โหลดช้าลง
วิธีการค้นหาทรัพยากรที่บล็อกการเรนเดอร์
ก่อนที่คุณจะสามารถแก้ปัญหาการบล็อกการเรนเดอร์ได้ คุณต้องรู้ว่าปัญหานั้นมาจากไหน คุณสามารถค้นหาทรัพยากรที่บล็อกการเรนเดอร์ได้โดยการรันการทดสอบบน Google PageSpeed Insight or เว็บไซต์วัดผล
คุณสามารถทำตามขั้นตอนต่อไปนี้เพื่อค้นหาทรัพยากรที่บล็อกการเรนเดอร์:
1 เยือน Google PageSpeed Insight
2. ป้อนที่อยู่เว็บไซต์ของคุณและคลิกวิเคราะห์
3. เลื่อนลงและมองหาคำเตือนการกำจัดทรัพยากรที่บล็อกการเรนเดอร์
ตรวจสอบได้ทั้งในอุปกรณ์เคลื่อนที่และเดสก์ท็อป
ใช้เพื่อการ เครื่องมือบล็อกเราไม่มีปัญหาการบล็อกการแสดงผลสำหรับเดสก์ท็อป แต่มีปัญหาสำหรับมือถือ ดังนั้นเพื่อประโยชน์ในเรื่องนี้ เราจะใช้มือถือตามที่คุณเห็นด้านล่าง
สำหรับมือถือ ดังที่คุณจะเห็นด้านบน เราพบปัญหาการบล็อกการแสดงผล 2 ประเด็น โดยมีคะแนนอยู่ที่ 93 คะแนน ซึ่งคะแนนสูงกว่านี้ แต่เพื่อประโยชน์ของโพสต์นี้ ฉันจึงต้องปิดใช้งานปลั๊กอิน Autoptimize
BloggingTools.org ได้รับคะแนนนี้โดยไม่ต้องปรับแต่งใดๆ เนื่องจากเราใช้ธีมที่เร็วและน้ำหนักเบามากที่เรียกว่า GeneratePress. เรายังโฮสต์บนเว็บโฮสต์ความเร็วสูงที่เรียกว่า Cloudways.
หมายเหตุ:คุณไม่ควรหมกมุ่นอยู่กับการได้คะแนน PageSpeed Insights 100 คะแนน เพราะคะแนนนี้เป็นเพียงแนวทางเท่านั้น โดยปกติแล้วคะแนนเฉลี่ย 65 ถึง 80 ถือว่าเพียงพอสำหรับคนส่วนใหญ่ อย่าลบไฟล์ที่จำเป็นสำหรับธุรกิจของคุณ
ข้อดีของ WordPress คือคุณไม่จำเป็นต้องทำทุกอย่างด้วยตนเอง มีปลั๊กอินที่เขียนโค้ดมาอย่างดีเพื่อช่วยแก้ปัญหา
วิธีแก้ไขปัญหาการบล็อกทรัพยากรการแสดงผลใน WordPress
ปฏิบัติตามขั้นตอนเหล่านี้เพื่อแก้ไขปัญหาการบล็อกทรัพยากรการเรนเดอร์:
1. ติดตั้งและเปิดใช้งาน Autoptimize
มีปลั๊กอิน WordPress จำนวนมากที่สามารถทำสิ่งนี้ได้ เช่น W3 total cache WP จรวด และอื่นๆ อีกมากมาย แต่จากประสบการณ์ของผมกับเว็บไซต์หลายแห่ง Autoptimize จัดการได้ดีกว่าเว็บไซต์อื่นๆ เสมอ สิ่งที่ยอดเยี่ยมคือ Autoptimize สามารถใช้งานร่วมกับปลั๊กอินแคช WordPress เกือบทั้งหมดได้ และยังฟรีอีกด้วย
ไปที่ไดเร็กทอรีปลั๊กอิน WordPress เพื่อ ติดตั้งและเปิดใช้งาน Autoptimize
2. ไปที่การตั้งค่า Autoptimize
หากคุณต้องการทราบตำแหน่งที่ตั้งของการตั้งค่า Autoptimize บนแดชบอร์ด WordPress ของคุณ คลิกที่การตั้งค่า จากนั้นคลิกที่ Autoptimize
3. เพิ่มประสิทธิภาพ JavaScript
ภายใต้ตัวเลือก JavaScript ให้เลือกรหัสสคริปต์ที่เพิ่มประสิทธิภาพ และเลือกไฟล์ JS รวม คุณสามารถดูการตั้งค่าที่ฉันใช้สำหรับ BloggingTools ด้านล่าง
4. เพิ่มประสิทธิภาพ CSS
ภายใต้ตัวเลือก Optimize CSS ให้เลือก Optimize CSS code นอกจากนี้ ให้เลือกaggreg CSS-files และ "Also gather inline CSS" ดูตัวเลือกที่ฉันใช้สำหรับ BloggingTools ด้านล่าง
5. เพิ่มประสิทธิภาพ HTML
หากต้องการประสิทธิภาพที่ดีขึ้น คุณยังสามารถใช้ Autoptimize เพื่อเพิ่มประสิทธิภาพ HTML ได้ ภายใต้ตัวเลือก HTML ให้เลือกเพิ่มประสิทธิภาพโค้ด HTML คุณสามารถดูการตั้งค่าที่ฉันใช้สำหรับ BloggingTools ด้านล่าง
6. ตรวจสอบตัวเลือกอื่นๆ
คุณสามารถตรวจสอบตัวเลือกต่างๆ และปรับแต่งการตั้งค่าบางอย่างได้ตามความเหมาะสม คุณสามารถดูการตั้งค่าสำหรับ BloggingTools ด้านล่าง
7. บันทึกและล้างแคช
ขั้นตอนต่อไป เพียงคลิกที่บันทึกและล้างแคช เพียงเท่านี้ก็เรียบร้อย!
หลังจากทำทั้งหมดนี้แล้ว คุณสามารถตรวจสอบไซต์ของคุณได้อีกครั้งบน Google PageSpeed Insight สำหรับ BloggingTools คะแนนของเราจะเพิ่มขึ้นเป็น 95 ทันทีหลังจากทำสิ่งนี้ และคำเตือนการกำจัดทรัพยากรที่บล็อกการแสดงผลทั้งหมดก็หายไปหมด ดูด้านล่าง
โปรดทราบว่าทรัพยากรบล็อกการเรนเดอร์ที่คุณมีและความสำคัญต่อไซต์ของคุณอาจมีเหลืออยู่บ้าง อย่าพยายามลบทรัพยากรเหล่านี้ออก
หากคุณต้องการกำจัดเพิ่มเติมคุณสามารถใช้ อะซิงก์จาวาสคริปต์ปลั๊กอินจากผู้เขียนเดียวกับ Autoptimize ปลั๊กอินทั้งสองทำงานร่วมกัน ฉันไม่แนะนำให้ใช้ปลั๊กอินนี้เพราะอาจทำให้ไซต์ของคุณเสียหายได้ การใช้ Autoptimize เพียงอย่างเดียวก็เพียงพอแล้ว!
สรุป
ความเร็วเป็นสิ่งสำคัญ และการกำจัดทรัพยากรที่บล็อกการแสดงผลจะช่วยให้เว็บไซต์ของคุณโหลดเร็วขึ้นและทำให้ไซต์ของคุณได้รับคะแนนที่ดีขึ้นในเครื่องมือทดสอบความเร็ว แต่คุณไม่ควรยึดติดกับคะแนนเหล่านี้ เพราะมีไว้เพื่อเป็นแนวทางเท่านั้น
หากเว็บไซต์ของคุณยังช้ามากหลังจากนี้ ปัญหาที่เป็นไปได้มากที่สุดสามประการคือธีมหรือโฮสต์เว็บของคุณไม่ดี หรือคุณติดตั้งปลั๊กอินที่ไม่ดี ฉันขอแนะนำ คูด์เวย์ เป็นเว็บโฮสต์ที่ดีที่สุดและ GeneratePress เป็นธีมที่ดีที่สุด หากคุณเป็นมือใหม่ Bluehost สามารถรับมือได้แต่ถ้าคุณจ่ายไหว Cloudways เป็นตัวเลือกที่ดีที่สุด คุณสามารถเริ่มต้นได้ฟรี ฉันใช้ GeneratePress และ Coudways สำหรับ TargetTrend
อ่านเพิ่มเติม:
วิธีทำให้ WordPress รวดเร็วมาก
บทความที่เกี่ยวข้อง
