- Cách dùng CSS để render (hiển thị) trang;
- Bao gồm việc sử dụng file CSS ngoài (external), CSS nội bộ (internal) hoặc kết hợp cả hai.
Trang web hoàn toàn có thể sử dụng CSS theo nhiều cách khác nhau và chúng đều hoạt động giải trí được thông thường. Vì nó có nhiều cách sử dụng nên cũng sống sót nhiều cách thiết lập CSS khác nhau và 1 số ít cách sẽ tối ưu hơn cách khác .
Dù bạn có đang thiết lập CSS trên những website của bạn như thế nào đi nữa thì CSS cần phải giúp trang của bạn hiển thị ( render ) nhanh hơn chứ không nên làm chậm chúng đi .
Tóm Tắt
Một số ví dụ về “tối ưu hóa phân phối CSS”
Thiết lập CSS lý tưởng sẽ là một cái gì đó trông giống như thế này này…
- Không có CSS bên ngoài nào hoặc chỉ có một CSS ngoài có dung lượng hợp lý (ít hơn 75 KB);
- Nội tuyến các đoạn CSS nhỏ vào trong HTML sử dụng thẻ style cho nội dung nằm trong màn hình đầu tiên;
- Không thực hiện các lời gọi @import cho CSS;
- Không có CSS trong các phần từ HTML như trong thẻ div hoặc h1 (CSS nằm trong phần tử/in element CSS).
Lý do thiết lập CSS trên là lý tưởng chính do nó sẽ tối thiểu hóa CSS chặn hiển thị và nhờ vậy trang sẽ tải nhanh hơn rất nhiều .
Nếu bạn đã quen thuộc với những dạng phân phối CSS khác nhau, thế thì bạn hoàn toàn có thể sử dụng công cụ nghiên cứu và phân tích phân phối CSS để có được cái nhìn tổng quan về cách website của bạn đang sử dụng CSS .
Nếu bạn chưa quen thuộc, cũng đừng cho nên vì thế mà sợ, tôi sẽ lý giải chúng bên dưới ( tôi hứa là nó sẽ dễ hiểu hơn ) .
File CSS bên ngoài
File CSS bên ngoài là phương pháp chính CSS được sử dụng trên những website, và rất có năng lực đây cũng là cách CSS trên website của bạn được dùng. Trong phần đầu của tài liệu HTML bạn sẽ thấy một đoạn mã nào đó trông giống như thế này …
Đây được gọi là “ file ” CSS của bạn và nhưng chúng được gọi là “ bên ngoài ” chính bới những hướng dẫn CSS này nằm trong một file tách biệt với file HTML.
Việc có những file CSS ngoài là phương pháp thường thì để giải quyết và xử lý CSS và nó đem lại lợi thế ở góc nhìn CSS có năng lực được cache ( ghi nhớ ) bởi trình duyệt web ( ngoài những là năng lực dùng chung CSS giữa những trang, giúp cho việc chỉnh sửa được vận dụng hàng loạt ) .
Vấn đề xảy ra khi bạn có nhiều tệp này. Thật không may, đây lại là trường hợp thường xảy ra trong WordPress và những kiểu giao diện khác .
Nếu bạn có nhiều hơn một file CSS, thế thì chúng cần phải được kết hợp lại để trở thành một file
Khi mà bạn có nhiều file CSS bên ngoài, trình duyệt sẽ phải tải từng cái xuống trước khi nó hoàn toàn có thể hiển thị trang web cho người dùng. Đây là nguyên do tạo ra nhiều vòng lặp để lấy file CSS và hệ quả là website của bạn tải chậm đi .
Điều này hoàn toàn có thể được đổi khác thuận tiện bằng cách tích hợp tổng thể file CSS thành một file duy nhất ( trong WordPress, bạn hoàn toàn có thể làm điều này thuận tiện bằng plugin Autoptimize, trong hầu hết những plugin cache trả phí bạn cũng làm được điều này rất thuận tiện ) .
- Để biết bạn có bao nhiêu file CSS ngoài trên trang, bạn hãy sử dụng công cụ như pagespeed.web.dev.
- Để nhận được hướng dẫn về cách kết hợp các file CSS bên ngoài, hãy đọc bài viết khác của chúng tôi.
Liên hệ với WordPress: việc chỉ có một file CSS duy nhất nhẹ nhàng trên trang WordPress ngày nay là rất khó, nhất là trên các trang có thiết kế phức tạp. Ngoài ra với sự nâng cấp lên http/2 việc tải song song CSS giảm tối thiểu nguy cơ chậm do có nhiều CSS ngoài. Ngày này một số người khuyên rằng trong nhiều trường hợp bạn không nên gộp toàn bộ CSS thành một file duy nhất. Điều này là hợp lý, vì nó sẽ giúp cải thiện thời gian tạo cache, tăng khả năng file CSS đó đã được cache từ trước trong trình duyệt của người dùng.
CSS nội tuyến
CSS nội tuyến là các chỉ dẫn CSS được bao gồm luôn trong chính tài liệu HTML. Lợi thế chính của phương pháp này là nó không cần lấy thêm file (bên ngoài) trước khi trang được hiển thị. Tuy nhiên điều này chỉ đúng khi mà các chỉ dẫn CSS là nhỏ gọn. Nếu CSS của bạn lớn, đây không phải là phương thức phù hợp đâu.
Định dạng nội tuyến được thực hiện bằng cách đặt các chỉ dẫn CSS vào bên trong thẻ
Nội tuyến các đoạn CSS nhỏ có thể thực sự tăng tốc tải website trong trình duyệt.
- Để xem trang web của bạn có sử dụng CSS nội tuyến hay không, bạn hãy vào xem mã của website.
- Để có được các hướng dẫn về cách nội tuyến CSS, hãy đọc bài viết trong link vừa dẫn.
Liên hệ với WordPress: trong WordPress, CSS nội tuyến hay được áp dụng với Critical CSS, tức là các CSS quan trọng cho việc hiển thị nội dung trong màn hình đầu tiên.
Không sử dụng @import để gọi các file CSS
Phương thức @ import là phương pháp khi file CSS ngoài được gọi bằng cách sử dụng lệnh @ import chứ không phải là link nó trực tiếp như được luận bàn ở bên trên .
Phương thức này là nguyên do làm cho những file CSS hoặc những file khác được gọi tải xuống chậm hơn so với phương pháp link vì chúng chỉ hoàn toàn có thể tải xuống một lần vào một thời gian [ khi sử dụng phương pháp này ]. Trong đoạn mã của bạn, nó trông giống như dưới đây …
@import url("style.css")Các lời gọi như thế này thực sự gây nguy hại cho vận tốc website, nhưng nhiều người làm phong cách thiết kế vẫn sử dụng nên nó cần được kiểm tra kỹ .
- Để xem trang web của bạn có sử dụng @import để gọi CSS hay không, hãy sử dụng các công cụ phân tích tốc độ hoặc xem mã nguồn của trang
- Để hiểu thêm về phương thức này hãy đón đọc bài kế tiếp của chúng tôi;
Đừng nội tuyến các thuộc tính CSS vào trong phần tử HTML
Có một thực trạng rất phổ cập là nhiều người đưa những style CSS vào trong thành phần HTML, trong thực tiễn, tôi là người khi nào cũng có khuynh hướng làm thế. Hướng dẫn tăng vận tốc web của Google ở phần hướng dẫn “ tối ưu hóa phân phối CSS ” nói rằng tất cả chúng ta không được phép làm vậy một chút ít nào .
Họ nói rằng điều này sẽ là nguyên do làm trình duyệt phản hồi chậm và sẽ không không khôn ngoan khi đưa những mã định dạng vào trong thành phần HTML do tại điều đó đi ngược lại Chính sách Bảo mật Nội dung của W3 - cái là giao thức bảo mật thông tin có tính năng chặn mọi style Lever thành phần theo mặc định. Những style đó trông giống như sau …
hoặc
Tôi có rất nhiều những đoạn mã như vậy trong code của mình, và tôi đã phải thao tác khó khăn vất vả để trọn vẹn vô hiệu chúng. Để xem website của bạn có chứa những đoạn CSS như vậy hay không hãy vào công cụ mà chúng tôi đã nói ở trên .
Thiết kế web
Cách CSS được sử dụng trên trang web gần như được quyết định hoàn toàn bởi người thiết kế web, chứ không phải chủ trang web (hoặc người quản trị web). Vì thế người thiết kế web tạo ra các đoạn CSS dễ thương, được chú thích đầy đủ và đặt nó vào các file khác nhau để dễ hiểu hơn. Họ nghĩ, với tâm thế của người giúp đỡ, “Ta vừa mới thực hiện một công việc vô cùng tuyệt vời”. Đấy là những gì họ đã được dạy!
Thật không may, thực hành thực tế này và những cái khác sau cuối lại giết chết hiệu năng của website. Nếu CSS ở dạng nhiều file, sẽ có nhiều nhu yếu được triển khai trước khi trang hoàn toàn có thể hiển thị trên trình duyệt, làm chậm vận tốc tải trang, đặc biệt quan trọng là trên thiết bị di động. Tất cả CSS phải được đưa vào chỉ một file duy nhất để website có hiệu năng tốt nhất hoàn toàn có thể .
Khi nhận ra điều này, bạn sẽ chú ý quan tâm những người phong cách thiết kế web cần khởi đầu tạo ra những đoạn mã giúp người dùng của họ ( bằng cách tải nhanh nhất hoàn toàn có thể ), dầu vậy, ở thời gian này … Bạn hoàn toàn có thể đang có những đoạn mã CSS gây nguy khốn cho website của bạn hơn là trợ giúp nó .
Kết luận
Như bạn hoàn toàn có thể thấy, CSS có nhiều cách dùng trên trang, nhưng nói Kết luận là tất cả chúng ta cần quét dọn thật sạch những đoạn mã và sử dụng những khuyến nghị về phân phối CSS để bảo vệ rằng những trang web của tất cả chúng ta được tải nhanh nhất hoàn toàn có thể .
Các lời khuyên bao gồm:
- Kết hợp các style CSS ngoài;
- Nội tuyến CSS nhỏ trong thẻ style;
- Không sử dụng @import để gọi CSS khi thích hợp;
- Không đưa CSS vào trong các phần tử HTML như là trong các thẻ div hoặc thẻ h1 của bạn (nội tuyến CSS trong phần tử);
- Tất cả những thứ trên có thể được kiểm tra với đa số các công cụ phân tích tốc độ trang.
( Được dịch từ bài viết : Optimize CSS delivery – Tác giả : Patrick Sexton – Website : Varvy )
Share this:
Source: https://final-blade.com
Category : Kiến thức Internet
