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

คุณต้องการกำจัดการปิดกั้นการแสดงผล JavaScript และ CSS ใน WordPress หรือไม่?

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

ในบทความนี้เราจะแสดงวิธีแก้ไขการบล็อกการแสดงผล JavaScript และ CSS ใน WordPress อย่างง่ายดายเพื่อปรับปรุงคะแนน Google PageSpeed ​​ของคุณ

แต่ก่อนอื่นมาค้นพบด้วยกัน วิธีการติดตั้งขั้นตอน 7 บล็อก WordPress et วิธีการหาติดตั้งและเปิดใช้งานธีมเวิร์ดเพรสบนบล็อกของคุณ.

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

การบล็อกการแสดงผล JavaScript และ CSS เป็นไฟล์ที่ป้องกันไม่ให้เว็บไซต์แสดงหน้าเว็บก่อนที่จะโหลด

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

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

สคริปต์และสไตล์ชีตเหล่านี้เรียกว่า JavaScript และ CSS render blockers

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

Google PageSpeed ​​Score คืออะไร

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

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

คุณต้องการคะแนน "100" ใน Google PageSpeed ​​หรือไม่

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

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

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

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

ในระหว่างการออกแบบ BlogPasCher ครั้งล่าสุดเรายังคงให้ความสำคัญกับความเร็วและปรับปรุงประสบการณ์ของผู้ใช้

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

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

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

1. แก้ไขสคริปต์บล็อกการแสดงผลและ CSS ด้วย WP Rocket

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

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

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

การทำเช่นนั้นคุณต้องดำเนินการต่อไป การตั้งค่า» WP Rocketจากนั้นเปลี่ยนเป็น "การเพิ่มประสิทธิภาพไฟล์ '. จากนั้นเลื่อนลงไปที่ส่วน ไฟล์ CSS และทำเครื่องหมายในช่อง  ลดขนาด CSS, รวมไฟล์ CSS et เพิ่มประสิทธิภาพการจัดส่ง CSS.

Remarque : WP Rocket จะพยายามลดขนาดไฟล์ CSS ทั้งหมดของคุณ รวมเข้าด้วยกัน และโหลดเฉพาะ CSS ที่จำเป็นสำหรับส่วนที่มองเห็นได้บนเว็บไซต์ของคุณ ซึ่งอาจส่งผลกระทบต่อลักษณะที่ปรากฏของเว็บไซต์ของคุณดังนั้นคุณควรทดสอบเว็บไซต์ของคุณอย่างถี่ถ้วนบนอุปกรณ์ต่างๆ และขนาดหน้าจอ

จากนั้นคุณต้องเลื่อนไปที่ส่วน ไฟล์ JavaScript. จากตรงนี้คุณสามารถเลือกตัวเลือกทั้งหมดเพื่อการปรับปรุงประสิทธิภาพสูงสุด

คุณสามารถย่อขนาดและรวมไฟล์ JavaScript ได้เช่นเดียวกับไฟล์ CSS

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

เว็บไซต์ส่วนใหญ่ไม่ต้องการไฟล์นี้ แต่คุณควรตรวจสอบเว็บไซต์ของคุณเพื่อให้แน่ใจว่าการลบออกจะไม่ส่งผลกระทบต่อธีมหรือปลั๊กอินของคุณ

จากนั้นเลื่อนลงไปอีกเล็กน้อยและตรวจสอบตัวเลือก 'โหลด JavaScript Defered'และ'เซฟโหมดสำหรับ jQuery'

ตัวเลือกเหล่านี้ชะลอการโหลด JavaScript ที่ไม่จำเป็นและ jQuery Safe Mode ช่วยให้คุณโหลด jQuery สำหรับธีมที่สามารถใช้แบบอินไลน์ได้ 

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

หลังจากนั้นคุณสามารถล้างแคชใน WP Rocket ก่อนที่จะทดสอบเว็บไซต์ของคุณอีกครั้งด้วย Google Page Speed ​​Insights

ในเว็บไซต์ทดสอบของเราเราสามารถทำคะแนนบนเดสก์ท็อปได้ 100% และปัญหาการแสดงผลที่ติดขัดได้รับการแก้ไขทั้งในคะแนนมือถือและเดสก์ท็อป

2. แก้ไขการบล็อกการแสดงผล JavaScript และ CSS ด้วยการเพิ่มประสิทธิภาพอัตโนมัติ

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

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

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

ก่อนอื่นคุณต้องตรวจสอบตัวเลือก 'เพิ่มประสิทธิภาพโค้ด JavaScript'ใต้บล็อก JavaScript Options. ตรวจสอบว่าไม่ได้เลือกตัวเลือก "Aggregate all linked JS-files"

จากนั้นเลื่อนลงไปที่พื้นที่ ตัวเลือก CSS และตรวจสอบตัวเลือก ' เพิ่มประสิทธิภาพโค้ด CSS?'. ตรวจสอบให้แน่ใจว่าตัวเลือก 'รวมไฟล์ CSS ที่เชื่อมโยงทั้งหมด'ไม่ได้รับการตรวจสอบ

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

