วิธีกำจัดจาวาสคริปต์และ CSS ใน WordPress 

วิธีกำจัดจาวาสคริปต์และ CSS ใน WordPress 

[How to] วิธีกำจัดจาวาสคริปต์และ CSS ใน WordPress เพื่อเพิ่มประสิทธิภาพความเร็วในการโหลดเว็บไซต์ของคุณ

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

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

 

ทำความรู้จักกับ “กำจัดการปิดกั้นการแสดงผล JavaScript และ CSS ในเนื้อหาครึ่งหน้าบน” 

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

กำจัดการปิดกั้นการแสดงผล JavaScript และ CSS ในเนื้อหาครึ่งหน้าบน

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

Above-the-fold (ATF) หมายถึงส่วนของหน้าเว็บของคุณที่สามารถมองเห็นได้เมื่อหน้าเว็บโหลดขึ้นครั้งแรก ส่วนใด ๆ ของหน้าเว็บที่คุณต้องเลื่อนลงเพื่อเข้าถึงนั้นไม่ใช่ ATF

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

 

การค้นหา JavaScript และ CSS การบล็อก Render โดยใช้ Google PageSpeed ​​Insights

ขั้นตอนแรกในการแก้ไขบล็อกการแสดงผลคือการทดสอบความเร็วของเว็บไซต์ของคุณโดยใช้ Google PageSpeed Insights

1 ไปที่หน้าและวาง URL ของเว็บไซต์ของคุณในฟิลด์“ ป้อน URL ของหน้าเว็บ ”

2 คลิกวิเคราะห์เพื่อรับรายงาน

Google PageSpeed Insights

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

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

กำจัดจาวาสคริปต์และ CSS ที่บล็อกการแสดงผล

 

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

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

 

แก้ไขข้อผิดพลาด“ กำจัด JavaScript และ CSS ที่ปิดกั้นการบล็อกในเนื้อหาที่อยู่ด้านบนสุด”

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

 

W3 Total Cache

หนึ่งในรายการปลั๊กอินฟรีที่ถือว่าดี และใช้งานง่ายคือ W3 Total Cache เมื่อติดตั้งและเปิดใช้งานแล้วให้ทำตามขั้นตอนเหล่านี้บนแดชบอร์ดผู้ดูแลระบบ WordPress ของคุณ

1 ไปที่ผลการดำเนินงาน > การตั้งค่าทั่วไป

2 ค้นหาหัวข้อ Minify บนหน้า จากนั้นคุณจะเห็นตัวเลือกเล็กน้อยภายใต้หัวข้อนี้

3 ติ๊กเปิดใช้กล่องลดขนาด จากนั้นสำหรับโหมดลดขนาดตัวเลือกให้เลือกด้วยตนเอง

4 กดบันทึกการตั้งค่าทั้งหมด

การลดขนาดทรัพยากร CSS และสคริปต์ JS ด้วยปลั๊กอิน W3 Total Cache

 

5 ดึงสคริปต์ JavaScript และ CSS ที่บล็อกการแสดงผลทั้งหมดซึ่งคุณสามารถค้นหาผ่าน Google PageSpeed ​​Insights

6 เมื่อคุณพบตัวสร้างปัญหาแล้วให้กลับไปที่ประสิทธิภาพ > ลดขนาดลงในแผงควบคุม WordPress ของคุณ

7 ค้นหาส่วน JS ในส่วนการทำงานในพื้นที่ให้เลือกประเภทการฝังแบบไม่บล็อคโดยใช้ “การเลื่อน” แบบฝังสำหรับแท็กefore <head>

8 สำหรับการจัดการไฟล์ JSเลือกชุดรูปแบบที่ใช้งานอยู่ของคุณและคลิกที่ปุ่มเพิ่มสคริปต์ คัดลอกและวาง URL JavaScript จาก Google PageSpeed ​​Insights บนฟิลด์ที่ให้ไว้ดังที่แสดงด้านล่าง

กำจัดการเรนเดอร์ที่บล็อกทรัพยากร JS ด้วยปลั๊กอิน W3 Total Cache

9 เลื่อนลงและค้นหาส่วน CSS สำหรับการจัดการไฟล์ CSS , เลือกรูปแบบการใช้งานของคุณและคลิกเพิ่มแผ่นสไตล์ คล้ายกับขั้นตอนข้างต้นคัดลอก CSS สไตล์ชีท URL จาก PageSpeed ​​Insights และวางลงในฟิลด์ที่ต้องการ

การจัดการไฟล์ CSS ด้วย w3-total-cache

10 สุดท้ายให้คลิกบันทึกการตั้งค่าและกดปุ่มล้างแคช

 

Autoptimize

อีกหนึ่งลั๊กอิน Autoptimize เพื่อแก้ไขข้อผิดพลาดการบล็อกการแสดงผล javascript และ css ทำขั้นตอนเหล่านี้บนแดชบอร์ดของคุณ เมื่อติดตั้งและเปิดใช้งานปลั๊กอิน

1 ไปที่การตั้งค่า -> ลดขนาดอัตโนมัติ

2 ทำเครื่องหมายในช่องเพื่อเพิ่มประสิทธิภาพรหัส JavaScript หรือไม่ ” และเพิ่มประสิทธิภาพโค้ด CSS?

3 กดบันทึกการเปลี่ยนแปลงและ Cache ที่ว่างเปล่าปุ่ม

ปรับ CSS และ JavaScript ให้เหมาะสมด้วย Autoptimize plugin

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

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

1 กลับไปที่การตั้งค่า -> ลดขนาดอัตโนมัติ

2 กดแสดงตั้งค่าขั้นสูงปุ่ม

3 จากนั้นตรวจสอบตัวเลือกสำหรับการรวม inline JS และการรวม inline CSS ด้วย

การตั้งค่าขั้นสูงเพื่อเพิ่มประสิทธิภาพ css และ js โดยการรวม inline CSS และ JS ด้วย

 

4 บันทึกการเปลี่ยนแปลงของคุณ

สรุปการกำจัดจาวาสคริปต์และ CSS ใน WordPress 

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

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

หวังว่าการแนะนำนี้จะเป็นประโยชน์สำหรับคุณ