(Post 10/08/2007) Tốc độ hiển thị trang web
phụ thuộc vào nhiều yếu tố như tốc độ đường truyền, tốc độ xử lý của server,
nội dung trang web và tốc độ xử lý của máy tính client. Để tăng tốc độ
hiển thị trang web, có thể chia làm 3 phần để xử lý như sau:
- Tại server: Giảm thiểu những tính toán trên server,
tối ưu CSDL, tạo bộ đệm, tối ưu chương trình...
- Đường truyền: Giảm thiểu dữ liệu truyền trên mạng bằng
cách giảm kích thước các file hình, giảm yêu cầu trao đổi dữ liệu giữa
server và client...
- Tại máy client: tối ưu mã html để trình duyệt hiển
thị nhanh.
Với chiến lược trên, dưới đây là 10 thủ thuật có thể
giúp tăng tốc độ hiển thị trang web.
1. Dùng CSS định nghĩa thuộc tính của các đối
tượng trong trang web
Việc dùng CSS sẽ giúp cải thiện tốc độ tải trang web
đáng kể. Trình duyệt sẽ chỉ tải file CSS về máy client một lần, những
lần sau các trang web sử dụng file CSS này sẽ lấy ngay tại client. Việc
tập trung toàn bộ định nghĩa thuộc tính vào file CSS giúp cho đoạn mã
HTML trở nên ngắn gọn, rõ ràng đồng thời giúp giảm kích thước của trang
web.
Một điểm tiện lợi nữa khi dùng file CSS là bạn có thể
thay đổi màu sắc, giao diện của những trang web một cách nhanh chóng thông
qua việc chỉnh sửa những thuộc tính trong file CSS.
2. Viết Javascript trên một trang và dùng cho
nhiều trang
Điều này tương tự như kỹ thuật dùng file CSS cho mọi
trang web. Ví dụ đoạn mã Javascript hiển thị quảng cáo dùng cho nhiều
trang, nếu bạn viết toàn bộ mã Javascript trong một file rồi khai báo
dùng nó ở các trang như sau:
<script type=”text/javascript” src=”quangcao.js”></script>
Giống như file CSS, trình duyệt chỉ tải về file này một
lần.
3. Dùng AJAX
AJAX là chữ viết tắt của Asynchronous JavaScript And
XML, đây là kỹ thuật dùng Javascript và XML để tối ưu việc trao đổi dữ
liệu giữa client và server. Giả sử trang web của ban chứa rất nhiều thông
tin, trong đó có một phần chứa 2 combobox: Quốc Gia và Thành Phố. Khi
bạn chọn một quốc gia trên combobox 1, thì trong combobox 2 các thành
phố tương ứng sẽ hiện ra. Theo cách thông thường, khi chọn một quốc gia,
thông số của nó sẽ được gửi về server. Tại đây nội dung của trang web
được tính toán lại rồi được gửi trả cho client với combobox2 chứa các
thành phố của quốc gia được chọn. Như vậy chỉ một phần nhỏ trong trang
web thay đổi mà phải tải về toàn bộ trang web và vẽ lại. Với AJAX, sau
khi xử lý, server chỉ gửi trả kết quả cho client danh sách các thành phố
chứ không phải toàn bộ trang web. Điều này cải thiện rất nhiều tốc độ
đáp ứng của trang web.
4. Mạnh dạn bỏ những gì không cần thiết
Bỏ file flash, audio nếu chúng không thực sự cần thiết.
Ngoài ra, đối với người lập trình web, việc sử dụng control của HTML thay
cho server control của ASP/JSP... cũng giúp giảm được thời gian biên dịch
(từ ASP/JSP... sang HTML).
5. Tránh dùng table lồng trong table
Khi bạn viết table lồng trong table, trình duyệt sẽ mất
nhiều thời gian hơn để hiển thị trang web. Đây là điều ít người để ý nhất
nhưng lại là một kỹ thuật cải thiện tốc độ hiển thị trang web đáng kể
nhất. Khi bạn đặt một table bên trong một table, sẽ mất một khoảng thời
gian khá dài để trình duyệt web duyệt qua toàn bộ mã lệnh bên trong mỗi
table rồi mới làm đến việc trình bày lên màn hình cho người dùng xem.
Nếu có thể, bạn hãy sử dụng CSS để tạo ra những dòng và cột cho trang
web.
6. Không dùng table bao toàn bộ nội dung trang
web
Nếu bạn dùng một table lớn để tạo layout cho trang web
như sau:
<body>
<table width=”100%” border=”0”>
<tr>
<td colspan=”3”>Top</td>
</tr>
<tr>
<td>Left Menu</td>
<td>Content</td>
<td>Right Menu</td>
</tr>
<tr>
<td colspan=”3”>Footer</td>
</tr>
</table>
</body>
Trình duyệt sẽ phải tải toàn bộ thông tin của các thành
phần trong bảng gồm: Top, LeftMenu, Content... về máy client, rồi xử lý
tính toán toàn bộ control, khoảng trắng, hình ảnh... bên trong table.
Khi mọi việc đã thực sự hoàn tất, trình duyệt web lúc đó mới hiển thị
toàn bộ nội dung bên trong table lên màn hình cùng lúc.
Nếu không dùng table bao toàn bộ nội dung trang web,
thì ngoài việc giảm được dung lượng trang web, thời gian xử lý hiển thị
tại máy client, nó còn cho phép trình duyệt web hiển thị dần từng phần
đã xử lý xong, cho người dùng có một vài thông tin để đọc trước, trong
khi chờ những phần khác tiếp tục hiển thị, điều này tạo cho người dùng
cảm giác trang web của bạn có tốc độ hiển thị nhanh.
7. Phân trang web thành các trang nhỏ hơn
Thay vì hiển thị toàn bộ thông tin trên 1 trang web,
bạn hãy phân trang web thành nhiều mục nhỏ và hiển thị trên nhiều trang
khác nhau. Giống như Yahoo Mail, tại mỗi thời điểm, các bạn chỉ có thể
xem được tiêu đề của 50 email lên màn hình, để xem danh sách các email
khác bạn phải nhấn liên kết next/previous...
Điều này không chỉ giúp tăng tốc độ hiển thị trang web
mà trên thực tế, phần lớn người dùng thật sự không thích phải ngồi chờ
vài phút để rồi xem một trang web có nội dung khá dài, phải dùng đến scroll
bar mới xem được hết toàn bộ nội dung.
8. Xóa các khoảng trắng không cần thiết
Cố gắng xóa tất cả những khoảng trắng không cần thiết
trong đoạn mã html. Hãy nhớ là một lần ấn phím space sẽ làm tăng kích
thước trang web của bạn lên 1 byte. Việc loại bỏ khoảng trắng này có thể
làm bằng tay hoặc dùng công cụ hỗ trợ như HTML code Cleaner (có thể tìm
với Google).
9. Dọn dẹp mã chương trình cho sáng sủa
Hãy loại bỏ toàn bộ những thẻ trống như <div> </div>
hay <font> </font>. Điều này không những giúp cải thiện dung
lượng trang web, tăng tốc độ hiển thị mà còn giúp cho mã lệnh của bạn
trở nên rõ ràng, giúp dễ dàng hiệu chỉnh hoặc nâng cấp.
10. Tối ưu hình ảnh
Hạn chế dùng hình ảnh: Hình ảnh giúp cho trang web của
bạn trở nên sống động và lôi cuốn, tuy nhiên hình ảnh cũng chính là một
trong những nguyên nhân làm chậm tốc độ hiển thị trang web.
Chỉ định rõ kích thước của hình ảnh: Khi trình duyệt
hiển thị hình ảnh của trang web, nó phải biết kích thước của tấm ảnh để
có thể chừa khoảng trống trên màn hình cho việc hiển thị tấm ảnh này,
và việc hiển thị sẽ theo trình tự từ trên xuống. Nếu bạn không định rõ
kích thước của tấm ảnh (ví dụ: <width=”125” height=”50”>), trình
duyệt phải tải tấm ảnh trước để xác định kích thước rồi mới xử lý hiển
thị nội dung. Điều này cũng tương tự như việc sử dụng table bao toàn bộ
nội dung. Vì vậy nếu được, bạn nên sử dụng khai báo “width”, “height”
để chỉ định trước kích cỡ của hình ảnh.
Giảm kích thước hình ảnh: Hãy giảm tối đa kích thước
hình ảnh. Đôi khi bạn không cần phải trương lên trang web những hình ảnh
có chất lượng thật cao mà có thể dùng thumbnail thay thế. Định dạng GIF/JPG
là lựa chọn hàng đầu cho trang web vì kích thước nhỏ.
Ví
dụ dùng CSS thay cho table |
Trình bày 3 cách
hiển thị một form đăng nhập đơn giản:
- Dùng bảng
- Không dùng bảng
- Không dùng bảng và dùng CSS
1. Dùng bảng
<table width=”300” border=”0” cellspacing=”0” cellpadding=”0”>
<tr>
<td align=”right”>Name:</td>
<td> <input type=”text” id=”name” /></td>
</tr>
<tr>
<td align=”right”>Email: </td>
<td> <input type=”text” id=”e-mail” /></td>
</tr>
<tr>
<td> </td>
<td> <input type=”submit” value=”Submit” /></td>
</tr>
</table>
Kết quả của đoạn mã lệnh trên sẽ như
hình dưới đây
2. Không dùng bảng
<p><label for=”name”>Name</label> <input
type=”text” id=”name” /></p>
<p><label for=”e-mail”>E-mail</label> <input
type=”text” id=”e-mail” /></p>
<p><input type=”submit” value=”Submit” /></p>
Kết quả của đoạn mã lệnh trên sẽ như
hình dưới đây
3. Dùng CSS
Từ cách 2 ở trên nếu bạn định nghĩa CSS cho đối tượng Label và
Submit Input như dưới đây bạn sẽ có kết quả như cách 1 mà không
cần sử dụng bảng.
label
{
width: 4em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block
}
.submit input
{
margin-left: 4.5em;
}
Kết quả sau khi định nghĩa CSS cho
đối tượng Label và Submit Input
Bây giờ, nếu muốn thêm màu và tạo khung
bạn có thể sử dụng tag <fieldset></fieldset> và <legend>
như dưới đây:
Khai báo CSS
fieldset
{
border: 1px solid #781351;
width: 20em
}
legend
{
color: #fff;
background: #ffa20c;
border: 1px solid #781351;
padding: 2px 6px
}
Mã HTML
<fieldset>
<legend>This is my form</legend>
<p><label for=”name”>Name</label> <input
type=”text” id=”name” /></p>
<p><label for=”e-mail”>E-mail</label> <input
type=”text” id=”e-mail” /><br /></p>
<p><input type=”submit” value=”Submit” /></p>
</fieldset>
Tag <legend> bên trong tag <fieldset>
sẽ tạo ra phần header cho khung bao quanh nội dung form, kết quả
sẽ như hình dưới đây.
Trên
đây chỉ là các kỹ thuật tối ưu cơ bản cho mã HTML. Hẹn gặp lại
các bạn trong các bài viết sau về kỹ thuật tối ưu trang web với
mã lệnh cơ sở dữ liệu, VB, C#, JSP...
|
Duong Quy Phuong
-----------------------------------------------
Tham khảo:
1. http://www.webcredible.co.uk/user-friendly-resources/css/css-forms.shtml
2. http://www.webweaver.nu/html-tips/load-time.shtml
(theo PC World VN)
|
