• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Một số cách tối ưu hóa CSS giúp tăng tốc blogspot

21
08/10/2011

Tối ưu hóa CSS là một trong những cách giúp trang webblog của bạn load nhanh hơn. Trong phạm vi bài viết này, mình sẽ chia sẻ cùng bạn những cách tối ưu hóa CSS và kỹ thuật giảm kích cỡ file được hầu hết các nhà thiết kế web sử dụng. Tùy thuộc vào độ phức tạp của CSS trên trang của bạn mà những kỹ thuật này có thể được vận dụng linh hoạt, góp phần giảm số kylobyte cho CSS files.

1. Sử dụng file ngoài, gọp tất cả các file ngoài thành một file chung và đặt trong phần Head (ở đỉnh đầu) của trang:

Sử dụng file ngoài giúp trang load nhanh hơn do các file CSS được công cụ trình duyệt lưu giữ trong bộ nhớ cache. CSS được sắp xếp trong các tài liệu HTML được hạ tải mỗi khi tài liệu HTML được yêu cầu. Sử dụng file ngoài giúp hạn chế số HTTP requests cần thiết, nhưng tăng kích cỡ tài liệu HTML. Mặt khác, nếu CSS nằm trong các file ngoài được công cụ trình duyệt lưu nhớ cache thì kích cỡ tài liệu HTML được hạn chế mà không làm tăng số HTTP requests (Đây là quy tắc số 8 trong cuốn sách High Performance Web Sites của Steve Souders dành cho các nhà phát triển web chuyên nghiệp).

