Bạn biết CSS, nhưng bạn có biết cách tối ưu hóa nó? Tôi đã tập hợp một danh sách các mẹo và thủ thuật tối ưu hóa CSS và giảm kích thước tệp CSS sẽ giúp bạn viết mã CSS hiệu quả và hiệu quả hơn.

Bạn đang xem : cố gắng giảm số lượng tệp css được sử dụng

Giới thiệu

Tôi đã tập hợp một danh sách dài các kỹ thuật tối ưu hóa CSS và giảm kích thước tệp được hầu hết các nhà thiết kế / nhà phát triển sử dụng. Tùy thuộc vào độ phức tạp của mã CSS của bạn, các kỹ thuật này có thể làm giảm đáng kể kích thước tệp CSS của bạn hoặc có thể chỉ một vài kilobyte.

Ngoài ra, bạn cũng có thể muốn đọc bài đăng trước của tôi về CSS – 15 Mẹo và Thủ thuật CSS để tìm hiểu cách viết mã CSS hiệu quả hơn.

1. Sử dụng CSS Sprite

“CSS Sprites là phương pháp ưa thích để giảm số lượng yêu cầu hình ảnh. Kết hợp các hình ảnh nền của bạn thành một hình ảnh duy nhất và sử dụng các thuộc tính background-image và background-position trong CSS để hiển thị phân đoạn hình ảnh mong muốn.” – Quy tắc dành cho nhà phát triển Yahoo

Phương pháp này được chứng minh là giảm đáng kể lượng yêu cầu HTTP và rất hiệu quả cho các trang web có lưu lượng truy cập cao. Trang web tin tức cộng đồng nổi tiếng Digg đang sử dụng phương pháp này.

Thêm chi tiết về CSS Sprite:

2. Kết hợp tất cả các tệp CSS thành một tệp duy nhất

“Khi người dùng đang mở trang web của bạn, mọi đối tượng trên trang (ví dụ: hình ảnh hoặc tập lệnh) sẽ yêu cầu chuyển một vòng tới máy chủ. Những yêu cầu HTTP đó sẽ làm chậm thời gian phản hồi của trang web của bạn và nếu bạn đang tải hàng tá đối tượng, độ trễ này có thể lên đến vài giây. ” – Dailyblogtips

Kỹ thuật này khá giống với CSS Sprite, ít nhất chúng có cùng mục đích – giảm yêu cầu HTTP. Vì vậy, nếu bạn có 3 tệp CSS trong trang web của mình, trình duyệt sẽ gửi 3 yêu cầu HTTP đến máy chủ. Toán học đơn giản, 1 tệp CSS = 1 yêu cầu HTTP. Tôi đã thấy một số trang web có 6-7 tệp CSS trong tiêu đề và điều đó chắc chắn sẽ ảnh hưởng đến thời gian tải trang web của bạn.

Trước đây

 & lt; link rel = "stylesheet" type = "text / css" href = "content.css" / & gt;
& lt; link rel = "stylesheet" type = "text / css" href = "about.css" / & gt;
& lt; link rel = "stylesheet" type = "text / css" href = "contact.css" / & gt;

& lt; link rel = "stylesheet" type = "text / css" href = "layout.css" / & gt;

& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; CSS & lt; / title & gt;
& lt; phong cách & gt;
thân hình {
font-family: verdana;
lề: 0;
đệm: 0;
}

h1 {
font-weight: 700;
lề: 5px 0;
}

......
......
......

& lt; / style & gt;
& lt; / head & gt;
& lt; / html & gt;

& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; CSS & lt; / title & gt;
& lt; link rel = "stylesheet" type = "text / css" href = "style.css" / & gt;
& lt; / head & gt;
& lt; / html & gt;

Sau khi

 & lt; link rel = "stylesheet" type = "text / css" href = "content.css" / & gt;
& lt; link rel = "stylesheet" type = "text / css" href = "about.css" / & gt;
& lt; link rel = "stylesheet" type = "text / css" href = "contact.css" / & gt;

