Home-theater-designers
Nếu bạn điều hành một trang web, bạn nên biết cách sử dụng các định dạng hình ảnh phù hợp và tối ưu hóa hình ảnh của bạn cho web. Tuy nhiên, trong khi nén hình ảnh là một phương pháp nổi tiếng, thì nén HTML có xu hướng bị bỏ qua, điều này thật đáng tiếc vì những lợi ích mang lại là đáng giá.
Trong bài viết này, chúng ta sẽ xem xét hai phương pháp chính để thu nhỏ tệp HTML, tại sao nên thu nhỏ tệp HTML và cách thực hiện.
Nén so với Minification
Về việc tối ưu hóa các tệp HTML, có hai phương pháp chính cho nó: nén và sự thu nhỏ . Bề ngoài chúng nghe có vẻ giống nhau, nhưng thực chất là hai kỹ thuật khác biệt, vì vậy đừng nhầm lẫn chúng.
Giảm thiểu
Bạn có thể coi việc thu nhỏ là việc loại bỏ các ký tự và dòng không cần thiết trong mã nguồn. Hãy nghĩ đến thụt lề, nhận xét, dòng trống, v.v. Không yêu cầu nào trong số này trong HTML - chúng tồn tại để làm cho tệp dễ đọc hơn. Việc cắt tỉa những chi tiết này có thể giảm kích thước tệp mà không ảnh hưởng gì.
Trang HTML mẫu:
Your Title Here
Send me mail at support@yourcompany.com .
This is a new paragraph!
This is a new paragraph in bold and italics.
Kích thước gốc: 354. Kích thước thu nhỏ: 272. Tiết kiệm: 82 (23,16%).
Nhiều nhà phát triển web và chủ sở hữu trang web chỉ dành riêng cho các tệp JS và CSS, nhưng thực tế lỗi thời này là một sai lầm. Việc rút gọn HTML cũng rất quan trọng.
Trở lại những năm 2000, các công cụ thu nhỏ rất hiếm. Bạn phải thu nhỏ tệp theo cách thủ công mỗi khi có gì đó thay đổi. Vì các tệp HTML thay đổi thường xuyên hơn các tệp JS và CSS, nên quá nhàm chán để giảm thiểu mọi lúc mọi nơi. Ngày nay, đó là một điểm tranh luận.
Nén
Khi người dùng truy cập trang web của bạn, họ sẽ làm như vậy bằng giao thức HTTP. Trình duyệt gửi yêu cầu đến máy chủ web của bạn cho một trang cụ thể, máy chủ web của bạn tìm trang đó, sau đó gửi nội dung của trang đó trở lại trình duyệt của khách truy cập.
Nhưng vì giao thức HTTP hỗ trợ nén, máy chủ web của bạn có thể nén trang trước khi gửi cho khách truy cập (giả sử tính năng nén được bật trong cài đặt máy chủ của bạn) và sau đó trình duyệt của khách truy cập có thể giải nén trang trở lại trạng thái ban đầu.
Sơ đồ nén phổ biến nhất là GZIP , là định dạng tệp sử dụng thuật toán nén không mất dữ liệu được gọi là DEFLATE.
Thuật toán tìm kiếm các lần xuất hiện lặp lại của văn bản trong tệp HTML, sau đó thay thế các lần lặp lại đó bằng các tham chiếu đến lần xuất hiện trước đó. Mỗi tham chiếu chỉ đơn giản là hai con số: tham chiếu quay lại bao xa và chúng ta đang tham chiếu bao nhiêu ký tự.
Hãy xem xét một chuỗi văn bản như thế này (ví dụ được lấy từ trang web GZIP):
Blah blah blah blah blah.Thuật toán nhận ra sự lặp lại sau:
B{lah b}{lah b}{lah b}{lah b}lah.Lần xuất hiện đầu tiên là tài liệu tham khảo của chúng tôi, vì vậy hãy để nó là:
Blah b{lah b}{lah b}{lah b}lah.Lần xuất hiện thứ hai quay lại lần xuất hiện đầu tiên, có năm ký tự phía sau và dài năm ký tự:
Blah b[5,5]{lah b}{lah b}lah.Nhưng trong trường hợp này, thuật toán nhận ra rằng lần xuất hiện tiếp theo là cùng một chuỗi ký tự, vì vậy nó mở rộng độ dài tham chiếu thêm năm:
Blah b[5,10]{lah b}lah.Và một lần nữa:
Blah b[5,15]lah.Và thuật toán đủ thông minh để nhận ra rằng ba ký tự tiếp theo là ba ký tự đầu tiên trong tham chiếu, vì vậy nó mở rộng thêm ba:
Blah b[5,18].Bây giờ hãy nghĩ về một tệp HTML điển hình và mức độ lặp lại tồn tại bên trong. Gần như mọi thẻ, chẳng hạn như
, có một thẻ đóng tương ứng, như
. Hơn nữa, nhiều thẻ được lặp lại xuyên suốt, chẳng hạn như
,
,
![]()
,
, v.v. Các thuộc tính cũng được lặp lại thường xuyên, bao gồm
class,
href, và
src. Thật dễ dàng để hiểu tại sao nén GZIP lại rất hiệu quả với HTML.
Nhược điểm duy nhất là máy chủ web cần nhiều CPU hơn một chút để thực hiện nén mỗi khi một trang được yêu cầu. Nhưng vì CPU ngày nay không còn là vấn đề đáng quan tâm, nên việc kích hoạt GZIP hầu như luôn tốt hơn là không sử dụng, ngay cả khi bạn có dịch vụ lưu trữ web cấp thấp.
Tại sao bạn nên nén và thu nhỏ
Có hai lợi ích chính, cả hai đều rất quan trọng trong bối cảnh web nặng về thiết bị di động ngày nay.
Tải trang nhanh hơn
Trung bình, một trình thu nhỏ HTML có thể giảm kích thước của tệp khoảng 3 phần trăm với các cài đặt cơ bản. Với cài đặt nâng cao tùy chọn, tệp HTML có thể được giảm thêm từ 3 đến 7 phần trăm, với mức giảm tiềm năng lên đến 10 phần trăm. Điều này trực tiếp chuyển thành thời gian tải trang nhanh hơn.
Ít băng thông được sử dụng
Giả sử bạn có 10 tệp, mỗi tệp được thu nhỏ từ 50 KB xuống 45 KB với tổng mức thu nhỏ là 50 KB. Và giả sử trang web của bạn phục vụ trung bình 1.000 khách truy cập mỗi ngày, trong đó mỗi lượt truy cập trung bình có mười trang. Chỉ riêng việc rút gọn HTML đã giảm mức sử dụng băng thông của bạn xuống 50 MB mỗi ngày (1,5 GB mỗi tháng).
Nén + Minification
Như bạn có thể thấy, việc thu nhỏ HTML tự nó rất hữu ích, đặc biệt là khi trang web của bạn phát triển lớn hơn, tệp lớn hơn và lưu lượng truy cập tăng lên. Lưu ý rằng Nguyên tắc về Tốc độ trang của Google khuyên bạn nên giảm thiểu HTML, vì vậy nếu bạn hoài nghi, hãy để điều đó thuyết phục bạn.
kết nối điện thoại di động với bộ định tuyến không dây
Nhưng điều tuyệt vời về tối ưu hóa HTML là bạn không cần phải chọn quá trình thu nhỏ hoặc nén. Bạn có thể làm cả hai! Trên thực tế, bạn Nên làm tất cả.
Trung bình, bạn có thể mong đợi nén GZIP để thu nhỏ tệp HTML từ 70 đến 90 phần trăm. Sử dụng ví dụ trên với ước tính nén vừa phải, các tệp HTML được rút gọn sẽ có dung lượng từ 45 KB đến 13,5 KB mỗi tệp, với tổng mức thu nhỏ là 365 KB. So với không được tổng hợp / không nén, băng thông trang web của bạn hiện giảm 365 MB mỗi ngày (11 GB mỗi tháng).
Và ngoài việc tiết kiệm băng thông, mỗi trang tải nhanh hơn đáng kể vì trình duyệt của người dùng cuối chỉ cần tải xuống 13,5 KB so với 50 KB trên mỗi trang.
Cách nén và giảm thiểu HTML
May mắn thay, những ngày này không quá khó và bạn không cần nhiều bí quyết kỹ thuật để thiết lập chúng.
Plugin WordPress
Nếu bạn chạy một trang web WordPress, tất cả những gì bạn cần làm là cài đặt một plugin và bạn có thể thu được lợi ích của cả nén và thu nhỏ.
Hầu hết các plugin bộ nhớ đệm không chỉ đơn giản là bộ nhớ đệm các trang. Ví dụ, WP Bộ nhớ đệm nhanh nhất và Tổng bộ nhớ đệm W3 cả hai đều có cài đặt một cú nhấp chuột cho phép bạn bật tính năng thu nhỏ HTML và nén GZIP, trong số các tính năng khác giúp tăng tốc độ tải trang và giảm sử dụng băng thông.
nếu bạn chỉ một muốn thu nhỏ, chúng tôi khuyên bạn nên Giảm thiểu HTML cắm vào. Nó đơn giản, hỗ trợ HTML / CSS / JS và cho phép bạn tinh chỉnh phương pháp thu nhỏ một chút (ví dụ: có xóa
http:và
https:từ các URL).
Bộ thu nhỏ HTML tĩnh
Nếu các tệp HTML của bạn là tĩnh, (nghĩa là không được tạo động bởi CMS hoặc khuôn khổ web), thì bạn có thể duy trì hai bộ tệp HTML: một bộ 'nguồn', chưa được hợp nhất để dễ dàng chỉnh sửa và một bộ 'được thu nhỏ', mà bạn tạo bất kỳ khi nào bạn thực hiện thay đổi đối với tệp nguồn.
Để giảm thiểu, hãy sử dụng một trong các công cụ sau:
- Máy nén HTMLC
- Trình thu nhỏ HTML
- Trình thu nhỏ HTML (khác với cái trên)
Đây là một kỹ thuật khả thi nếu bạn đã rời xa các CMS như WordPress và bây giờ sử dụng trình tạo trang web tĩnh.
Bật tính năng nén GZIP
Các bước để bật tính năng nén GZIP có thể khác nhau tùy thuộc vào phần mềm máy chủ web bạn đang sử dụng. Vì Apache là tùy chọn phổ biến nhất, chúng tôi sẽ giới thiệu cách kích hoạt nó bằng cách sử dụng .htaccess.
Kết nối với máy chủ web của bạn bằng FTP, sau đó tạo một tệp có tên
.htaccesstrong thư mục gốc. Chỉnh sửa tệp .htaccess để có các cài đặt sau:
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
SetOutputFilter DEFLATE
Không chắc liệu tính năng nén có hoạt động trên trang web của bạn không? Kiểm tra nó bằng công cụ này .
Để đạt được hiệu quả cao nhất, bạn cũng nên tìm hiểu về cách kiểm tra, làm sạch và tối ưu hóa CSS của bạn .
Đăng lại Đăng lại tiếng riu ríu E-mail Bạn có nên nâng cấp lên Windows 11 ngay lập tức không?Windows 11 sắp ra mắt, nhưng bạn nên cập nhật càng sớm càng tốt hay đợi vài tuần? Hãy cùng tìm hiểu.
Đọc tiếp Chủ đề liên quan- Lập trình
- HTML
- Phát triển web
Joel Lee là Tổng biên tập của MakeUseOf từ năm 2018. Anh ấy có bằng B.S. về Khoa học Máy tính và hơn chín năm kinh nghiệm viết và chỉnh sửa chuyên nghiệp.
Xem thêm từ Joel LeeTheo dõi bản tin của chúng tôi
Tham gia bản tin của chúng tôi để biết các mẹo công nghệ, đánh giá, sách điện tử miễn phí và các ưu đãi độc quyền!
Bấm vào đây để đăng ký