Tuesday, September 8, 2015

Thực tế cho thấy, với mọi trang web hay website, khi nhận được đề nghị hiển thị thì khoảng 80% quãng thời gian mà người dùng phải đợ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 tật 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.
>>> Xem thêm: Thiết kế web giáo dục
Một cách để giảm số lượng các thành phần trong một trang web là cố 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ăn bản để giảm số lượng yêu cầu HTTP, bằng cách kết nối tất tật script có trên trang web vào một tập tin script độc nhất, và na ná là kết hợp quờ 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 đề nghị truy xuất hình ảnh. Cụ thể, người lập trình và thiết kế trang web cần phối hợp các hình nền vào một hình độc nhất và sau đó sử dụng dụ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.

rưa rứa, phương pháp Image maps cũng kết hợp nhiều ảnh vào một ảnh độc nhất vô nhị. 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 đề nghị 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 giả, còn có phương pháp Inline Image, dùng cú pháp data: URL để nhúng dữ liệu hình dáng ảnh vào ngay trong trang web và đương 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 đề nghị 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ổ quát.

Nhìn chung, giảm số lượng yêu cầu HTTP là phương pháp trước hết 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 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 ngày, cần từ 20 đến 120 miligiây để DNS lóng đị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ụ lóng DNS hoàn tất.

Các ngần DNS thường được lưu lại để trình duyệt chạy nhanh hơn. thông tin này có thể lưu trên máy chủ chuyên dụng của ISP hay máy chủ trong mạng nội bộ, tuy nhiên đôi khi cũng có thể lưu trên máy tính của người dùng cá nhân. thông tin về DNS nằm trong vùng nhớ riêng của HĐH (như “DNS Client service” trên Microsoft Windows). hồ hết trình duyệt có vùng nhớ lưu trữ riêng, độc lập với vùng nhớ DNS của HĐH. Khi trình duyệt còn lưu thông báo DNS, nó sẽ không không làm phiền HĐH tiến hành tróc nã.

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 tham 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 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ề đồng thời diễn ra trong nội bộ trang web. Tránh được thao tác truy nã DNS sẽ làm giảm thời kì đá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 cả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 hỏi DNS và cho phép khả năng tải về đồng thời ở mức cao.

Tăng tốc độ website để quảng bá website

 


3) Lưu tạm cho Ajax

Một trong những lợi ích đáng để ý 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 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 vận dụng, vấn đề người dùng có chấp thuận chờ 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 hỏi Ajax từng bít tất 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ó tức thị “ngay tức thì”.

Để 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 vận hạn của các giá trị được lưu trữ.

4) 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ấp 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ị đầu 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ể dùng dụng cụ YUI Image Loader, cho phép làm trễ sự xuất hiện của một ảnh, hay phương tiện YUI Get utility cho phép vận dụng tức tốc 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 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 tiễn 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 kì 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à đương 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ự dị 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ạngchỉ để khắc phục những trục trặc liên can đến hiển thị?

Bạn có thể dùng các dụ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 lăm đối tượng DOM là quá nhiều? tỉ 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ề đồng thời. Hãy đảm bảo rằng bạn đang sử dụng 2-4 domain vì việc này có can dự đến việc truy DNS. thí 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.
8. Tối thiểu số lượng iFrame

Về căn 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 để dùng hiệu quả nhất. Ưu điểm của iframe:
* tương 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
* tương 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 dùng thông tin “404”

Như đã nêu ở trên, các yêu cầu HTTP không cần thiết kiên cố sẽ làm giảm tốc độ đáp ứng của trang web; chẳng những thế, khi nhận được phản hồi vô bổ từ một đề nghị 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 tin 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 phung phí tài nguyên của máy chủ.

Ngoài ra, vấn đề trở nên tệ khi kết liên đế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 tin 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ể vậy phân tách phần thân của phản hồi 404 như là mã JavaScript; cố kỉnh tìm thứ gì có thể dùng.