วิธีย่อข้อมูล CSS / JavaScript ใน WordPress (3 กลยุทธ์)
เผยแพร่แล้ว: 2022-04-26คุณต้องการย่อเอกสารบนหน้าเว็บ WordPress ของคุณหรือไม่?
การลดขนาดข้อมูล WordPress CSS และ JavaScript ของคุณจะทำให้โหลดเร็วขึ้นและเพิ่มความเร็วให้กับไซต์ WordPress ของคุณ
ในคู่มือนี้ เราจะแสดงวิธีย่อไฟล์ CSS/JavaScript ใน WordPress ให้เล็กลง เพื่อปรับปรุงประสิทธิภาพและความเร็ว
การลดขนาดคืออะไรและคุณต้องการเมื่อใด
นิพจน์ 'ลดขนาด' ใช้เพื่ออธิบายระบบที่ทำให้ขนาดไฟล์เว็บไซต์ของคุณมีขนาดเล็กลง โดยกำจัดช่องว่าง เส้น และบุคคลที่ไม่ต้องการออกจากรหัสทรัพยากร
นี่คือตัวอย่างโค้ด CSS มาตรฐาน:
human body
margin:20px
padding:20px
colour:#333333
history:#f7f7f7
h1
font-dimension:32px
coloration#222222
margin-base:10px
หลังจากย่อโค้ดแล้วจะมีลักษณะดังนี้:
entire bodymargin:20pxpadding:20pxcolor:#333history:#f7f7f7
h1font-dimension:32pxmargin-base:10px
โดยทั่วไป ขอแนะนำให้ลดขนาดเอกสารที่ส่งไปยังเบราว์เซอร์ของผู้ใช้เท่านั้น คุณลักษณะนี้มีไฟล์ HTML, CSS และ JavaScript
คุณสามารถย่อขนาดเอกสาร PHP ได้เช่นกัน แต่การลดขนาดจะไม่เพิ่มความเร็วในการโหลดหน้าเว็บสำหรับลูกค้าของคุณ เนื่องจาก PHP เป็นภาษาการเขียนโปรแกรมฝั่งเซิร์ฟเวอร์ นั่นหมายความว่ามันทำงานบนเซิร์ฟเวอร์ก่อนที่จะถูกส่งไปยังอินเทอร์เน็ตเบราว์เซอร์ของผู้เยี่ยมชม
การเพิ่มขนาดไฟล์ข้อมูลจะช่วยเพิ่มความเร็วของ WordPress และประสิทธิภาพโดยรวม เนื่องจากข้อมูลที่กะทัดรัดจะโหลดได้เร็วกว่า
อย่างไรก็ตาม ผู้เชี่ยวชาญบางคนคิดว่าการทำงานที่ก้าวหน้านั้นค่อนข้างน้อยสำหรับเว็บไซต์ส่วนใหญ่และไม่คู่ควรกับความยาก การลดขนาดจะกำจัดข้อมูลหลายกิโลไบต์บนเว็บไซต์ WordPress ส่วนใหญ่เท่านั้น คุณสามารถลดเวลาในการโหลดไซต์ให้เหลือน้อยที่สุดได้ด้วยการเพิ่มประสิทธิภาพรูปภาพสำหรับเว็บทั่วโลก
หากคุณกำลังพยายามที่จะได้รับคะแนน 100/100 ในซอฟต์แวร์ Google Pagespeed หรือ GTMetrix การลดขนาด CSS และ JavaScript จะทำให้คะแนนของคุณเพิ่มขึ้นอย่างเห็นได้ชัด
เมื่อถูกกล่าวว่า มาดูวิธีการย่อขนาด CSS/JavaScript บนหน้าเว็บ WordPress ของคุณได้อย่างง่ายดาย
เราจะมีตัวเลือกที่โดดเด่นมากกว่า 3 แบบที่คุณสามารถเลือกได้จาก:
ทุกชุด? ให้เราเริ่มต้นด้วยกระบวนการที่ดีที่สุดที่เรานำเสนอ
กระบวนการ 1. ลดขนาด CSS/JavaScript ใน WordPress โดยใช้ WP Rocket
เทคนิคนี้ง่ายกว่าและเสนอให้ผู้บริโภคทุกคน มันทำงานไม่ว่าคุณจะใช้โฮสติ้ง WordPress ใด
ขั้นแรก คุณต้องติดตั้งและเปิดใช้งานปลั๊กอิน WP Rocket สำหรับข้อมูลเฉพาะเพิ่มเติม โปรดดูขั้นตอนของเราโดยการย้ายคู่มือเกี่ยวกับวิธีการตั้งค่าปลั๊กอิน WordPress
WP Rocket เป็นปลั๊กอินแคช WordPress ที่ดีที่สุดในตลาด ช่วยให้คุณสามารถแทรกแคชไปยัง WordPress ได้ง่ายมาก และเพิ่มความเร็วของเว็บไซต์และช่วงเวลาในการโหลดเว็บไซต์ได้อย่างมาก
สำหรับข้อมูลเพิ่มเติม โปรดดูบทแนะนำเกี่ยวกับวิธีติดตั้งและสร้าง WP Rocket บน WordPress
เมื่อเปิดใช้งาน คุณต้องการตรวจสอบหน้าเว็บ การ ตั้งค่า » WP Rocket และสลับไปที่แท็บ 'การเพิ่มประสิทธิภาพไฟล์'
จากตรงนี้ คุณจะต้องดูโซลูชันเอกสาร Minify CSS
WP Rocket จะแสดงคำเตือนว่าสิ่งนี้สามารถแบ่งจุดบนเว็บไซต์ของคุณได้ ไปข้างหน้าและเพียงคลิกที่ปุ่ม 'เปิดใช้งานการลดขนาด CSS' คุณสามารถปิดใช้งานการเลือกนี้ได้ตลอดเวลาหากทำให้เกิดปัญหากับเว็บไซต์ของคุณ
ต่อมาคุณต้องเลื่อนลงไปที่ส่วนเอกสาร JavaScript ด้านล่าง
ที่นี่ เพียงทดสอบช่องถัดจากความเป็นไปได้ 'ลดขนาดไฟล์ JavaScript'
อีกครั้ง คุณจะเห็นคำเตือนว่าสิ่งนี้อาจทำให้เว็บไซต์ของคุณแตกร้าวได้ ไปข้างหน้าและเพียงคลิกที่ปุ่ม 'เปิดใช้งาน Miniify JavaScript'
หลังจากนั้น อย่าละเลยที่จะคลิกปุ่มคงการปรับไว้เพื่อรักษาการกำหนดค่าของคุณ
WP Rocket จะเริ่มต้นลดขนาดข้อมูล CSS และ JavaScript ของคุณ คุณสามารถล้างแคชของคุณได้มากในการตั้งค่าปลั๊กอินเพื่อให้แน่ใจว่าจะเริ่มใช้ CSS และ JavaScript ที่ย่อขนาดสำหรับผู้เยี่ยมชมหน้าเว็บในอนาคต
เทคนิคที่ 2 ลดขนาด CSS/JavaScript ใน WordPress โดยใช้ SiteGround
หากคุณกำลังใช้ SiteGround เป็นผู้ให้บริการเว็บโฮสติ้ง WordPress คุณสามารถย่อไฟล์ CSS ที่ทำงานกับ SiteGround Optimizer ได้
SiteGround Optimizer เป็นปลั๊กอินเพิ่มประสิทธิภาพทั่วไปที่ทำงานบนระบบของพวกเขา ทำงานได้ดีกับ Ultrafast PHP เพื่อเพิ่มความแข็งแกร่งให้กับระยะเวลาการโหลดเว็บไซต์ของคุณ
เพียงตั้งค่าและเปิดใช้งานปลั๊กอิน SiteGround Optimizer บนเว็บไซต์ WordPress ของคุณ สำหรับรายละเอียดเพิ่มเติม โปรดดูที่คำแนะนำทีละขั้นตอนเกี่ยวกับวิธีการใส่ปลั๊กอิน WordPress
หลังจากนั้น คุณต้องคลิกที่เมนู SG Optimizer ในแถบด้านข้างของผู้ดูแลระบบ WordPress
การดำเนินการนี้จะนำคุณไปยังการตั้งค่า SG Optimizer
จากในบทความนี้ คุณต้องคลิกปุ่ม 'ไปที่ส่วนหน้า' น้อยกว่า 'การเพิ่มประสิทธิภาพอื่นๆ'
ในหน้าจอถัดไป คุณต้องสลับการสลับที่จะเกิดขึ้นกับโซลูชัน 'ลดขนาดไฟล์ CSS'
ในเร็วๆ นี้ คุณต้องสลับไปที่แท็บ JavaScript และพลิกสวิตช์ที่จะมาถึงเพื่อเลือก 'ลดขนาดไฟล์ JavaScript'
นั้นคือทั้งหมด! ตอนนี้คุณสามารถล้างแคช WordPress และดูไซต์ของคุณเพื่อโหลดเอกสาร CSS และ JS เวอร์ชันย่อ
วิธีที่ 3 ลดขนาด CSS/JavaScript โดยใช้ Autoptimize
วิธีนี้เสนอให้ผู้บริโภคที่ไม่ได้อยู่ใน SiteGround และไม่ทำงานกับ WP Rocket
เริ่มแรก คุณต้องตั้งค่าและเปิดใช้งานปลั๊กอิน Autoptimize สำหรับรายละเอียดเพิ่มเติม โปรดดูที่แนวทางปฏิบัติของเราในการติดตั้งปลั๊กอิน WordPress
ในการเปิดใช้งาน คุณต้องดูที่หน้า ตัวเลือก » Autoptimize เพื่อกำหนดค่าตัวเลือกปลั๊กอิน
จากบทความนี้ ก่อนอื่นคุณต้องตรวจสอบตัวเลือก 'Optimize JavaScript Code' ภายใต้ JavaScript Options
หลังจากนั้น คุณต้องเลื่อนลงไปที่ตัวเลือก CSS และตรวจสอบช่องถัดจากตัวเลือก 'ปรับโค้ด CSS ให้เหมาะสม'
อย่าละเลยที่จะคลิกที่ปุ่ม Conserve Adjustments เพื่อจัดเก็บการกำหนดค่าของคุณ
จากนั้น คุณสามารถคลิกปุ่ม Vacant Cache เพื่อเริ่มต้นทำงานกับไฟล์ข้อมูลย่อของคุณ ปลั๊กอินยังสามารถใช้เพื่อจัดการกับการบล็อกการแสดงผล JavaScript และ CSS ใน WordPress
เราหวังว่าการโพสต์นี้จะช่วยคุณลดขนาด CSS และ JavaScript บนหน้าเว็บ WordPress ของคุณ คุณอาจต้องการดูบทช่วยสอนของเราเกี่ยวกับการเพิ่มประสิทธิภาพ Core Net Vitals ใน WordPress และปฏิบัติตามบทช่วยสอนประสิทธิภาพทั่วไปของ WordPress ที่ยิ่งใหญ่ที่สุด
หากคุณชอบโพสต์นี้ อย่าลืมสมัครรับข้อมูลจากบทแนะนำภาพยนตร์ YouTube Channel สำหรับ WordPress คุณสามารถพบเราบน Twitter และ Facebook