ทดสอบเว็บไซต์ของคุณด้วย Page Speed ​​Insights ในเว็บไซต์สาธิตของเราเราสามารถแก้ไขปัญหาการแสดงผลที่ติดขัดได้ด้วยการตั้งค่าพื้นฐานเหล่านี้

หากยังคงมีสคริปต์บล็อกการแสดงผลคุณต้องกลับไปที่หน้าการตั้งค่าปลั๊กอินและดูตัวเลือก JavaScript และ CSS

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

คลิกที่ปุ่ม 'บันทึกการเปลี่ยนแปลงและล้างแคช' เพื่อบันทึกการเปลี่ยนแปลงของคุณและล้างแคชของปลั๊กอิน

เมื่อคุณทำเสร็จแล้วให้ไปตรวจสอบเว็บไซต์ของคุณอีกครั้งด้วยเครื่องมือ Page Speed ​​Insights

มันทำงานอย่างไร?

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

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

ช่วย

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

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

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

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

ค้นพบบางธีมและปลั๊กอิน WordPress พรีเมี่ยม  

คุณสามารถใช้ปลั๊กอิน WordPress อื่น ๆ เพื่อสร้างรูปลักษณ์ที่ทันสมัยและปรับให้เหมาะกับบล็อกหรือเว็บไซต์ของคุณ

เราเสนอปลั๊กอิน WordPress พรีเมี่ยมให้คุณที่นี่ซึ่งจะช่วยคุณได้

1 ปลั๊กอินการเพิ่มประสิทธิภาพความเร็ว WordPress

คุณกำลังดิ้นรนเพื่อจัดการปลั๊กอินการเพิ่มประสิทธิภาพความเร็วของเว็บไซต์หลายรายการหรือไม่? คุณกังวลว่าจะขัดขวางความเร็วในการดำเนินการของเว็บไซต์ของคุณหรือไม่? จากนั้นปลั๊กอิน WordPress นี้จะเป็นทางออกที่ดีที่สุดสำหรับทุกความกังวลของคุณ

ปลั๊กอินนี้ออกแบบมาเพื่อให้คุณสามารถใช้งานปลั๊กอิน WordPress ได้เกือบ 6-8 แบบ คุณเพียงแค่ต้องติดตั้งและกำหนดค่าเพื่อดูว่าการโหลดหน้าเว็บของคุณดีขึ้นอย่างเห็นได้ชัด

เราอยากจะชี้ให้เห็นว่านี่ไม่ใช่ไฟล์ ปลั๊กอินแคช หรือ CDNแต่ผลลัพธ์ที่ได้ก็น่าประทับใจ อย่าลังเลที่จะลองใช้ปลั๊กอิน WordPress นี้เพื่อดูว่ามีความสามารถอะไรบ้าง

ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง

2. โซเชียลแชร์ & Locker Pro

ส่วนขยาย Social Share & Locker Pro ได้รับการออกแบบมาเพื่อช่วยให้เว็บไซต์ของคุณปรากฏบนเครือข่ายสังคมออนไลน์มากขึ้น ด้วยการคลิกเพียงไม่กี่ครั้งคุณสามารถกำหนดตำแหน่งของไอคอนโซเชียลหรือล็อกเนื้อหาของคุณได้โดยกำหนดให้แชร์บนเครือข่ายโซเชียลที่คุณมีให้

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

นอกจากนี้ด้วย Social Share & Locker Pro คุณจะสามารถแสดงชื่อเต็มของเครือข่ายโซเชียลหรือเพียงแค่ไอคอน ขึ้นอยู่กับการออกแบบพื้นที่ว่างหรือความปรารถนาของคุณ

ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง

3 WordPress Lightbox รูปภาพ PDF

WordPress PDF Lightbox เป็น ส่วนขยายของ WordPress ซึ่งช่วยให้คุณสร้างโปรแกรมดูไฟล์ PDF โปรแกรมดู PDF เป็นชุดของรูปภาพที่สามารถบันทึกเป็น PDF ได้

ด้วยส่วนขยายนี้คุณสามารถสร้างโปรแกรมดู PDF ได้มากเท่าที่คุณต้องการ สำหรับผู้ชมแต่ละคนผู้ดูแลระบบสามารถตั้งค่าตัวเลือกต่างๆเช่น:

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

ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง

ทรัพยากรที่แนะนำ

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

• ปลั๊กอิน WordPress 10 เพื่อปรับปรุง SEO ของเว็บไซต์ของคุณ
• ปลั๊กอิน WordPress 5 พรีเมี่ยมเพื่อเพิ่มประสิทธิภาพหมวดหมู่ของคุณ
• ปลั๊กอิน WordPress 10 ตัวเพื่อแปลงสกุลเงิน
• ปลั๊กอิน 10 WordPress เพื่อบูรณาการเล่นเสียงในเว็บไซต์

สรุป

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

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

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

...