& lt; link rel = "stylesheet" type = "text / css" href = "layout.css" / & gt;

& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; CSS & lt; / title & gt;
& lt; phong cách & gt;
thân hình {
font-family: verdana;
lề: 0;
đệm: 0;
}

h1 {
font-weight: 700;
lề: 5px 0;
}

......
......
......

& lt; / style & gt;
& lt; / head & gt;
& lt; / html & gt;

& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; CSS & lt; / title & gt;
& lt; link rel = "stylesheet" type = "text / css" href = "style.css" / & gt;
& lt; / head & gt;
& lt; / html & gt;

3. Tạo CSS dưới dạng tệp bên ngoài

“Việc sử dụng các tệp bên ngoài trong thế giới thực thường tạo ra các trang nhanh hơn vì các tệp CSS được trình duyệt lưu vào bộ nhớ cache. CSS được nội tuyến trong tài liệu HTML được tải xuống mỗi khi tài liệu HTML được yêu cầu. Điều này làm giảm số lượng yêu cầu HTTP. là cần thiết, nhưng sẽ làm tăng kích thước của tài liệu HTML. Mặt khác, nếu CSS nằm trong các tệp bên ngoài được trình duyệt lưu trong bộ nhớ cache, thì kích thước của tài liệu HTML sẽ giảm mà không làm tăng số lượng yêu cầu HTTP. ” – Yahoo

See also  Hình ảnh sắc nét hơn Máy tập thể dục tình yêu, - tình yêu xử lý hình ảnh sắc nét hơn

Điều này rất đúng. Có rất nhiều trang web vẫn đang sử dụng CSS nội tuyến. Theo quan điểm của nhà phát triển, mặc dù có rất nhiều công cụ hỗ trợ, nhưng, chúng ta nên luôn cố gắng hết sức để tách các ngôn ngữ khác nhau thành các tệp khác nhau. Ví dụ: cố gắng không đưa CSS, javascript nội tuyến vào tài liệu HTML mà hãy đưa chúng vào các tệp bên ngoài. Nó làm cho mã của bạn dễ bảo trì và dễ đọc. Bên cạnh đó, nó cũng tăng và tối ưu hóa hiệu suất trang web.

4. Luôn đặt tệp CSS trong tiêu đề / đầu trang

“Trong khi nghiên cứu hiệu suất tại Yahoo !, chúng tôi phát hiện ra rằng việc di chuyển các biểu định kiểu vào tài liệu HEAD làm cho các trang có vẻ tải nhanh hơn. Điều này là do việc đặt biểu định kiểu vào HEAD cho phép trang hiển thị dần dần.” – Yahoo

Đưa biểu định kiểu vào HEAD có thể tránh được hai vấn đề: màn hình trắng trống và nội dung chưa được định kiểu nhấp nháy. Steve Souders đã thực hiện một số thử nghiệm về điều gì sẽ xảy ra nếu bạn đặt Biểu định kiểu ở một nơi khác trong trang web.

Trước đây

 & lt; link rel = "stylesheet" type = "text / css" href = "content.css" / & gt;
& lt; link rel = "stylesheet" type = "text / css" href = "about.css" / & gt;
& lt; link rel = "stylesheet" type = "text / css" href = "contact.css" / & gt;

& lt; link rel = "stylesheet" type = "text / css" href = "layout.css" / & gt;

& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; CSS & lt; / title & gt;
& lt; phong cách & gt;
thân hình {
font-family: verdana;
lề: 0;
đệm: 0;
}

h1 {
font-weight: 700;
lề: 5px 0;
}

......
......
......

& lt; / style & gt;
& lt; / head & gt;
& lt; / html & gt;

& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; CSS & lt; / title & gt;
& lt; link rel = "stylesheet" type = "text / css" href = "style.css" / & gt;
& lt; / head & gt;
& lt; / html & gt;

