การทำ CSS Tree Shaking: การเจาะลึกเรื่องการกำจัดโค้ดที่ไม่ถูกใช้งาน (Dead Code Elimination)

ในโลกของการพัฒนาเว็บที่เปลี่ยนแปลงตลอดเวลา การเพิ่มประสิทธิภาพของเว็บไซต์ถือเป็นสิ่งสำคัญสูงสุด เทคนิคหนึ่งที่สำคัญในการบรรลุเป้าหมายนี้คือ CSS tree shaking หรือที่รู้จักกันในชื่อ dead code elimination กระบวนการนี้เกี่ยวข้องกับการระบุและลบกฎ CSS ที่ไม่ได้ใช้ออกจากสไตล์ชีตของคุณ ส่งผลให้ไฟล์มีขนาดเล็กลง โหลดได้เร็วขึ้น และปรับปรุงประสบการณ์ของผู้ใช้

ทำความเข้าใจเกี่ยวกับ CSS Tree Shaking

CSS Tree Shaking คืออะไร?

CSS tree shaking คือกระบวนการลบกฎ CSS ที่ไม่ได้ใช้ออกจากสไตล์ชีต เปรียบเสมือนกิ่งไม้ที่ตายแล้วบนต้นไม้ กฎ CSS ที่ไม่ได้ใช้จะทำให้โค้ดของคุณรก เพิ่มขนาดไฟล์ และทำให้ประสิทธิภาพของเว็บไซต์ช้าลง การกำจัดกฎที่ซ้ำซ้อนเหล่านี้จะช่วยให้คุณสร้างสไตล์ชีตที่กระชับและมีประสิทธิภาพมากขึ้น ซึ่งส่งผลให้เว็บไซต์เร็วขึ้นและตอบสนองได้ดีขึ้น

คำว่า "tree shaking" (การเขย่าต้นไม้) มาจากการเปรียบเทียบกับการเขย่าต้นไม้เพื่อกำจัดใบไม้ที่ตายแล้ว (โค้ดที่ไม่ได้ใช้) กระบวนการนี้จะวิเคราะห์ไฟล์ CSS และ JavaScript ของคุณเพื่อพิจารณาว่ากฎ CSS ใดที่ถูกใช้ใน HTML ของคุณจริง ๆ จากนั้นกฎที่ไม่ได้ใช้จะถูกลบออกไป ส่งผลให้ได้สไตล์ชีตที่เล็กลงและได้รับการปรับปรุงประสิทธิภาพ

เหตุใด CSS Tree Shaking จึงมีความสำคัญ?

• ประสิทธิภาพที่ดีขึ้น: ไฟล์ CSS ที่เล็กลงจะโหลดได้เร็วขึ้น ลดเวลาที่ใช้ในการแสดงผลหน้าเว็บ ซึ่งนำไปสู่ประสบการณ์ผู้ใช้ที่ดีขึ้น โดยเฉพาะสำหรับผู้ใช้ที่มีการเชื่อมต่ออินเทอร์เน็ตที่ช้า
• ลดการใช้แบนด์วิดท์: ขนาดไฟล์ที่เล็กลงหมายถึงการใช้แบนด์วิดท์น้อยลงทั้งสำหรับเซิร์ฟเวอร์และผู้ใช้ นี่เป็นสิ่งสำคัญอย่างยิ่งสำหรับผู้ใช้มือถือและผู้ใช้ในพื้นที่ที่มีแผนข้อมูลจำกัดหรือมีราคาแพง
• การบำรุงรักษาที่ดีขึ้น: การลบกฎ CSS ที่ไม่ได้ใช้ออกไปทำให้สไตล์ชีตของคุณอ่าน เข้าใจ และบำรุงรักษาได้ง่ายขึ้น ช่วยให้การดีบักง่ายขึ้นและลดความเสี่ยงของผลข้างเคียงที่ไม่คาดคิดเมื่อทำการเปลี่ยนแปลง
• ปรับปรุง SEO: เครื่องมือค้นหาเช่น Google พิจารณาความเร็วของเว็บไซต์เป็นปัจจัยหนึ่งในการจัดอันดับ การเพิ่มประสิทธิภาพ CSS ของคุณผ่าน tree shaking สามารถปรับปรุงประสิทธิภาพ SEO ของเว็บไซต์คุณได้

