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 [r]
(1)Tối ưu hóa tốc độ hiển thị thiết kế website
Khi bạn có website thiết kế website chuyên nghiệp, bạn lại chưa quan tâm tốc độ hiển thị website sao, có lý tưởng cho người dùng hay không? Bài viết giúp bạn giải vấn đề cách hiệu quả:
1 Dùng CSS định nghĩa thuộc tính đối tượng website Việc dùng CSS giúp cải thiện tốc độ tải trang web đáng kể Trình duyệt tải file CSS máy client lần, lần sau trang web sử dụng file CSS lấy client Việc tập trung toàn đị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 trang web Một điểm tiện lợi dùng file CSS bạn thay đổi màu sắc, giao diện trang web cách nhanh chóng thơng qua việc chỉnh sửa
thuộc tính file CSS
2. Viết Javascript trên một trang và dùng cho nhiều trang khác
Điều tương tự kỹ thuật dùng file CSS cho trang web Ví dụ đoạn mã Javascript hiển thị quảng cáo dùng cho nhiều trang, bạn viết toàn mã Javascript file Giống file CSS, trình duyệt tải file lần
3. Dùng Ajax
Ajax chữ viết tắt Asynchronous JavaScript And XML, kỹ thuật dùng Javascript XML để tối ưu việc trao đổi liệu client server Giả sử trang web ban chứa nhiều thơng tin, có phần chứa combobox: Quốc Gia Thành Phố Khi bạn chọn quốc gia combobox 1, combobox thành phố tương ứng Theo cách thông thường, chọn quốc gia, thông số gửi server Tại nội dung trang web tính tốn lại gửi trả cho client với combobox2 chứa thành phố quốc gia chọn Như phần nhỏ trang web thay đổi mà phải tải toàn trang web vẽ lại Với AJAX, sau xử lý, server gửi trả kết cho client danh sách thành phố toàn trang web Điều cải thiện nhiều tốc độ đáp ứng trang web
4. Mạnh dạn bỏ những gì khơng cần thiết
Bỏ file flash, audio chúng không thực cần thiết Ngồi ra, người lập trình web, việc sử dụng control HTML thay cho server control ASP/JSP giúp giảm thời gian biên dịch (từ ASP/JSP sang HTML)
5. Tránh dùng table lồng trong table
(2)6. Không dùng table bao tồn bộ nội dung trang web Trình duyệt phải tải tồn thơng tin thành phần bảng gồm: Top, LeftMenu, Content máy client, xử lý tính tốn tồn control, khoảng trắng, hình ảnh bên table Khi việc thực hồn tất, trình duyệt web lúc hiển thị toàn nội dung bên table lên hình lúc Nếu khơng dùng table bao tồn nội dung trang web, ngồi việc giảm dung lượng trang web, thời gian xử lý hiển thị máy client, cịn cho phép trình duyệt web hiển thị dần phần xử lý xong, cho người dùng có vài thơng tin để đọc trước, chờ phần khác tiếp tục hiển thị, điều tạo cho người dùng cảm giác trang web bạn có tốc độ hiển thị nhanh
7. Phân trang web thành các trang nhỏ hơn
Thay hiển thị tồn thơng tin trang web, bạn phân trang web thành nhiều mục nhỏ hiển thị nhiều trang khác Giống Yahoo Mail, thời điểm, bạn xem tiêu đề 50 email lên hình, để xem danh sách email khác bạn phải nhấn liên kết next/previous Điều không giúp tăng tốc độ hiển thị trang web mà thực tế, phần lớn người dùng thật khơng thích phải ngồi chờ vài phút để xem trang web có nội dung dài, phải
dùng đến scroll bar xem hết toàn 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 khoảng trắng khơng cần thiết đoạn mã html Hãy nhớ lần ấn phím space làm tăng kích thước trang web bạn lên byte Việc loại bỏ khoảng trắng làm tay dùng công cụ hỗ trợ
HTML code Cleaner
9. Dọn dẹp mã chương trình
Hãy loại bỏ tồn thẻ trống Điều giúp cải thiện dung lượng trang web, tăng tốc độ hiển thị mà giúp cho mã lệnh bạn trở nên rõ ràng, giúp dễ dàng hiệu chỉnh 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 bạn trở nên sống động lơi cuốn, nhiên hình ảnh nguyên nhân làm chậm tốc độ hiển thị trang web Chỉ định rõ kích thước hình ảnh: Khi trình duyệt hiển thị hình ảnh trang web, phải biết kích thước ảnh để chừa khoảng trống hình cho việc hiển thị ảnh này, việc hiển thị theo trình tự từ xuống Nếu bạn khơng định rõ kích thước ảnh Ví dụ: trình duyệt phải tải ảnh trước để xác định kích thước xử lý hiển thị nội dung Điều tương tự việc sử dụng table bao tồn nội dung Vì được, bạn nên sử dụng khai báo “width”, “height” để định trước kích cỡ 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 bạn khơng cần phải trương lên trang web hình ảnh có chất lượng thật cao mà dùng thumbnail thay Định dạng GIF/JPG lựa chọn hàng đầu cho trang web kích
thước nhỏ
11. Yếu tố khác:
- Do server: Giảm thiểu tính tốn máy chủ, tối ưu CSDL, tạo đệm, tối ưu chương trình - Do đường truyền: Giảm thiểu liệu truyền mạng cách giảm kích thước file hình, giảm u cầu trao đổi liệu
giữa server client
- Do máy client: tối ưu mã html để trình duyệt hiển thị nhanh