21 วิธีในการเพิ่มประสิทธิภาพ CSS ของคุณและเพิ่มความเร็วไซต์ของคุณ

Sep 11, 2025

วิธีการ

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

เฟรมเวิร์กอารมณ์เสียสมดุลนี้ รวมถึงสแต็ค JavaScript Gui เช่น jQuery UI และดูขนาด CSS, JS และ HTML Skyrocket บ่อยครั้งที่นักพัฒนามักจะรู้สึกว่าหยิกสุดท้าย - เมื่อนั่งหลังเวิร์กสเตชันแปดหลักที่ทรงพลังกับอินเทอร์เน็ต T3 ไม่มีใครใส่ใจเกี่ยวกับความเร็ว การเปลี่ยนแปลงนี้เป็นสัดส่วนหรืออุปกรณ์ที่มีการ จำกัด CPU มาเล่น

ตัวอย่างแอนิเมชั่น CSS เย็น 19 ตัวอย่างเพื่อสร้างใหม่

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

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

01. ใช้ชวเลข

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

 p {ขอบด้านบน: 1px;
    มาร์จิ้นขวา: 2px;
    ระยะขอบด้านล่าง: 3px;
    Margin-Left: 4px; }

p {margin: 1px 2px 3px 4px; }

02. ค้นหาและลบ CSS ที่ไม่ได้ใช้

การกำจัดชิ้นส่วนที่ไม่จำเป็นของการทำเครื่องหมายของคุณอย่างเห็นได้ชัดทำให้เกิดการเพิ่มความเร็วอันยิ่งใหญ่ เบราว์เซอร์ Chrome ของ Google มีฟังก์ชั่นนี้ออกจากกล่อง เพียงไปดู & gt; นักพัฒนา & GT; เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์และเปิดแท็บแหล่งที่มาในเวอร์ชันล่าสุดและเปิดเมนูคำสั่ง หลังจากนั้นเลือกแสดงความคุ้มครองและฉลองสายตาของคุณในหน้าต่างการวิเคราะห์ความคุ้มครองที่เน้นรหัสที่ไม่ได้ใช้ในหน้าเว็บปัจจุบัน

03. ทำในแฟชั่นที่สะดวกสบายมากขึ้น

การนำทางผ่านการวิเคราะห์แบบบรรทัดโดยไม่จำเป็นต้องสะดวกสบาย การตรวจสอบประสิทธิภาพเว็บของ Chrome ส่งคืนข้อมูลที่คล้ายกัน - เพียงเปิดจากแถบเครื่องมือมุมมอง & GT; นักพัฒนา & GT; เครื่องมือพัฒนาและ GT; ตรวจสอบและปล่อยให้มันทำงาน เมื่อเสร็จแล้วรายการขององค์ประกอบที่มีปัญหาจะปรากฏขึ้น

04. ระวังปัญหา

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

05. CSS ที่สำคัญแบบอินไลน์

การโหลด StyleSheet ภายนอกค่าใช้จ่ายเวลาเนื่องจากเวลาแฝง - ใครจำ 'แฟลชของเนื้อหาที่ไม่หยุด'? รหัสบิตที่สำคัญที่สุดสามารถเข้าสู่แท็กส่วนหัว อย่าลืมใช้งานมากเกินไป โปรดทราบว่ารหัสจะต้องอ่านโดยมนุษย์ที่ทำงานบำรุงรักษา

 & lt; html & gt;
  & lt; หัว & gt;
    & lt; สไตล์ & gt;
      .blue {สี: สีน้ำเงิน;}
    & lt; / style & gt;
    & lt; / head & gt;
  & lt; ร่างกาย & gt;
    & lt; div class = "สีน้ำเงิน" & gt;
      สวัสดีชาวโลก!
    & lt; / div & gt;

06. ใบอนุญาตการแยกวิเคราะห์ต่อยาแก้อักเสบ