เทคนิคการนำไปใช้งาน

มีเทคนิคและเครื่องมือหลายอย่างที่สามารถใช้ในการทำ CSS tree shaking ซึ่งแต่ละอย่างก็มีข้อดีและข้อเสียแตกต่างกันไป มาดูแนวทางที่พบบ่อยที่สุดกัน:

1. การทำด้วยตนเอง

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

วิธีระบุ CSS ที่ไม่ได้ใช้ด้วยตนเอง:

• การตรวจสอบโค้ด: ตรวจสอบไฟล์ CSS ของคุณอย่างละเอียดและเปรียบเทียบกับโครงสร้าง HTML ของคุณ มองหา selectors ที่ไม่ได้ใช้ใน markup ของคุณ
• เครื่องมือสำหรับนักพัฒนาในเบราว์เซอร์: ใช้เครื่องมือ "Coverage" ในเครื่องมือสำหรับนักพัฒนาของเบราว์เซอร์ (เช่น Chrome DevTools, Firefox Developer Tools) เพื่อระบุกฎ CSS ที่ไม่ได้ใช้ เครื่องมือนี้จะแสดงภาพว่ากฎ CSS ใดที่กำลังถูกใช้และกฎใดที่ไม่ได้ใช้

ข้อจำกัด:

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

2. การใช้เครื่องมือล้าง CSS (CSS Purging Tools)

เครื่องมือล้าง CSS จะทำงานโดยอัตโนมัติในกระบวนการระบุและลบกฎ CSS ที่ไม่ได้ใช้ เครื่องมือเหล่านี้จะวิเคราะห์ไฟล์ HTML, JavaScript และ CSS ของคุณเพื่อพิจารณาว่ากฎ CSS ใดที่ถูกใช้จริงแล้วจึงลบส่วนที่เหลือออก

เครื่องมือล้าง CSS ยอดนิยม:

• PurgeCSS: PurgeCSS เป็นเครื่องมือที่ได้รับความนิยมและใช้งานได้หลากหลาย ซึ่งสามารถใช้กับเครื่องมือสร้าง (build tools) ต่างๆ ได้ เช่น webpack, Parcel และ Gulp มันจะวิเคราะห์ไฟล์ HTML, JavaScript และ CSS ของคุณเพื่อระบุกฎ CSS ที่ไม่ได้ใช้และลบออก PurgeCSS สามารถกำหนดค่าได้สูงและรองรับไฟล์รูปแบบต่างๆ รวมถึง CSS, HTML, JavaScript และอื่นๆ
• UnCSS: UnCSS เป็นอีกหนึ่งเครื่องมือที่ใช้กันอย่างแพร่หลายในการลบ CSS ที่ไม่ได้ใช้ มันทำงานโดยการแยกวิเคราะห์ไฟล์ HTML ของคุณและระบุ CSS selectors ที่ถูกใช้จริง UnCSS สามารถใช้เป็นเครื่องมือ command-line หรือเป็นปลั๊กอินสำหรับ build tools เช่น Grunt และ Gulp
• CSSNano: แม้ว่าจะเป็นเครื่องมือย่อขนาด CSS เป็นหลัก แต่ CSSNano ก็มีฟีเจอร์สำหรับลบกฎ CSS ที่ไม่ได้ใช้อยู่ด้วย มันใช้เทคนิคการเพิ่มประสิทธิภาพขั้นสูงเพื่อลดขนาดไฟล์ CSS ของคุณ ส่งผลให้โหลดได้เร็วขึ้น

ตัวอย่าง: การใช้ PurgeCSS กับ Webpack

นี่คือตัวอย่างวิธีการใช้ PurgeCSS กับ Webpack ซึ่งเป็น JavaScript module bundler ที่ได้รับความนิยม:

1. ติดตั้ง PurgeCSS และ dependencies ที่เกี่ยวข้อง:

            npm install purgecss-webpack-plugin glob-all -D
            

              
                Copy
              
            
          

