Quy tắc này kích hoạt khi PageSpeed Insights phát hiện ra rằng kích thước của một trong các tài nguyên của bạn có thể được giảm thông qua quá trình thu nhỏ Show
Tổng quanGiảm thiểu đề cập đến quá trình loại bỏ dữ liệu không cần thiết hoặc dư thừa mà không ảnh hưởng đến cách trình duyệt xử lý tài nguyên - e. g. nhận xét và định dạng mã, loại bỏ mã không sử dụng, sử dụng tên hàm và biến ngắn hơn, v.v. Xem để tìm hiểu thêm khuyến nghịBạn nên thu nhỏ tài nguyên HTML, CSS và JavaScript của mình
Ngoài ra, Mô-đun PageSpeed, tích hợp với máy chủ web Apache hoặc Nginx để tự động tối ưu hóa trang web của bạn, bao gồm cả việc thu nhỏ tài nguyên Khi bạn thu nhỏ các tệp CSS, HTML và Javascript của trang web, bạn có thể tiết kiệm một số thời gian quý báu cho tốc độ tải trang của trang web của mình. Bây giờ chúng tôi không nói về việc giảm một nửa tốc độ tải trang của bạn hay bất cứ điều gì, nhưng khi nói đến tốc độ trang web của bạn, bất kỳ điều gì cũng có ích. Tốc độ tải trang web của bạn không chỉ quan trọng đối với khách truy cập lần đầu mà còn quan trọng đối với việc di chuyển xếp hạng của công cụ tìm kiếm Thuật ngữ “minify” là biệt ngữ lập trình mô tả quá trình loại bỏ các ký tự không cần thiết trong mã nguồn. Các ký tự này bao gồm khoảng trắng, ngắt dòng, nhận xét và dấu phân cách khối hữu ích cho con người chúng ta nhưng không cần thiết cho máy móc. Chúng tôi thu nhỏ các tệp của trang web chứa mã CSS, HTML và Javascript để trình duyệt web của bạn có thể đọc chúng nhanh hơn Đây là một ví dụ về việc thu nhỏ CSS trông như thế nào CSS trước khi thu nhỏ /* Layout helpers
----------------------------------*/
.ui-helper-hidden {
display: none;
}
.ui-helper-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
CSS sau khi thu nhỏ .ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}
Rõ ràng, đây chỉ là một ví dụ nhỏ sử dụng một đoạn mã CSS, nhưng bạn có thể tưởng tượng dung lượng mà điều này sẽ tiết kiệm được khi thu nhỏ hàng nghìn dòng mã. Vì vậy, nếu bạn muốn thực hiện việc này một cách thủ công, về mặt kỹ thuật, bạn có thể. Nhưng bạn sẽ có nguy cơ mắc lỗi cao và tước đi thời gian quý báu hoặc cuộc sống của bạn một cách không cần thiết. Hãy nghe lời khuyên của tôi và sử dụng các công cụ theo ý của bạn Công cụ trực tuyến để thu nhỏ tệp của bạn theo cách thủ công Rất may, bạn không cần phải là nhà phát triển hoặc biết bất kỳ ngôn ngữ lập trình nào để thu nhỏ tệp trang web của mình. Thu nhỏ đã trở thành thông lệ tiêu chuẩn trong thế giới thiết kế web, vì vậy bạn sẽ không ngạc nhiên khi biết rằng có rất nhiều công cụ tuyệt vời (và miễn phí) để thực hiện công việc cho bạn Dưới đây là danh sách một số công cụ hữu ích để bạn bắt đầu. Vì nhiều trong số này có thể thu nhỏ nhiều loại mã nên tôi đã bao gồm các tùy chọn loại mã trong ngoặc đơn
Nếu bạn đang tìm kiếm một số công cụ ngoại tuyến để thu nhỏ cục bộ HTML CSS hoặc JavaScript của mình, đây là một số tùy chọn
Cách giảm thiểu CSS, HTML & Javascript của trang web của bạnĐăng ký kênh Youtube của chúng tôi Cách giảm thiểu của bạn Giảm thiểu HTML, CSS và JavaScript của bạn bằng công cụ trực tuyếnNhiều công cụ trực tuyến này có quy trình tương tự bao gồm các bước sau Dán mã nguồn của bạn hoặc tải tệp mã nguồn lên Đối với ví dụ này, tôi sẽ sử dụng các công cụ thu nhỏ từ minifycode. com Đầu tiên, xác định vị trí tệp css (thường được đặt tên là style. css) trong tệp trang web của bạn và mở tệp bằng trình chỉnh sửa trang. Sau đó sao chép toàn bộ mã css vào khay nhớ tạm của bạn Đi đến minifycode. com và nhấp vào tab công cụ khai thác CSS. Sau đó dán mã CSS vào hộp nhập và nhấp vào nút Thu nhỏ CSS Sau khi tạo mã rút gọn mới, hãy sao chép mã Sau đó quay lại tệp css của trang web của bạn và thay thế mã bằng phiên bản rút gọn mới Đó là nó Lặp lại quy trình tương tự để thu nhỏ (các) tệp JavaScript và Html của trang web của bạn Cách giảm thiểu HTML, CSS và JavaScript trong WordPress bằng PluginCách dễ nhất để thu nhỏ HTML, CSS và JavaScript của bạn trong WordPress là sử dụng plugin. Điều này cho phép bạn tự động tối ưu hóa các tệp trang web WordPress của mình để giảm thời gian tải trang chỉ bằng một vài lần nhấp vào nút Có rất nhiều plugin sẽ thực hiện công việc nhưng tôi sẽ đề cập ngắn gọn một vài plugin nổi bật Tự động tối ưu hóa (MIỄN PHÍ)Autoptimize có lẽ là plugin thu nhỏ phổ biến nhất hiện có. Nó phổ biến vì dễ sử dụng và có đầy đủ các tính năng hoạt động mạnh mẽ. Nó có thể tổng hợp (kết hợp các tập lệnh), thu nhỏ và lưu trữ mã của bạn. Ngoài ra, bạn có các tùy chọn bổ sung để tối ưu hóa Google Fonts, hình ảnh, v.v. Để sử dụng Autoptimize, bạn có thể tải xuống, cài đặt và kích hoạt plugin từ Bảng điều khiển WordPress trong phần Plugin > Thêm mới Khi plugin được kích hoạt, hãy điều hướng đến Cài đặt> Tự động tối ưu hóa. Sau đó, trong tab cài đặt chính, hãy kiểm tra mã bạn muốn tối ưu hóa (HTML, CSS và/hoặc JavaScript) và nhấp vào Lưu thay đổi Bạn cũng có thể nhấp vào nút Hiển thị cài đặt nâng cao ở đầu trang để tùy chỉnh thêm cách bạn muốn mã của mình được tối ưu hóa Đó là về nó. Khá đơn giản và mạnh mẽ Giảm tốc độ nhanh (MIỄN PHÍ)Fast Velocity Minify là một plugin WordPress phổ biến, miễn phí và mạnh mẽ khác, không chỉ đơn thuần là thu nhỏ. Nó thu nhỏ và kết hợp CSS và Javascript của bạn để giảm các yêu cầu HTTP đến máy chủ của bạn, do đó đúng như tên gọi của nó để cung cấp cho bạn thời gian tải trang nhanh. Có sẵn các tùy chọn tối ưu hóa bổ sung nhưng cài đặt mặc định hoạt động tốt cho hầu hết các trang web Để sử dụng plugin, trước tiên hãy cài đặt và kích hoạt nếu từ Bảng điều khiển WordPress của bạn bằng cách điều hướng đến Plugin > Thêm mới. Sau đó tìm kiếm “thu nhỏ tốc độ nhanh” và khi nó xuất hiện trong kết quả tìm kiếm, hãy nhấp để cài đặt và kích hoạt nó Khi plugin được kích hoạt, các tệp của bạn sẽ tự động được thu nhỏ và tối ưu hóa để có hiệu suất tốt nhất. Điều đó thật dễ dàng Chuyển đến trang cài đặt plugin (Cài đặt > Giảm tốc độ nhanh) để xem tất cả các tùy chọn có sẵn. Trong tab Trạng thái, bạn có thể thấy danh sách hữu ích các tệp JavaScript và CSS đã được xử lý Trong tab Cài đặt, bạn có thể tùy chỉnh cách các tệp của mình được tối ưu hóa. Vì tính năng thu nhỏ HTML, CSS và JavaScript đã hoạt động nên bạn có thể sử dụng các cài đặt này để điều chỉnh các tùy chọn mặc định hoặc tắt tính năng thu nhỏ đối với một số loại mã nhất định. Thậm chí còn có các tùy chọn để tối ưu hóa Google Fonts và Font Awesome Đó là nó Tổng bộ đệm W3 (MIỄN PHÍ)W3 Total Cache là một plugin bộ nhớ đệm tuyệt vời bao gồm tùy chọn để thu nhỏ HTML, JS và CSS của bạn WP Cache nhanh nhất (MIỄN PHÍ)WP Fastest Cache – Plugin bộ nhớ đệm WordPress MIỄN PHÍ này cực kỳ phổ biến với các đánh giá cao. Plugin thực hiện các tối ưu hóa hiệu suất khác nhau, bao gồm kết hợp và thu nhỏ HTML CSS và JavaScript của bạn để có hiệu suất tốt hơn Khi plugin đã được cài đặt, chỉ cần nhấp vào tab WP Fastest Cache trong thanh bên của Bảng điều khiển WordPress (cái có biểu tượng con báo tuyệt vời). Trong tab cài đặt, bạn sẽ tìm thấy các tùy chọn để kết hợp và thu nhỏ các tệp HTML và CSS. Mặc dù việc thu nhỏ JavaScript chỉ khả dụng trong phiên bản pro Suy nghĩ cuối cùngNếu bạn muốn thời gian tải trang nhanh hơn và điểm hiệu suất tốt hơn, bạn sẽ muốn thu nhỏ các tệp HTML, CSS và Javascript của mình. Với tất cả các công cụ trực tuyến có sẵn, bạn có thể dễ dàng thu nhỏ mã của mình cho bất kỳ trang web nào. Và đối với những người dùng WordPress của bạn, có sẵn một số plugin mạnh mẽ để tự động thu nhỏ các tệp đó chỉ bằng một vài cú nhấp chuột. Các plugin ở trên chỉ là một vài trong số các plugin tuyệt vời xử lý việc thu nhỏ trong số các tối ưu hóa hiệu suất khác. Trên thực tế, bạn có thể đã có một plugin loại hiệu suất đã có sẵn tính năng thu nhỏ. Ví dụ: nhiều plugin bộ nhớ đệm WordPress tốt nhất bao gồm tùy chọn thu nhỏ. Tôi hy vọng bài đăng này sẽ giúp bạn quyết định đâu là lựa chọn tốt nhất cho bạn Tôi mong muốn được nghe từ bạn trong các ý kiến dưới đây Chúc mừng Tiết lộ. Nếu bạn mua thứ gì đó sau khi nhấp vào liên kết trong bài đăng, chúng tôi có thể nhận được hoa hồng. Điều này giúp chúng tôi duy trì nội dung miễn phí và các tài nguyên tuyệt vời. Cảm ơn bạn đã hỗ trợ Làm cách nào để sử dụng Công cụ khai thác trong HTML?Đề xuất . Để thu nhỏ HTML, hãy thử HTMLMinifier Để thu nhỏ CSS, hãy thử CSSNano và csso Để thu nhỏ JavaScript, hãy thử UglifyJS. Trình biên dịch đóng cửa cũng rất hiệu quả. Bạn có thể tạo quy trình xây dựng sử dụng các công cụ này để thu nhỏ và đổi tên các tệp phát triển và lưu chúng vào thư mục sản xuất Công cụ khai thác HTML là gì?Giảm thiểu là quá trình giảm thiểu mã và đánh dấu trong các trang web và tệp tập lệnh của bạn . Đây là một trong những phương pháp chính được sử dụng để giảm thời gian tải và sử dụng băng thông trên các trang web. Giảm thiểu cải thiện đáng kể tốc độ và khả năng truy cập trang web, chuyển trực tiếp thành trải nghiệm người dùng tốt hơn.
Công cụ khai thác hoạt động như thế nào?Tính năng thu nhỏ hoạt động bằng cách phân tích và viết lại các phần dựa trên văn bản của trang web để giảm kích thước tệp tổng thể . Thu nhỏ mở rộng đến tập lệnh, biểu định kiểu và các thành phần khác mà trình duyệt web sử dụng để hiển thị trang web. Quá trình thu nhỏ được thực hiện trên máy chủ web trước khi gửi phản hồi.
Việc thu nhỏ HTML có ảnh hưởng đến SEO không?Chúng tôi có thể xác nhận rằng việc rút gọn HTML bằng plugin sửa đổi của bên thứ 3 sẽ không ảnh hưởng tiêu cực đến SEO . Trên thực tế, đó là phương pháp hay nhất và nó sẽ cải thiện thời gian tải trang web của bạn. |
