Tăng Tốc Website - Hạn Chế Http Requests

Mỗi khi người dùng truy xuất một trang web của bạn thì sau khi trang HTML được trả về cho trình duyệt, sau đó trình duyệt sẽ biên dịch các mã HTML này để nhận biết các đối tượng cần tải về sau đó như: tài liệu định dạng hình ảnh (css), các đoạn script, video, audio... sẽ được lần lượt gửi tới server thông qua giao thức HTTP (HTTP request). Giữa những thời gian gửi request và nhận phản hồi (response) này được chia làm nhiều giai đoạn như sau:

• DNS Look up: Đầu tiên trình duyệt sẽ kiểm tra xem đối tượng cần được gọi nằm ở server lưu trữ nào. Trong bài này tôi không đề cập đến việc tối ưu tốc độ của yếu tố này. Bởi vì yếu tố này phụ thuộc vào đường truyền mạng của bạn tới máy chủ DNS, tuy nhiên thường máy tính của bạn hoặc các ISP sẽ tự động lưu lại thông tin DNS này vào bộ nhớ cache để tiết kiệm thời gian look up cho các lần truy cập sau.
• Connecting: Mở kết nối đến server lưu trữ web.
• Sending: Quá trình gửi yêu cầu đi.
• Waiting: Quá trình chờ server xử lý.
• Receiving: Quá trình tải đối tượng (hay file) về máy tính của bạn.

Xem hình minh họa mô tả bằng Firebug dưới đây:



Qua hình minh họa ở trên bạn cũng nhận thấy quá trình chờ là quá trình lâu nhất. Các quá trình khác yếu tố ảnh hưởng hầu như là tốc độ đường truyền của bạn đối với server. Quá trình chờ này theo tôi hiểu thì sau khi yêu cầu được server nhận, trên server sẽ xảy ra quá trình xử lý như sau:

• Phân tích yêu cầu (request).
• Nhận biết loại file mà trình duyệt yêu cầu thông qua request header (trong firebug bạn có thể xem thông tin request header bằng cách bấm vào dấu + ở đầu mỗi request). Ví dụ: file hình, file video, script, css...
• Xác định vị trí của file.
• Đọc nội dung file.
• Chia ra thành các package rồi truyền tải dữ liệu qua giao thức HTTP.

Do đó, điều đầu tiên bạn cần làm để tăng tốc website là giảm số lượng đối tượng cần được load trong website của bạn để giảm bớt quá trình xử lý từ 1-4 ở server. Những yếu tố cần giảm tải:

1. Giảm bỏ những hình ảnh, headers, style... không cần thiết.
2. Gộp các hình ảnh bằng thủ thuật css sprite (tôi sẽ viết bài về vấn đề này sau).
3. Gom các đoạn script trong HTML vào trong file javascript để giảm tải dung lượng của HTML document và gộp các file javascript này lại nếu có thể.

Sau đây là ví dụ gộp những file liên kết ngoại vào một chỗ. Ví dụ như thay vì bạn gọi 3 files css cho website của bạn thì gộp vào thành một file.

<link rel="stylesheet" type="text/css" href="/body.css">
<link rel="stylesheet" type="text/css" href="/side.css">
<link rel="stylesheet" type="text/css" href="/footer.css" />

Chuyển đoạn trên thành:

<link rel="stylesheet" type="text/css" href="/style.css">

Tất nhiên bạn phải copy toàn bộ nội dung từ body.css và footer.css vào style.css.

Đây là thủ thuật đầu tiên trong 14 thủ thuật tăng tốc website bạn cần chú ý khi thiết kế website mà mình đã giới thiệu trước đây.

Nguồn: Diễn đàn Khoa học Kỹ thuật
Xem thêm: Tổng hợp các thủ thuật tăng tốc website

