เคยรู้สึกมั้ย ว่าเว็บไซต์ของเราแสดงผลช้ากว่าที่ควรจะเป็น อาจจะเป็นเพราะ WordPress ของเราติดตั้งปลั๊กอินมากเกินไป หรือใช้ธีมที่ออกแบบมาไม่ดี ทำให้ต้องโหลดไฟล์ CSS และ JavaScript เยอะ ส่งผลให้เว็บประมวลผลช้า วิธีแก้ให้เรามาลองบีบอัด CSS และ JavaScript ให้เล็กลงและโหลดได้เร็วขึ้นด้วย Autoptimize กัน
Autoptimize คืออะไร และทำงานยังไง
ปลั๊กอินที่ช่วยบีบอัดและจัดการไฟล์ HTML CSS และ JavaScript ในเว็บไซต์ของเราให้เล็กลง โดยใช้วิธีลดบรรทัดของโค้ดด้วยการ Minify และการรวมไฟล์ประเภทเดียวกันให้เป็นไฟล์เดียวกัน ยกตัวอย่างเช่น หากเว็บไซต์ของเรามีไฟล์ CSS อยู่ 10 ไฟล์ เจ้าปลั๊กอินนี้ก็จะจับมารวมกันเป็นไฟล์เดียว ทำให้ Web Browser ลดจำนวนไฟล์ที่ต้องโหลดลง มีไฟล์ต้องประมวลผลน้อยลง ส่งผลให้การแสดงผลหน้าเว็บไซต์ของเราเร็วขึ้น
นอกจากนี้ยังเป็นปลั๊กอินที่เป็นที่นิยมแพร่หลายอีกหนึ่งปลั๊กอินที่ควรมีติดเว็บเอาไว้ และยังสามารถใช้คู่กับปลั๊กอิน Cache ตัวอื่นเพื่อให้เว็บไซต์ของเราเร็วขึ้นไปอีกก็ได้
เริ่มบีบอัด CSS และ JavaScript กันเลย
เริ่มจากเข้าสู่ระบบ WordPress กันก่อน
ติดตั้งและเปิดใช้งานปลั๊กอิน Autoptimize
สำหรับใครที่ยังติดตั้งปลั๊กอินไม่เป็นก็ลองอ่านบทความนี้ดูก่อนนะ
>> ปลั๊กอิน WordPress คืออะไร ติดตั้งยังไง
หลังเปิดใช้งานปลั๊กอินแล้ว ให้เลื่อนเมาส์ไปที่ “Settings” แล้วคลิกที่ “Autoptimize”
ในหัวข้อ “JavaScript Options” ให้ติ๊ก “✔” ตามภาพด้านล่าง
1. Optimize JavaScript Code? – เปิดใช้งานการบีบอัด JavaScript
2. Aggregate JS-files? – ย่อและรวมไฟล์ JavaScript ทั้งหมดให้ไปอยู่ที่ footer
ต่อไปในหัวข้อ “CSS Options” ให้ติ๊ก “✔” ตามภาพด้านล่าง
1. Optimize CSS Code? – เปิดใช้งานการบีบอัด CSS
2. Aggregate CSS-files? – ย่อและรวมไฟล์ CSS (แบบเดียวกับ JavaScript)
3. Also aggregate inline CSS? – รวม CSS จาก HTML ของเว็บไซต์ของเรา
4. Inline and Defer CSS? – เอา CSS ที่ไม่จำเป็นออก
คลิก “Save Changes and Empty Cache”
เสร็จแล้วให้ลองเปิดเว็บไซต์ของเราดูว่าแสดงผลเร็วขึ้นมั้ย ลองตรวจดูทุกหน้าว่ามีจุดไหนแสดงผลผิดเพี้ยนหรือไม่ เพราะการ Minify Code อาจทำให้ Code บางส่วนทำงานผิดพลาดยกตัวย่างเช่น ข้อความแสดงผลทับกัน รูปหาย หรือข้อความหายไป หากพบจุดที่มีปัญหาให้ลองลด Option ที่เปิดใน Autoptimize ดู หรือไม่ก็ลองปิดปลั๊กอินดูว่าหายมั้ย
Comments