โหลดเว็บเร็วขึ้นไม่ยาก แค่ใช้ PurifyCSS
เกิน 7 บรรทัดไม่อ่าน: ใช้ PurifyCSS เพื่อกรองเฉพาะ CSS ที่ใช้งานจริง โดยตัดส่วนที่ไม่ได้ใช้ออกไป เพื่อให้เว็บโหลดเร็วขึ้น
คุณเคยใช้ Twitter Bootstrap หรือไม่?
เป็นที่ทราบกันดีว่า CSS Framework ไม่ว่าจะเป็น Twitter Bootstrap, Zurb Foundation หรือแม้กระทั่ง Pure CSS ที่ชื่อเหมือนจะผอมบาง แท้จริงแล้วบวมจนอืดเป็นช้างน้ำระยะสุดท้าย
สมมติโค้ด HTML ของเรามีการเรียกใช้ button โดยใช้ Bootstrap ในการจัดสไตล์ดังนี้
1<button class="btn btn-success">Click here!</button>
พบว่าเราใช้คลาสแค่สองตัวคือ btn และ btn-success รวมถึงกับการจัดสไตล์ของปุ่ม button อีกนิดหน่อย เนื่องจากคลาสเหล่านี้ปรากฎใน CSS ของ Bootstrap เราจึงต้องทำการโหลดมันเข้ามาดังนี้
1<!DOCTYPE html>2<html lang="en">3 <head>4 <meta charset="utf-8" />5 <meta name="viewport" content="width=device-width, initial-scale=1" />6 <title>BabelCoder</title>7 <!-- ไฟล์ bootstrap ของเรา -->8 <link rel="stylesheet" href="./bootstrap.min.css" />9 </head>10 <body>11 <button class="btn btn-success">Click here!</button>12 </body>13</html>
เชื่อหรือไม่ bootstrap.min.css แม้จะเป็นเวอร์ชัน Minify แล้วก็ยังมีขนาดถึง 148 KB! นี่เราแค่จะจัดสไตล์ปุ่มนิดหน่อย ทำไมเราต้องโหลด CSS ทั้งหมดจาก Bootstrap มาด้วย? จะดีกว่าไหมหากมีเครื่องมือที่จะช่วยดึงเฉพาะสไตล์ที่เราใช้งานจริงจาก Bootstrap ออกมา?
รู้จัก PurifyCSS
เพื่อสนอง need ของมวลมนุษยชาติ PurifyCSS จึงถือกำเนิดขึ้นในฐานะเป็นเครื่องมือกำจัด CSS ส่วนเกินที่ไม่ได้ใช้งานออกไป
เพื่อให้เพื่อนๆเห็นภาพมากขึ้น เราจะลงมือติดตั้งเครื่องมือดังกล่าวของเรากันก่อน
1npm install -g purify-css
ตอนนี้ภายใต้โฟลเดอร์ของเราจะประกอบด้วยไฟล์ต่างๆดังนี้
1- bootstrap.min.css2- index.html
เราต้องการดึงเฉพาะสไตล์ที่ index.html ของเรามีการเรียกใช้จริงๆ โดยสไตล์ที่พูดถึงนั้นต้องดึงออกมาจากไฟล์ bootstrap.min.css เราจึงออกคำสั่งดังนี้
1purifycss ./bootstrap.min.css index.html -o index.css
คำสั่งดังกล่าวเราใส่ ./bootstrap.min.css ไปเป็นอาร์กิวเมนต์ตัวแรก เพื่อบอก PurifyCSS ว่าเราต้องการดึงสไตล์ออกมาจากไฟล์นี้ ทีนี้สไตล์ที่จะดึงออกมาต้องถูกเรียกใช้ในไฟล์ไหนละ นั่นคือสิ่งที่เราระบุเป็นตัวถัดไปคือ index.html สุดท้ายอ็อบชัน -o เป็นการบอกว่าหลังจากที่ PurifyCSS สแกนดู index.html และดึงเอาสไตล์จาก bootstrap.min.css แล้วจะให้จัดเก็บในไฟล์ไหนซึ่งในที่นี้ก็คือ index.css นั่นเอง
ตอนนี้เราลองเปิดไฟล์ index.css ดูกันจะพบว่ามีเฉพาะสไตล์ที่เกี่ยวข้องกับการเรียกใช้ใน index.html เท่านั้น
1/*2...3...4*/56.btn:focus {7 outline: 0;8 -webkit-box-shadow: 0 0 0 2px rgba(2, 117, 216, 0.25);9 box-shadow: 0 0 0 2px rgba(2, 117, 216, 0.25);10}1112.btn:disabled {13 cursor: not-allowed;14 opacity: 0.65;15}1617.btn:active {18 background-image: none;19}2021.btn-success {22 color: #fff;23 background-color: #5cb85c;24 border-color: #5cb85c;25}2627.btn-success:hover {28 color: #fff;29 background-color: #449d44;30 border-color: #419641;31}3233.btn-success:focus {34 -webkit-box-shadow: 0 0 0 2px rgba(92, 184, 92, 0.5);35 box-shadow: 0 0 0 2px rgba(92, 184, 92, 0.5);36}3738/*39...40...41*/
เพราะเราตัดออกมาเฉพาะสิ่งที่ใช้จริง ขนาดของ index.css เลยเหลือแค่ 5KB เท่านั้น! จากขนาดไฟล์เต็มของ Bootstrap คือ 148KB สวดยอด~
ยังๆ ยังไม่พอ หากเราต้องการรีดขนาดไฟล์ให้ต่ำกว่านี้ก็อย่าลืมทำ Minify ด้วยละโดยการเพิ่มอ็อบชัน -m เข้าไปดังนี้
1purifycss ./bootstrap.min.css index.html -o index.css -m
เมื่อเราได้ไฟล์ผลลัพธ์เป็น index.css ที่มีเฉพาะสิ่งที่เราต้องการแล้ว เราก็ปรับแก้ index.html ของเรา เพื่อเรียกใช้ index.css แทน bootstrap.min.css ดังนี้
1<!DOCTYPE html>2<html lang="en">3 <head>4 <meta charset="utf-8" />5 <meta name="viewport" content="width=device-width, initial-scale=1" />6 <title>BabelCoder</title>7 <!-- ไฟล์ index.css ของเรา -->8 <link rel="stylesheet" href="./index.css" />9 </head>10 <body>11 <button class="btn btn-success">Click here!</button>12 </body>13</html>
สรุป
PurifyCSS ช่วยให้เราลดขนาดไฟล์ CSS ที่ผู้ใช้งานจะโหลดไปแสดงผลให้เหลือเฉพาะส่วนที่ต้องการใช้งานจริงๆ เราจึงไม่ต้องส่งก้อน CSS ที่มีแต่ขยะที่ไม่ต้องการอีกต่อไป
สำหรับการใช้งานจริงนั้น เพื่อนๆอาจพิจารณาใช้ PurifyCSS ควบคู่กับ Gulp หรือ Webpack ก็ย่อมได้เช่นกัน
สารบัญ
- รู้จัก PurifyCSS
- สรุป
