ลดขนาด CSS

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

กำลังโหลด CSS ที่ไม่สมบูรณ์

ลองดูบล็อก CSS ต่อไปนี้

body {
  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
  margin: 2em;
}

/* all titles need to have the same font, color and background */
h1 {
  font-style: italic;
  color: #373fff;
  background-color: #000000;
}

h2 {
  font-style: italic;
  color: #373fff;
  background-color: #000000;
}

เนื้อหานี้อ่านง่ายและต้องมีค่าใช้จ่ายในการผลิตไฟล์ที่มีขนาดใหญ่กว่าที่จำเป็น ดังนี้

• โดยจะใช้การเว้นวรรคเพื่อวัตถุประสงค์ในการเยื้อง และมีความคิดเห็นซึ่งเบราว์เซอร์จะละเว้นไว้ ดังนั้นจะสามารถนำออกได้
• องค์ประกอบ <h1> และ <h2> มีรูปแบบเดียวกัน แทนที่จะประกาศแยกกัน: "h1 {...} h2 {...}" อาจแสดงเป็น "h1, h2{...}"
• background-color, #000000 อาจแสดงเพียง #000 เท่านั้น

หลังจากทำการเปลี่ยนแปลงเหล่านี้ คุณจะได้รูปแบบที่กะทัดรัดมากขึ้นของสไตล์เดียวกัน:

