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

Autoptimize คืออะไร และทำงานยังไง

what is autoptimize

ปลั๊กอินที่ช่วยบีบอัดและจัดการไฟล์ HTML CSS และ JavaScript ในเว็บไซต์ของเราให้เล็กลง โดยใช้วิธีลดบรรทัดของโค้ดด้วยการ Minify และการรวมไฟล์ประเภทเดียวกันให้เป็นไฟล์เดียวกัน ยกตัวอย่างเช่น หากเว็บไซต์ของเรามีไฟล์ CSS อยู่ 10 ไฟล์ เจ้าปลั๊กอินนี้ก็จะจับมารวมกันเป็นไฟล์เดียว ทำให้ Web Browser ลดจำนวนไฟล์ที่ต้องโหลดลง มีไฟล์ต้องประมวลผลน้อยลง ส่งผลให้การแสดงผลหน้าเว็บไซต์ของเราเร็วขึ้น

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


เริ่มบีบอัด CSS และ JavaScript กันเลย

let's compress css and javascript

เริ่มจากเข้าสู่ระบบ WordPress กันก่อน

login wordpress

ติดตั้งและเปิดใช้งานปลั๊กอิน Autoptimize
สำหรับใครที่ยังติดตั้งปลั๊กอินไม่เป็นก็ลองอ่านบทความนี้ดูก่อนนะ
>> ปลั๊กอิน WordPress คืออะไร ติดตั้งยังไง

install autoptimize

หลังเปิดใช้งานปลั๊กอินแล้ว ให้เลื่อนเมาส์ไปที่ “Settings” แล้วคลิกที่ “Autoptimize”

go to autoptimize

ในหัวข้อ “JavaScript Options” ให้ติ๊ก “✔” ตามภาพด้านล่าง

autoptimize javascript option

1. Optimize JavaScript Code? – เปิดใช้งานการบีบอัด JavaScript
2. Aggregate JS-files? – ย่อและรวมไฟล์ JavaScript ทั้งหมดให้ไปอยู่ที่ footer

ต่อไปในหัวข้อ “CSS Options” ให้ติ๊ก “✔” ตามภาพด้านล่าง

autoptimize css option

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”

save changes

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