Tránh CSS ‘Lãng phí’ trong Dự án của bạn | Thiết Kế Web

Có vẻ như các nhà thiết kế web không ngừng nỗ lực để tối ưu hóa các sáng tạo của họ. Trong ngắn hạn, điều này có lợi cho hiệu suất. Về lâu dài, nó cũng có thể đơn giản hóa việc bảo trì.

Thông thường, điều này có nghĩa là tối ưu hóa hình ảnh , triển khai bộ nhớ đệm trang và phân phát tệp qua mạng phân phối nội dung (CDN). Đây đều là những biện pháp hữu hiệu. Tuy nhiên, một mục không được chú ý nhiều là phần mở rộng tiềm ẩn trong CSS của trang web.

Mặc dù bạn có thể thu nhỏ các bảng định kiểu của mình hoặc phân phát chúng qua CDN, nhưng bạn có thể làm được nhiều việc hơn. Cụ thể, loại bỏ đánh dấu lãng phí không được sử dụng và thắt chặt các phong cách vẫn còn phù hợp.

Điều này được thực hiện tốt nhất ngay từ khi bắt đầu quá trình xây dựng. Nhưng cũng có thể giảm tải trên các trang web hiện có. Hãy cùng xem xét những thách thức liên quan, cùng với một số công cụ và kỹ thuật có thể tạo ra một trang web nhanh hơn.

Đối phó với Bloat được xây dựng trong Chủ đề và Khung

Nó từng là các trang web về cơ bản được xây dựng từ đầu. Đây là một cách tiếp cận tuyệt vời trong đó các nhà thiết kế chỉ có thể đưa vào các phong cách và tập lệnh cần thiết. Nếu được thực hiện cẩn thận, quá trình này có thể dẫn đến một trang web được tinh chỉnh.

Tất nhiên, có một số lý do tại sao tập tục đó đã bị bỏ rơi bởi nhiều người trong chúng ta. Đơn giản là nó không hiệu quả về thời gian và ngân sách hạn chế.

Các trang web hiện đại thường được xây dựng dựa trên một sản phẩm được tạo sẵn. Đó có thể là một khung công tác CSS như Bootstrap hoặc một chủ đề WordPress phức tạp. Trong một số trường hợp, một chủ đề CMS thậm chí có thể bao gồm một khuôn khổ.

Những sản phẩm này có nghĩa là một kích cỡ phù hợp với tất cả. Bằng cách bao gồm mọi thứ bạn có thể cần, nó làm cho sự phát triển nhanh hơn nhiều. Thật không may, không thể nói điều tương tự về tác động của chúng đến hiệu suất.

Vậy, có thể làm gì để cải thiện tình hình?

Sử dụng các khung công tác dựa trên thành phần hoặc nhẹ, nếu có thể

Về mặt lý thuyết, có thể vừa có được những lợi thế của một khuôn khổ vừa tránh được sự cồng kềnh. Điều này có thể đạt được bằng cách sử dụng các gói dựa trên thành phần cho phép bạn tải các tính năng cụ thể trong khi bỏ sót những người khác. Bootstrap đã nói ở trên không cho phép loại tùy chỉnh này – ở một điểm.

Một giải pháp thay thế khác là Tailwind CSS , cung cấp các kiểu cơ bản và giả định rằng bạn sẽ xây dựng dựa trên chúng. Nếu bạn đang tìm kiếm một điểm khởi đầu tuyệt vời, thay vì một sản phẩm hoàn thiện hơn, thì đây có thể là một lựa chọn phù hợp.

Không có gì sai khi sử dụng một khuôn khổ. Nhưng hãy tìm một cái mà: a) cho phép bạn chọn và chọn các thành phần để tải, hoặc; b) cung cấp một bảng định kiểu có thể dễ dàng tùy chỉnh. Dù bằng cách nào, dự án của bạn sẽ được hưởng lợi từ việc giảm tải.

Làm gì với Chủ đề CMS?

Các sản phẩm như chủ đề WordPress thương mại có thể phức tạp, vì chúng thường bao gồm một lượng lớn các kiểu – cho dù bạn có cần chúng hay không.

Có thể là một chủ đề cụ thể sẽ được tổ chức tốt đến mức nó đủ dễ dàng để dequeue các stylesheets bạn không muốn. Thậm chí có thể có một bảng tùy chọn chủ đề cho phép bạn thực hiện việc này với một vài cú nhấp chuột. Tuy nhiên, đây có nhiều khả năng là ngoại lệ hơn là quy tắc.

Cách tốt nhất để tránh một chủ đề cồng kềnh là tạo chủ đề của riêng bạn. Ví dụ: một chủ đề dành cho người mới bắt đầu của WordPress sẽ cung cấp một số CSS đơn giản mà bạn có thể tùy chỉnh. Điều này giúp đảm bảo biểu định kiểu gọn gàng hơn và loại bỏ ít nhất một chút chi phí liên quan đến CMS.

Declutter Các biểu định kiểu hiện có