Bài viết trên đã được mình chỉnh sửa để giải thích rõ ràng hơn và ứng dụng trong firebug phiên bản mới. Các bạn có thắc mắc cần giải đáp hoặc có kinh nghiệm về các vấn đề ở trên thì đừng ngại gửi bài trong chủ đề này. Rất mong được chia sẽ cùng các bạn. Các bạn có thể tham khảo thêm nguồn về các bài viết tăng tốc website bằng tiếng Anh tại đường dẫn bên dưới.

http://developer.yah...ance/rules.html

Trích dẫn

Dưới đây là bài tôi xin phép dịch và biên soạn lại cho dễ hiểu.

80% thời gian phản hồi của một trang web đến hiển thị đến với người dùng là quá trình xử lý tương tác ở giao diện người dùng (front-end). Hầu hết thời gian này là do việc tải về tất cả các thành phần trong trang: hình ảnh, stylesheets, script, Flash, v.v... Giảm số lượng các thành phần nhằm làm giảm số lượng yêu cầu HTTP hiển thị trang web. Đây là mấu chốt làm cho các trang web nhanh hơn.

Một cách để giảm số lượng các thành phần trong trang là đơn giản hóa thiết kế của trang. Nhưng có cách nào để xây dựng các trang có nội dung phong phú hơn, trong khi thời gian phản hồi trang web vẫn nhanh? Sau đây là một số kỹ thuật để giảm số lượng yêu cầu HTTP mà trang web vẫn có một giao diện phong phú và bắt mắt.

Kết hợp các tập tin là một cách để giảm số lượng các HTTP request bằng cách kết hợp tất cả các file script vào một file duy nhất, và tương tự như kết hợp tất cả các CSS vào một file stylesheet duy nhất. Kết hợp các tập tin là khó khăn hơn khi các script và stylesheets thay đổi từ trang này sang trang khác, nhưng đây là điều mà bạn cần quan tâm thực hiện giảm thiểu càng nhiều HTTP request càng tốt để tăng tốc độ website của mình.

CSS sprites là những phương pháp rất tốt cho việc giảm số lượng yêu cầu hình ảnh. Kết hợp các hình ảnh nền của bạn thành một hình ảnh duy nhất và sử dụng thuộc tính của CSS background-image và background-position để hiển thị các đoạn hình ảnh mong muốn.

Images maps (bản đồ hình ảnh) là kết hợp nhiều hình ảnh vào một ảnh duy nhất. Kích thước tổng thể là như nhau, nhưng việc giảm số lượng các HTTP request làm tăng tốc độ tốc độ hiển thị trang web. bản đồ hình ảnh chỉ hoạt động nếu những hình ảnh được tiếp giáp ở trang, chẳng hạn như một thanh điều hướng. Xác định tọa độ của bản đồ hình ảnh có thể dễ gây ra lỗi giao diện và cần sự kỹ lưỡng của bạn. Việc sử dụng bản đồ hình ảnh gây khó khăn cho việc truy xuất các thành phần trong trang nên không được khuyến khích sử dụng.

Inline images (dữ liệu hình ảnh trực tiếp) bằng cách dùng data: URL scheme để nhúng các dữ liệu hình ảnh trong trang web. Điều này có thể tăng kích thước của tài liệu HTML của bạn. Kết hợp hình ảnh nội tuyến vào (cache) stylesheets của bạn là một cách để giảm bớt các HTTP request và tránh làm tăng kích thước của các trang của bạn. Inline hình ảnh chưa được hỗ trợ trên tất cả các trình duyệt.

Giảm số lượng các HTTP request trong trang công việc đầu tiên của bạn cần làm để tăng tốc website. Đây là phương châm quan trọng nhất để nâng cao hiệu suất cho khách truy cập lần đầu tiên. Như mô tả trong bài blog của Tenni Theurer Browser Cache Usage - Exposed!, 40-60% số khách truy cập hàng ngày trang web của bạn đến với một bộ nhớ đệm trống. Làm nhanh trang web của bạn cho những người truy cập lần đầu tiên là chìa khóa dẫn đến một trải nghiệm người dùng tốt hơn.