Các 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?

bandwidth compression

— Mark Henderson
nguồn

Câu hỏi trùng lặp được trả lời trùng lặp: webmasters.stackexchange.com/questions/569/iêu

— Bryson

Câu hỏi này là đầu tiên, vì vậy câu hỏi còn lại là trùng lặp

— Mark Henderson

Câu trả lời:

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:

Nén HTML, CSS và Javascript của bạn bằng deflatehoặc gzipnếu trình duyệt thực hiện yêu cầu hỗ trợ nó.
Giảm thiểu javascript của bạn với Trình biên dịch đóng cửa của Google
Giảm thiểu css của bạn với YUI Compressor

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

Nếu một trang hoặc hình ảnh không thể 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 tự động . Đ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 trên trình duyệt 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 sprite được tạo tự động . Một 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 để 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",

— Thomas Bonini
nguồn

Tôi sẽ trả lời, nhưng tôi nghĩ rằng bạn đã bao quát tất cả mọi thứ :)

— Echo nói Phục hồi Monica

chi phí thực sự là một điều quan trọng cần xem xét, đối với tệp nhỏ, chúng có thể thể hiện mức độ tốt của dữ liệu được truyền.

— HoLyVieR

Không sử dụng def def trừ khi bạn cũng kiểm tra cẩn thận tác nhân người dùng, vì có một lỗi trong Internet Explorer xung quanh def def.

@Kinopiko: vâng, lời khuyên tốt. Xem câu hỏi của tôi về chồng tràn.

— Thomas Bonini

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

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

Những đề xuất này là một phần của dự án bổ trợ Firefox / Fireorms mã nguồn mở của họ có tên là Tốc độ trang . Tương tự như YSlow của Yahoo plugin . 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.

Thực tiễn tốt nhất của Yahoo để 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ự:

Giảm thiểu các yêu cầu HTTP
Sử dụng Mạng phân phối nội dung
Thêm một Hết hạn hoặc Tiêu đề kiểm soát bộ đệm
Thành phần Gzip
Đặt bảng định kiểu lên hàng đầu
Đặt các tập lệnh ở dưới cùng
Tránh các biểu thức CSS
Tạo JavaScript và CSS bên ngoài
Giảm tra cứu DNS
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 đề xuất của họ, đã được triển khai.

— Bryson
nguồn