Thay đổi trọng tâm của chúng tôi sang một trang web hiện có, khai báo và cấu trúc lại CSS có thể được thực hiện theo một trong hai cách:

Xem xét kiểu thủ công

Kích hoạt trình soạn thảo mã yêu thích của bạn và mở các bảng định kiểu của trang web của bạn luôn là một nơi tốt để bắt đầu. Vâng, nó có thể là một trải nghiệm tẻ nhạt. Nhưng đó cũng là một cách chăm sóc quả thấp cổ hiệu quả.

Không cần thiết phải xem xét kỹ lưỡng từng dòng CSS. Thay vào đó, ý tưởng là tìm bất kỳ mục nào mà bạn biết là không được sử dụng hoặc không hiệu quả như chúng có thể.

Ví dụ: giả sử bạn chạy một trang web WordPress có một số kiểu tùy chỉnh để ghi đè lên những kiểu của một plugin. Điều gì sẽ xảy ra nếu bạn không còn sử dụng plugin cụ thể đó nữa? Trong trường hợp này, các kiểu có thể dễ dàng được gỡ bỏ.

Hoặc, có lẽ có một số phong cách mà bạn chỉ sử dụng không thường xuyên – như trong kỳ nghỉ đông. Có thể đáng giá khi chuyển các kiểu đó vào một tệp riêng biệt và chỉ gọi chúng khi cần thiết.

Sau đó, có những bộ chọn CSS không được viết tốt lắm. Có thể họ có một số tiền tố trình duyệt không còn cần thiết hoặc các thuộc tính trùng lặp không cần thiết. Đây là một khu vực đã chín muồi để dọn dẹp.

Nếu thiết kế trang web của bạn đã hơn một vài năm, bạn có thể ngạc nhiên về số lượng kiểu dáng thừa mà bạn có thể tìm thấy.

Sử dụng một công cụ tự động

Có một số công cụ sẽ quét trang web của bạn (hoặc, ít nhất là một phần của nó) và báo cáo lại với danh sách CSS không được sử dụng. Tuy nhiên, đừng nín thở khi chờ đợi sự hoàn hảo.

Giống như các công cụ trợ năng tự động, các máy quét CSS không sử dụng chỉ có thể cung cấp cho bạn rất nhiều thông tin. Vì vậy, tốt nhất bạn nên xem xét kết quả với một hạt muối và sử dụng chúng như một hướng dẫn – không phải là câu trả lời cuối cùng cho câu hỏi của bạn.

Chris Coyier của CSS-Tricks đã viết một bài báo nổi bật về vấn đề cụ thể này rất đáng để kiểm tra. Anh ấy không chỉ thử nghiệm một số công cụ này mà còn xem xét các vấn đề lớn hơn, chẳng hạn như truy vấn phương tiện truyền thông.

Tuy nhiên, nếu bạn muốn thử một hoặc nhiều công cụ này, một số lựa chọn phổ biến hơn là:

• JitBit
• PurgeCSS
• Làm sạchCSS
• CSS không sử dụng

Sự kết hợp giữa công cụ tự động và xem xét thủ công có thể là cách hành động tốt nhất. Làm cả hai sẽ cung cấp cho bạn bức tranh đầy đủ hơn về các tối ưu hóa hiệu suất tiềm năng. Bạn có thể không nắm bắt được từng mục, nhưng vẫn có cơ hội để tạo ra tác động có thể đo lường được. Bạn có thể thực hiện một số bước trước và sau khi thử nghiệm bằng một công cụ như GTmetrix để xem kết quả.

Khi nó nói đến CSS: Không lãng phí, không muốn

Thật đáng kinh ngạc khi một biểu định kiểu có thể có được kích thước lớn như thế nào – đặc biệt là khi sử dụng một khung CSS làm sẵn. Chắc chắn, thật tuyệt khi tác giả đã làm rất nhiều việc khó khăn cho bạn về các yếu tố tạo kiểu. Đồng thời, nó để lại rất nhiều thứ khi nói đến thời gian tải và hiển thị trang.

Đây là điều đáng được quan tâm ngay từ khi bắt đầu một dự án. Bằng cách tìm cách giảm trọng lượng của biểu định kiểu, bạn đang giúp loại bỏ từng giọt tối ưu hóa cuối cùng ra khỏi trang web của mình.

Nếu trang web của bạn đã xuất hiện cho cả thế giới xem, bạn vẫn có thể thực hiện những bước tích cực. Xem lại CSS và tìm các mục để sắp xếp hợp lý hoặc loại bỏ. Sử dụng một trong nhiều công cụ tự động hiện có để tìm các mục bạn có thể đã bỏ lỡ.

Điểm mấu chốt là việc cắt giảm CSS của bạn xuống các yếu tố cần thiết không phải là một quá trình hoàn hảo. Tuy nhiên, nó vẫn là một trong những giá trị thời gian và nỗ lực của bạn.

Thiết Kế Web

Thiết Kế Web

Thiết Kế Web