Thông thường đối với blogspot, CSS được đặt trước dòng ]]></b:skin> hoặc trước thẻ </head> như thế này:

  1. <head>
  2. ......
  3. ......
  4. ......
  5. <b:skin><![CDATA[/*
  6. body {
  7.   font-family:verdana;
  8.   margin:0;
  9.   padding:0;
  10. }
  11. a {
  12.   text-decoration:none;
  13.   outline: none;
  14. }
  15. h1 {
  16.   font-weight:700;  
  17.   margin:5px 0;
  18. }  
  19. ......
  20. ......
  21. ......
  22. ]]></b:skin>
  23. <style>
  24. ......
  25. ......
  26. ......
  27. </style>
  28. </head>

Nếu bạn có host thì nên gọp thành file chung (đặt tên default.css) rồi upload lên host, đặt file như thế này:

  1. <head>
  2. ......
  3. <link rel="stylesheet" type="text/css" href="http://www.tenhost.com/css/default.css" />
  4. ......
  5. </head>

Để hạn chế số HTTP requests, người ta còn khuyến cáo gọp các file CSS thành một file chung. Ví dụ nếu bạn có 3 file CSS trên trang web thì trình duyệt sẽ gửi 3 HTTP requests đến server. Như vậy nếu dùng chung 1 file CSS thì thời gian load trang sẽ nhanh hơn rất nhiều.

Nếu bạn có 3 file CSS như thế này:

  1. <link rel="stylesheet" type="text/css" href="content.css" />
  2. <link rel="stylesheet" type="text/css" href="widget.css" />
  3. <link rel="stylesheet" type="text/css" href="comment.css" />

Thì nên gộp thành một file như sau:

  1. <link rel="stylesheet" type="text/css" href="default.css" />

2. Rút gọn CSS:

Việc gộp chung tất cả các thuộc tính giống nhau sẽ giúp hạn chế kích cỡ CSS. Thay vì sử dụng nhiều dòng thuộc tính, tại sao chúng ta không tạo thành một dòng.

Đây là ví dụ đoạn CSS có nhiều thuộc tính giống nhau:

  1. /* MARGIN */
  2. h1 {margin-top:1em;
  3.     margin-right:0;
  4.     margin-bottom:2em;
  5.     margin-left:0.5em;
  6. }
  7. /* BORDER */
  8. h1 {border-width:1px;
  9.     border-style:solid;
  10.     border-color:#000;
  11. }
  12. /* BORDER WIDTH */
  13. h1 {border-top-width:1px;
  14.     border-right-width:2px;
  15.     border-bottom-width:3px;
  16.     border-left-width:4px;
  17. }
  18. /* BACKGROUND */
  19. div {background-color:#f00;
  20.      background-image:url(background.gif);
  21.      background-repeat:no-repeat;
  22.      background-attachment:fixed;
  23.      background-position:0 0;
  24. }
  25. /* FONT */
  26. h1 {font-style:italic;
  27.     font-variant:small-caps;
  28.     font-weight:bold;
  29.     font-size:1em;
  30.     line-height:140%;
  31.     font-family:"Lucida Grande",sans-serif;
  32. }
  33. /* LIST STYLE */
  34. ul {list-style-type:square;
  35.     list-style-position:inside;
  36.     list-style-image:url(image.gif);
  37. }
  38. /* OUTLINE */
  39. h1 {outline-color:#f00;
  40.     outline-style:solid;
  41.     outline-width:2px;
  42. }

Chúng ta nên rút gọn thành như sau:

  1. /* MARGIN */
  2. h1 {margin:1em 0 2em 0.5em;}
  3. /* BORDER */
  4. h1 {border:1px solid #000;}
  5. /* BORDER WIDTH */
  6. h1 {border-width:1px 2px 3px 4px;}
  7. /* BACKGROUND */
  8. div {background:#f00 url(background.gif) no-repeat fixed 0 0;}
  9. /* FONT */
  10. h1 {font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;}
  11. /* LIST STYLE */
  12. ul {list-style:square inside url(image.gif);}
  13. /* OUTLINE */
  14. h1 {outline:#f00 solid 2px;}

Rõ ràng bạn thấy đã giảm kích cỡ rất đáng kể cho CSS.

3. Gộp các định dạng CSS giống nhau:

Đôi khi chúng ta khai báo các định dạng CSS giống nhau mà chúng ta vô tình không nhận ra. Tốt nhất nên xem và phân tích lại. Hãy gộp chúng lại với nhau cho đơn giản hơn.

Ví dụ sau đây là đoạn CSS có các định dạng giống nhau:

  1. h1 {padding:5px 0; font-family:verdana; font-weight:700;}
  2. #box1 .heading  {padding:5px 0; font-family:verdana; font-weight:700;}
  3. #box2 .heading  {padding:5px 0; font-family:verdana; font-weight:700;}
  4. #nav a.home {padding:5px 0; font-family:verdana; font-weight:700; background:#fff url(home.gif) no-repeat 5px 5px}
  5. #nav a.portfolio {padding:5px 0; font-family:verdana; font-weight:700; background:#fff url(portfolio.gif) no-repeat 5px 5px}
  6. #nav a.contact {padding:5px 0; font-family:verdana; font-weight:700; background:#fff url(contact.gif) no-repeat 5px 5px}
  7. #nav a.about {padding:5px 0; font-family:verdana; font-weight:700; background:#fff url(about.gif) no-repeat 5px 5px}

Chúng ta nên gộp lại như sau:

  1. h1, #box1 .heading, #box2 .heading  {padding:5px 0; font-family:verdana; font-weight:700}
  2. #nav a {padding:5px 0; font-family:verdana; font-weight:700; background:#fff no-repeat 5px 5px}
  3. #nav a.home {background:url(home.gif)}
  4. #nav a.portfolio {background:url(portfolio.gif)}
  5. #nav a.contact {background:url(contact.gif)}
  6. #nav a.about {background:url(about.gif)}

4. Nén CSS:

- Hạn chế xuống dòng và bỏ dấu chấm phẩy (;) cuối cùng:

Ví dụ đối với đoạn CSS này:

  1. h2 {
  2.     font-family:verdana;
  3.     padding:0;
  4.     margin:5px 0;
  5.     color:#333;
  6.     text-decoration:underline;
  7. }

Nên nén lại thành một dòng như sau:

  1. h2 {font-family:verdana;padding:0;margin:5px 0;color:#333;text-decoration:underline}

- Sử dụng chú thích đơn giản:

Ví dụ đối với một đoạn chú thích phức tạp như thế này:

  1. /************************************/
  2. /*          Content Styles            */
  3. /************************************/

Thì nên đơn giản hóa lại như sau (hoặc có thể bỏ luôn chú thích):

  1. /* content styles */

- Loại bỏ 0px:

Ví dụ đối với đoạn CSS này:

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

Thì nên sửa lại như sau:

  1. h2 {padding:0; margin:0}

5. Sử dụng mã màu đơn giản:

Đối với một số mã màu như thế này: #FFFFFF, #113344, #AABBCC, #FF0000

Thì chúng ta nên giản lượt lại như sau: #FFF, #134, #ABC, #F00

6. Loại bỏ các đoạn CSS không cần thiết:

Trong quá trình thiết kế webblog, do nhiều khi thay đổi giao diện hoặc tháo các tiện ích, một số lớp/ID đã được tạo trước đây thì nay không còn dùng đến nữa. Chúng ta nên kiểm tra và loại bỏ chúng.

Dust-Me SelectorCSS Roundup là hai Addon của Firefox giúp phân tích trang để tìm ra những phần CSS không được dùng đến. Bạn có thể cài đặt một trong hai tiện ích này để giúp bạn làm thay công việc này (tuy nhiên hai tiện ích này chưa hoạt động được với phiên bản mới nhất của FireFox, chỉ dùng được với các phiên bản từ FF6+ trở về trước).

7. Sử dụng các công cụ tối ưu hóa và nén CSS online để giúp bạn đỡ mệt nhọc hơn:

CSS Optimizer
Flumpcakes CSS Optimizer
Clean CSS
CSS Drive CSS Compressor
Online YUI Compressor
Style Neat

8. Sử dụng CSS Sprite:

CSS Sprite là phương pháp tối ưu để hạn chế số lượng HTTP requests về hình ảnh. Kết hợp các ảnh nền thành một ảnh duy nhất và sử dụng các thuộc tính background-image và background-position để hiển thị ảnh theo ý muốn. Phương pháp này rất hữu ích cho các trang có lượng khách truy cập đông. CSS Sprite là một phạm trù kiến thức nâng cao, bạn có thể tham khảo ở một bài viết khác sau này.

{21 bình luậnAdd yours ?}

23:17:00, 8 thg 10, 2011

Em đã áp dụng khá nhiều cách mà anh đưa ra ở trên. Mà ở trường hợp gộp thành 1 file rồi up lên host có nhanh hơn là để nó load trực tiếp không anh! Em thấy hiện nay chỉ có Blog bác Noct là áp dụng cách này sử dụng Appspot. À anh có thể hướng dẫn thêm cách tối giản javascript không? Em áp dụng 1 số cách trên mạng mà không ổn cho lắm!

Reply
23:22:00, 8 thg 10, 2011

@Linh Dung Gộp thành file ngoài tất nhiên load nhanh hơn trực tiếp rồi (inline CSS). TTB cũng đã dùng cách này rồi, upload lên host (k nhất thiết phải dùng Google App). Về tối ưu hóa js hẹn bài sau nhé.

Reply
23:25:00, 8 thg 10, 2011

@Huỳnh Nhật Hà Mấy hôm rồi em có gộp lại thành 1 file và upload lên Dropbux và đặt sau thẻ <head>. Suy đi tính lại thế nào lại thôi, vì nghĩ lúc mình muốn chỉnh sửa gì thì hơi phiền! Tính em thì hay nghịch lung tung nữa chứ! hì hì!

Reply
23:28:00, 8 thg 10, 2011

@Linh Dung Nếu hay nghịch thì chỉ cần dùng Mục 2 và Mục 3 là OK.

Reply
23:30:00, 8 thg 10, 2011

@Huỳnh Nhật Hà 2 mục này thì em áp dụng khá triệt để rồi hì! mà anh Hà sử dụng Byethost à! Em đang quản trị 1 diễn đàn có cái host của FPT, chắc upload lên ok! Hiện giờ thì Blog cũng khá ổn định rồi nên sẽ không nghịch lung tung nữa!

Reply
23:38:00, 8 thg 10, 2011

@Linh Dung Đúng rồi, xài Byethost vừa miễn phí vừa băng thông lớn, rất phù hợp cho blogspot. Có thể edit CSS ngay trên Byethost rất tiện.

Reply
23:38:00, 8 thg 10, 2011

Đang định làm cái này vì blog nguoiaolam khá nặng về mặt js ...
Buồn ngủ gặp chiếu manh.


Bác chỉ cái thủ thuật cái fix menu ở bên lề trái blog bác nhé.. :)

Reply
23:42:00, 8 thg 10, 2011

@Minh Triết Cái menu ấy cũng đơn giản thôi, hẹn một bài khác nhé. MT nên xài host để upload CSS và JS. Nếu thích hàng chùa thì lời khuyên là dùng Byethost.

Reply
23:45:00, 8 thg 10, 2011

Vấn đề kg phải là thích xài hàng chùa đâu bác. Nhưng do yêu thích blogger mà bác. Định up css lên google code nhưng cứ sợ bị nó phạt... xài byethost thì thấy không ổn thế nào í.

Dạo này blog bác cũng đang trầm trầm đó , Bác viết thêm cái bài về tối ưu hóa js đi thấy có vẻ chủ đề này anh em hào hứng.

Reply
23:47:00, 8 thg 10, 2011

Blog anh Hà ra bài liên tục, em lại thích như thế hì! Nhưng để duy trì được lâu như vậy thì rất cần phải có 1 chiến lược lâu dài! Hy vọng là anh Hà đã lên kế hoạch đầy đủ cho TTB!

Reply
23:52:00, 8 thg 10, 2011

@Linh Dung Chiến lược mới đã định hình cách đây 1 tuần. Trong thời gian tới sẽ có những cái rất mới. Nhưng giai đoạn cuối năm quỹ thời gian càng ngày càng ít đi, chắc mọi người biết vì sao rồi.

Reply
23:55:00, 8 thg 10, 2011

@Huỳnh Nhật Hà Em mong chờ những điều mới thú vị và bất ngờ tại TTB! Em nghĩ là mọi người ai cũng sẽ ủng hộ thui anh Hà ạ!

Reply
07:04:00, 9 thg 10, 2011

Blogspot thật tuyệt vời, nó khiến người dùng luôn phải tự học hỏi, tăng cường trao dồi kiến thức, nâng cao tính sáng tạo, sự kiên trì, đặc biệt là niềm đam mê bất tận... :O) Các thủ thuật sáng tạo trên blogspot hiện nay chủ yếu tập trung vào js, jquery, html. Hạn chế của blogger đó là nó vẫn là 1 trang tĩnh, khả năng tương tác, truy xuất dữ liệu và xử lý thông tin người dùng chưa có. Đơn giản là vì blogspot ko hỗ trợ Php, cách khắc phục là chúng ta có thể chèn iframe từ host riêng của mìn, hosting bây giờ giá cũng rẻ, chỉ tiếc là ở Việt Nam các pro PHP viết về blogspot ít quá :A)

Reply
16:48:00, 9 thg 10, 2011

em thấy h browser load css nhanh ko ý mà chứ tốc độ page ko còn chủ yếu do css nữa, mà có pro blogger còn kêu là tốt nhất cứ code rõ ràng rành mạch sửa cho tiện

Reply
Yolks
AUTHOR
18:58:00, 9 thg 10, 2011

còn load lâu hơn nếu dùng host cùi a nhỉ , từ khi a áp dụng bài này e vào ko dc

Reply
22:30:00, 25 thg 7, 2012

chà mới làm cái viconso.blogspot.com để giúp công ty về container văn phòng áp dụng cách của admin khá tốt đây, hehe, thank for share

Reply
22:15:00, 2 thg 8, 2016

tử vi 12 cung hoàng đạo ngày mai rồi này

Reply
20:33:00, 19 thg 9, 2016

cảm ơn bạn đã chia sẻ

bệnh trĩ

Reply
22:22:00, 20 thg 9, 2016

cám ơn bạn đã chia sẻ


báo tin nóng

Reply
21:32:00, 25 thg 10, 2016

yes, i ready

cách trị mụn

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn