วิธีกำจัดทรัพยากรการบล็อกการแสดงผลใน WordPress (ง่ายมาก)

เผยแพร่แล้ว: 2020-05-17

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

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

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

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

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

สารบัญ

ทรัพยากรการบล็อกการแสดงผลคืออะไร

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

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

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

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

วิธีค้นหาทรัพยากรการบล็อกการแสดงผล

ก่อนที่คุณจะสามารถแก้ปัญหาการบล็อกการแสดงผลได้ คุณจำเป็นต้องรู้ว่ามันมาจากไหน คุณสามารถค้นหาว่าทรัพยากรใดบ้างที่บล็อกการแสดงผลโดยทำการทดสอบบน Google PageSpeed ​​Insight หรือ Web.Measure

คุณสามารถทำตามขั้นตอนด้านล่างเพื่อค้นหาทรัพยากรการบล็อกการแสดงผล:

1. ไปที่ Google PageSpeed ​​Insight

2. ป้อนที่อยู่เว็บไซต์ของคุณแล้วคลิกวิเคราะห์

3. เลื่อนลงมาและมองหาการขจัดคำเตือนทรัพยากรที่บล็อกการแสดงภาพ

ตรวจสอบได้ทั้งในการแตะมือถือและเดสก์ท็อป

PageSpeed ​​Insight Desktop
สำหรับ BloggingTools เรามี 100 บนเดสก์ท็อป โชคดีที่เราไม่มีปัญหาการบล็อกการแสดงผล

สำหรับ BloggingTools เราไม่มีปัญหาการบล็อกการแสดงภาพสำหรับเดสก์ท็อป แต่เรามีปัญหากับอุปกรณ์เคลื่อนที่ ดังนั้นเพื่อการนี้ เราจะใช้มือถือดังที่คุณเห็นด้านล่าง

PageSpeed ​​Insight คะแนนมือถือ
PageSpeed ​​Insight มือถือ
เรามี 2 ปัญหาสำหรับมือถือ

สำหรับมือถือดังที่คุณเห็นด้านบน เรามี 2 ปัญหาการบล็อกการแสดงผล ด้วยคะแนน 93 คะแนนนั้นสูงกว่า แต่สำหรับโพสต์นี้ ฉันต้องปิดการใช้งานปลั๊กอิน Autoptimize

BloggingTools.org ได้คะแนนนี้โดยไม่มีการปรับให้เหมาะสมเพราะเราใช้ชุดรูปแบบที่รวดเร็วและมีน้ำหนักเบามากที่เรียกว่า GeneratePress เรายังโฮสต์บนเว็บโฮสต์ที่รวดเร็วมากที่เรียกว่า Cloudways

หมายเหตุ : คุณไม่ควรหมกมุ่นอยู่กับการได้รับคะแนนข้อมูลเชิงลึก PageSpeed ​​100 คะแนน เป็นเพียงแนวทางเท่านั้น โดยปกติคะแนนเฉลี่ย 65 ถึง 80 นั้นใช้ได้สำหรับคนส่วนใหญ่ อย่าลบไฟล์ที่จำเป็นสำหรับธุรกิจของคุณ

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

วิธีแก้ไขปัญหาทรัพยากรการบล็อกการแสดงผลใน WordPress

ทำตามขั้นตอนเหล่านี้เพื่อแก้ไขปัญหาทรัพยากรการบล็อกการแสดงผล:

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

มีปลั๊กอิน WordPress มากมายที่สามารถทำได้เช่นแคชรวม W3, WP Rocket เป็นต้น แต่จากประสบการณ์ของฉันกับเว็บไซต์จำนวนมาก Autoptimize จัดการได้ดีกว่าเว็บไซต์อื่นๆ เสมอ สิ่งที่ยอดเยี่ยมคือ Autoptimize เข้ากันได้กับปลั๊กอินแคชของ WordPress เกือบทั้งหมดและฟรี

ตรงไปที่ไดเร็กทอรีปลั๊กอิน WordPress เพื่อติดตั้งและเปิดใช้งาน Autoptimize

2. ไปที่การตั้งค่าการเพิ่มประสิทธิภาพอัตโนมัติ

หากคุณต้องการค้นหาการตั้งค่า Autoptimize บนแดชบอร์ด WordPress ของคุณ ให้คลิกที่การตั้งค่า จากนั้นคลิกที่ Autoptimize

3. เพิ่มประสิทธิภาพ JavaScript

ภายใต้ตัวเลือก JavaScript ให้เลือก Optimize Script code และเลือกไฟล์ JS แบบรวม คุณสามารถค้นหาการตั้งค่าที่ฉันใช้สำหรับ BloggingTools ด้านล่าง

ปรับแต่ง JavaScript อัตโนมัติ

4. เพิ่มประสิทธิภาพ CSS

ภายใต้ตัวเลือก Optimize CSS เลือก Optimize CSS code เลือกไฟล์ CSS รวมและ "รวม CSS แบบอินไลน์ด้วย" ดูตัวเลือกที่ฉันใช้สำหรับ BloggingTools ด้านล่าง

ปรับแต่ง CSS . อัตโนมัติ

5. เพิ่มประสิทธิภาพ HTML

หากคุณต้องการประสิทธิภาพที่ดีขึ้น คุณยังสามารถใช้ Autoptimize เพื่อเพิ่มประสิทธิภาพ HTML ได้อีกด้วย ภายใต้ตัวเลือก HTML เลือกเพิ่มประสิทธิภาพโค้ด HTML คุณสามารถดูการตั้งค่าที่ฉันใช้สำหรับ BloggingTools ด้านล่าง

ปรับ HTML อัตโนมัติ

6. ตรวจสอบตัวเลือกเบ็ดเตล็ด

คุณสามารถตรวจสอบ Misc Options และปรับแต่งการตั้งค่าบางอย่างได้ตามที่เหมาะกับคุณ คุณสามารถค้นหาการตั้งค่าสำหรับ BloggingTools ด้านล่าง

อัตโนมัติตัวเลือกเบ็ดเตล็ด

7. บันทึกและล้างแคช

ถัดไป เพียงคลิกที่บันทึกและล้างแคช นั้นคือทั้งหมด!

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

Google PageSpeed ​​Insight มือถือ
คะแนน Google PageSpeed ​​Insight บนมือถือ

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

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

บทสรุป

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

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

ยังอ่าน:

วิธีทำให้ WordPress เร็วมาก

วิธีเพิ่มปริมาณการเข้าชมบล็อกของคุณ

วิธีทำเงินบล็อก

วิธีการเริ่มต้นบล็อก