วิธีแก้ไข JavaScript และ CSS ของ Render-Blocking ใน WordPress

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


วิธีแก้ไขการเรนเดอร์การบล็อก JavaScript และ CSS ใน WordPress

Render-Blocking JavaScript และ CSS คืออะไร?

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

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

สคริปต์และสไตล์ชีทเหล่านี้เรียกว่า JavaScript และ CSS สำหรับบล็อกการแสดงผล.

เจ้าของเว็บไซต์ที่พยายามได้คะแนน Google PageSpeed ​​100 คะแนนจะต้องแก้ไขปัญหานี้เพื่อให้ได้คะแนนที่สมบูรณ์แบบนั้น.

คะแนนของ Google PageSpeed ​​คืออะไร?

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

มันจะแสดงคะแนนตามจำนวนกฎที่ไซต์ของคุณผ่าน เว็บไซต์ส่วนใหญ่อยู่ระหว่าง 50-70 อย่างไรก็ตามเจ้าของเว็บไซต์บางรายรู้สึกว่าถูกบังคับให้ทำคะแนนได้ 100 คะแนน (สูงสุดในหน้าสามารถทำคะแนนได้).

คุณต้องการคะแนน Google PageSpeed ​​ที่สมบูรณ์แบบจริงๆหรือไม่?

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

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

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

เป้าหมายของคุณคือการสร้างเว็บไซต์ที่รวดเร็วซึ่งมอบประสบการณ์การใช้งานที่ยอดเยี่ยม.

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

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

ต้องบอกว่ามาดูสิ่งที่คุณสามารถทำได้เพื่อแก้ไขการแสดงผลการบล็อก JavaScript และ CSS ใน WordPress.

เราจะครอบคลุมวิธีการสองวิธีที่จะแก้ไขการปิดกั้นการแสดงผล JavaScript และ CSS ใน WordPress คุณสามารถเลือกอันที่ดีที่สุดสำหรับเว็บไซต์ของคุณ.

1. แก้ไข Render Blocking Scripts และ CSS ด้วย Autoptimize

วิธีนี้ง่ายกว่าและแนะนำสำหรับผู้ใช้ส่วนใหญ่.

สิ่งแรกที่คุณต้องทำคือติดตั้งและเปิดใช้งานปลั๊กอินลดขนาดอัตโนมัติ สำหรับรายละเอียดเพิ่มเติมดูที่คู่มือทีละขั้นตอนเกี่ยวกับวิธีการติดตั้งปลั๊กอิน WordPress.

เมื่อเปิดใช้งานคุณจะต้องไปที่ การตั้งค่า»ลดขนาดอัตโนมัติ หน้าเพื่อกำหนดการตั้งค่าปลั๊กอิน.

ตั้งค่าอัตโนมัติให้เล็กที่สุด

คุณสามารถเริ่มต้นได้โดยทำเครื่องหมายที่ช่องถัดจากตัวเลือก JavaScript และตัวเลือก CSS จากนั้นคลิกที่ปุ่มบันทึกการเปลี่ยนแปลง.

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

ตัวเลือกจาวาสคริปต์ขั้นสูง

ที่นี่คุณสามารถอนุญาตให้ปลั๊กอินรวมอินไลน์ JS และลบสคริปต์ที่ไม่รวมอยู่ในค่าเริ่มต้นเช่น seal.js หรือ jquery.js.

ถัดไปเลื่อนลงไปที่ตัวเลือก CSS และอนุญาตให้ปลั๊กอินรวม CSS แบบอินไลน์.

คลิกปุ่ม ‘บันทึกการเปลี่ยนแปลงและล้างแคช’ เพื่อบันทึกการเปลี่ยนแปลงและแคชปลั๊กอินที่ว่างเปล่า.

เมื่อเสร็จแล้วไปข้างหน้าและตรวจสอบเว็บไซต์ของคุณอีกครั้งด้วยเครื่องมือ PageSpeed.

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

มันทำงานยังไง?

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

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

2. แก้ไข Render Blocking JavaScript โดยใช้ W3 Total Cache

วิธีนี้ต้องใช้งานเพิ่มอีกเล็กน้อยและแนะนำสำหรับผู้ใช้ที่ใช้ปลั๊กอิน W3 Total Cache บนเว็บไซต์ของพวกเขาอยู่แล้ว.

