แก้ไข Google PageSpeed ​​กำจัด JavaScript การปิดกั้นโฆษณาและ CSS ในเนื้อหาครึ่งหน้าบน

แก้ปัญหาการแสดงผลการปิดกั้น Javascript และ CSS

การทดสอบ  Google PageSpeed   ​​[1] การกำจัด JavaScript การบล็อกการแสดงผลและ CSS ในเนื้อหาครึ่งหน้าบน เสนอให้คุณส่งไฟล์ JS และ CSS ของไซต์ของคุณหลังจากที่โหลด HTML อย่างสมบูรณ์และไม่หยุดโหลด HTML ของคุณชั่วคราว เพื่อดาวน์โหลด

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

กำจัด JavaScript และ CSS ที่บล็อกการแสดงผลในเนื้อหาครึ่งหน้าบน: แสดงวิธีแก้ไข

1. มีระบบภายนอกเพิ่มประสิทธิภาพเว็บไซต์ของคุณสำหรับคุณ
   
2. ใช้ CDN ที่จะดำเนินการเพิ่มประสิทธิภาพที่เป็นไปได้ทั้งหมดในนามของคุณรวมถึงการเพิ่มประสิทธิภาพสามประการต่อไปนี้ที่จำเป็นในการแก้ไขกำจัดทรัพยากรที่ปิดกั้นการแสดงผล:
   
3. เลื่อนการโหลดไฟล์ Javascript
   
4. โหลด CSS หลังจากโหลด HTML
   
5. ใช้ปลั๊กอิน WordPress
   

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

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

หากคุณแก้ปัญหาเหล่านี้สำหรับเดสก์ท็อปคุณจะกำจัดทรัพยากรที่บล็อกการแสดงผลสำหรับมือถือในเวลาเดียวกันเนื่องจากทั้งสองอย่างเหมือนกันทุกประการ!

Did you know that you can even have all these steps executed automatically for you by using an external  ตัวเร่งความเร็วไซต์   technology, which through artificial intelligence will preload your site, optimize it, and deliver it to your visitors? It is possible with tools such as Ezoic platform offering, with a free trial and no credit card required. Otherwise, implement below optimizations in your website!

เลื่อนการโหลดไฟล์ Javascript

เพื่อที่จะเลื่อนการโหลดไฟล์ JS ของคุณ [2] คุณสามารถเพิ่มคำสั่ง async หรือเลื่อนการเชื่อมโยงสคริปต์ของคุณได้ Async จะไม่รับประกันว่าจะโหลดในลำดับเดียวกัน - ดังนั้นหากคุณมีสคริปต์หลายตัวที่ควรใช้งานแบบหนึ่งหลังจากที่อื่น ๆ การเลื่อนเป็นสิ่งที่ดีกว่าในการรับประกันลำดับ:

โหลด CSS หลังจากโหลด HTML

สำหรับ CSS ที่จะโหลดหลังจากส่ง HTML แบบเต็ม Google ขอเสนอ [3] รหัสนี้เพื่อเพิ่มในตอนท้ายของ HTML ตัวอย่างเช่นหลังจากแท็กปิดส่วนท้ายและแท็กปิดบัญชีก่อน:

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

ผ่านการทดสอบความเร็วไซต์ของ Google!

อนุญาตให้ฉันผ่านการทดสอบ  Google PageSpeed   ​​[1] กำจัด JavaScript การปิดกั้นการแสดงผลและ CSS ในเนื้อหาครึ่งหน้าบน (พร้อมด้วย Leverage browser caching) บนเว็บไซต์ซึ่งเพิ่มขึ้นจากคะแนน 51 บนมือถือ รูปที่ 1) ถึง 72 (รูป 2) และจาก 59 (รูป 3) ถึง 79 บนเดสก์ทอป (รูปที่ 4)

วิธีกำจัดทรัพยากรการบล็อกเรนเดอร์ใน WordPress

เพื่อกำจัดทรัพยากรการบล็อกการเรนเดอร์ใน WordPress จำเป็นต้องติดตั้งปลั๊กอินเช่น JetPack

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

การสร้างเว็บไซต์หลัก: ลงทะเบียนตอนนี้!

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

ลงทะเบียนที่นี่

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

นอกจากนี้อย่าลืมเลื่อนการโหลดภาพปิดหน้าจอโดยใช้ฟังก์ชั่นโหลดขี้เกียจ ในขณะที่มันเคยเป็นเรื่องยากและจำเป็นต้องใช้ไลบรารีภายนอกเพื่อเลื่อนการโหลดภาพปิดหน้าจอตอนนี้เป็นไปได้ในขณะนี้ใน HTML5!

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

<img src=”SRC” alt=”ALT” loading=”lazy”></img>

ด้านบนของที่ Lazy Loading ยังทำงานร่วมกับ Iframes และเป็นการนำไปใช้งานที่สำคัญในการกำจัดทรัพยากรการบล็อกการแสดงผลจากหน้าเว็บของคุณ

เมื่อทรัพยากรการปิดกั้นการแสดงผลจะมีคำแนะนำในการโหลดหลังจากเนื้อหาหลักหมายถึง HTML DOM คุณจะได้รับคะแนนจำนวนมากในการทดสอบ Lighthouse Google การทดสอบข้อมูลเชิงลึกความเร็วของหน้าหรือเว็บ Core Web Vitals

เตรียมระบบภายนอกให้เหมาะสมกับเว็บไซต์ของคุณ

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

การใช้เทคโนโลยี Site Speed ​​Accelerator ของแพลตฟอร์ม Ezoic ปัญหาทั้งหมดของ  Google PageSpeed   ​​ปกติจะได้รับการแก้ไขโดยระบบของพวกเขาซึ่งจะเป็นตัวกลางระหว่างเว็บไซต์ของคุณและผู้เข้าชม พวกเขาจะปรับหน้าเว็บให้คุณก่อนแสดงต่อผู้เยี่ยมชมของคุณ

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

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

คำถามที่พบบ่อย

วิธีกำจัด JavaScript และ CSS ที่ปิดกั้นการแสดงผลในเนื้อหาเหนือกว่า?

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

นักพัฒนาเว็บสามารถระบุคำแนะนำของ Google Pagespeed เพื่อกำจัด JavaScript และ CSS ที่ปิดกั้นการแสดงผลได้อย่างไร

นักพัฒนาเว็บสามารถเพิ่มประสิทธิภาพไซต์ของพวกเขาได้โดยการลดไฟล์ JavaScript และ CSS โดยใช้การโหลดแบบอะซิงโครนัสสำหรับ JavaScript, Inlining CSS ที่สำคัญลงใน HTML โดยตรงและเลื่อนการโหลดไฟล์ CSS และ JavaScript ที่ไม่สำคัญ การใช้กลยุทธ์เหล่านี้สามารถปรับปรุงเวลาในการโหลดและคะแนน pagespeed ได้อย่างมีนัยสำคัญ

คะแนนประภาคาร Chrome ที่สมบูรณ์แบบ: เกิดอะไรขึ้น?