Cách tối ưu hóa phân phối CSS – 7 bước đơn giản

hình ảnh vector tối ưu hóa cssĐã qua rồi cái thời mà các chuyên gia thiết kế và các blogger hàng đầu trong ngành khuyến nghị xây dựng các trang web không quá 30 kilobyte.


Trước đó, cap Cap này đã được mong đợi để xử lý HTML, JavaScript, hình ảnh, CSS và Flash. Hãy nói thật lòng, nó không mất nhiều thời gian để vượt quá 30 kb.

Khi JavaScript và CSS trở nên phổ biến, chỉ riêng CSS đã vượt quá mức trần 30KB. Điều này đặc biệt đúng với các trang web lớn hơn.

Tuy nhiên, bạn không nên tập trung quá mức vào số lượng kilobyte của bạn khi xây dựng và thiết kế trang cho trang web của bạn. Điều quan trọng là giữ các trang của bạn tối ưu hóa và chặt chẽ khi viết CSS của bạn.

Tối ưu hóa không chỉ là về việc giảm thiểu kích thước của các tệp của bạn. Nó nói về việc giữ cho các trang của bạn không bị lộn xộn và phình to, làm cho chúng có tổ chức và hiệu quả nhất có thể. Khi bạn tìm hiểu thêm về các thực tiễn tốt nhất về tối ưu hóa CSS, bạn sẽ thấy rằng bạn tự động tạo các kích thước tệp nhỏ hơn.

Dưới đây là 5 điều đơn giản bạn có thể làm để tối ưu hóa CSS của mình ngay bây giờ.

Cách tối ưu hóa hoàn toàn phân phối CSS

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

Viết tốc ký đã trở thành một thực tiễn rất phổ biến. Đây là cách đơn giản nhất để giảm mã của bạn và bạn mất bao lâu để viết mã. Nếu bạn chưa làm điều này, không có thời gian như hiện tại.

thuộc tính phông chữ css

Có vô số yếu tố mà bạn có thể sử dụng tốc ký, nhưng phổ biến nhất bao gồm:

  • Ký quỹ
  • Đệm
  • Nét chữ
  • Đề cương
  • Biên giới
  • Lý lịch
  • Danh sách kiểu

giá trị cấu hình tốc kýBạn cũng có thể kết hợp các giá trị bằng cách sử dụng tốc ký. Bằng cách chỉ định các giá trị khác nhau, về cơ bản trình duyệt sẽ sử dụng một cách thức cụ thể để diễn giải các quy tắc.

Sử dụng bất kỳ tốc ký sẽ làm cho mã tổng thể của bạn ngắn gọn hơn. Bạn đang lưu cả ký tự và dòng.

Nếu bạn sử dụng tốc ký trong mọi lĩnh vực có thể, điều này có thể làm giảm đáng kể kích thước tệp chung.

2. Thoát khỏi Hacks

tức là quy tắc cssĐể phục vụ các quy tắc CSS dành riêng cho IE, sử dụng các bản hack CSS có điều kiện mang lại cho bạn lợi ích của việc phục vụ tệp CSS mặc định nhỏ hơn và sạch hơn.

Nó giúp với các trình duyệt tuân thủ tiêu chuẩn hơn. Tuy nhiên, trọng lượng trang bổ sung sẽ chỉ được tải xuống bởi các trình duyệt yêu cầu nó.

Nếu bạn phải sử dụng hack, điều bắt buộc là mã bạn sử dụng phải dành riêng cho phiên bản Internet Explorer mà bạn đang tập trung vào.

Có rất nhiều mã được viết sẵn đóng vai trò hack nếu bạn không muốn tự viết. Chỉ cần dành thời gian để thực sự nhìn vào mã được viết sẵn và đảm bảo rằng nó là chính xác nếu không điều này có thể dẫn đến nhiều vấn đề hơn.

Bây giờ, nếu bạn có thể sử dụng CSS để có được kết quả mà bạn mong muốn, hãy làm điều này mà không cần bất kỳ hack nào. Tất nhiên, điều này phụ thuộc vào tất cả những thứ khác như nhau. Mã tổng thể của bạn sẽ nhẹ hơn và đơn giản hơn khi bạn sử dụng ít hack hơn trên trang web của mình.

3. Hãy thông minh về việc sử dụng khoảng trắng

Đối với mã CSS của bạn, khoảng trắng là bắt buộc để dễ đọc.

Khoảng trắng bao gồm các thành phần, chẳng hạn như tab, dấu cách và dấu ngắt dòng bổ sung. Mỗi bit của khoảng trắng mà bạn có thể loại bỏ tương tự như loại bỏ một ký tự.