2. กำหนดค่า PurgeCSS ในไฟล์คอนฟิกของ Webpack (webpack.config.js):

            const glob = require('glob-all');
const PurgeCSSPlugin = require('purgecss-webpack-plugin');
const path = require('path');

module.exports = {
  // ... other webpack configurations
  plugins: [
    new PurgeCSSPlugin({
      paths: glob.sync([
        path.join(__dirname, 'src/**/*.html'),
        path.join(__dirname, 'src/**/*.js'),
        path.join(__dirname, 'src/**/*.jsx'),
      ]),
      safelist: {
        standard: [/^is-/, /^has-/],
        deep: [/carousel-/, /swiper-/],
        greedy: []
      }
    })
  ]
};
            

              
                Copy
              
            
          

คำอธิบาย:

• paths: ตัวเลือกนี้ระบุเส้นทางไปยังไฟล์ HTML, JavaScript และไฟล์อื่นๆ ที่มี CSS selectors ของคุณ PurgeCSS จะวิเคราะห์ไฟล์เหล่านี้เพื่อพิจารณาว่ากฎ CSS ใดที่ถูกใช้
• safelist: ตัวเลือกนี้ช่วยให้คุณสามารถระบุ CSS selectors ที่ไม่ควรถูกลบออก แม้ว่าจะไม่พบในไฟล์ HTML หรือ JavaScript ของคุณก็ตาม สิ่งนี้มีประโยชน์สำหรับคลาส CSS แบบไดนามิกหรือกฎ CSS ที่ถูกเพิ่มโดยใช้ JavaScript
  • `standard`: Selectors ที่จะถูกรวมไว้เสมอ
  • `deep`: Selectors และ children ทั้งหมดของมันจะถูกรวมไว้
  • `greedy`: Selectors ที่ตรงกับ regex จะถูกรวมไว้

3. รัน Webpack build ของคุณ:

            npm run build
            

              
                Copy
              
            
          

ตอนนี้ PurgeCSS จะวิเคราะห์ไฟล์ของคุณและลบกฎ CSS ที่ไม่ได้ใช้ออกไป ส่งผลให้ได้ไฟล์ CSS ที่เล็กลงและมีประสิทธิภาพมากขึ้น

3. การเพิ่มประสิทธิภาพในตัว Build Tool

Build tools สมัยใหม่เช่น Webpack และ Parcel มีฟีเจอร์ในตัวสำหรับ CSS tree shaking เครื่องมือเหล่านี้สามารถวิเคราะห์โค้ด CSS และ JavaScript ของคุณเพื่อระบุกฎ CSS ที่ไม่ได้ใช้และลบออกระหว่างกระบวนการ build

Webpack

ฟีเจอร์ CSS Modules ของ Webpack เมื่อใช้ร่วมกับเครื่องมือย่อขนาด CSS เช่น CSSNano สามารถทำ CSS tree shaking ได้อย่างมีประสิทธิภาพ CSS Modules ช่วยให้มั่นใจได้ว่ากฎ CSS จะถูกนำไปใช้กับคอมโพเนนต์ที่ใช้งานเท่านั้น ในขณะที่ CSSNano จะลบกฎ CSS ที่ไม่ได้ใช้ออกไประหว่างการย่อขนาด

Parcel

Parcel เป็น build tool ที่ไม่ต้องตั้งค่า (zero-configuration) ซึ่งจะทำ CSS tree shaking โดยอัตโนมัติ มันจะวิเคราะห์ไฟล์ HTML, JavaScript และ CSS ของคุณเพื่อระบุกฎ CSS ที่ไม่ได้ใช้และลบออกระหว่างกระบวนการ build Parcel ต้องการการกำหนดค่าเพียงเล็กน้อยและเป็นตัวเลือกที่ยอดเยี่ยมสำหรับโปรเจกต์ที่ต้องการเพิ่มประสิทธิภาพ CSS อย่างรวดเร็ว

แนวทางปฏิบัติที่ดีที่สุดสำหรับ CSS Tree Shaking

เพื่อเพิ่มประสิทธิภาพสูงสุดของ CSS tree shaking ให้พิจารณาแนวทางปฏิบัติที่ดีที่สุดต่อไปนี้:

