ไฟล์ 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 เพื่อทำให้องค์ประกอบของหน้าต่างๆ เคลื่อนไหวเมื่อผู้ใช้โหวตให้แมว 😺
ในขั้นแรก คุณต้องทำความเข้าใจว่าโอกาสใดจะได้รับหลังจากลดขนาดไฟล์นี้
- เปิดหน้าการวัดผล
- ป้อน URL
https://fav-kitties-animated.glitch.me
แล้วคลิกทำการตรวจสอบ - คลิกดูรายงาน
- คลิกประสิทธิภาพ แล้วไปที่ส่วนโอกาส
รายงานที่ได้จะแสดงให้เห็นว่าบันทึกจากไฟล์ animate.css ได้สูงสุด 16 KB ดังนี้
ตอนนี้ให้ตรวจสอบเนื้อหาของ CSS
- เปิดเว็บไซต์ Fav Kitties ใน Chrome (เซิร์ฟเวอร์ Glitch อาจใช้เวลาสักครู่ในการตอบสนองในครั้งแรก)
- กด "Control+Shift+J" (หรือ "Command+Option+J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
- คลิกแท็บเครือข่าย
- คลิกตัวกรอง CSS
- เลือกช่องทำเครื่องหมายปิดใช้แคช
- โหลดแอปซ้ำ
หน้าเว็บขอไฟล์ CSS 2 ไฟล์ขนาด 1.9KB และ 76.2KB ตามลำดับ
- คลิก animate.css
- คลิกแท็บการตอบกลับเพื่อดูเนื้อหาไฟล์
โปรดทราบว่าสไตล์ชีตมีอักขระสำหรับช่องว่างและการเยื้อง:
ถัดไป คุณจะต้องเพิ่มปลั๊กอิน 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
ตอนนี้ คุณจะทำการเปลี่ยนแปลงบางอย่างในโปรเจ็กต์:
- เปิดโปรเจ็กต์ Fav Kitties ใน Glitch
- หากต้องการดูแหล่งที่มา ให้กดดูซอร์สโค้ด
- คลิกรีมิกซ์เพื่อแก้ไขเพื่อทำให้โปรเจ็กต์แก้ไขได้
- คลิกเทอร์มินัล (หมายเหตุ: หากปุ่มเทอร์มินัลไม่แสดง คุณอาจต้องใช้ตัวเลือกเต็มหน้าจอ)
หากต้องการลดขนาด CSS ที่ได้ คุณจะต้องใช้ optimize-css-assets-webpack-plugin ดังนี้
- ในคอนโซล Glitch ให้เรียกใช้
npm install --save-dev optimize-css-assets-webpack-plugin
- เรียกใช้
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 ที่ได้จะมีลักษณะดังนี้
ถัดไป คุณจะตรวจสอบผลของการเพิ่มประสิทธิภาพนี้ด้วยเครื่องมือเพิ่มประสิทธิภาพ
ยืนยัน
- หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกด เต็มหน้าจอ
หากขั้นตอนก่อนหน้าหายไป คุณคลิกที่นี่เพื่อเปิดเว็บไซต์เวอร์ชันที่เพิ่มประสิทธิภาพแล้วได้
วิธีตรวจสอบขนาดและเนื้อหาของไฟล์
- กด "Control+Shift+J" (หรือ "Command+Option+J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
- คลิกแท็บเครือข่าย
- คลิกตัวกรอง CSS
- เลือกช่องทำเครื่องหมายปิดใช้แคช หากยังไม่ได้ทำ
- โหลดแอปซ้ำ
คุณสามารถตรวจสอบไฟล์เหล่านี้ได้ และดูว่าเวอร์ชันใหม่ไม่มีช่องว่างใดๆ ทั้งสองไฟล์มีขนาดเล็กกว่ามาก โดยเฉพาะ animate.css ถูกลดขนาดลง ~26% ซึ่งประหยัดได้ ~20 KB!
ขั้นตอนสุดท้าย
- เปิดหน้าการวัดผล
- ป้อน URL ของเว็บไซต์ที่เพิ่มประสิทธิภาพแล้ว
- คลิกดูรายงาน
- คลิกประสิทธิภาพแล้วมองหาส่วนโอกาส
รายงานไม่แสดง "Minify CSS" เป็น "โอกาส" อีกต่อไป และได้ย้ายไปยังส่วน "ผ่านการตรวจสอบ" แล้ว โดยมีรายละเอียดดังนี้
เนื่องจากไฟล์ CSS เป็นทรัพยากรที่บล็อกการแสดงผล หากคุณใช้การลดขนาดในเว็บไซต์ที่ใช้ไฟล์ CSS ขนาดใหญ่ คุณจะเห็นการปรับปรุงเมตริกต่างๆ เช่น First Contentful Paint
ขั้นตอนถัดไปและทรัพยากร
ในคู่มือนี้ เราได้กล่าวถึงการลดขนาด CSS ด้วย Webpack แต่คุณสามารถทำตามแนวทางเดียวกันนี้ได้ด้วยเครื่องมือสร้างอื่นๆ เช่น gulp-clean-css สำหรับ Gulp หรือgrunt-contrib-cssmin สำหรับ Grunt
การลดขนาดยังสามารถนําไปใช้กับไฟล์ประเภทอื่นๆ ได้ด้วย ดูคู่มือการลดขนาดและบีบอัดเพย์โหลดของเครือข่ายเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับเครื่องมือสำหรับลดขนาด JS และเทคนิคเสริมบางอย่าง เช่น การบีบอัด