คุณต้องการกำจัดไฟล์ (CSS & JS) ที่บล็อกการโหลดหน้าบน WordPress หรือไม่? หากคุณกำลังทดสอบไซต์ของคุณบน Google Insights PageSpeed คุณอาจเห็นคำแนะนำในการกำจัดสคริปต์ที่บล็อกหน้าไม่ให้โหลด ในบทช่วยสอนนี้เราจะแสดงวิธีแก้ไขไฟล์เหล่านี้ที่บล็อกการโหลดหน้าเว็บของคุณเพื่อปรับปรุงคะแนน Google PageSpeed ของคุณ
อะไรคือการปิดกั้นการโหลดหน้าเว็บ?
แต่ละไซต์ WordPress มีชุดรูปแบบและปลั๊กอินที่เพิ่ม JavaScript และไฟล์ CSS ที่ส่วนท้ายและก่อนหน้าจะปรากฏบนเบราว์เซอร์ สคริปต์เหล่านี้สามารถเพิ่มความเร็วในการโหลดหน้าเว็บไซต์ของคุณและยังสามารถบล็อกการแสดงผลของหน้าเว็บ
เบราว์เซอร์ของผู้ใช้จะต้องโหลดสคริปต์และ CSS ก่อนที่จะโหลดเนื้อหาของหน้า ซึ่งหมายความว่าผู้ใช้ที่เชื่อมต่อช้าจะต้องรออีก XNUMX-XNUMX มิลลิวินาทีเพื่อดูหน้านี้
เจ้าของไซต์ที่พยายามบรรลุคะแนน Google PageSpeed ที่ดีจะต้องแก้ไขปัญหานี้
1 - วิธีแก้ไขการแสดงผลหน้าเว็บด้วย Autoptimize
วิธีนี้ง่ายกว่าและแนะนำสำหรับผู้ใช้ส่วนใหญ่
สิ่งแรกที่คุณต้องทำคือติดตั้งและเปิดใช้งานปลั๊กอิน " Autoptimize " สำหรับรายละเอียดเพิ่มเติมดู คำแนะนำทีละขั้นตอนของเราเกี่ยวกับวิธีการติดตั้งปลั๊กอิน WordPress.
หลังจากเปิดใช้งานปลั๊กอินคุณต้องไปที่ " การตั้งค่า> ปรับอัตโนมัติ เพื่อกำหนดการตั้งค่าปลั๊กอิน
คุณสามารถเริ่มต้นด้วยการเลือกช่องตัวเลือก JavaScript และ CSS จากนั้นคลิกที่ปุ่ม "บันทึกการเปลี่ยนแปลง"
ตอนนี้คุณสามารถทดสอบ .ของคุณ เว็บไซต์เว็บ โดยใช้เครื่องมือ PageSpeed หากยังมีสคริปต์ที่บล็อกการแสดงหน้าเว็บ คุณต้องกลับไปที่หน้าการตั้งค่าปลั๊กอินและคลิกที่ปุ่ม "แสดงการตั้งค่าขั้นสูง" ที่ด้านบน
ที่นี่คุณสามารถอนุญาตให้ปลั๊กอินรวม JS อินไลน์และลบสคริปต์ที่ยกเว้นโดยค่าเริ่มต้นเช่น“ seal.js” หรือ“ jquery.js”
จากนั้นเลื่อนลงไปที่ตัวเลือก CSS และอนุญาตให้ปลั๊กอินรวมไฟล์ CSS ทั้งหมด
คลิกปุ่ม "บันทึกการเปลี่ยนแปลงและล้างแคช" เพื่อบันทึกการเปลี่ยนแปลงและ ล้างแคช ปลั๊กอิน
เมื่อคุณทำเสร็จแล้วไปข้างหน้าและตรวจสอบ .ของคุณ เว็บไซต์เว็บ อีกครั้งด้วยเครื่องมือ PageSpeed
ตรวจสอบให้แน่ใจว่าคุณทดสอบไซต์ของคุณอย่างรอบคอบเพื่อดูว่าทุกอย่างทำงานได้ดีหลังจากปรับแต่งไฟล์ JavaScript หรือ CSS
2 - แก้ไขการเรนเดอร์ไฟล์ด้วย W3 Total Cache
วิธีนี้ต้องใช้เวลาดำเนินการอีกเล็กน้อย และแนะนำสำหรับผู้ที่มี W3 Total Cache อยู่แล้ว เว็บไซต์.
ก่อนอื่นคุณจะต้องติดตั้งและเปิดใช้งานปลั๊กอิน W3 Total Cache ถ้าคุณต้องการความช่วยเหลือ, ดูคู่มือที่สมบูรณ์ของเรา W3 แคชรวม.
จากนั้นคุณต้องไปที่ "ประสิทธิภาพ> การตั้งค่าทั่วไป" และเลื่อนลงไปที่ส่วน "ลดขนาด"
ก่อนอื่นคุณต้องทำเครื่องหมายที่ช่อง "เปิดใช้งาน" จากนั้นเลือก "กำหนดเอง" สำหรับตัวเลือกโหมดการย่อ
คลิกที่ปุ่ม บันทึกการตั้งค่าทั้งหมด เพื่อบันทึกการตั้งค่าของคุณ
แล้วคุณจะต้องเพิ่มสคริปต์และ CSS คุณต้องการที่จะหดตัว
คุณสามารถรับ URL ของสคริปต์และสไตล์ทั้งหมดที่ต้องรวมกันตาม Google PageSpeed Insights
ภายใต้คำแนะนำที่กล่าวไว้ " กำจัดบล็อกการแสดงผล JavaScript และ CSS ", คลิกที่" แสดงวิธีแก้ปัญหา " มันจะแสดงรายการสคริปต์และสไตล์ชีท
เลื่อนเมาส์ไปที่สคริปต์และจะแสดง URL แบบเต็ม คุณสามารถเลือก URL นี้จากนั้นใช้ CTRL + C บนแป้นพิมพ์ของคุณ (Command + C บน Mac) เพื่อคัดลอก URL
ไปที่บอร์ดผู้ดูแลระบบ WordPress ของคุณแล้วไปที่ " การปฏิบัติ > minifier '
ก่อนอื่นคุณต้องเพิ่มไฟล์ JavaScript ที่คุณต้องการบีบอัด เลื่อนลงไปที่ส่วน JS จากนั้นภายใต้ชุด "การดำเนินการในโซน" ของประเภทการฝังเป็น "ไม่บล็อกโดยใช้" async "สำหรับส่วน .
จากนั้นคุณต้องคลิกที่ปุ่ม เพิ่มสคริปต์ จากนั้นเริ่มเพิ่ม URL สคริปต์ที่คุณคัดลอกจากเครื่องมือ Google PageSpeed
เมื่อเสร็จแล้วให้เลื่อนลงไปที่ส่วน CSS แล้วคลิกปุ่ม "เพิ่มสไตล์ชีต" ตอนนี้เริ่มเพิ่ม URL สไตล์ชีตที่คุณคัดลอกด้วยเครื่องมือ Google PageSpeed
ตอนนี้คลิกที่ปุ่ม บันทึกการตั้งค่าและล้างแคช เพื่อจัดเก็บการตั้งค่าของคุณ
ไปที่เครื่องมือ Google PageSpeed และทดสอบเว็บไซต์ของคุณอีกครั้ง
ตรวจสอบให้แน่ใจว่าคุณทดสอบเว็บไซต์ของคุณอย่างระมัดระวังเพื่อดูว่าทุกอย่างทำงานได้ดี
นั่นคือทั้งหมดสำหรับบทช่วยสอนนี้ ฉันหวังว่ามันจะช่วยให้คุณปรับปรุงประสิทธิภาพของ บล็อก WordPress.
