Tại sao css đặt trong head
|
Trước khi tiến hành viết CSS và để CSS có thể thực thi trên website hoặc tài liệu HTML của bạn thì bạn phải tiến hành nhúng CSS vào website. Nói về nhúng CSS vào website thì chúng ta có hai cách là: Show
Mỗi cách nhúng đều có ưu và nhược điểm khác nhau, cũng như tùy theo trường hợp mà ta sử dụng nó. Inline Styles
External Styles
Và trong các bài học CSS trong serie này bạn có thể sử dụng kiểu Inline Styles để nhúng CSS vào website vì sẽ không mất thời gian tạo tập tin, do chúng ta chỉ viết vài đoạn CSS mà thôi. Anyway, bạn có thể sử dụng kiểu bạn thích. Cách nhúng CSS với Inline StylesĐể nhúng CSS vào website thông qua kiểu Inline Styles, bạn sẽ khai báo cặp thẻ [/html] Và trong cặp thẻ Embedded JS Tạo file riêng External CSS External JS
Quá trình phân tích cú pháp được thực hiện mà không xảy ra bất kỳ tạm dừng nào và khi nó kết thúc, script được tìm nạp và được chạy. Phân tích cú pháp thậm chí được hoàn thành trước cả khi script được tải xuống, vì vậy trang có thể hiển thị đến người dùng nhanh hơn so với phần ví dụ trước đó. Có async, trong đầu trang/headDưới đây là cách thức một trang tải script với async, đặt trong thẻ head: Script được tìm nạp không đồng bộ và khi nó sẵn sàng, việc phân tích cú pháp HTML được tạm dừng để chạy script, sau đó, lại tiếp tục quá trình phân tích. Với defer, trong đầu trang/headDưới đây, là cách một trang tải script với defer, đặt trong thẻ head: Script được tìm nạp không đồng bộ và chỉ được chạy sau khi đã phân tích cú pháp HTML. Phân tích cú pháp hoàn tất giống như khi ta đặt script ở cuối thẻ body, nhưng nhìn chung, quá trình chạy script đã hoàn tất hoàn toàn trước đó, bởi vì script đã được tải xuống song song với phân tích cú pháp HTML. Vì vậy, đây chính là giải pháp tối ưu khi nói đến tốc độ. Chặn phân tích cú pháp/parsingAsync chặn phân tích cú pháp của trang trong khi Defer thì không. Chặn renderCả async và defer đều không đảm bảo bất cứ gì về việc chặn render. Mà vấn đề này tùy thuộc vào bạn và script của bạn (ví dụ: đảm bảo script chạy sau onLoad chẳng hạn). domInteractiveCác script được đánh dấu defer sẽ được chạy ngay sau domInteractive, sự kiện sẽ diễn ra sau khi HTML được tải, được phân tích cú pháp và DOM được tạo. CSS và hình ảnh tại thời điểm này vẫn được phân tích cú pháp và được tải. Khi quá trình hoàn tất, trình duyệt sẽ trình phát domComplete và sau đó là onLoad. domInteractive rất quan trọng vì thời gian của nó được xem là thước đo cho tốc độ tải về mặt cảm nhận. Sắp xếp các yếu tố 1 cách trật tựMột trường hợp defer khác: các script được đánh dấu không đồng bộ sẽ được chạy theo thứ tự thông thường khi chúng khả dụng. Kết Vậy điều tốt nhất chúng ta nên làm để tăng tốc độ tải trang khi sử dụng script: là đặt chúng vào phần đầu trang và thêm thuộc tính defer vào thẻ script: Đây là kịch bản để thúc đẩy domInteractive nhanh hơn. Khi xem xét ưu điểm của defer, có vẻ như đây là lựa chọn tốt hơn so với async trong một loạt các kịch bản. Trừ khi bạn thấy không vấn đề gì với việc trì hoãn lượt render đầu tiên của trang, hãy đảm bảo rằng khi trang được xử lý xong, mã JavaScript cũng được thực hiện xong. CSS đặt trước, JS đặt sauNhư bạn đã thấy trong ví dụ trên, JS có thể làm gián đoạn việc tải HTML. Do đó, thông thường JS được đặt ở cuối và load sau cùng. Mặt khác, CSS thường được đặt ở đầu trang để người dùng không phải thấy một giao diện trang web kém thẩm mỹ khi vừa vào trang.
...
Hạn chế sử dụng @importKhi muốn chèn một file CSS bên ngoài vào website, ta có hai cách: External CSS Link CSS Import via external or inline style @import url('style.css'); Với cách đầu tiên, trình duyệt có thể tải đồng thời nhiều file CSS. Với cách thứ hai, file style.css sẽ chỉ được tải khi file CSS gốc đã tải xong. Cách này làm hạn chế khả năng tải song song của trình duyệt, và trong nhiều trường hợp có thể làm giảm tốc độ tải website. Vì vậy, hạn chế sử dụng @import cũng là một cách giúp tối ưu tốc độ tải trang. Sử dụng một file CSS/JS duy nhấtNếu bạn có nhiều file CSS/JS, thì hãy gộp chúng lại thành một file duy nhất nếu bạn muốn trang web được tối ưu. Việc sử dụng nhiều file CSS/JS sẽ giúp bạn dễ quản lý code hơn, tuy nhiên nó cũng vô tình tạo ra nhiều request tới máy chủ, khiến cho trình duyệt phải thực hiện nhiều việc hơn khi tải đầy đủ trang web. Thông thường khi tải các tài nguyên, trình duyệt sẽ giới hạn trong khoảng từ 4 đến 8 kết nối đồng thời cho mỗi tên miền. Giả sử trang web của bạn có 10 file CSS và 10 file JS thì sẽ cần ít nhất 3 lượt kết nối để tải hết 30 file này. Trong khi bạn có thể tải hết trong một lượt khi gộp lại thành 1 file CSS và 1 file JS. Mặc dù trọng lượng của file cũng ảnh hưởng tới tốc độ tải file, nhưng việc giảm số lượng file để giảm số request tới máy chủ là một việc làm cần thiết khi tối ưu code web và nó thực sự mang lại hiệu quả nhất định. Pagespeed Insight - một công cụ đo tốc độ tải trang được khuyến nghị bởi google cũng có những lời khuyên tương tự: chỉ sử dụng một file CSS và một file JS để tối ưu hóa tốc độ tải trang, vốn là một trong những yếu tố quan trọng trong SEO web. Sử dụng kỹ thuật tải không đồng bộNếu bạn có dự định thu hút người dùng vào website thông qua các kênh mạng xã hội như Facebook hay Twitter, thì việc thêm nút Chia sẻ Facebook hay Tweet là không thể thiếu. Tuy nhiên, những đoạn code dành cho các nút chia sẻ này thường đòi hỏi trang web phải tải về các file CSS/JS cần thiết. Và điều này có thể tiêu tốn một lượng thời gian của người dùng khi tải trang. Để giải quyết vấn đề này, ta thường sử dụng 2 cách: Sử dụng JS để tải không đồng bộ các file JS bên ngoàiAsync GA Load (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); Trong ví dụ là mã Google Analytics được tải không đồng bộ bằng Javascript. Cách 2 là sử dụng friendly iframeFacebook Friendly Iframe (function() { var url = 'http://example.org/js.js'; var iframe = document.createElement('iframe'); (iframe.frameElement || iframe).style.cssText = "width: 0; height: 0; border: 0"; iframe.src = "javascript:false"; var where = document.getElementsByTagName('script')[0]; where.parentNode.insertBefore(iframe, where); var doc = iframe.contentWindow.document; doc.open().write(' 'var js = document.createElement('script');' 'js.src = '' url '';' 'document.body.appendChild(js);">'); doc.close(); }()); Bằng cách này, bạn có thể tải không đồng bộ các thành phần ít quan trọng hơn trên trang, qua đó tăng tốc độ tải trang web và cải thiện trải nghiệm người dùng. Lời kết Việc tối ưu code CSS/JS cho website không chỉ có ý nghĩa về mặt kỹ thuật, SEO, mà còn giúp cho người dùng có trải nghiệm tốt nhất khi tham khảo nội dung website, nó cũng giúp cho web developer dễ dàng quản lý và bảo trì code khi cần thiết. Hy vọng những mẹo trên đây có thể giúp cho bạn tối ưu được code trên trang web của mình để mang lại trải nghiệm tốt nhất và tăng trưởng cho website. Theo Bizfly Cloud chia sẻ >> Có thể bạn quan tâm: Bỏ túi ngay 9 Tips tối ưu CSS hiệu quả BizFly Cloud là nhà cung cấp dịch vụ điện toán đám mây với chi phí thấp, được vận hành bởi VCCorp. BizFly Cloud là một trong 4 doanh nghiệp nòng cốt trong "Chiến dịch thúc đẩy chuyển đổi số bằng công nghệ điện toán đám mây Việt Nam" của Bộ TT&TT; đáp ứng đầy đủ toàn bộ tiêu chí, chỉ tiêu kỹ thuật của nền tảng điện toán đám mây phục vụ Chính phủ điện tử/chính quyền điện tử. Độc giả quan tâm đến các giải pháp của BizFly Cloud có thể truy cập tại đây. DÙNG THỬ MIỄN PHÍ và NHẬN ƯU ĐÃI 3 THÁNG tại: Manage.bizflycloud |