body{font-family:"Benton Sans","Helvetica Neue",helvetica,arial,sans-serif;margin:2em}h1,h2{font-style:italic;color:#373fff;background-color:#000}

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

วัดระยะทาง

คุณจะใช้การลดขนาด CSS กับเว็บไซต์ที่ใช้ในคำแนะนำอื่นๆ ได้แก่ Fav Kitties เว็บไซต์เวอร์ชันนี้ใช้ไลบรารี CSS เจ๋งๆ ชื่อ animate.css เพื่อทำให้องค์ประกอบของหน้าต่างๆ เคลื่อนไหวเมื่อผู้ใช้โหวตให้แมว 😺

ในขั้นแรก คุณต้องทำความเข้าใจว่าโอกาสใดจะได้รับหลังจากลดขนาดไฟล์นี้

1. เปิดหน้าการวัดผล
2. ป้อน URL https://fav-kitties-animated.glitch.me แล้วคลิกทำการตรวจสอบ
3. คลิกดูรายงาน
4. คลิกประสิทธิภาพ แล้วไปที่ส่วนโอกาส

รายงานที่ได้จะแสดงให้เห็นว่าบันทึกจากไฟล์ animate.css ได้สูงสุด 16 KB ดังนี้

ตอนนี้ให้ตรวจสอบเนื้อหาของ CSS

1. เปิดเว็บไซต์ Fav Kitties ใน Chrome (เซิร์ฟเวอร์ Glitch อาจใช้เวลาสักครู่ในการตอบสนองในครั้งแรก)
2. กด "Control+Shift+J" (หรือ "Command+Option+J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
3. คลิกแท็บเครือข่าย
4. คลิกตัวกรอง CSS
5. เลือกช่องทำเครื่องหมายปิดใช้แคช
6. โหลดแอปซ้ำ

หน้าเว็บขอไฟล์ CSS 2 ไฟล์ขนาด 1.9KB และ 76.2KB ตามลำดับ

1. คลิก animate.css
2. คลิกแท็บการตอบกลับเพื่อดูเนื้อหาไฟล์

โปรดทราบว่าสไตล์ชีตมีอักขระสำหรับช่องว่างและการเยื้อง:

ถัดไป คุณจะต้องเพิ่มปลั๊กอิน Webpack ลงในกระบวนการบิลด์เพื่อลดขนาดไฟล์เหล่านี้

การลดขนาด CSS ด้วย Webpack

ก่อนที่จะเจาะลึกเรื่องการเพิ่มประสิทธิภาพ โปรดสละเวลาสักครู่เพื่อทำความเข้าใจกระบวนการสร้างเว็บไซต์ Fav Kitties ดังนี้

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

• mini-css-extract-plugin จะแยกสไตล์ชีตแต่ละรายการออกมาเป็นไฟล์ของตัวเอง ซึ่งเป็นหนึ่งในขั้นตอนของกระบวนการบิลด์
• webpack-fix-style-only-entries มีไว้เพื่อแก้ไขปัญหาใน wepback 4 เพื่อหลีกเลี่ยงการสร้างไฟล์ JS เพิ่มเติมสำหรับไฟล์ CSS แต่ละไฟล์ที่แสดงใน webpack-config.js

ตอนนี้ คุณจะทำการเปลี่ยนแปลงบางอย่างในโปรเจ็กต์:

1. เปิดโปรเจ็กต์ Fav Kitties ใน Glitch
2. หากต้องการดูแหล่งที่มา ให้กดดูซอร์สโค้ด
3. คลิกรีมิกซ์เพื่อแก้ไขเพื่อทำให้โปรเจ็กต์แก้ไขได้
4. คลิกเทอร์มินัล (หมายเหตุ: หากปุ่มเทอร์มินัลไม่แสดง คุณอาจต้องใช้ตัวเลือกเต็มหน้าจอ)

หากต้องการลดขนาด CSS ที่ได้ คุณจะต้องใช้ optimize-css-assets-webpack-plugin ดังนี้

1. ในคอนโซล Glitch ให้เรียกใช้ npm install --save-dev optimize-css-assets-webpack-plugin
2. เรียกใช้ refresh เพื่อให้การเปลี่ยนแปลงซิงค์กับเครื่องมือแก้ไข Glitch

จากนั้นให้กลับไปที่ตัวแก้ไข Glitch เปิดไฟล์ webpack.config.js แล้วทำการแก้ไขต่อไปนี้

โหลดโมดูลที่จุดเริ่มต้นของไฟล์: js const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

จากนั้น ส่งอินสแตนซ์ของปลั๊กอินไปยังอาร์เรย์ plugins ดังนี้ js plugins: [ new HtmlWebpackPlugin({template: "./src/index.html"}), new MiniCssExtractPlugin({filename: "[name].css"}), new FixStyleOnlyEntriesPlugin(), new OptimizeCSSAssetsPlugin({}) ] หลังจากเปลี่ยนแปลงแล้ว ระบบจะทริกเกอร์โปรเจ็กต์อีกครั้ง webpack.config.js ที่ได้จะมีลักษณะดังนี้

ถัดไป คุณจะตรวจสอบผลของการเพิ่มประสิทธิภาพนี้ด้วยเครื่องมือเพิ่มประสิทธิภาพ

ยืนยัน

• หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกด เต็มหน้าจอ

หากขั้นตอนก่อนหน้าหายไป คุณคลิกที่นี่เพื่อเปิดเว็บไซต์เวอร์ชันที่เพิ่มประสิทธิภาพแล้วได้

วิธีตรวจสอบขนาดและเนื้อหาของไฟล์

1. กด "Control+Shift+J" (หรือ "Command+Option+J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
2. คลิกแท็บเครือข่าย
3. คลิกตัวกรอง CSS
4. เลือกช่องทำเครื่องหมายปิดใช้แคช หากยังไม่ได้ทำ
5. โหลดแอปซ้ำ

คุณสามารถตรวจสอบไฟล์เหล่านี้ได้ และดูว่าเวอร์ชันใหม่ไม่มีช่องว่างใดๆ ทั้งสองไฟล์มีขนาดเล็กกว่ามาก โดยเฉพาะ animate.css ถูกลดขนาดลง ~26% ซึ่งประหยัดได้ ~20 KB!

ขั้นตอนสุดท้าย

1. เปิดหน้าการวัดผล
2. ป้อน URL ของเว็บไซต์ที่เพิ่มประสิทธิภาพแล้ว
3. คลิกดูรายงาน
4. คลิกประสิทธิภาพแล้วมองหาส่วนโอกาส

รายงานไม่แสดง "Minify CSS" เป็น "โอกาส" อีกต่อไป และได้ย้ายไปยังส่วน "ผ่านการตรวจสอบ" แล้ว โดยมีรายละเอียดดังนี้

เนื่องจากไฟล์ CSS เป็นทรัพยากรที่บล็อกการแสดงผล หากคุณใช้การลดขนาดในเว็บไซต์ที่ใช้ไฟล์ CSS ขนาดใหญ่ คุณจะเห็นการปรับปรุงเมตริกต่างๆ เช่น First Contentful Paint

ขั้นตอนถัดไปและทรัพยากร

ในคู่มือนี้ เราได้กล่าวถึงการลดขนาด CSS ด้วย Webpack แต่คุณสามารถทำตามแนวทางเดียวกันนี้ได้ด้วยเครื่องมือสร้างอื่นๆ เช่น gulp-clean-css สำหรับ Gulp หรือgrunt-contrib-cssmin สำหรับ Grunt

การลดขนาดยังสามารถนําไปใช้กับไฟล์ประเภทอื่นๆ ได้ด้วย ดูคู่มือการลดขนาดและบีบอัดเพย์โหลดของเครือข่ายเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับเครื่องมือสำหรับลดขนาด JS และเทคนิคเสริมบางอย่าง เช่น การบีบอัด