Tối ưu hóa phổ biến để giảm kích thước trang HTML hoặc XHTML?

Một số tối ưu hóa phổ biến được thực hiện để giảm kích thước trang HTML hoặc XHTML là gì? Một số điều mà tôi suy nghĩ là:

• xóa bình luận,
• loại bỏ khoảng trắng bên ngoài,
• di chuyển các kiểu nội tuyến lặp đi lặp lại sang biểu định kiểu CSS,
• Vân vân.

Một số người khác là gì? Cái nào mang lại tiếng nổ lớn nhất hoặc có thể được thực hiện tự động bởi một công cụ hoặc mô-đun?

Google đã phác thảo và giải thích các đề xuất của họ để Giảm thiểu Kích thước Tải trọng tốt nhất . 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

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ư 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.

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ự:

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 đề xuất của họ, đã được triển khai.

Ai đó sẽ nói rằng đánh dấu nên được Gzipped, vì vậy tôi cũng có thể là người.

Đây là một lời giải thích dài dòng về Gzip là gì với các liên kết về cách thiết lập nó trên Apache và IIS .

Một bài viết trên WebReference nói rằng bạn sẽ tìm thấy mức tăng hiệu suất sau khi sử dụng mô-đun Apache mod_gzip.

Các quản trị viên web thường thấy hiệu suất máy chủ Web tăng 150-160% và giảm 70% - 80% băng thông HTML / XML / JavaScript được sử dụng, sử dụng mô-đun này. Nhìn chung, tiết kiệm băng thông là khoảng 30 đến 60%

Có lẽ nó không đáng

Tôi đã chơi với việc xóa khoảng trắng trong HTML một chút và chỉ thấy giảm 10% kích thước tải sau khi gzipping.

Trên thực tế, loại bỏ khoảng trắng và nguồn cấp dữ liệu đang thực hiện công việc mà việc nén sẽ thực hiện cho chúng ta. Chúng tôi chỉ thêm một chút hiệu quả do con người hỗ trợ:

                  Nguyên nén
CSS không tối ưu hóa 2.299 byte 671 byte
Tối ưu hóa CSS 1.758 byte 615 byte

(vâng, điều này nói CSS nhưng các quy tắc cơ bản tương tự cũng áp dụng cho HTML)

Vấn đề là,

1. GZIP đang thực hiện 90% công việc cho bạn, vì vậy đây là một tối ưu hóa vi mô điên rồ. Ý tôi là, có lẽ nếu bạn là Google hoặc Yahoo.
2. Việc giảm kích thước bổ sung 10% đi kèm với chi phí khá cao của HTML hoàn toàn không thể đọc được trong "nguồn xem"

ok, một cái nhỏ: giữ tên thẻ và thuộc tính chữ thường và nhất quán (theo cách bắt buộc tiêu chuẩn). Nó sẽ tăng tỷ lệ nén theo một hoặc hai phần trăm.

Nếu bạn là một trang web có khối lượng cực lớn, bạn có thể muốn xem xét sử dụng tên thực thể và tên lớp siêu ngắn, vì chúng làm giảm kích thước của cả trang HTML và trang CSS được sử dụng để tạo kiểu cho nó.

Ngoài ra, hãy cẩn thận về thành phần trang web có cấu trúc quá mức; thật dễ dàng để thêm các phần div và span khi chúng không thực sự cần thiết. Bạn cũng có thể muốn xem xét các chiến lược như phân trang cho các tập kết quả lớn và đầu ra tương tự.

Trong thực tế, những tối ưu hóa này có khả năng hoàn vốn cực kỳ hạn chế (và đối với chiến lược phân trang, nhược điểm SEO tiềm năng) đáng giá cho các trang web không cùng loại lưu lượng truy cập như Google. Chỉ cần làm theo khuyến nghị của jessegavin để cho phép nén GZip / Deflate và được thực hiện với nó.

Kết hợp css, hình ảnh và javascripts chung vào một tệp. Điều này không làm giảm kích thước tệp nhưng nó sẽ giảm số lượng yêu cầu http. Đối với các tệp nhỏ hơn, tổng phí http vượt xa thời gian tải xuống. Thật dễ dàng để viết một tập lệnh để kết hợp các tệp css và javascript để bạn có thể quản lý chúng dễ dàng hơn trong quá trình phát triển nhưng triển khai chúng thành một tệp duy nhất.

Xem http://css-tricks.com/css-sprites để biết thêm thông tin về cách kết hợp hình ảnh.

Ngoài ra, hãy xem Trình biên dịch đóng cửa từ Google. Tôi chưa sử dụng nó, nhưng nó tuyên bố sẽ tải xuống javascript và chạy nhanh hơn.

Như những người khác đã nói, lợi ích lớn nhất đến từ gzipping.

Hãy chắc chắn rằng bạn sử dụng các yếu tố HTML thích hợp. Thay vì <div class="page-title">Hello World</div>sử dụng <h1>Hello World</h1>.

