Logo shopsdesign
สอบถามบริการ / แจ้งปัญหา

วิธีตัดฟีเจอร์ที่ไม่จำเป็นออกจากธีม เพื่อลดขนาดไฟล์ CSS/JS

Share the Post:
Facebook
X
LinkedIn
Email
coverblog 187

วิธีตัดฟีเจอร์ที่ไม่จำเป็นออกจากธีม เพื่อลดขนาดไฟล์ CSS/JS

บทนำ: ทำไมธีมเบา จึงสำคัญต่อประสิทธิภาพเว็บไซต์

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

บทความนี้จะอธิบายแนวคิด วิธีตรวจสอบ และเทคนิคเชิงเทคนิค (พร้อมตัวอย่างโค้ด) สำหรับการลดขนาดไฟล์ CSS/JS โดยการ “ตัดฟีเจอร์ที่ไม่จำเป็น” ออกจากธีม WordPress ให้ใกล้เคียงกับแนวคิดของ Clean WordPress Theme มากที่สุด โดยไม่ทำให้โครงสร้างเว็บไซต์พัง

ทำความเข้าใจแนวคิด Clean WordPress Theme ก่อนเริ่มลงมือ

Clean WordPress Theme คืออะไรในมุมมองเชิงเทคนิค

Clean WordPress Theme ไม่ได้หมายถึงธีมที่ดีไซน์โล่งหรือมินิมอลเพียงอย่างเดียว แต่หมายถึงธีมที่มีโครงสร้างโค้ดสะอาด โหลดเฉพาะสิ่งที่จำเป็น และจัดการ CSS/JS อย่างมีวินัย โดยมีคุณสมบัติหลักดังนี้

  • โหลดเฉพาะฟีเจอร์ที่ใช้งานจริง ไม่ใส่สคริปต์หรือปลั๊กอินจำนวนมากเพื่อ “เผื่อไว้”
  • แยก CSS/JS ตามหน้าที่ เช่น CSS สำหรับหน้าบล็อก / หน้า Landing Page / WooCommerce แยกกันชัดเจน
  • ไม่มีโค้ดซ้ำซ้อน เช่น ไลบรารี JavaScript ที่โหลดซ้ำหลายเวอร์ชันจากหลายปลั๊กอิน
  • พร้อมต่อยอด สามารถเพิ่มหรือลดฟีเจอร์ได้โดยไม่ต้องลบธีมทิ้งทั้งหมด

เหตุผลทางเทคนิคที่ควรลดขนาด CSS/JS

  • ลด Time to First Byte (TTFB) ทางอ้อม – แม้ TTFB เกี่ยวข้องกับเซิร์ฟเวอร์ แต่ไฟล์เล็กลงทำให้การประมวลผลเบาและตอบสนองโดยรวมเร็วขึ้น
  • ลด Largest Contentful Paint (LCP) – CSS/JS ขนาดใหญ่ส่งผลให้การแสดงผลคอนเทนต์หลักช้าลง
  • ลด JavaScript blocking – JS ที่โหลดแบบ synchronous จะบล็อกการเรนเดอร์หน้าจอ
  • ลดจำนวน request – ยิ่งมีไฟล์ CSS/JS แยกกันเยอะ เวลาโหลดรวมก็จะมากขึ้น

การทำธีมให้สะอาดสไตล์ Clean WordPress Theme คือการ “ลดของที่ไม่จำเป็นออก” ก่อนจะพยายาม “เพิ่มของดีๆ เข้าไป”

ขั้นตอนที่ 1: สำรวจว่าตอนนี้ธีมของคุณโหลดอะไรอยู่บ้าง

ใช้เครื่องมือ Developer Tools ในเบราว์เซอร์

เริ่มจากการดูภาพรวมที่โหลดในแต่ละหน้า:

  • เปิดเว็บไซต์ด้วย Chrome หรือ Firefox
  • กด F12 หรือคลิกขวา > Inspect
  • ไปที่แท็บ Network แล้วโหลดหน้าใหม่ (Reload)
  • กรองดูเฉพาะไฟล์ CSS และ JS

คุณจะเห็น:

  • ชื่อไฟล์ CSS/JS ทั้งหมด
  • ขนาดไฟล์ (KB / MB)
  • โดเมนที่โหลดไฟล์ (จากธีมหลัก, Child theme, ปลั๊กอิน, CDN ฯลฯ)

