it-swarm-vi.com

Phương pháp hiệu quả để giảm băng thông (và do đó thời gian tải trang)?

Các phương pháp hiệu quả nhất khi nói đến việc giảm lượng băng thông mà một trang web cần để hiển thị một trang là gì?

Bộ nhớ đệm tích cực? Giảm thiểu JS/CSS? Gzip? CMS? Sprites?

12
Mark Henderson

Một vài phương pháp cơ bản có thể dễ dàng thực hiện bởi bất kỳ trang web nào:

Tham gia nhiều hơn một chút:

  • Nếu một trang hoặc hình ảnh không có khả năng thay đổi, hãy báo cho trình duyệt biết bộ đệm đó. Hầu hết các máy chủ web đã làm điều này cho các tệp tĩnh, vì vậy tất cả những gì bạn cần làm là thêm nó vào các tập lệnh động của bạn nếu có thể.
  • Hợp nhất các tệp CSS và JS của bạn thành một tệp duy nhất . Điều này là thuận lợi vì nó làm giảm các yêu cầu HTTP (có các yêu cầu quá mức và một số trình duyệt ngu ngốc nhất định - và ý tôi là Internet Explorer - giới hạn theo 2 yêu cầu mặc định tại một thời điểm cho mỗi tên miền).
  • Di chuyển các tệp tĩnh của bạn (CSS, JS, hình ảnh, v.v.) sang một tên miền riêng. Điều này khiến thông tin cookie không được gửi trong yêu cầu HTTP.
  • Sử dụng các họa tiết được tạo tự động . Sprite là một hình ảnh duy nhất chứa nhiều biểu tượng hoặc hình ảnh nhỏ khác; sau đó bạn chọn hình ảnh nào sẽ hiển thị với thuộc tính CSS background. Ví dụ .

    Ưu điểm là máy khách thực hiện ít yêu cầu HTTP hơn (có chi phí hoạt động).

Tôi đã in đậm "tự động" bởi vì nếu bạn đang làm những việc này một cách thủ công thì điều đó chắc chắn không đáng, và nó khiến cho việc bảo trì mã trở thành một cơn ác mộng. Thông thường thực hiện nó tự động có nghĩa là viết một tập lệnh tùy chỉnh, đó là lý do tại sao nó "liên quan nhiều hơn một chút",

10
Thomas Bonini

Google đã phác thảo và giải thích các đề xuất của họ để tốt nhất Tối thiểu hóa Kích thước Tải trọng . Chúng bao gồm các kỹ thuật sau:

  1. Cho phép nén
  2. Xóa CSS không sử dụng
  3. Giảm thiểu JavaScript
  4. Giảm thiểu CSS
  5. Giảm thiểu HTML
  6. Trì hoãn tải JavaScript
  7. Tối ưu hóa hình ảnh
  8. Phục vụ hình ảnh thu nhỏ
  9. Phục vụ tài nguyên từ một URL nhất quán

Các đề xuất này là một phần của dự án bổ trợ Firefox/Fireorms mã nguồn mở có tên Tốc độ trang . Tương tự như plugin YSlow của Yahoo! Tiện ích bổ sung Tốc độ trang thực tế sẽ kiểm tra nhiều tối ưu hóa hơn danh sách đó giải thích chi tiết. Hướng dẫn sử dụng Tốc độ trang cũng được trình bày.

Yahoo! Thực tiễn tốt nhất để tăng tốc trang web của bạn xác định một tập hợp thực tiễn tốt nhất tương tự:

  1. Giảm thiểu các yêu cầu HTTP
  2. Sử dụng Mạng phân phối nội dung
  3. Thêm một Hết hạn hoặc Tiêu đề kiểm soát bộ đệm
  4. Thành phần Gzip
  5. Đặt bảng định kiểu lên hàng đầu
  6. Đặt tập lệnh ở dưới cùng
  7. Tránh các biểu thức CSS
  8. Tạo JavaScript và CSS bên ngoài
  9. Giảm tra cứu DNS
  10. Giáo dục

(Danh sách của Yahoo dài ~ 35 mục, không cần phải trích dẫn toàn bộ.)

Cả YSlow (liên kết hình ảnh) và Tốc độ trang (liên kết hình ảnh) sẽ cho phép bạn chạy thử nghiệm trên các trang của mình, gợi ý những điều bạn có thể làm và cho bạn biết những gì về chúng khuyến nghị, đã được thực hiện.

5
Bryson