Làm sao để tối ưu hóa HTML/CSS/JS

(Ngày: 14/01/2020)
Việc tối ưu hóa trang web cần phải thực hiện đúng cách cũng như phụ thuộc và một số nền tảng công nghệ mà bạn đang sử dụng. Vậy làm sao để tối ưu hóa HTML/CSS/JS? Xem ngay bài viết dưới đây nhé.

Việc tối ưu hóa trang web cần phải thực hiện đúng cách cũng như phụ thuộc và một số nền tảng công nghệ mà bạn đang sử dụng. Vậy làm sao để tối ưu hóa HTML/CSS/JS? Xem ngay bài viết dưới đây nhé.

Tránh chèn code CSS/JS inline hoặc nhúng

Có 3 cách để chèn CSS/Javascript:

Inline:

Inline CSS

<div style="color:red;">

Inline JS

<button class="btn" onclick="alert('Hello World')">

Nhúng (embed):

Embedded CSS

<style>.red {color: red;}</style>

Embedded JS

<script>alert('Hello World');</script>

File bên ngoài:

External CSS

<link rel="stylesheet" href="file.css">

External JS

<script type="text/javascript" src="script.js">

Đối với 2 cách inline/nhúng, số lượng kết nối đến server sẽ giảm, nhưng việc chèn code sẽ làm tăng kích thước HTML. Cả 2 cách này chỉ thực sự hữu ích nếu bạn có ít code CSS/JS. Cách 3 nên được sử dụng cho hầu hết các trường hợp còn lại, giúp bạn quản lý code tốt hơn và giúp trình duyệt có thể lưu cache lại cho các file này.

Sử dụng async để tải JS không đồng bộ

Khi tải JS không sử dụng thuộc tính async, trình duyệt dừng load HTML lại để ưu tiên cho JS tải về và khởi chạy.

Ví dụ bên dưới, file cripts.js khi chạy sẽ không thể tìm được tag h1 mang ID là second để thay đổi text bên trong. Vì thời điểm đó, tag h1 này chưa được trình duyệt load đến. Kết quả là nội dung không bị thay đổi vì JS báo lỗi.

Làm sao để tối ưu hóa HTML/CSS/JS

Khi tải JS có sử dụng thuộc tính async, trình duyệt sẽ không ưu tiên JS nữa mà vẫn sẽ load hoàn tất. Bạn có thể xem thêm ví dụ bên dưới khi nội dung HTML đã bị thay đổi và JS hoàn toàn không bị báo lỗi khi chạy.

Làm sao để tối ưu hóa HTML/CSS/JS

Tuy nhiên, bạn cần thử nghiệm trước khi sử dụng async hàng loạt cho trang web của bạn, vì thứ tự khởi chạy của các file có thể sẽ thay đổi.

CSS đặt trước JS

Bạn đã thấy JS làm gián đoạn việc load HTML như thế nào. Do đó, nếu JS của bạn không có xử lý gì quá đặc biệt thì chỉ nên load JS sau cùng. CSS thì ngược lại, nên được đặt ở đầu trang để người dùng khi đợi tải trang không phải thấy một trang xấu xí khi chưa có CSS.

<html lang="vi">

<head>

    <meta charset="UTF-8" />

    <title>Test | KarmiPhuc</title>

    <!-- đặt CSS ở thẻ head -->

    <link...>

</head>

<body>

    <!-- HTML here -->

    ...

    <!-- đặt JS trước khi đóng body -->

    <script...>

</body>

</html>

Hạn chế sử dụng @import

Có 2 cách để chèn file CSS bên ngoài vào trang web:

External CSS Link

<link rel="stylesheet" href="file.css">

CSS Import via external or inline style

@import url('style.css');

Với cách thứ 1, trình duyệt có thể tải nhiều file CSS đồng thời. Còn với cách thứ 2, file style.css chỉ có thể được tải về sau khi file CSS gốc đã tải xong, làm hạn chế khả năng tải song song của trình duyệt.

Nối nhiều file CSS/JS lại thành 1 file duy nhất

Việc chia nhỏ CSS/JS thành từng file riêng biệt sẽ giúp quản lý và bảo trí code dễ dàng, nhưng sẽ khiến cho trình duyệt phải mất nhiều kết nối mới tải về đủ. Đối với việc tải các tài nguyên, trình duyệt sẽ giới hạn từ 4 đến 8 kết nối đồng thời cho mỗi tên miền.

Một trang web có 10 file CSS và 10 file JS thì sẽ có nhiều nhất 3 lượt kết nối để có thể tải hết 20 file này. Vì thế, hãy gộp các file CSS/JS của bạn lại để giảm số lượng kết nối cần thiết và tăng tốc tải trang nhanh nhất có thể.

Sử dụng các kỹ thuật tải không đồng bộ

Sử dụng JS để tải không đồng bộ các file JS bên ngoài (ví dụ từ Google Analytics):

Async 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);

  })();

Sử dụng kỹ thuật Iframe thân thiện (lấy ví dụ từ Facebook)

acebook Friendly Iframe

(function() {

  var url = 'http://example.org/js.js';

  var iframe = document.createElement('iframe');

  (iframe.frameElement || iframe).style.cssText =

    &quot;width: 0; height: 0; border: 0&quot;;

  iframe.src = &quot;javascript:false&quot;;

  var where = document.getElementsByTagName('script')[0];

  where.parentNode.insertBefore(iframe, where);

  var doc = iframe.contentWindow.document;

  doc.open().write('&lt;body onload=&quot;'+

    'var js = document.createElement('script');'+

    'js.src = ''+ url +'';'+

    'document.body.appendChild(js);&quot;&gt;');

  doc.close();

}());

viblo.asia