Và một điều hiển nhiên: không sử dụng bảng để bố trí! Sử dụng một hệ thống lưới đơn giản như 960.gs (hoặc cuộn phiên bản nhẹ của riêng bạn). Có thể có một sự khác biệt lớn giữa kích thước HTML, đặc biệt là với các bảng lồng nhau. Đối chiếu:

<table cellpadding="3" cellspacing="0" border="0">
<tbody>
    <tr>
        <td width="200">...</td>
        <td width="600">...</td>
    </tr>
</tbody>
</table>

và

<div class="colSmall">...</div>
<div class="colLarge">...</div>

Nếu bạn đang sử dụng trang web ASP.NET, hãy cẩn thận với ViewState . Nó có thể tạo ra các trường ẩn rất lớn trong trang, làm quá tải nó thường xuyên trong khi không cần thiết (điều này đã xảy ra với tôi rằng ViewState nặng hơn phần còn lại của trang).
Điều này đặc biệt đúng nếu bạn sử dụng AJAX, vì ViewState sẽ được gửi qua lại với mọi yêu cầu, làm chậm trang web của bạn và tăng lưu lượng truy cập.

Các giải pháp là trong mã .net mặc dù.

Có một loạt các công cụ phân tích và tối ưu hóa hiệu suất web miễn phí . Bạn có thể biên dịch danh sách kiểm tra lớn của riêng bạn từ các báo cáo mà họ tạo ra.

Dưới đây là một vài điểm được diễn giải từ Đánh giá hiệu suất Zoompf -

• Tránh nội dung được tạo động (hình ảnh). Thay vào đó, hãy xem xét vẽ hoặc thay đổi kích thước hình ảnh ngoại tuyến dưới dạng tệp hình ảnh tĩnh.
• Tránh sử dụng thẻ hình ảnh không có kích thước.
• Google Analytics (& Ads) hỗ trợ tải tệp JavaScript không đồng bộ. Trong trường hợp, bạn sử dụng chúng, bạn có thể chọn tải chúng không đồng bộ.

Chiến lược thường bị bỏ qua là xóa tất cả mã HTML không cần thiết khỏi trang.

Đối với bất kỳ dự án cụ thể nào, bạn sẽ phải quyết định chiến lược nào sẽ sử dụng dựa trên phiên bản HTML (X) mà bạn đang sử dụng và cách trang web sẽ được sử dụng.

(Rõ ràng, tôi không thể đăng nhiều hơn một siêu liên kết cho mỗi câu trả lời vì tôi là người dùng mới, vì vậy những URL này sẽ phải được sao chép và dán ... Tôi hy vọng điều đó sẽ tốt hơn.)

• Trong HTML4 và HTML5, đối với nhiều yếu tố, thẻ đóng là không bắt buộc. Thẻ mở cho phần tử cơ thể cũng không bắt buộc. Xem:

meiert.com/en/blog/20080601/optional-tags-in-html-4/

code.google.com/speed/articles/optimizing-html.html

• Giao thức (http :) một phần của URL HTTP có thể được bỏ qua.

meiert.com/en/blog/20090218/performance-and-rfc-2394/

• Với các thẻ như <br>, bạn chỉ cần bỏ dấu gạch chéo được sử dụng trong cú pháp XHTML (<br />) trừ khi bạn thực sự cần sử dụng XHTML.

• Dưới đây là một số ví dụ về cấu trúc tài liệu HTML nhỏ:

meiert.com/en/blog/20080429/best-html-template/

html5doctor.com/html-5-boiler tấm /

Những người khác đã nói điều đó, nhưng họ chỉ chưa nói về nhà đủ điểm: gzipping.

1. Hầu như không có nỗ lực, hoặc nhược điểm.
2. Theo kinh nghiệm hạn chế của tôi, giảm kích thước HTML từ 60% đến 90%.

Tất cả các chỉnh sửa khác mà bạn có thể thực hiện đối với HTML đòi hỏi nhiều nỗ lực / bảo trì hơn và hầu như không có bất kỳ ảnh hưởng nào so với việc chỉ gzipping và quên. Đơn giản là chúng không có giá trị thời gian trừ khi bạn là Google. Bạn không phải là Google.

(Như những người khác đã đề cập, HTML của bạn càng nhất quán, gzipping sẽ càng có hiệu quả, vì - theo cách hiểu hạn chế của tôi - gzipping tìm các chuỗi giống hệt nhau trong tệp của bạn và thay thế từng phiên bản lặp lại bằng một mã nhỏ đề cập đến nguyên bản. Vì vậy, các thực hành tác giả như giữ các thuộc tính của bạn theo cùng một thứ tự và giữ tất cả các vỏ của bạn giống nhau, có thể giúp gzipping thực hiện công việc của nó.)

Ồ - và nếu bạn tự động thu nhỏ HTML của mình tại một số điểm trong quy trình xây dựng / phục vụ của bạn, điều đó không đòi hỏi nhiều nỗ lực / bảo trì hơn. Một số công cụ khai thác HTML được liệt kê ở đây:

/programming/728260/html-minization