ใช้ปลั๊กอินสำหรับตรวจจับสคริปต์ (เช่น Query Monitor หรือ Asset CleanUp)

ปลั๊กอินเหล่านี้ช่วยระบุว่าแต่ละสคริปต์มาจาก:

  • ธีมหลัก หรือ Child Theme
  • ปลั๊กอินตัวใด
  • โหลดบนหน้าไหนบ้าง (ทุกหน้า หรือเฉพาะหน้าบางประเภท)

ข้อมูลนี้สำคัญมากสำหรับการตัดสินใจว่าจะ “ตัดอะไรออกบ้าง” โดยไม่เสี่ยงทำให้ฟังก์ชันหลักของเว็บไซต์เสียหาย

ขั้นตอนที่ 2: แยกฟีเจอร์ที่จำเป็น กับฟีเจอร์ที่ตัดได้

จัดกลุ่มฟีเจอร์ในธีมของคุณ

จดรายการฟีเจอร์หลักที่เว็บไซต์ใช้อยู่จริง เช่น:

  • ระบบบล็อก / ข่าวสาร
  • ฟอร์มติดต่อ
  • ระบบร้านค้า (WooCommerce)
  • สไลด์โชว์ / แกลเลอรี
  • Popup หรือ Banner โปรโมชัน
  • ตัวสร้างหน้า (Page Builder) เช่น Elementor, WPBakery

ตัวอย่างฟีเจอร์ที่มัก “กินไฟล์” แต่แทบไม่จำเป็น

  • สไลด์โชว์หลายตัวในทุกหน้า – ไฟล์ JS และ CSS จาก slider library มักใหญ่และโหลดทุกหน้าแม้ไม่ได้ใช้
  • Animation / Parallax จำนวนมาก – เกี่ยวข้องกับ JS และ CSS สำหรับเอฟเฟกต์
  • ไอคอนหลายชุด – บางธีมโหลด icon font หลายไฟล์ทั้งที่ใช้จริงไม่กี่ไอคอน
  • Google Fonts หลายฟอนต์/หลายเวต – ฟอนต์ละหลายสิบ KB รวมกันแล้วมีผลต่อความเร็วอย่างชัดเจน
  • ฟีเจอร์ใน Page Builder ที่ไม่เคยใช้ แต่สคริปต์หลักถูกโหลดมาทั้งชุด

หลักการตัดสินใจ: ฟีเจอร์ไหนควรถอดออกก่อน

  • ฟีเจอร์ใดที่ไม่ส่งผลต่อ Conversion หรือเป้าหมายธุรกิจโดยตรง ตัดได้ก่อน
  • ฟีเจอร์ที่ผู้ใช้ไม่สังเกตหรือไม่ใช้ เช่น เคอร์เซอร์พิเศษ, เอฟเฟกต์เลื่อนเมาส์
  • ของที่ซ้ำซ้อนกัน เช่น ใช้ทั้ง Slider A และ Slider B ในเว็บเดียวกัน

จุดเริ่มต้นของการทำให้ธีมสะอาดแบบ Clean WordPress Theme คือการกล้าตอบว่า “อะไรที่ไม่จำเป็นจริงๆ ต่อผู้ใช้งาน”

ขั้นตอนที่ 3: ตัดการโหลด CSS/JS ที่ไม่จำเป็น ด้วยฟังก์ชันของ WordPress

ทำงานผ่าน Child Theme เพื่อความปลอดภัย

หากต้องการแก้ไขไฟล์ functions.php หรือโค้ดของธีม แนะนำให้ใช้ Child Theme แทนการแก้ธีมหลักโดยตรง เพื่อป้องกันปัญหาโค้ดหายเมื่ออัปเดตธีม

ใช้ wp_dequeue_style / wp_dequeue_script เพื่อตัดสไตล์หรือสคริปต์

โค้ดต่อไปนี้เป็นโครงสำหรับตัดการโหลดไฟล์บางตัว: 

<?php
function snd_cleanup_theme_assets() {
    // ตัวอย่าง: ตัดสไตล์ของสไลเดอร์ที่ไม่ใช้แล้ว
    wp_dequeue_style('slider-css-handle');
    wp_deregister_style('slider-css-handle');

    // ตัวอย่าง: ตัด JavaScript ของ slider
    wp_dequeue_script('slider-js-handle');
    wp_deregister_script('slider-js-handle');
}
add_action('wp_enqueue_scripts', 'snd_cleanup_theme_assets', 999);
?>

