Các cách tăng tốc độ website (site speed)
Google thừa nhận site speed tức tốc độ website là một trong những yếu
tố ảnh hưởng kết quả xếp hạng. Nhưng không phải chỉ thế, site speed
còn ảnh hưởng lớn đến người dùng (tính khả dụng tức Usability). Dĩ
nhiên nếu tốc độ tải site nhanh thì website của bạn sẽ được nhiều lượt
xem (pageviews) hơn – một trong những yếu tố ảnh hưởng đến chiến
dịch bán quảng cáo của bạn.
Bài viết rất hữu ích dưới đây do Anh Khoa (PC World VN) dịch từ Yahoo!
Developer Network giới thiệu 9/35 phương pháp tăng tốc website.
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.
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.
Các tìm kiếm 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ầu 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 tin DNS, nó sẽ không không làm phiền HĐH
tiến hành truy vấ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 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 <div> chỉ để khắc phục

những trục trặc liên quan đến hiển thị?
Bạn có thể sử dụng các công cụ của YUI CSS
( 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 ( 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ỉ
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.