วิธีการกำจัดทรัพยากรที่บล็อกการแสดงผลใน WordPress (ง่ายมาก)
การบล็อกทรัพยากรการเรนเดอร์อาจสร้างปัญหาให้กับบล็อกเกอร์ได้ Google เตือนให้กำจัดทรัพยากรเหล่านี้ออกไปอยู่เสมอ มีหลายวิธีที่จะกำจัดทรัพยากรเหล่านี้ออกไป แต่มีวิธีง่ายๆ อย่างหนึ่งที่ไม่ต้องเขียนโค้ด
การมีบล็อกหรือเว็บไซต์ที่รวดเร็วเป็นสิ่งสำคัญมาก เป็นสิ่งสำคัญหากคุณต้องการให้เว็บไซต์ของคุณติดอันดับสูงในเครื่องมือค้นหา หากเว็บไซต์ของคุณช้ามาก จะส่งผลเสียต่อ SEO อย่างแน่นอน
นอกจากนี้ เว็บไซต์ที่ช้ายังทำให้มีอัตราการตีกลับสูง ซึ่งจะส่งผลเสียต่อแบรนด์ของคุณในหลายๆ ทาง เว็บไซต์ที่ช้าอาจส่งผลต่อรายได้และการแปลง
ผู้ใช้ส่วนใหญ่มักใจร้อน หากเว็บไซต์ของคุณใช้เวลานานเกินไปในการโหลด พวกเขาจะละทิ้งและเปลี่ยนไปใช้ทางเลือกอื่นที่เร็วกว่า ซึ่งจะทำให้ลูกค้าหรือผู้สร้างรายได้ของคุณหายไป
หากคุณพยายามเพิ่มความเร็วเว็บไซต์ของคุณและใช้เครื่องมือทดสอบ เช่น Google PageSpeed Insightคำเตือนอย่างหนึ่งที่คุณอาจได้รับคือให้กำจัดทรัพยากรที่ขัดขวางการแสดงผล
ในบทความนี้ คุณจะได้เรียนรู้วิธีการกำจัดทรัพยากรที่บล็อกการเรนเดอร์ได้อย่างง่ายดาย
ทรัพยากรการบล็อกการเรนเดอร์คืออะไร
ทรัพยากรที่บล็อกการเรนเดอร์คือ CSS และ JavaScript ที่ทำให้เวลาในการโหลดเว็บไซต์ช้าลงเนื่องจากจะต้องดาวน์โหลดโดยเว็บเบราว์เซอร์ก่อนจึงจะสามารถเรนเดอร์เนื้อหาของหน้าได้
เมื่อผู้เยี่ยมชมพยายามเข้าถึงเว็บไซต์ เบราว์เซอร์จะเริ่มอ่านเว็บไซต์จากบนลงล่างทันที หากมี CSS หรือ JavaScript เบราว์เซอร์จะหยุดอ่านจนกว่าจะดาวน์โหลดและประมวลผลไฟล์ ก่อนที่เบราว์เซอร์จะสามารถแสดงเนื้อหาในส่วนที่พับไว้ด้านบนได้ เบราว์เซอร์จะต้องดาวน์โหลดไฟล์ CSS หรือ JavaScript
ปลั๊กอินหรือธีมที่คุณติดตั้งสามารถเพิ่ม CSS และ JS เหล่านี้ได้ ปลั๊กอินหรือธีมบางอย่างไม่จำเป็นต้องโหลดก่อน แต่สามารถโหลดได้ในภายหลัง แต่เนื่องจากปลั๊กอินหรือธีมเหล่านี้อยู่ด้านบน จึงทำให้เว็บไซต์ของคุณทำงานช้าลง
ดังนั้นสิ่งที่ Google หมายถึงด้วยการ “กำจัดทรัพยากรที่บล็อกการเรนเดอร์” ก็คือ คุณลบทรัพยากรที่ไม่จำเป็นออกจากด้านบนของเว็บไซต์ เนื่องจากจะทำให้เนื้อหาเว็บไซต์โหลดช้าลง
วิธีการค้นหาทรัพยากรที่บล็อกการเรนเดอร์
ก่อนที่คุณจะแก้ไขปัญหาการแสดงผลค้าง คุณต้องรู้ก่อนว่าปัญหามาจากไหน คุณสามารถค้นหาว่าทรัพยากรใดทำให้การแสดงผลค้างได้โดยการทดสอบด้วยGoogle PageSpeed InsightหรือWeb.Measure
คุณสามารถทำตามขั้นตอนต่อไปนี้เพื่อค้นหาทรัพยากรที่บล็อกการเรนเดอร์:
1. เข้าชมGoogle PageSpeed Insight
2. ป้อนที่อยู่เว็บไซต์ของคุณและคลิกวิเคราะห์
3. เลื่อนลงและมองหาคำเตือนการกำจัดทรัพยากรที่บล็อกการเรนเดอร์
ตรวจสอบได้ทั้งในอุปกรณ์เคลื่อนที่และเดสก์ท็อป
สำหรับBloggingToolsนั้น เราไม่มีปัญหาการแสดงผลค้างบนเดสก์ท็อป แต่มีปัญหาบนมือถือ ดังนั้นเพื่อความสะดวก เราจะใช้เวอร์ชันมือถือดังที่เห็นด้านล่าง
สำหรับมือถือ ดังที่คุณจะเห็นด้านบน เราพบปัญหาการบล็อกการแสดงผล 2 ประเด็น โดยมีคะแนนอยู่ที่ 93 คะแนน ซึ่งคะแนนสูงกว่านี้ แต่เพื่อประโยชน์ของโพสต์นี้ ฉันจึงต้องปิดใช้งานปลั๊กอิน Autoptimize
เว็บไซต์ BloggingTools.org ทำคะแนนได้ขนาดนี้โดยไม่ต้องปรับแต่งใดๆ เพราะเราใช้ธีมที่เร็วและเบามากชื่อGeneratePressนอกจากนี้เรายังใช้บริการเว็บโฮสติ้งที่เร็วมากอย่างCloudwaysอีก ด้วย
หมายเหตุ : คุณไม่ควรหมกมุ่นกับการได้คะแนน PageSpeed Insight 100 มากเกินไป มันเป็นเพียงแนวทางเท่านั้น โดยทั่วไปแล้วคะแนนเฉลี่ย 65 ถึง 80 ก็ถือว่าใช้ได้ดีสำหรับคนส่วนใหญ่ อย่าลบไฟล์ที่จำเป็นต่อธุรกิจของคุณ
ข้อดีของ WordPress คือคุณไม่จำเป็นต้องทำทุกอย่างด้วยตนเอง มีปลั๊กอินที่เขียนโค้ดมาอย่างดีเพื่อช่วยแก้ปัญหา
วิธีแก้ไขปัญหาการบล็อกทรัพยากรการแสดงผลใน WordPress
ปฏิบัติตามขั้นตอนเหล่านี้เพื่อแก้ไขปัญหาการบล็อกทรัพยากรการเรนเดอร์:
1. ติดตั้งและเปิดใช้งาน Autoptimize
มีปลั๊กอิน WordPress หลายตัวที่สามารถทำแบบนี้ได้ เช่น W3 Total Cache, WP Rocketและอื่นๆ แต่จากประสบการณ์ของผมกับเว็บไซต์หลายแห่ง 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 ทันทีหลังจากทำสิ่งนี้ และคำเตือนการกำจัดทรัพยากรที่บล็อกการแสดงผลทั้งหมดก็หายไปหมด ดูด้านล่าง
โปรดทราบว่าทรัพยากรบล็อกการเรนเดอร์ที่คุณมีและความสำคัญต่อไซต์ของคุณอาจมีเหลืออยู่บ้าง อย่าพยายามลบทรัพยากรเหล่านี้ออก
หากคุณต้องการกำจัดปัญหาเพิ่มเติม คุณสามารถใช้Async JavaScriptซึ่งเป็นปลั๊กอินจากผู้พัฒนาเดียวกับ Autoptimize ทั้งสองโปรแกรมทำงานร่วมกันได้ แต่ฉันไม่แนะนำให้ใช้ เพราะอาจทำให้เว็บไซต์ของคุณเสียหายได้ การใช้ Autoptimize เพียงอย่างเดียวก็เพียงพอแล้ว!
สรุป
ความเร็วเป็นสิ่งสำคัญ และการกำจัดทรัพยากรที่บล็อกการแสดงผลจะช่วยให้เว็บไซต์ของคุณโหลดเร็วขึ้นและทำให้ไซต์ของคุณได้รับคะแนนที่ดีขึ้นในเครื่องมือทดสอบความเร็ว แต่คุณไม่ควรยึดติดกับคะแนนเหล่านี้ เพราะมีไว้เพื่อเป็นแนวทางเท่านั้น
หากเว็บไซต์ของคุณยังคงช้ามากหลังจากทำตามขั้นตอนเหล่านี้แล้ว ปัญหาที่เป็นไปได้มากที่สุดสามประการคือ ธีมหรือเว็บโฮสต์ของคุณไม่ดี หรือคุณติดตั้งปลั๊กอินที่ไม่เหมาะสม ผมขอแนะนำCloudwaysเป็นเว็บโฮสต์ที่ดีที่สุดและGeneratePressเป็นธีมที่ดีที่สุด หากคุณเป็นมือใหม่Bluehostก็สามารถใช้งานได้ แต่ถ้าคุณมีงบประมาณเพียงพอ Cloudways คือตัวเลือกที่ดีที่สุด คุณสามารถเริ่มต้นใช้งานได้ฟรี ผมใช้ GeneratePress และ Cloudways สำหรับ TargetTrend
อ่านเพิ่มเติม:
วิธีทำให้ WordPress รวดเร็วมาก
บทความที่เกี่ยวข้อง