• ใช้ Modular CSS: ใช้สถาปัตยกรรม CSS แบบโมดูล เช่น CSS Modules หรือ BEM (Block, Element, Modifier) เพื่อให้แน่ใจว่ากฎ CSS ถูกจำกัดขอบเขตไว้สำหรับคอมโพเนนต์เฉพาะ ซึ่งทำให้ง่ายต่อการระบุและลบกฎ CSS ที่ไม่ได้ใช้
• หลีกเลี่ยง Global Styles: ลดการใช้สไตล์ CSS แบบโกลบอลให้น้อยที่สุด เนื่องจากอาจติดตามได้ยากและอาจนำไปสู่ผลข้างเคียงที่ไม่คาดคิด แต่ให้เลือกใช้สไตล์เฉพาะคอมโพเนนต์ที่จำกัดขอบเขตไว้สำหรับคอมโพเนนต์ที่ใช้งาน
• ใช้ CSS Preprocessor: CSS preprocessors เช่น Sass หรือ Less สามารถช่วยคุณจัดระเบียบโค้ด CSS ของคุณและทำให้บำรุงรักษาง่ายขึ้น นอกจากนี้ยังมีฟีเจอร์ต่างๆ เช่น ตัวแปร, mixins และ nesting ซึ่งสามารถปรับปรุงประสิทธิภาพของโค้ด CSS ของคุณได้
• ตรวจสอบ CSS ของคุณเป็นประจำ: สร้างนิสัยในการตรวจสอบโค้ด CSS ของคุณเป็นประจำและระบุกฎที่ไม่ได้ใช้หรือซ้ำซ้อน ซึ่งจะช่วยให้คุณรักษาสไตล์ชีตให้สะอาดและมีประสิทธิภาพอยู่เสมอ
• ทดสอบอย่างละเอียด: หลังจากทำการทำ CSS tree shaking แล้ว ให้ทดสอบเว็บไซต์ของคุณอย่างละเอียดเพื่อให้แน่ใจว่าสไตล์ทั้งหมดถูกนำไปใช้อย่างถูกต้องและไม่มีการถดถอยทางภาพ (visual regressions)
• ใส่คลาสแบบไดนามิกใน Safelist: หากเว็บไซต์ของคุณใช้คลาส CSS แบบไดนามิก (เช่น คลาสที่เพิ่มโดยใช้ JavaScript) อย่าลืมใส่ไว้ใน safelist ในการกำหนดค่า PurgeCSS ของคุณเพื่อป้องกันไม่ให้ถูกลบออกไป

ข้อควรพิจารณาและความท้าทาย

แม้ว่า CSS tree shaking จะมีประโยชน์มากมาย แต่สิ่งสำคัญคือต้องตระหนักถึงความท้าทายและข้อควรพิจารณาที่อาจเกิดขึ้น:

• CSS แบบไดนามิก: การทำ CSS tree shaking อาจเป็นเรื่องท้าทายเมื่อต้องจัดการกับ CSS แบบไดนามิก เช่น คลาส CSS ที่เพิ่มโดยใช้ JavaScript ในกรณีเหล่านี้ คุณอาจต้องใช้เทคนิค safelisting เพื่อป้องกันไม่ให้กฎ CSS ที่สำคัญถูกลบออกไป
• ความซับซ้อน: การนำ CSS tree shaking มาใช้อาจเพิ่มความซับซ้อนให้กับกระบวนการ build ของคุณ โดยเฉพาะอย่างยิ่งหากคุณใช้เครื่องมือขั้นสูงอย่าง PurgeCSS สิ่งสำคัญคือต้องกำหนดค่าเครื่องมือเหล่านี้อย่างระมัดระวังเพื่อให้แน่ใจว่าทำงานได้อย่างถูกต้องและไม่ลบกฎ CSS ที่จำเป็นออกไป
• ผลบวกลวง (False Positives): บางครั้งเครื่องมือ CSS tree shaking อาจให้ผลบวกลวง โดยระบุว่ากฎ CSS ไม่ได้ถูกใช้ทั้งที่จริงแล้วถูกใช้งานอยู่ ซึ่งอาจนำไปสู่การถดถอยทางภาพและพฤติกรรมที่ไม่คาดคิด
• ภาระด้านประสิทธิภาพ (Performance Overhead): แม้ว่าท้ายที่สุดแล้ว CSS tree shaking จะช่วยปรับปรุงประสิทธิภาพของเว็บไซต์ แต่กระบวนการวิเคราะห์และลบกฎ CSS ที่ไม่ได้ใช้อาจเพิ่มภาระให้กับกระบวนการ build ของคุณได้บ้าง สิ่งสำคัญคือต้องสร้างสมดุลระหว่างประโยชน์ของ CSS tree shaking กับผลกระทบที่อาจเกิดขึ้นต่อเวลาในการ build ของคุณ