@import เพิ่มโครงสร้างลงในรหัส CSS ของคุณ น่าเสียดายที่ผลประโยชน์ไม่ได้ฟรี: ในขณะที่การนำเข้าสามารถทำรังแยกกันในแบบขนานเป็นไปไม่ได้ วิธีที่มีขนานกันมากขึ้นใช้ชุดของ & lt; link & gt; แท็กซึ่งเบราว์เซอร์สามารถดึงข้อมูลได้ในครั้งเดียว

 @import URL ("A.CSS");
@import URL ("B.CSS");
@import URL ("c.css");
v & lt; link rel = "stylesheet" href = "a.css" & gt;
& lt; link rel = "stylesheet" href = "b.css" & gt;
& lt; link rel = "stylesheet" href = "c.css" & gt;

07. แทนที่ภาพด้วย CSS

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

 img {
    -Webkit-filter: Grayscale (100%); / * เก่า
Safari * /
    ตัวกรอง: Grayscale (100%);
}

08. ใช้ทางลัดสี

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

 เป้าหมาย {พื้นหลังสี: #ffffff; }
เป้าหมาย {พื้นหลัง: #fff; }

09. กำจัดศูนย์และหน่วยที่ไม่จำเป็น

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

 padding: 0.2em;
อัตรากำไรขั้นต้น: 20.0Em;
Avalue: 0px;
padding: .2em;
มาร์จิ้น: 20Em;
Avalue: 0;

10. กำจัดอัฒภาคที่มากเกินไป

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

 p {
. . .
ขนาดฟอนต์: 1.33em
}

11. ใช้ Atlas เนื้อ

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

. ดาวน์โหลด {
  ความกว้าง: 80px;
  ความสูง: 31px;
  ตำแหน่งพื้นหลัง: -160px -160px
}
. ดาวน์โหลด: โฮเวอร์ {
  ความกว้าง: 80px;
  ความสูง: 32px;
  ตำแหน่งพื้นหลัง: -80px -160px
}

12. ไล่ล่า PX ลง

วิธีที่เรียบร้อยเพื่อเพิ่มประสิทธิภาพการทำงานใช้มาตรฐานพิเศษของมาตรฐาน CSS ค่าตัวเลขที่ไม่มีหน่วยจะถือว่าเป็นพิกเซล - การลบ PX บันทึกสองไบต์สำหรับแต่ละหมายเลข

 H2 {padding: 0px; มาร์จิ้น: 0px;}
H2 {padding: 0; มาร์จิ้น: 0}

13. หลีกเลี่ยงคุณสมบัติที่มีราคาแพง

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

 รัศมีชายแดน
    กล่อง - เงา
    แปลง
    กรอง
    : nth-child
    ตำแหน่ง: แก้ไข;
    เป็นต้น

14. ลบช่องว่าง

Whitespace - Think Tabs, Carriage Returns and Spaces - ทำให้รหัสง่ายต่อการอ่าน แต่ทำหน้าที่เพียงเล็กน้อยจากมุมมองของ Parser กำจัดพวกเขาก่อนที่จะส่ง วิธีที่ดียิ่งขึ้นเกี่ยวข้องกับการมอบหมายงานนี้ให้กับเชลล์สคริปต์หรืออุปกรณ์ที่คล้ายกัน

15. กำจัดความคิดเห็น

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

16. ใช้การบีบอัดอัตโนมัติ

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

 java -jar yuicompressor-x.y.z.jar
การใช้งาน: java -jar yuicompressor-x.y.z.jar
 [ตัวเลือก] [ไฟล์อินพุต]
ตัวเลือกสากล
    -h, - ช่วยแสดงนี้
 ข้อมูล
    - ประเภท & lt; JS | CSS & GT; ระบุ
 ประเภทของไฟล์อินพุต

17. เรียกใช้จาก NPM

หากคุณต้องการรวมผลิตภัณฑ์เป็น node.js เยี่ยมชม npmjs.com/package/yuicompressor . ที่เก็บที่ได้รับการบำรุงรักษาที่ไม่ดีมีชุดของไฟล์ Wrapper และ API JavaScript

 Var Compressor = ต้องการ ('Yuicompressor');
คอมเพรสเซอร์คอมเพรสเซอร์ ('' / path / to /
ไฟล์หรือสตริงของ JS ', {
// ตัวเลือกคอมเพรสเซอร์:
Charet: 'UTF8'
ประเภท: 'JS',

18. เก็บ Sass et al ในการตรวจสอบ

ในขณะที่ประสิทธิภาพการเลือก CSS ไม่สำคัญเท่ากับที่ผ่านมาเมื่อหลายปีก่อน (ดูทรัพยากร) เฟรมเวิร์กเช่น SASS บางครั้งปล่อยรหัสที่ซับซ้อนมาก ลองดูที่ไฟล์ส่งออกเป็นครั้งคราวและคิดเกี่ยวกับวิธีการเพิ่มประสิทธิภาพผลลัพธ์ ได้ผลลัพธ์ที่จะแบ่งปันกับทีม? แบ่งปันไฟล์ที่แบ่งปันได้ การจัดเก็บเมฆ .

Sass คืออะไร

19. ตั้งค่าแคช

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

20. จับแคช

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

 & lt; link rel = "stylesheet" href = "style.css? v = 1.2.3" & gt;

21. อย่าลืมพื้นฐาน

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

 Pico /etc/httpd/conf/httpd.conf
AddoutputFilterBytype Deflate Text / HTML
AddoutputFilterBytype Deflate Text / CSS

บทความนี้ได้รับการตีพิมพ์ครั้งแรกในฉบับที่ 282 ของนิตยสารออกแบบเว็บสร้างสรรค์ นักออกแบบเว็บไซต์ . ซื้อปัญหา 282 ที่นี่ หรือ สมัครสมาชิกกับนักออกแบบเว็บไซต์ที่นี่ .

บทความที่เกี่ยวข้อง:

10 เทคนิค CSS ใหม่ที่น่าตื่นตาตื่นใจ
ตัวประมวลผล CSS ที่ดีที่สุดคืออะไร
การแนะนำคุณสมบัติที่กำหนดเอง CSS

21 วิธีในการเพิ่มประสิทธิภาพ CSS ของคุณและเพิ่มความเร็วไซต์ของคุณ

01. ใช้ชวเลข

02. ค้นหาและลบ CSS ที่ไม่ได้ใช้

03. ทำในแฟชั่นที่สะดวกสบายมากขึ้น

04. ระวังปัญหา

05. CSS ที่สำคัญแบบอินไลน์

06. ใบอนุญาตการแยกวิเคราะห์ต่อยาแก้อักเสบ

07. แทนที่ภาพด้วย CSS

08. ใช้ทางลัดสี

09. กำจัดศูนย์และหน่วยที่ไม่จำเป็น

10. กำจัดอัฒภาคที่มากเกินไป

11. ใช้ Atlas เนื้อ

12. ไล่ล่า PX ลง

13. หลีกเลี่ยงคุณสมบัติที่มีราคาแพง

14. ลบช่องว่าง

15. กำจัดความคิดเห็น

16. ใช้การบีบอัดอัตโนมัติ

17. เรียกใช้จาก NPM

18. เก็บ Sass et al ในการตรวจสอบ

19. ตั้งค่าแคช

20. จับแคช

21. อย่าลืมพื้นฐาน

วิธีการ - บทความยอดนิยม

วิธีการตั้งค่าและเพิ่มประสิทธิภาพหน้าร้าน SMUGMUG ของคุณ

วิธีการสร้างสแกนแบบ 3 มิติด้วยการจับภาพความเป็นจริง

สร้างต้นแบบด้วย Adobe XD

วิธีการตั้งค่าการใช้งานเว็บไซต์ด้วยตัวแปร CSS

วิธีการทำงานของ Snapping ในแอป 3D

วิธีการละลายวัตถุ 3 มิติด้วย Three.js

ออกแบบกราฟิก SVG ในเบราว์เซอร์ของคุณ

วิธีการทาสีสะท้อนความน่าเชื่อถือ

หมวดหมู่