หมายเหตุสำคัญ:

  • handle คือชื่อที่ธีมหรือปลั๊กอินใช้จดทะเบียนไฟล์ CSS/JS ผ่าน wp_enqueue_style หรือ wp_enqueue_script
  • ต้องรู้ handle ที่ถูกใช้จริง สามารถดูจากโค้ดธีม/ปลั๊กอิน หรือใช้ปลั๊กอินช่วยตรวจสอบ

ตัดเฉพาะบางหน้า เพื่อให้ยังใช้งานได้ในหน้าที่จำเป็น

ตัวอย่าง: ตัดสคริปต์ของสไลเดอร์ออกจากทุกหน้า ยกเว้นหน้าแรก: 

<?php
function snd_conditional_assets_cleanup() {
    if ( !is_front_page() ) {
        wp_dequeue_style('slider-css-handle');
        wp_deregister_style('slider-css-handle');

        wp_dequeue_script('slider-js-handle');
        wp_deregister_script('slider-js-handle');
    }
}
add_action('wp_enqueue_scripts', 'snd_conditional_assets_cleanup', 999);
?>

ตัด Emojis และ Embed ที่ WordPress เปิดมาให้โดยค่าเริ่มต้น

WordPress โหลดสคริปต์บางอย่างที่อาจไม่จำเป็น เช่น Emoji และ oEmbed เพื่อให้ธีม “พร้อมใช้ทันที” แต่สำหรับแนวทาง Clean WordPress Theme เราสามารถปิดได้หากไม่ได้ใช้งาน: 

<?php
function snd_disable_wp_extras() {
    // ปิด Emoji
    remove_action('wp_head', 'print_emoji_detection_script', 7);
    remove_action('wp_print_styles', 'print_emoji_styles');

    // ปิด oEmbed script ที่หน้า front-end
    remove_action('wp_head', 'wp_oembed_add_discovery_links');
    remove_action('wp_head', 'wp_oembed_add_host_js');
}
add_action('init', 'snd_disable_wp_extras');
?>

ขั้นตอนที่ 4: ลดและจัดระเบียบไฟล์ CSS ให้สะอาดขึ้น

แยก CSS ตามบริบทการใช้งาน

แนวคิดของ Clean WordPress Theme ที่ดีคือไม่ให้ไฟล์ CSS เดียวครอบคลุมทุกโอกาสจนใหญ่เกินไป ควร:

  • แยก CSS สำหรับ “หน้าทั่วไป” กับ “หน้าเฉพาะกิจ” เช่น หน้า Landing Page, หน้า Campaign
  • โหลด CSS ของปลั๊กอินเฉพาะหน้าที่มีการใช้งาน เช่น WooCommerce, Contact Form

ลด CSS ที่ไม่ได้ใช้งาน (Unused CSS)

เครื่องมืออย่าง Chrome Coverage หรือบริการภายนอก เช่น PurgeCSS (สำหรับนักพัฒนาที่ใช้ Build Tools) สามารถตรวจสอบได้ว่ามี CSS ส่วนใดบ้างที่ไม่ถูกใช้บนหน้าเว็บ

  • ลดหรือย้าย CSS ที่ไม่ได้ใช้ลงในไฟล์เฉพาะกิจแทนการโหลดทั่วทั้งเว็บไซต์
  • หลีกเลี่ยงการใช้ Utility Class ซ้อนกันจำนวนมากจนเกิด CSS ซ้ำซ้อน

ตัวอย่างการโหลด CSS เฉพาะบางหน้าใน functions.php

<?php
function snd_load_page_specific_styles() {
    if ( is_page('contact') ) {
        wp_enqueue_style('snd-contact-style', get_stylesheet_directory_uri() . '/css/contact.css', array(), '1.0');
    }
}
add_action('wp_enqueue_scripts', 'snd_load_page_specific_styles');
?>

ขั้นตอนที่ 5: ปรับการโหลด JavaScript ให้เบาและไม่บล็อกการเรนเดอร์

ย้ายสคริปต์ไปโหลดที่ footer แทน header

ส่วนใหญ่ของ JS ไม่จำเป็นต้องโหลดก่อน HTML จะถูกเรนเดอร์ คุณสามารถควบคุมได้ผ่านพารามิเตอร์ของ wp_enqueue_script: 

