Các lập trình viên trên Yahoo! Developer Network cho biết hiện có khoảng 35 phương pháp, kỹ thuật thường được sử dụng ngay trong khâu thiết kế để trang web “hiện hình” nhanh hơn. Về cơ bản, các “chiêu “ này được phân vào 7 nhóm, gồm Content (nội dung), Server (máy chủ), Cookie, CSS, Java Script, Image (hình ảnh), Mobile (di động), và người thiết kế website sẽ tùy thực tế mà khai thác, kết hợp các kỹ thuật này với nhau sao cho đạt kết quả tốt nhất.
Trong bài này, chúng ta hãy cùng điểm qua 9 phương pháp thuộc nhóm Content và 21 phương pháp còn lại xin được gửi đến các bạn ở kỳ sau.
1) Hạn chế yêu cầu HTTP
Thực tế cho thấy, với mọi trang web hay website, khi nhận được yêu cầu hiển thị thì khoảng 80% quãng thời gian mà người dùng phải chờ đợi thường dành cho công tác truyền nhận dữ liệu giữa máy chủ dịch vụ (hay nói rõ hơn là nơi lưu trữ trang web) với trình duyệt. Trong khi đó, hầu hết thời gian “chết” này lại bị “cột chặt” với việc tải về tất cả thành phần trong một trang web như hình ảnh, định dạng (stylesheet), mã lệnh kịch bản (script), nội dung Flash,… để trình duyệt có thể dựng lại trang web trên màn hình (máy tính hay thiết bị di động) của người dùng. Do đó, giảm số lượng thành phần các nội dung dạng này đồng nghĩa với việc giảm số lượng yêu cầu HTTP (HTTP request) từ trình duyệt.
Một cách để giảm số lượng các thành phần trong một trang web là cố gắng làm đơn giản thiết kế của chính trang web đó. Tuy nhiên, câu hỏi mà nhiều nhà thiết kế web thường đặt ra ở đây là “có cách nào xây dựng một trang web có nội dung phong phú trong khi vẫn đảm bảo tốc độ đáp ứng /hiển thị nhanh hay không?”. Hiện có vài kỹ thuật giúp giảm số lượng yêu cầu HTTP nhưng vẫn hỗ trợ thiết kế trang web phong phú, chẳng hạn:
“Gom” các tập tin (Combined files) là giải pháp cơ bản để giảm số lượng yêu cầu HTTP, bằng cách kết nối tất cả script có trên trang web vào một tập tin script duy nhất, và tương tự là kết hợp tất cả CSS vào một tập tin stylesheet. Các tập tin được nối lại với nhau gây khó khăn hơn cho người lập trình (và cả website nữa) vì script và stylesheet thường khác nhau ở mỗi trang web.
Trong khi đó, CSS Sprites là phương thức được nhiều lập trình viên thích sử dụng để giảm số lượng yêu cầu HTTP, bằng cách giảm số lần yêu cầu truy xuất hình ảnh. Cụ thể, người lập trình và thiết kế trang web cần kết hợp các hình nền vào một hình duy nhất và sau đó sử dụng công cụ lập trình (như CSS background-image và background-position) để yêu cầu hiển thị đúng phần ảnh cần thiết.
Tương tự, phương pháp Image maps cũng kết hợp nhiều ảnh vào một ảnh duy nhất. Với phương pháp này, dung lượng nội dung hình ảnh cần hiển thị sẽ không đổi (bởi bằng tổng các tập tin hình ảnh thành phần trước đó), tuy nhiên phương pháp “góp gạo” này làm cho số lần yêu cầu HTTP giảm đến mức tối thiểu, do đó cũng giúp trang web đáp ứng nhanh hơn rất nhiều. Lưu ý, phương pháp Image maps chỉ có thể áp dụng khi các ảnh xuất hiện cạnh nhau trên trang web.
Ngoài ra, còn có phương pháp Inline Image, sử dụng cú pháp data: URL để nhúng dữ liệu dạng hình ảnh vào ngay trong trang web và dĩ nhiên việc này sẽ làm tăng kích thước của tập tin HTML. Tuy nhiên, kết hợp các ảnh nhúng trong stylesheet (được lưu đệm) là cách để giảm số lần yêu cầu HTTP, đồng thời tránh hiện tượng tăng dung lượng của trang web. Đáng tiếc, phương pháp này hiện chưa được hỗ trợ trên tất cả trình duyệt phổ biến.
Nhìn chung, giảm số lượng yêu cầu HTTP là phương pháp đầu tiên bạn cần nghĩ đến khi muốn cải thiện tốc độ hiển thị cũng như thời gian đáp ứng của trang web.
2) Giảm truy vấn DNS
Về cơ bản, hệ thống phân giải tên miền (Domain Name System) có nhiệm vụ “ánh xạ” tên máy chủ (hay trang web) với địa chỉ IP, giống như là danh bạ điện thoại. Thông thường, cần từ 20 đến 120 miligiây để DNS tìm kiếm địa chỉ IP của một tên máychủ (hostname) và trình duyệt sẽ không thể tải về bất kỳ nội dung gì từ hostname cho đến khi tác vụ tìm kiếm DNS hoàn tất.
Mặc định, Internet Explorer lưu thông tin DNS trong thời hạn 30 phút, được xác định bởi thông số DnsCachTimeOut trong Registry, trong khi đó Firefox chỉ lưu thông tin này trong vòng 1 phút, được kiểm soát bởi thông số cấu hình network.dnsCacheExpiration.
Khi vùng nhớ DNS trống (với cả trình duyệt và HĐH), số lượng truy vấn DNS bằng đúng số lượng hostname được đề cập trong trang web. Chúng bao gồm các hostname được sử dụng trong địa chỉ URL, hình ảnh cũng như các tập tin script, stylesheet, đối tượng Flash của trang web. Giảm số lượng các hostname đồng nghĩa với việc giảm số lần truy vấn DNS.
Tuy nhiên, việc giảm số lượng hostname (không trùng nhau) có nguy cơ làm giảm số lượng các tác vụ tải về song song diễn ra trong nội bộ trang web. Tránh được thao tác truy vấn DNS sẽ làm giảm thời gian đáp ứng, tuy nhiên giảm số lượng tải về song song có thể làm tăng thời gian này. Nhiều lập trình viên khắc phục tình huống này bằng cách phân chia các đối tượng kể trên ra tối thiểu 2 nhưng không được hơn 4 hostname - đây là sự dàn xếp tốt nhất để giảm số lần truy vấn DNS và cho phép khả năng tải về song song ở mức cao.
3) Lưu tạm cho Ajax
Một trong những lợi ích đáng chú ý của Ajax là khả năng cung cấp các phản hồi tức thời cho người dùng. Tuy nhiên, việc sử dụng Ajax không đảm bảo rằng người dùng sẽ chịu ngồi im chờ dữ liệu đến - các dữ liệu này là phản hồi XML hay javascript dạng không được đồng bộ. Trong nhiều ứng dụng, vấn đề người dùng có chấp nhận chờ đợi hay không phụ thuộc vào việc Ajax được sử dụng như thế nào. Ví dụ, trong tiện ích email trên nền web (như Yahoo! Mail hay GMail), người dùng vẫn phải chời kết quả truy vấn Ajax tìm kiếm tất cả email khớp với yêu cầu mà họ đặt ra.
Bạn cần hiểu rằng “không đồng bộ” (asynchronous) không có nghĩa là “tức thời”.
Để cải thiện tốc độ của trang web, việc quan trọng là cần tối ưu các phản hồi Ajax. Cách quan trọng nhất để cải thiện hiệu năng của Ajax là làm cho các phản hồi được lưu tạm trong bộ nhớ (trình duyệt hay máy tính tùy chủ ý của người thiết kế). Với phương pháp này, người dùng cần lưu ý đến thời hạn của các giá trị được lưu trữ.
4) Sử dụng thành phần được tải về sau khi nạp trang web
Bạn có thể nhìn cận cảnh trang web của mình và tự hỏi “Cái gì cần thiết phải có để có thể dựng lên một trang web ngay lúc ban đầu?”. Ở tình huống này, bạn xác định đâu là những thông tin cốt lõi cần hiển thị trước tiên, định dạng chung cho toàn trang web. Sau đó, nếu cần, bạn hãy nghĩ đến các định dạng riêng cho từng khu vực hiển thị, các hiệu ứng và trình đơn tương tác. Ví dụ, mã javascript xử lý hiệu ứng pop-up khi người dùng rê chuột qua một vùng nội dung nào không cần tải về trước vì trang web phải nạp xong thì người dùng mới thấy nội dung để rê chuột lên.
Với mục đích này, bạn có thể sử dụng công cụ YUI Image Loader, cho phép làm trễ sự xuất hiện của một ảnh, hay công cụ YUI Get utility cho phép áp dụng tức thời javascript hay CSS lên trang web.
5) Sử dụng thành phần được tải về trước khi nạp trang web
Nhiều người dùng thường cho rằng khó phân biệt được sự khác nhau giữa phương pháp sử dụng các thành phần được tải về sau khi nạp trang web và sử dụng các thành phần được tải về trước khi nạp trang web, song thực tế thì kết quả từ 2 phương pháp này rất chênh lệch. Bằng cách tải về trước các thành phần, bạn có thể tận dụng thời gian chờ của trình duyệt và yêu cầu tải về các thành phần (như hình ảnh, stylesheet, script,…) sắp sử dụng tới. Với phương pháp này, khi người dùng ghé thăm trang web tiếp theo, bạn có đã trong tay gần như đầy đủ các thành phần trong bộ nhớ và dĩ nhiên là trang web sẽ xuất hiện nhanh hơn.
Việc tải về trước các nội dung thường được chia thành các dạng: tải về trước không cần điều kiện, có điều kiện và theo dự báo - phụ thuộc vào chủ ý của người thiết kế trang web.
6) Giảm số lượng đối tượng DOM
Một trang web phức tạp thường có dung lượng tải về lớn và việc này cũng sẽ làm cho việc truy xuất các đối tượng DOM (Document object Model) trong javascript trở nên “ì ạch”. Chắc chắn sẽ có sự khác biệt khi bạn duyệt qua một trang web với 500 đối tượng và một trang web với 5000 đối tượng, thậm chí nhiều hơn.
Một số lượng lớn đối tượng DOM có thể là triệu chứng cảnh báo bạn cần cải tiến mã HTML của trang web mà không cần thiết phải gỡ bỏ hay giảm bớt nội dung. Bạn đang sử dụng nhiều bảng biểu được xếp chồng lên nhau cho mục địch hiển thị, hay sử dụng nhiều tag dạng
Bạn có thể sử dụng các công cụ của YUI CSS (http://developer.yahoo.com/yui/), như grids.css để kiểm soát tốt phần thiết kế (layout), hay font.css và reset.css có thể giúp bạn bỏ qua định dạng mặc định của trình duyệt. Đây là cơ hội tốt để bạn làm mới cũng như tạo ra sự khác biệt cho trang web của mình trong khâu hiển thị.
Các lập trình viên thường tự hỏi bao nhiêu đối tượng DOM là quá nhiều? Ví dụ, trang chủ của Yahoo! là một là trang web khá dày đặc nhưng chỉ có dưới 700 đối tượng. Bạn có thể dễ dàng xác định số lượng đối tượng DOM với tiện ích Firebug (http://getfirebug.com/). Trong cửa sổ console, bạn gõ vào lệnh document.getElementsByTagName(‘*’).length.
7) Đặt trên nhiều domain
Việc phân chia các thành phần trong một trang web sẽ cho phép bạn tối đa các tác vụ tải về song song. Hãy đảm bảo rằng bạn đang sử dụng 2-4 domain vì việc này có liên quan đến việc truy vấn DNS. Ví dụ, bạn có thể đặt (host) nội dung động và HTML tại địa chỉ www.example.org và sau đó phân các thành phần tĩnh sang 2 domain khác là static1.example.org và static2.example.org. Bạn có thể tham khảo thêm thông tin về giải pháp này tại địa chỉ http://yuiblog.com/blog/2007/04/11/performance-research-part-4/.
8) Tối thiểu số lượng iframe
Về cơ bản, iframe cho phép một tài liệu HTML được chèn vào tài liệu gốc (hay còn gọi là tài liệu cha). Bạn nên hiểu cách thức iframe hoạt động để sử dụng hiệu quả nhất. Ưu điểm của iframe:
* Hỗ trợ các nội dung tốc độ chậm của bên thứ 3 như banner hay hình quảng cáo, v.v.
* Cho phép bổ sung các mã lệnh hay công cụ bảo mật
* Hỗ trợ tải về song song các script
Nhược điểm của iframe:
* Khoá trang web khi đang tải về
* Không trực quan về ngôn ngữ
9) Không sử dụng thông báo “404”
Như đã nêu ở trên, các yêu cầu HTTP không cần thiết chắc chắn sẽ làm giảm tốc độ đáp ứng của trang web; không những thế, khi nhận được phản hồi vô ích từ một yêu cầu HTTP (như thông báo 404 Not Found), người sử dụng sẽ cảm thấy khó chịu.
Vài website có sáng kiến tạo ra các thông báo 404 hấp dẫn hơn, đại loại như “404: Did you mean X?”, để người dùng cảm thấy dễ chịu hơn trước một trục trặc. Tuy nhiên việc này cũng sẽ làm lãng phí tài nguyên của máy chủ.
Ngoài ra, vấn đề trở nên tệ khi liên kết đến một đoạn mã javascript bên ngoài sai và kết quả là người dùng sẽ nhận được thông báo lỗi 404. Trước hết, tác vụ tải về này sẽ vô hiệu hóa mọi tải về song song. Tiếp đến, trình duyệt có thể cố gắng phân tích phần thân của phản hồi 404 như là mã javascript; cố gắng tìm thứ gì có thể sử dụng.
