Hướng dẫn giảm Request HTTP cho website

Ngày đăng: 21/07/2021
Cập nhật: 04/11/2024

Giảm số lượng các tập tin cần thiết phải tải hay làm giảm số lượng HTTP requests sẽ giúp cho blog/ website của bạn tải nhanh hơn. Và dĩ nhiên, blog/ website tải nhanh hơn sẽ mang lại trải nghiệm người dùng tốt hơn.

1. Giảm HTTP Request để làm gì?

Các tệp được yêu cầu càng nhiều và càng lớn, thì thời gian tải trang Web của bạn càng lâu. Cách giảm thời gian tải Web trong trường hợp này là bạn nên tối ưu tệp Website, lý tưởng nhất là từ 10-30 tệp.

Mục đích của việc giảm HTTP Request nhằm làm tăng tốc độ cho website, một trong những điều kiện cần cho website tăng thứ hạng.

Đây không phải là một mục tiêu dễ dàng vì hầu hết các Website hoạt động trung bình từ 69-74 Request HTTP. Để giảm thiểu các Request HTTP trên Website, theo kinh nghiệm của tôi bạn hãy thực hiện như sau:

Đầu tiên, bạn hãy kiểm tra xem mỗi trang Web của mình cần bao nhiêu Request HTTP. Đồng thời xem Website của bạn sẽ tải các tệp nào là mất nhiều thời gian nhất. Network Panel của Google Chrome là một công cụ tuyệt vời để xử lý những con số này.

Khi đã biết điều gì khiến Website bị ảnh hưởng, thì tiếp đến bạn nên thực hiện các bước sau:

  • Xóa những hình ảnh không cần thiết hoặc một số hình ảnh có dung lượng cao và đang lấp đầy Website của bạn.
  • Nén kích thước của các tệp hình ảnh còn lại để giảm dung lượng trước khi tải lên.
  • Thiết lập tải không đồng bộ cho các tệp Javascript.
  • Thu nhỏ và kết hợp các tệp với nhau.

2. Một số cách để giảm hoặc chặn HTTP Request

2.1. Giảm số tập tin Javascript & CSS được tải

Đối với WordPress ta có thể dùng W3 Total Cache (W3TC), WP Rocket hoặc các plugin cache thì vô cùng dễ dàng rồi. Các plugin đó đều có chức năng nén HTML, CSS, JS giúp website load nhanh hơn.

Còn đối với các website sử dụng các mã nguồn khác, ta có thể tìm các trình mở rộng để nén chúng hoặc ta có thể tự xóa bỏ các dòng mà website không nhất thiết dùng đến.

Ví dụ như thay vì viết 02 đoạn css nhưng chúng lại mang chức năng như nhau thì gộp chúng lại như sau:

.div1,
.div2 {
    background: #fff;
    color: #000;
    ..
}

Và kiểm tra xem website của bạn hiện có các JS nào trùng lặp hay không để xóa bớt nó đi.

2.2. Giảm số lượng hình ảnh

Nếu bạn có một giao diện phức tạp, theme của bạn có thể sử dụng rất nhiều ảnh nền. Có một cách để gộp tất cả các hình ảnh thành 1 tập tin duy nhất, đó là thông qua một quá trình CSS spriting.

Một ý tưởng khác để giúp trang web của bạn tải nhanh hơn là ngăn cản việc tải đồng thời tất cả các hình ảnh cùng một lúc. Bạn di chuyển màn hình đến đâu, hình ảnh sẽ được tải đến đấy. Một jQuery plugin có tên là Lazy Load sẽ giúp bạn làm điều này, nó sẽ tự động tải hình ảnh khi khách truy cập cuộn trang.

Ngoài ra bạn nên dùng cách là nén chúng lại qua các website nén ảnh và dùng nó upload lên website của mình.

2.3. Vô hiệu hóa External HTTP Request

Bạn thêm đoạn sau vào wp-config.php

// Disable External HTTP Request
define( 'WP_HTTP_BLOCK_EXTERNAL', true );
define( 'AUTOMATIC_UPDATER_DISABLED', true );
define( 'WP_AUTO_UPDATE_CORE', false );

Như vậy tất cả các request gửi đi từ website wordpress của chúng ta sẽ không được thực hiện. Tuy nhiên nếu các bạn muốn cho phép gửi yêu cầu tới 1 số trang web nhất định. Ví dụ cho phép gửi gửi yêu cầu tới wordpress.org để check xem có bản cập nhật mới của wordpress chưa chẳng hạn. Để làm được điều này thì các bạn thêm đoạn mã sau vào file wp-config.php

// Setup whitelist
define('WP_ACCESSIBLE_HOSTS', 'wordpress.org, google.com');

Các website trong whitelist cách nhau bởi dấu phẩy.

Chú ý: Nếu bạn vô hiệu hóa toàn bộ request ra bên ngoài thì website của các bạn không thể biết được khi nào có bản nâng cấp, vì vậy các bạn nên setup tham số “WP_ACCESSIBLE_HOSTS” cho phép request tới trang wordpress.org.