<?php
function snd_enqueue_scripts_footer() {
    wp_enqueue_script(
        'snd-main-js',
        get_stylesheet_directory_uri() . '/js/main.js',
        array('jquery'),
        '1.0',
        true // true = โหลดที่ footer
    );
}
add_action('wp_enqueue_scripts', 'snd_enqueue_scripts_footer');
?>

ใช้ defer / async อย่างระมัดระวัง

สำหรับสคริปต์ที่ไม่จำเป็นต้องรันทันที สามารถเพิ่ม attribute defer หรือ async ผ่าน filter ของ WordPress: 

<?php
function snd_add_defer_attribute($tag, $handle) {
    $scripts_to_defer = array('snd-main-js', 'slider-js-handle');

    if ( in_array($handle, $scripts_to_defer, true) ) {
        $tag = str_replace(' src', ' defer src', $tag);
    }
    return $tag;
}
add_filter('script_loader_tag', 'snd_add_defer_attribute', 10, 2);
?>

ควรทดสอบทุกครั้งหลังเพิ่ม defer/async เพราะอาจมีผลต่อการทำงานของสคริปต์ที่ต้องการ DOM พร้อมก่อน

รวมไฟล์ (Concatenate) อย่างมีสติ

  • เครื่องมือ Cache/Optimization บางตัวสามารถรวม (combine) CSS/JS ให้เป็นไฟล์เดียวได้
  • อย่างไรก็ตาม บน HTTP/2 การรวมทุกอย่างเป็นไฟล์เดียวอาจไม่ได้จำเป็นเสมอไป
  • โฟกัสที่ “ตัดของไม่จำเป็นออก” ก่อน “รวมไฟล์” จะให้ผลชัดเจนกว่าในแง่ความเร็ว

ขั้นตอนที่ 6: ลดการพึ่งพา Page Builder หรือฟีเจอร์ Overkill

Page Builder vs Clean WordPress Theme

Page Builder หลายตัวมาพร้อมไฟล์ CSS/JS ขนาดใหญ่ เพราะถูกออกแบบให้ใช้ได้หลากหลายเคสในธีมเดียว หากต้องการความเป็น Clean WordPress Theme มากขึ้น มีตัวเลือกดังนี้:

  • ลดการใช้วิจเจ็ตพิเศษที่มาพร้อมเอฟเฟกต์หนักๆ
  • ใช้ Gutenberg / Block Editor แทน Page Builder ถ้าเหมาะสมกับทีมงาน
  • สร้าง Template พื้นฐานด้วยโค้ดเองในธีม เพื่อลดการพึ่ง Page Builder ในหน้าสำคัญ เช่น หน้าแรก / หน้า Landing หลัก

ตัดวิจเจ็ต / Add-ons ที่ไม่ใช้จริง

Page Builder มักมี Add-ons เสริมที่เพิ่มทั้ง CSS/JS:

  • เข้าไปปิด Add-ons ที่ไม่ใช้งานใน Settings ของ Page Builder
  • บางชุด Add-ons ให้ปิดรายวิจเจ็ตได้ เลือกเปิดเฉพาะที่ใช้จริง

ขั้นตอนที่ 7: ตรวจสอบผลลัพธ์หลังตัดฟีเจอร์

ใช้ PageSpeed Insights / Lighthouse

หลังปรับแล้ว ควรทดสอบด้วย:

  • Google PageSpeed Insights
  • Lighthouse (ผ่าน DevTools)

สังเกตตัวชี้วัดสำคัญ:

  • Total Blocking Time (TBT) – มักเกี่ยวข้องกับ JS
  • Largest Contentful Paint (LCP) – เกี่ยวข้องกับ CSS/JS และภาพ
  • Reduce unused CSS/JS – ดูว่าข้อแนะนำส่วนนี้ลดลงจากเดิมหรือไม่

ทดสอบการใช้งานจริง (Functional Test)

  • เช็คทุกหน้าหลัก: หน้าแรก, หน้า Contact, หน้า Product, หน้า Checkout
  • ลองคลิกทุกปุ่ม/ฟอร์ม/เมนูที่สำคัญ
  • ทดสอบบนมือถือและเบราว์เซอร์หลักๆ

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