มุมมองในระดับสากลและการปรับตัว

เมื่อทำการทำ CSS tree shaking สิ่งสำคัญคือต้องพิจารณาถึงกลุ่มเป้าหมายทั่วโลกของเว็บไซต์ของคุณ นี่คือปัจจัยบางประการที่ควรคำนึงถึง:

• เบราว์เซอร์และอุปกรณ์ที่แตกต่างกัน: ตรวจสอบให้แน่ใจว่าการทำ CSS tree shaking ของคุณทำงานได้อย่างถูกต้องในเบราว์เซอร์ต่างๆ (Chrome, Firefox, Safari, Edge) และอุปกรณ์ต่างๆ (เดสก์ท็อป, มือถือ, แท็บเล็ต) ทดสอบเว็บไซต์ของคุณอย่างละเอียดบนแพลตฟอร์มที่หลากหลายเพื่อระบุปัญหาที่อาจเกิดขึ้น
• การเข้าถึงได้ (Accessibility): ตรวจสอบให้แน่ใจว่า CSS tree shaking ไม่ส่งผลกระทบในทางลบต่อการเข้าถึงเว็บไซต์ของคุณ ตรวจสอบให้แน่ใจว่ากฎ CSS ที่จำเป็นสำหรับการเข้าถึงทั้งหมดถูกเก็บไว้ และเว็บไซต์ของคุณยังคงใช้งานได้สำหรับผู้พิการ
• การปรับให้เข้ากับท้องถิ่น (Localization): หากเว็บไซต์ของคุณรองรับหลายภาษา ตรวจสอบให้แน่ใจว่า CSS tree shaking ไม่ได้ลบกฎ CSS ใดๆ ที่เฉพาะเจาะจงสำหรับบางภาษาหรือภูมิภาค ใช้เทคนิค safelisting เพื่อรักษากฎเหล่านี้ไว้
• การทำให้เป็นสากล (Internationalization): พิจารณาผลกระทบของ CSS tree shaking ต่อการทำให้เป็นสากล (i18n) และตรวจสอบให้แน่ใจว่าเว็บไซต์ของคุณแสดงผลอย่างถูกต้องในสถานที่ต่างๆ (locales) ให้ความสนใจกับสไตล์ฟอนต์, ทิศทางของข้อความ และกฎ CSS อื่นๆ ที่เฉพาะเจาะจงสำหรับแต่ละสถานที่

ตัวอย่างจากโลกจริง

มาดูตัวอย่างจากโลกจริงกันว่า CSS tree shaking สามารถปรับปรุงประสิทธิภาพของเว็บไซต์ได้อย่างไร:

• ตัวอย่างที่ 1: เว็บไซต์ E-commerce: เว็บไซต์ e-commerce ที่มีหน้าผลิตภัณฑ์จำนวนมากและโค้ดเบส CSS ที่ซับซ้อนได้นำ CSS tree shaking มาใช้โดยใช้ PurgeCSS ส่งผลให้ขนาดไฟล์ CSS ลดลง 40% และเวลาในการโหลดหน้าเว็บดีขึ้นอย่างมีนัยสำคัญ นำไปสู่ประสบการณ์ผู้ใช้ที่ดีขึ้นและยอดขายที่เพิ่มขึ้น
• ตัวอย่างที่ 2: เว็บไซต์บล็อก: เว็บไซต์บล็อกที่มีดีไซน์เรียบง่ายได้นำ CSS tree shaking มาใช้โดยใช้ Parcel ส่งผลให้ขนาดไฟล์ CSS ลดลง 25% และประสิทธิภาพของเว็บไซต์ดีขึ้นอย่างเห็นได้ชัด โดยเฉพาะบนอุปกรณ์มือถือ
• ตัวอย่างที่ 3: เว็บไซต์ Portfolio: เว็บไซต์ portfolio ที่มีการออกแบบแบบหน้าเดียวได้นำ CSS tree shaking มาใช้โดยใช้ Webpack และ CSS Modules ส่งผลให้ขนาดไฟล์ CSS ลดลง 30% และประสบการณ์ผู้ใช้ที่ราบรื่นและตอบสนองได้ดีขึ้น

