Skip to content

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

Assets Manager

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

จริงๆ แล้ว ปลั๊กอินนี้เป็นตัวที่ลอกมาจากปลั๊กอิน Gonzales อีกที ซึ่งเราเคยเขียนแนะนำกันไปแล้ว ซึ่งปลั๊กอินตัวนั้นจะไม่มีเวอร์ชั่นฟรี ตอนออกมาแรกๆ Assets Manager เอง ก็ยังใช้หน้าตาแบบเดียวกัน Gonzales อยู่เลย คือเหมือนกันยังกับแกะ แต่ตอนนี้เขาก็มาปรับแต่งพัฒนาเพิ่มเป็นของตัวเอง และแยกการใช้งานบางส่วนไปไว้ในเวอร์ชั่น Pro แทน ส่วนเวอร์ชั่นฟรีที่เราใช้กันนี้สามารถติดตั้งผ่านหน้า Dashboard ได้เลย

ปลั๊กอิน Assets Manager

เมื่อเราติดตั้งปลั๊กอิน Assets Manager แล้ว ที่เมนู Settings > Assets Manager ก็จะมีหน้าตั้งค่าแบบด้านบน ซึ่งจะเป็นการตั้งค่าเฉพาะว่าจะเปิดปุ่ม Scripts Manager ของปลั๊กอินที่ไหนบ้างเท่านั้นเอง ตรงนี้เราไม่ต้องไปทำอะไรเข้าก็ได้ ส่วน More Features นั้นก็เป็นส่วนขายของของปลั๊กอินอีกตัวของเขา จะลองก็ได้ แต่ตอนนี้เราขอรีวิวเฉพาะในส่วนของ Assets Manager ก่อนนะครับ

เมื่อเราต้องการใช้งาน เปิด/ปิด Script ตัวไหนในหน้าต่างๆ เราก็แค่ไปที่เว็บหน้านั้น ก็จะมีปุ่ม Script Manager ที่บน Tools bar ซึ่งจะเรียกดูไฟล์ต่างๆ ของปลั๊กอินทั้งหมดที่ถูกโหลดในหน้านั้นๆ ขึ้นมา

ปุ่ม Script Manager

เมื่อเราคลิกแล้วก็จะเจอกับหน้าควบคุมที่แสดงให้เราเห็นไฟล์สคิปต์ต่างๆ

Script Manager

ด้านซ้ายมือเราจะเห็นปุ่มที่มีตัวเลือก

  • Plugins อันนี้คือดูในส่วนของปลั๊กอินทั้งหมดที่โหลดในหน้านี้
  • MISC อันนี้คือส่วนอื่นๆ ที่ไม่ได้มากับปลั๊กอินตั้งแต่แรก อาจจะเป็นสิ่งที่มากับ WordPress อยู่แล้ว หรือสิ่งที่เพิ่มในภายหลัง เช่นพวก Google Font หรือ Google Recaptcha เป็นต้น
  • Themes คือ script ที่มากับธีม

เมื่อเราเลื่อนไปที่รายชื่อปลั๊กอินที่คิดว่า หน้านี้ไม่ควรจะมีการใช้งาน ยกตัวอย่างเช่น ตัว Ad Inserter ซึ่งตัวนี้ใช้สำหรับการใส่แบนเนอร์ในหน้า Post ในบทความของเรา เราก็ทำการเลื่อนปิด script ทั้ง JavaScript (JS) และ CSS ของปลั๊กอินนี้ ให้เป็น No ให้หมด ซึ่งถ้าเป็นตัว Pro เราจะสามารถเลื่อนตรงชื่อปลั๊กอินทีเดียวปิดหมดทั้งเซ็ตได้เลย แต่เราใช้เวอร์ชั่นฟรี ก็จะต้องเลื่อนปิดทีละสคริปต์แทน

เปิดปิด script แต่ละตัว

เราจะเห็นว่า เมื่อเราเลื่อนไปที่ No แล้ว ตรงช่อง Conditions นั้น จะมีตัวเลือกมาให้เราเลือกเป็นเงื่อนไขต่อไป ว่า No (ปิด) แล้ว จะยกเว้นที่ไหนเป็นพิเศษหรือเปล่า ยกตัวอย่างเช่น

ปิดสคริปต์แบบมีเงื่อนไข

ปิดมันไปให้หมดทั้งเว็บนั่นแหละ ซึ่งการปิดแบบ Everywhere นี้ ก็จะมีเงื่อนไขเพิ่มเติมขึ้นมาด้วย ก็คือ Exclude (ส่วนที่ยกเว้น) ซึ่งสามารถสั่งให้ยกเว้นจาก Current URL คือปิดให้หมดเลย ยกเว้นหน้านี้ให้เปิดไว้ หรือปิดทั้งหมดเลย แต่ให้เปิดในส่วนที่เป็น Post ทั้งหมดหรือที่เป็น Page หรือเราอาจจะเปิดใช้เฉพาะบาง Category (หมวดหมู่) ก็ได้ เป็นต้น