xóa các dòng trốngTuy nhiên, thường không nên bỏ qua khoảng trắng vì lợi ích của một tệp nhỏ hơn. Bạn vẫn cần duy trì khả năng đọc tối ưu trên các trang web của mình.

Khoảng trắng rất quan trọng để định dạng, vì vậy bạn muốn tìm sự cân bằng. Nếu bạn viết trong các khối lớn thành văn bản để loại bỏ một số khoảng trắng, khoảng chú ý ngắn của độc giả trên internet sẽ khiến họ nhấp đi.

Một cách để cung cấp cả kích thước tệp nhỏ hơn và khả năng đọc là bỏ các tab và chỉ đặt một dòng duy nhất ở giữa các đoạn. Điều này cung cấp đủ khoảng trắng từ quan điểm dễ đọc, nhưng nó cũng loại bỏ một số khoảng trắng không cần thiết.

Bây giờ, đối với phiên bản sản xuất tệp CSS của bạn, bạn có thể xóa khoảng trắng. Nó vẫn sẽ có mặt trong tập tin làm việc của bạn.

Đây là một cách khác để thỏa hiệp để bạn có cả tệp nhỏ hơn và định dạng có thể đọc được.

4. Đặt lại khung và khung

Khi bạn đang sử dụng khung CSS, bắt buộc bạn phải xem lại tài liệu.

Điều quan trọng không kém là xem xét từng dòng trong tệp CSS của bạn. Đôi khi bạn sẽ phát hiện ra rằng có một số quy tắc trong khung mà bạn không muốn cho dự án hiện tại của mình. Đây có thể được gỡ bỏ.

loại bỏ các quy tắc css không sử dụng

Bạn có thể thấy rằng bạn có thể đạt được chi tiết trình bày theo cách ngắn gọn và thanh lịch hơn

Đây có thể không phải là những gì bạn thường sử dụng, nhưng nếu nó hoạt động, điều này có thể cho phép khuôn khổ sạch hơn. Khi bạn biết về chúng, điều này cũng giúp bạn tránh sự trùng lặp không chủ ý của các bộ quy tắc.

Thông tin tương tự cũng được áp dụng cho thiết lập lại. Khi bạn sử dụng thiết lập lại, chúng sẽ giúp trung hòa kiểu mặc định của trình duyệt. Bây giờ, nếu bạn đã quen thuộc với trang web mà bạn đang tạo, sẽ không có gì lạ khi tìm thấy các khai báo nhất định mà bạn biết rằng bạn sẽ không cần.

Ví dụ, trên một blog chung, bạn có thể sẽ không sử dụng chúng. Chỉ cần loại bỏ bất cứ thứ gì bạn không cần cho trang web cụ thể mà bạn đang xây dựng. Bạn có thể đảm bảo công việc được tối ưu hóa tốt hơn khi bạn sử dụng một bộ quy tắc liên quan đến thiết lập lại hoặc khung.

Tuy nhiên, ở trạng thái mặc định, chúng không nên được chấp nhận. Để giữ cho các tệp CSS của bạn dễ đọc và gọn gàng, hãy xem từng khai báo và cắt giảm những tệp không cần thiết.

5. Tương lai CSS của bạn

Cú pháp Css

Một tùy chọn tối ưu hóa CSS hữu ích khác: tách phần lớn các quy tắc của bạn khỏi các khai báo dành riêng cho bố cục của bạn.

Chỉ định bố cục cho tệp riêng của nó nếu điều này là có thể. Nếu không, ít nhất là cho nó phần riêng của nó có thể có lợi.

Cuối cùng, định vị và nổi – là các phương thức hiện tại sử dụng CSS – không có nghĩa là để phục vụ như là công cụ bố trí.

Một số người đi xa hơn để nói rằng những điều này thực sự tương tự như hack bố trí. Không có một sự thay thế khả thi tại thời điểm này và hy vọng là một khi đã thỏa thuận các tiêu chuẩn bố cục xảy ra, họ bắt đầu nhận được sự hỗ trợ từ các trình duyệt.

Khi hỗ trợ này xảy ra, sẽ không quá khó khăn để trao đổi các thuộc tính mô hình hộp được hack cho các mục đích dành cho bố cục.

Ngay bây giờ, lựa chọn tốt nhất là xử lý bố cục của bạn bằng cách sử dụng các thuộc tính phù hợp. Điều này thường sẽ ngưng tụ trọng lượng trang hiệu quả hơn so với việc sử dụng bộ thuộc tính giới hạn hiện có để bù cho các quirks.

6. Luôn cập nhật tài liệu liên quan đến công việc của bạn

Cho dù bạn đang làm việc trên một trang web như một nhóm hay một mình, điều bắt buộc là phải theo dõi mọi thứ bạn đã làm.