ก่อนอื่นคุณจะต้องติดตั้งและเปิดใช้งานปลั๊กอิน W3 Total Cache หากคุณต้องการความช่วยเหลือโปรดดูคู่มือของเราเกี่ยวกับวิธีการติดตั้งและตั้งค่าแคชรวม W3 สำหรับผู้เริ่มต้น.

ถัดไปคุณต้องไปที่ ประสิทธิภาพ»การตั้งค่าทั่วไป หน้าและเลื่อนลงไปที่ส่วนลดขนาด.

W3 Total Cache เปิดใช้งานการลดขนาด

ก่อนอื่นคุณต้องตรวจสอบ “เปิดใช้งาน” ถัดจากตัวเลือกลดขนาดแล้วเลือก “คู่มือ” สำหรับตัวเลือกโหมดลดขนาด.

คลิกที่ปุ่มบันทึกการตั้งค่าทั้งหมดเพื่อจัดเก็บการตั้งค่าของคุณ.

ถัดไปคุณต้องเพิ่มสคริปต์และ CSS ที่คุณต้องการลดขนาด.

คุณสามารถรับ URL ของสคริปต์และสไตล์ทั้งหมดที่แสดงการบล็อกจากเครื่องมือ Google PageSpeed ​​Insights.

ภายใต้คำแนะนำที่ระบุว่า: “กำจัด JavaScript และ CSS ที่บล็อกการบล็อกการแสดงผลในเนื้อหาที่อยู่ด้านบน” ให้คลิกที่ “แสดงวิธีการแก้ไข” มันจะแสดงรายการของสคริปต์และสไตล์ชีท.

รับ URL JavaScript และ Stylesheet จากเครื่องมือ Google PageSpeed

เลื่อนเมาส์ไปที่สคริปต์จากนั้นสคริปต์จะแสดง URL แบบเต็ม คุณสามารถเลือก URL นี้จากนั้นใช้คีย์ CTRL + C (Command + C บน Mac) ของแป้นพิมพ์เพื่อคัดลอก URL.

ตอนนี้ตรงไปที่พื้นที่ผู้ดูแลระบบ WordPress ของคุณและไปที่ ประสิทธิภาพ»ลดขนาด หน้า.

ก่อนอื่นคุณต้องเพิ่มไฟล์ JavaScript ที่คุณต้องการให้มีขนาดเล็กลง เลื่อนลงไปที่ส่วน JS จากนั้นภายใต้ ‘การดำเนินการในพื้นที่’ ตั้งค่าประเภทการฝังเป็น as แบบไม่ปิดกั้น async ’สำหรับส่วน.

เพิ่มสคริปต์เพื่อลดขนาด

ต่อไปคุณต้องคลิกปุ่ม ‘เพิ่มสคริปต์’ แล้วเริ่มเพิ่ม URL สคริปต์ที่คุณคัดลอกจากเครื่องมือ Google PageSpeed.

เมื่อเสร็จแล้วให้เลื่อนลงไปที่ส่วน CSS แล้วคลิกปุ่ม ‘เพิ่มสไตล์ชีท’ ตอนนี้เริ่มเพิ่ม URL สไตล์ชีทที่คุณคัดลอกจากเครื่องมือ Google PageSpeed.

เพิ่มสไตล์ชีทเพื่อย่อขนาด

ตอนนี้คลิกที่ปุ่ม “บันทึกการตั้งค่าและล้างแคช” เพื่อจัดเก็บการตั้งค่าของคุณ.

ไปที่เครื่องมือ Google PageSpeed ​​และทดสอบเว็บไซต์ของคุณอีกครั้ง.

ตรวจสอบให้แน่ใจว่าคุณทดสอบเว็บไซต์ของคุณอย่างละเอียดเพื่อดูว่าทุกอย่างทำงานได้ดี.

การแก้ไขปัญหา

ขึ้นอยู่กับว่าปลั๊กอินและชุดรูปแบบ WordPress ของคุณใช้ JavaScript และ CSS มันอาจเป็นเรื่องที่ค่อนข้างท้าทายในการแก้ไขปัญหาการเรนเดอร์ทั้งหมดที่ปิดกั้น JavaScript และ CSS อย่างสมบูรณ์.

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

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

อย่างไรก็ตามอาจเป็นเรื่องยากที่จะทราบว่าคุณจะต้องแสดงรหัส CSS ใดบนเนื้อหาครึ่งหน้าบน.

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me