Sau khi

 & lt; link rel = "stylesheet" type = "text / css" href = "content.css" / & gt;
& lt; link rel = "stylesheet" type = "text / css" href = "about.css" / & gt;
& lt; link rel = "stylesheet" type = "text / css" href = "contact.css" / & gt;

& lt; link rel = "stylesheet" type = "text / css" href = "layout.css" / & gt;

& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; CSS & lt; / title & gt;
& lt; phong cách & gt;
thân hình {
font-family: verdana;
lề: 0;
đệm: 0;
}

h1 {
font-weight: 700;
lề: 5px 0;
}

......
......
......

& lt; / style & gt;
& lt; / head & gt;
& lt; / html & gt;

& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; CSS & lt; / title & gt;
& lt; link rel = "stylesheet" type = "text / css" href = "style.css" / & gt;
& lt; / head & gt;
& lt; / html & gt;

5. Sử dụng Liên kết thay vì @import

Kiểm tra và phân tích chi tiết từ cho thấy việc sử dụng @import có thể ảnh hưởng đến hiệu suất trang web của bạn. Kết quả phân tích:

  • Việc sử dụng @import trong một biểu định kiểu sẽ thêm một vòng nữa vào thời gian tải xuống tổng thể của trang.
  • Việc sử dụng @import trong IE khiến thứ tự tải xuống bị thay đổi. Điều này có thể khiến các biểu định kiểu mất nhiều thời gian để tải xuống hơn, điều này cản trở quá trình hiển thị khiến trang có cảm giác chậm hơn.
See also  Màu HTML: Thay đổi Màu nền HTML hoặc Màu phông chữ - màu nền văn bản đầu vào html

6. Sử dụng các phím tắt CSS

Bằng cách nhóm tất cả các cài đặt thuộc tính giống nhau lại với nhau, CSS viết tắt chắc chắn có thể giúp bạn giảm và tối ưu hóa các tệp CSS. Thay vì nhiều dòng thuộc tính, chúng tôi có thể làm cho nó thành một lớp lót. Sau đây là tất cả các viết tắt CSS:

Viết tắt CSS

 / * MARGIN * /
h1 {margin: 1em 0 2em 0.5em;}

h1 {margin-top: 1em;
   margin-right: 0;
   margin-bottom: 2em;
   lề trái: 0,5em;
}

