Google thừa nhận Tốc độ website cũng là 1 yếu tố xếp hạng của google . 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
(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.
Theo PC World VN
0 nhận xét:
Đăng nhận xét