การปรับธีมให้สะอาดแบบ Clean WordPress Theme คือกระบวนการวนซ้ำ: สำรวจ – ตัด – ทดสอบ – ปรับให้พอดี

เคล็ดลับเพิ่มเติมสำหรับการออกแบบธีมให้สะอาดตั้งแต่ต้น

เลือกธีมที่เน้น Minimal Core Feature

  • เลือกธีมที่โครงสร้างเรียบง่าย ไม่มีฟีเจอร์อัดแน่นเกินไป
  • หลีกเลี่ยงธีมที่รวมทุกอย่างไว้ด้วยกัน (Multipurpose แบบ “ทำได้ทุกอย่างในธีมเดียว”) หากคุณไม่ได้ใช้ครบทุกฟีเจอร์

วางมาตรฐานภายในทีม

  • กำหนดแนวทางเลือกปลั๊กอิน: เน้นเบา ทำหน้าที่เดียวชัดเจน
  • ทบทวนปลั๊กอินและฟีเจอร์ทุก 3–6 เดือน เพื่อลดตัวที่ไม่ได้ใช้แล้ว
  • ฝึกทีมคอนเทนต์/การตลาดให้เข้าใจผลกระทบจากการใส่สคริปต์เสริม เช่น Tracking, Popup, Widget ภายนอก

สรุป: แนวทางปฏิบัติสู่ธีมที่สะอาดและโหลดเร็ว

การตัดฟีเจอร์ที่ไม่จำเป็นออกจากธีมเพื่อให้เข้าใกล้ Clean WordPress Theme ไม่ใช่แค่การ “ลบของออก” แต่คือการจัดโครงสร้างเว็บไซต์ให้ทุกส่วนที่โหลดมีเหตุผลและคุณค่า มีผลโดยตรงต่อความเร็ว ประสบการณ์ผู้ใช้ และช่วยให้การดูแลระยะยาวง่ายขึ้นอย่างชัดเจน

📌 สรุปประเด็นที่นำไปใช้ได้ทันที
– สำรวจให้ชัดว่าเว็บไซต์ของคุณโหลด CSS/JS อะไรบ้าง และมาจากที่ใด (ธีม, ปลั๊กอิน, โค้ดเสริม)
– แยกฟีเจอร์ที่จำเป็นต่อธุรกิจออกจากฟีเจอร์เสริม แล้วเริ่มตัดจากฟีเจอร์ที่ไม่จำเป็น
– ใช้ wp_dequeue_style และ wp_dequeue_script เพื่อลดการโหลดไฟล์ CSS/JS ที่ไม่ได้ใช้ หรือใช้เฉพาะบางหน้า
– ปิดฟีเจอร์ WordPress ที่ไม่จำเป็น เช่น Emoji, oEmbed หากไม่ได้ใช้งาน
– แยกและจัดระเบียบ CSS/JS ให้สอดคล้องกับโครงสร้างหน้าเว็บ ลด unused CSS/JS ให้มากที่สุด
– ลดการพึ่งพา Page Builder และ Add-ons ที่ไม่จำเป็น ใช้เฉพาะส่วนที่สร้างคุณค่ากับผู้ใช้จริงๆ
– ทดสอบทั้งด้านความเร็ว (PageSpeed/Lighthouse) และการใช้งานจริงทุกครั้งหลังปรับแต่ง

หากนำแนวทางเหล่านี้ไปประยุกต์อย่างต่อเนื่อง เว็บไซต์ของคุณจะเข้าใกล้แนวคิด Clean WordPress Theme มากขึ้นเรื่อยๆ ทำให้การดูแล การขยายฟีเจอร์ และการปรับปรุงประสิทธิภาพในระยะยาวเป็นเรื่องที่จัดการได้ง่ายและมีทิศทางชัดเจน

หวังว่าเนื้อหานี้จะเป็นคลังความรู้ที่ช่วยให้คุณพัฒนาและปรับปรุงเว็บไซต์ได้อย่างมั่นใจ หากเห็นว่าบทความนี้เป็นประโยชน์ ยินดีอย่างยิ่งหากคุณกลับมาติดตามเนื้อหาใหม่ๆ และส่งต่อความรู้เหล่านี้ให้กับผู้อื่นต่อไปอย่างสุภาพและสร้างสรรค์ครับ

Share the Post:
Facebook
X
LinkedIn
Email

เรื่องที่เกี่ยวข้อง