/* BIÊN GIỚI */
h1 {border: 1px solid # 000;}

h1 {border-width: 1px;
    border-style: chắc chắn;
    màu viền: # 000;
}

/* CHIỀU RỘNG BIÊN GIỚI */
h1 {border-width: 1px 2px 3px 4px;}

h1 {border-top-width: 1px;
border-right-width: 2px;
border-bottom-width: 3px;
border-left-width: 4px;
}

/* LAI LỊCH */
div {background: # f00 url (background.gif) cố định không lặp lại 0 0;}

div {background-color: # f00;
background-image: url (background.gif);
background-repeat: không lặp lại;
background-attachment: cố định;
background-position: 0 0;
}

/* NÉT CHỮ */
h1 {font: italic small-caps đậm 1em / 140% "Lucida Grande", sans-serif;}

h1 {font-style: nghiêng;
font-variant: small-caps;
font-weight: bold;
cỡ chữ: 1em;
chiều cao dòng: 140%;
font-family: "Lucida Grande", sans-serif;
}

/ * PHONG CÁCH DANH SÁCH * /
ul {list-style: square bên trong url (image.gif);}

ul {list-style-type: square;
list-style-position: bên trong;
list-style-image: url (image.gif);
}

/* ĐỀ CƯƠNG */
h1 {outline: # f00 solid 2px;}

h1 {outline-color: # f00;
outline-style: solid;
outline-width: 2px;
}

7. Nhóm các kiểu tương tự

Điều này dễ dàng xảy ra sau một thời gian dài phát triển. Chúng tôi chỉ khai báo các kiểu giống nhau lặp đi lặp lại mà không nhận ra rằng một cái gì đó hoàn toàn giống nhau đã tồn tại. Thật tốt khi xem lại mã CSS và phân tích lại, để các kiểu tương tự có thể được nhóm lại với nhau.

Trước đây

 h1 {padding: 5px 0; font-family: verdana; font-weight: 700;}
# box1 .heading {padding: 5px 0; font-family: verdana; font-weight: 700;}
# box2 .heading {padding: 5px 0; font-family: verdana; font-weight: 700;}

Sau khi

 h1, # box1 .heading, # box2 .heading {padding: 5px 0; font-family: verdana; font-weight: 700;}

Tuy nhiên, đối với hầu hết các trường hợp, Kiểu CSS không nhất thiết phải xuất hiện giống nhau một cách chính xác, như thế này:

Trước đây

 # nav a.home {padding: 5px 0; font-family: verdana; font-weight: 700; background: #fff url (home.gif) không lặp lại 5px 5px}
#nav a.portfolio {padding: 5px 0; font-family: verdana; font-weight: 700; background: #fff url (portfolio.gif) không lặp lại 5px 5px}
#nav a.contact {padding: 5px 0; font-family: verdana; font-weight: 700; background: #fff url (contact.gif) không lặp lại 5px 5px}
#nav a.about {padding: 5px 0; font-family: verdana; font-weight: 700; background: #fff url (about.gif) no-repeat 5px 5px}

Sau khi

 # nav a {padding: 5px 0; font-family: verdana; font-weight: 700; background: #fff no-repeat 5px 5px}

#nav a.home {background: url (home.gif)}
#nav a.portfolio {background: url (portfolio.gif)}
#nav a.contact {background: url (contact.gif)}
#nav a.about {background: url (about.gif)}

Tất cả chúng ta đều có thể thấy sự khác biệt trong ví dụ này, đó là một phương pháp tuyệt vời để giảm kích thước tệp CSS và tăng khả năng đọc.

TỚI PHẦN MỞ RỘNG: Giảm kích thước tệp CSS

Phần này dành riêng cho những người muốn giảm thêm kích thước tệp CSS. Một số mẹo và thủ thuật chỉ có thể giảm bớt vài byte từ tệp, nhưng dù sao cũng sẽ rất tốt nếu bạn biết tất cả các khả năng. 🙂

8. Giảm số lượng ngắt dòng

 h2 {
font-family: verdana;
đệm: 0;
lề: 5px 0;
màu: # 333;
text-decoration: gạch chân;
}

/ * bạn có thể làm như thế này * /
h2 {font-family: verdana; padding: 0; margin: 5px 0; color: # 333; text-decoration: underline;}

9. Xóa dấu chấm phẩy cuối cùng

 h2 {font-family: verdana; color: # 333;}

/* loại bỏ */
h2 {font-family: verdana; color: # 333}

10. Sử dụng các nhận xét đơn giản

 / ************************************ /
/ * Trang Nội dung * /
/ ************************************ /

vs

/ * trang nội dung * /

11. Màu đơn giản

Thay vì sử dụng mã màu đầy đủ như thế này:

#FFFFFF, # 113344, #AABBCC, # FF0000

Chúng tôi có thể làm như thế này

#FFF, # 134, #ABC, # F00

Tuy nhiên, chúng tôi sẽ không thể thay đổi bất kỳ điều gì như thế này:

See also  Cách khắc phục lỗi vị trí không khả dụng, quyền truy cập bị từ chối trong Windows 10/8/7 - sự khác biệt giữa vị trí không có sẵn và vị trí không được tìm thấy

# C4C4C4, # 1A2B3C

12. Xóa “px”

 h2 {padding: 0px; margin: 0px;}

/* loại bỏ */

h2 {đệm: 0; lề: 0}

13. Sử dụng tốc ký

Như đã đề cập ở trên, nó thực sự giúp giảm kích thước tệp.

14. Xóa các lớp không sử dụng

Trong quá trình phát triển, do những thay đổi về thiết kế, một số lớp mà chúng tôi đã tạo có thể không được sử dụng. Đôi khi, chúng ta chỉ cần đọc lướt qua mã CSS, xác định chúng và làm sạch mã.

Bộ chọn Dust-Me là một tiện ích mở rộng của Firefox giúp tìm các bộ chọn CSS không được sử dụng. Nó trích xuất tất cả các bộ chọn từ tất cả các bảng định kiểu trên trang bạn đang xem, sau đó phân tích trang đó để xem bộ chọn nào trong số các bộ chọn đó không được sử dụng. Sau đó, dữ liệu được lưu trữ để khi kiểm tra các trang tiếp theo, các bộ chọn có thể bị gạch bỏ khỏi danh sách khi chúng gặp phải.

15. Sử dụng công cụ nén CSS

Hoặc, nếu bạn không muốn làm tất cả những việc đó theo cách thủ công, bạn luôn có thể sử dụng các công cụ sau:

Trình tối ưu hóa CSS
Trình tối ưu hóa CSS của Flumpcakes
CSS sạch
Trình nén CSS Drive CSS
Trình nén YUI trực tuyến
Kiểu dáng gọn gàng

Tham khảo / Tín dụng / Đọc thêm


Xem thêm những thông tin liên quan đến chủ đề cố gắng giảm số lượng tệp css đã sử dụng

Phantom from Space (1953) Horror, Sci-Fi Cult Classic

  • Tác giả: Cult Cinema Classics
  • Ngày đăng: 2018-09-19
  • Đánh giá: 4 ⭐ ( 5409 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: It came from a billion miles of space to meet the strangest destiny ever told!
    When an asteroid crashes, an alien being with the power of invisibility lands in Santa Monica. The government authorities search begins to track down the mysterious creatures.

    Director: W. Lee Wilder
    Writers: William Raynor, Myles Wilder
    Stars: Ted Cooper, Rudolph Anders, Noreen Nash
    Genres: Cult Classic, Horror, Sci-Fi

    Crash into planet C³ :
    https://www.facebook.com/CultCinemaClassics
    https://www.instagram.com/cultcinemaclassics
    https://www.twitch.tv/cultcinemaclassics

Front end Optimization – 9 tips để cải thiện Web Performance

  • Tác giả: topdev.vn
  • Đánh giá: 3 ⭐ ( 1802 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Front end Optimization – 9 tips để cải thiện Web Performance

Cách đơn giản để thay đổi code CSS cho việc giảm thời gian tải trang.

  • Tác giả: aithietke.com
  • Đánh giá: 4 ⭐ ( 3975 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Khắc phục sự cố giảm thu nhập

  • Tác giả: support.google.com
  • Đánh giá: 3 ⭐ ( 2230 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

11 công cụ hữu ích để kiểm tra và tối ưu hóa các file CSS

  • Tác giả: quantrimang.com
  • Đánh giá: 4 ⭐ ( 1290 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bằng cách giảm kích thước file CSS, máy chủ sẽ mất ít thời gian load, khiến cho trang web nhanh hơn. Việc sử dụng trình kiểm tra CSS có khả năng dọn sạch các lỗi phổ biến cũng có thể giúp ích.

Bỏ túi ngay 9 Tips tối ưu CSS hiệu quả

  • Tác giả: www.tma.vn
  • Đánh giá: 4 ⭐ ( 2978 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Cách giảm thiểu tệp CSS / JavaScript trong WordPress (3 cách)

  • Tác giả: pluginthanhtoan.com
  • Đánh giá: 4 ⭐ ( 2098 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn có muốn giảm thiểu các tệp CSS và JavaScript trong WordPress không? Tìm hiểu cách dễ dàng giảm các tệp CSS và JavaScript trong WordPress để cải thiện tốc độ và hiệu suất.

Xem thêm các bài viết khác thuộc chuyên mục: WordPress