เราสามารถที่จะปิดทั้งหมดแล้วเปิดเฉพาะหน้าที่ต้องการได้ ด้วยการไปยังหน้าที่เราต้องการใช้งาน แล้วทำแบบเดียวกันแต่ว่าเลื่อนจาก No เป็น Yes นั่นเอง

ปิดสคริปต์เฉพาะหน้านี้

สำหรับปิดเฉพาะหน้านี้หน้าเดียว

ส่วนเงื่อนไขอื่นๆ ที่ช่วยให้สะดวกขึ้นมาอีกอย่าง Custom URL ซึ่งใช้วิธีการสร้างเงื่อนไขด้วยการใช้ URL เป็นตัวกรอง กับ Regular Expression นั้น จะมีให้ใช้เฉพาะในตัว Pro เท่านั้น

เมื่อตั้งค่าเสร็จเรียบร้อยแล้วก็คลิกที่ปุ่ม SAVE ด้านบนได้เลย

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

Remove unused CSS – PageSpeed Insight

เทคนิคอีกอย่างหนึ่งในการใช้ Google PageSpeed Insight มาช่วยในการปรับแต่งปลั๊กอิน Assets Manager ก็คือ การตรวจสอบ Unused CSS นั่นเอง ซึ่งถ้าเราลองใช้เครื่องมือนี้สแกนดู เขาจะมีคำแนะนำนึงที่บอกว่า Remove unused CSS ซึ่งก็คือ ให้เอา CSS ที่ไม่จำเป็นออก นั่นเพราะว่าเว็บที่ทำด้วย WordPress มักจะมี CSS มาจากหลายส่วนนั่นเอง ไม่เหมือนเว็บทั่วไปที่เขาเขียนเฉพาะที่จะใช้งานเท่านั้น

Remove unused CSS

ให้เราสังเกตุตรงไฟล์ที่มีขนาดเท่ากันในทั้ง 2 ช่อง ถ้าเท่ากันแบบนี้แสดงว่าไฟล์นั้นทั้งไฟล์จริงๆ แล้วไม่มีการเรียกใช้งานเลย ต่างจากอีกตัวที่มีตัวเลขต่างกันคือ 42/40 แสดงว่ามีบางส่วนในไฟล์นั้นที่ถูกเรียกใช้งานอยู่ จะปิดไปเลยไม่ได้ ดังนั้นก็ให้เราดูที่ชื่อของไฟล์ก็พอจะรู้ได้ว่าเป็นตัว block-libray นั่นเอง จากนั้นก็ไปจัดการหาปิดมันใน Script Manager ซะ ซึ่งต้องทดสอบดูด้วยว่า ปิดได้ที่สวนไหนบ้าง ซึ่งตัวนี้เป็น CSS ของ Gutenburg ดังนั้นหน้าไหนที่เราใช้ ​Gutenburg เช่นพวกโพสต่างๆ ก็ควรจะ Exclude ไว้นะครับ

เทคนิคสำคัญอยู่ที่ความละเอียดในการจัดการกับเนื้อหาของเราด้วย เราต้องรู้ว่าปลั๊กอินไหนมันถูกใช้ร่วมกันในหน้าไหนบ้างโดยไม่จำเป็นต้องเปิดทีละหน้าหมดทั้งเว็บ โดย WordPress จะแบ่งเนื้อหาออกเป็น Post Type (เช่น Post, Page, Shop) post type ประเภทเดียวกัน ก็จะโหลดสคริปต์เหมือนกัน เช่น โพส (Posts) หรือบทความนั้นถือเป็น post type ประเภทเดียวกัน ก็จะโหลดปลั๊กอินแทบจะเหมือนกันทุกหน้า แบบ Pages ก็จะโหลดเหมือนกัน ถ้าใช้ WooCommerce หน้าที่เป็น Shop ก็จะโหลดเหมือนกัน เป็นต้น แล้วแต่ว่าเว็บใครจะมี Post type แบบไหนบ้าง นอกจากนี้เรายังสามารถที่จะแยกย่อยให้แตกต่างกันโดยการใช้ประโยชน์จาก Category (หมวดหมู่) ได้ด้วย ก็จะทำให้เราสามารถปิดปลั๊กอินที่ไม่จำเป็นในแต่ละหน้าได้ละเอียดยิ่งขึ้น ซึ่งหากสามารถใช้แพทเทิร์นของ URL และ Regular expression ได้ ก็จะยิ่งสามารถจัดการเป็นกลุ่มๆ ได้ละเอียดยิ่งกว่านี้ แต่เท่านี้ก็ถือว่าสะดวกมากแล้ว

หวังว่าบทความนี้จะถูกใจ Optimizer ไม่มากก็น้อย

Assets Manager
บทสรุป
เป็นปลั๊กอินที่ใช้งานได้ง่าย สะดวกและมีประโยชน์มากในการจัดการกับ JavaScript และ CSS จากหลายปลั๊กอินที่เราไม่ได้จำเป็นต้องใช้งานในทุกๆ หน้า แต่ปลั๊กอินเหล่านั้นกลับมีการเรียกใช้ทุกหน้าเฉยเลย
Design Quality
Customizability
Feature Availability
Easy to use
ข้อดี
ข้อเสีย
4.4
คะแนน
Back To Top
Search