แนวทางที่นำไปปฏิบัติได้จริง

นี่คือแนวทางที่นำไปปฏิบัติได้จริงที่คุณสามารถใช้เพื่อทำ CSS tree shaking บนเว็บไซต์ของคุณ:

• เริ่มต้นจากสิ่งเล็กๆ: เริ่มต้นด้วยการทำ CSS tree shaking ในส่วนเล็กๆ ของเว็บไซต์ของคุณ เช่น หน้าเดียวหรือคอมโพเนนต์เดียว วิธีนี้จะช่วยให้คุณสามารถทดสอบการใช้งานและระบุปัญหาที่อาจเกิดขึ้นก่อนที่จะนำไปใช้กับทั้งเว็บไซต์
• ตรวจสอบประสิทธิภาพ: ใช้เครื่องมือตรวจสอบประสิทธิภาพเพื่อติดตามผลกระทบของ CSS tree shaking ต่อประสิทธิภาพของเว็บไซต์ของคุณ ซึ่งจะช่วยให้คุณระบุส่วนที่สามารถเพิ่มประสิทธิภาพ CSS และปรับปรุงความเร็วของเว็บไซต์ได้อีก
• ทำให้กระบวนการเป็นอัตโนมัติ: รวม CSS tree shaking เข้ากับกระบวนการ build ของคุณเพื่อทำให้กระบวนการระบุและลบกฎ CSS ที่ไม่ได้ใช้เป็นไปโดยอัตโนมัติ วิธีนี้จะช่วยให้แน่ใจว่า CSS ของคุณได้รับการปรับปรุงประสิทธิภาพอยู่เสมอและเว็บไซต์ของคุณทำงานได้ดีที่สุด
• ติดตามข้อมูลข่าวสารอยู่เสมอ: ติดตามเทคนิคและเครื่องมือ CSS tree shaking ล่าสุดอยู่เสมอ วงการพัฒนาเว็บมีการเปลี่ยนแปลงอยู่ตลอดเวลา และมีเครื่องมือและเทคนิคใหม่ๆ เกิดขึ้นเสมอ

สรุป

CSS tree shaking เป็นเทคนิคที่มีประสิทธิภาพในการเพิ่มประสิทธิภาพเว็บไซต์โดยการลบกฎ CSS ที่ไม่ได้ใช้ การนำ CSS tree shaking มาใช้จะช่วยให้คุณสามารถลดขนาดไฟล์, ปรับปรุงเวลาในการโหลด และยกระดับประสบการณ์ของผู้ใช้ แม้ว่าจะมีความท้าทายที่ต้องพิจารณา แต่ประโยชน์ของ CSS tree shaking ทำให้เป็นแนวปฏิบัติที่จำเป็นสำหรับการพัฒนาเว็บสมัยใหม่

โดยการปฏิบัติตามเทคนิค, แนวทางปฏิบัติที่ดีที่สุด และข้อควรพิจารณาที่ระบุไว้ในคู่มือนี้ คุณสามารถนำ CSS tree shaking มาใช้บนเว็บไซต์ของคุณได้อย่างมีประสิทธิภาพ และเก็บเกี่ยวผลประโยชน์จากประสบการณ์เว็บที่เร็วขึ้น, มีประสิทธิภาพมากขึ้น และเป็นมิตรกับผู้ใช้มากขึ้นสำหรับผู้ชมทั่วโลก