7 mẹo ít biết để tối ưu hóa HTML/CSS/JS đúng chuẩn
Tại sao phải tối ưu hóa trang web chứ?! Nếu bạn không muốn mất tiền, mất traffic thì việc tối ưu hóa là lẽ đương nhiên. Theo thống kê của Oreilly thì một trang web chậm sẽ làm bị đối xử rất tệ đấy:
- Bing sẽ làm bạn mất 4.3% doanh thu/user nếu như trang của bạn chậm hơn 2s so với trung bình.
- Google sẽ giấu mất 0.59% số lượng kết quả tìm kiếm/user nếu như trang của bạn delay hơn 400ms. Bên cạnh đó, Google càng làm vấn đề thêm trầm trọng khi dùng đánh giá tốc độ trang để sắp xếp thứ hạng tìm kiếm.
- Yahoo! sẽ hạn chế 5-9% tổng traffic nếu như trang của bạn delay hơn 400ms.
Tuy vậy, việc tối ưu hóa trang web cần phải làm đúng cách và có những mục tiêu nhất định, cũng như phụ thuộc vào một số nền tảng công nghệ mà bạn đang sử dụng (CMS, Framework…). Có rất nhiều bài viết về tối ưu hóa cơ bản cho các website hoặc tối ưu riêng cho một nền tảng nào đó. Bài viết này không nói lại các tối ưu hóa cơ bản, hay phụ thuộc vào 1 nền tảng công nghệ nào cả. Bài viết sẽ hướng dẫn bạn 7 mẹo ít biết để tối ưu hóa HTML/CSS/Javascript một cách đúng chuẩn nhất, mà bạn có thể áp dụng rộng rãi.
1. Tránh chèn code CSS/JS inline hoặc nhúng
Có 3 cách để chèn CSS/Javascript:
- Inline:
<div style="color:red;">
<button class="btn" onclick="alert('Hello World')"> - Nhúng (embed)
<style>.red {color: red;}</style><script>alert('Hello World');</script> - File bên ngoài
<link rel="stylesheet" href="file.css">
<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. 2 cách này chỉ thực sự hữu ích khi bạn có ít code CSS/JS. Cách thứ 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.
2. 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 script.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.
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 song song JS với HTML, JS sẽ chỉ khởi chạy khi HTML đã được load hoàn tất. Bạn có thể thấy rõ hơn ở 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.
Nếu không tin, bạn có thể thử ví dụ trực tiếp ở đây: http://jsfiddle.net/karmiphuc/ATKG5/
Tuy nhiê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.
3. 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 web 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>
4. Đừng sử dụng @import
Có 2 cách để chèn 1 file CSS bên ngoài vào trang web:
<link rel="stylesheet" href="file.css">
/* Chỉ gọi bên trong 1 file CSS ngoài, hoặc CSS inline*/
@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.
5. 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 (trong điều kiện thực tế, kích thước của file sẽ tác động đến quá trình này nên kết quả sẽ khác, nhưng việc giới hạn kết nối đồng thời là hoàn toàn chính xác).
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ể.
6. Sử dụng các kĩ thuật tải không đồng bộ
Chắc bạn cũng không lạ gì với các đoạn code cho nút share mạng xã hội như Facebook, Twitter? Những đoạn code này thường đòi hỏi trang web của bạn phải tải về các file CSS/JS cần thiết, và điều đó có thể ngốn hết kha khá thời gian của người dùng khi tải trang.
Có 2 giải pháp thường dùng cho vấn đề này:
- Sử dụng JS để tải không đồng bộ các file JS bên ngoài (ví dụ từ Google Analytics)
(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 (ví dụ từ Facebook)
(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('<body onload="'+ 'var js = document.createElement(\'script\');'+ 'js.src = \''+ url +'\';'+ 'document.body.appendChild(js);">'); doc.close(); }());
7. Viết code Javascript hợp lý và chuẩn mực hơn
Hạn chế thao tác các DOM
Đây là một trong những lỗi có tác động rất lớn đến tốc độ của trang. Hãy cùng xem ví dụ dưới đây (xem trực tiếp ở http://jsperf.com/test-dom-usage-kp):
Lưu trữ giá trị length của mảng
Tham khảo ví dụ trực quan bên dưới (xem trực tiếp ở đây http://jsperf.com/test-js-length-in-loop):
Tổng hợp: Karmi Phúc.
Latest posts by Karmi Phúc (see all)
- Tìm hiểu về các định dạng nén của ảnh số - 29/06/2014
- Google Calendar nâng cao cho mọi người - 03/06/2014
- Hiệu năng các loại vòng lặp Javascript - 10/05/2014