Ví dụ, một mình, bạn có thể quên một cái gì đó bạn đã làm. Là một nhóm, ai đó có thể làm điều gì đó và bạn có thể không nhận thức được cho đến khi bạn thực hiện các thay đổi có thể gây ra sự cố với các yếu tố khác nhau của mã.

thêm bình luận cssSao chép mã là một lĩnh vực quan tâm lớn đối với cả nhóm và nhà thiết kế riêng lẻ, đặc biệt là khi sử dụng các nhà xây dựng trang web phổ biến. Wix, Squarespace và phần mềm xây dựng trang web khác là được biết đến với việc sao chép mã hoặc thiếu nó hoàn toàn từ cơ sở dữ liệu của họ.

Sử dụng hướng dẫn biểu định kiểu và hướng dẫn đánh dấu là những lựa chọn tài liệu khả thi. Bạn cũng có thể sử dụng các nhận xét CSS là một tùy chọn khác và điều này có thể có lợi cho việc phân chia các phần tử của các tệp CSS dài. Đặt chúng trong hướng dẫn kiểu hoặc đánh dấu, ngăn chúng thêm kích thước tệp.

Một trong những cách nhanh nhất để làm phồng mã là bằng cách thực hiện cùng một công việc hai lần. Mã hóa rất phức tạp, do đó bắt buộc phải giữ tài liệu chính xác về mọi thứ bạn đã làm.

Nếu bạn làm việc một mình, thật lý tưởng để xem lại tài liệu này mỗi khi bạn ngồi xuống để bắt đầu làm việc. Khi làm việc như một phần của nhóm, hãy đảm bảo rằng mọi người đều mã hóa trong cùng một tài liệu tuân thủ phong cách cộng đồng hoặc hướng dẫn đánh dấu để mọi người trong nhóm dễ dàng hiểu được những thay đổi về mã hóa.

7. Nén tệp của bạn (Tối ưu hóa CSS 101)

css nén và tối ưu hóa gif

Nén: có một chút nhiều hơn so với điều này

Một cách hiệu quả để tối ưu hóa CSS là sử dụng nén. Đây là một cách để đảm bảo rằng các tệp của bạn thân thiện với trình duyệt mặc dù con người không thể đọc được.

So với các bản sao làm việc, đây sẽ là một phần nhỏ của kích thước. Có nhiều ứng dụng khác nhau mà bạn có thể tận dụng để làm cho quá trình nén dễ dàng hơn.

Chúng sẽ thực hiện các tác vụ, chẳng hạn như tìm và sửa bất kỳ thuộc tính CSS nào đang ghi đè lên nhau, nén khoảng trắng và tìm cơ hội sử dụng tốc ký CSS.

Ngoài sự tiện lợi của các ứng dụng này, chúng còn có thể giúp bạn tìm hiểu thêm về các tác vụ mà bạn có thể làm bằng tay nếu bạn thích. Bạn cũng có thể sử dụng các trình soạn thảo văn bản khác nhau để giúp định dạng các tệp CSS của mình.

Họ có thể phục vụ các phiên bản zip của các tệp CSS khác nhau mà bạn có. Điều này thường được thực hiện bằng PHP. Nếu bạn muốn sử dụng các công cụ tối ưu hóa và nén, hãy đảm bảo xem lại nhiều tùy chọn trước khi chọn một công cụ phù hợp với bạn.

Bây giờ, các ứng dụng này thường tốt trong việc giảm thiểu lỗi, nhưng chúng không hoàn hảo. Vì điều này, bạn phải luôn xem lại CSS của mình sau khi sử dụng một ứng dụng để đảm bảo độ chính xác. Mã được tối ưu hóa và sạch sẽ rất quan trọng đối với kích thước tệp, nhưng cũng dễ đọc và bảo trì.

Lượt của bạn

Các nguyên tắc được thảo luận ở đây là những cân nhắc vững chắc cho CSS, nhưng cũng dành cho JavaScript, HTML và các ngôn ngữ lập trình khác. So với kết xuất trang web của bạn, các tệp CSS không nổi bật với người dùng cuối.

Tuy nhiên, các nguyên tắc được thảo luận ở đây giúp cả trải nghiệm phát triển và trải nghiệm người dùng.

Hầu hết các công ty lưu trữ web tốt sẽ giúp bạn tối ưu hóa CSS. Các trang web nhanh hơn làm cho bạn trở thành một khách hàng hài lòng, nhưng các tệp nhỏ hơn cũng ít tải hơn trên máy chủ của họ.

Chúng tôi đã thử nghiệm tất cả các máy chủ web của Canada và đề xuất SiteGround. Họ không chỉ giúp bạn tối ưu hóa phân phối CSS, mà hỗ trợ kỹ thuật của họ là vô song.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

About the author

Adblock
detector