Bỏ qua đến nội dung chính

Cách nén các tệp CSS, HTML và Javascript của bạn

Divi: chủ đề WordPress dễ sử dụng nhất

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 600.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

Khi bạn nén các tệp CSS, HTML và Javascript của trang web, bạn có thể tiết kiệm thời gian quý báu về tốc độ tải trang của trang web của bạn. Bây giờ, chúng tôi không nói về việc giảm tốc độ tải trang của bạn xuống một nửa hoặc bất cứ điều gì, nhưng khi nói đến tốc độ trang web của bạn, bất kỳ số lượng nhỏ nào.

Tốc độ tải trang web của bạn không chỉ quan trọng đối với khách truy cập mới, mà còn quan trọng đối với xếp hạng công cụ tìm kiếm.

Thuật ngữ "giảm bớtTrong ngôn ngữ lập trình mô tả quá trình loại bỏ các ký tự không cần thiết khỏi mã nguồn. Những ký tự này bao gồm khoảng trắng, ngắt dòng, các ý kiến và chặn các dấu phân cách hữu ích cho con người chúng ta nhưng vô dụng đối với máy móc.

Chúng tôi thu nhỏ các tệp trên một 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.

Đọc bài viết của chúng tôi về 10 WordPress plugin để cải thiện tốc độ của blog của bạn

Dưới đây là một ví dụ về thu nhỏ CSS.

CSS trước khi thu nhỏ

/ * Một tệp CSS mẫu ---------------------------------- * / .user-profile-card { margin: 0px; nền: #33E43} .user-profile-description {Border: 0; vị trí: tuyệt đối; chiều rộng: tự động; lề trên: 20px; }

CSS sau khi thu nhỏ

.user-profile-card{margin:0;background:#33e43}.user-profile-description{border:0;position:absolute;width:auto;margin-top:20px}

Rõ ràng, đây chỉ là một ví dụ nhỏ sử dụng đoạn mã CSS, nhưng bạn có thể tưởng tượng dung lượng mà nó sẽ tiết kiệm được khi giảm hàng nghìn dòng mã.

Làm cách nào để tăng thời gian dành cho blog WordPress của bạn? Tìm hiểu bằng cách tham khảo bài viết này.

Vì vậy, nếu bạn muốn làm nó bằng tay, về mặt kỹ thuật, bạn có thể. Nhưng bạn có nguy cơ sai sót cao và lãng phí thời gian quý báu của cuộc sống một cách không cần thiết!

Thực hiện theo các mẹo này và sử dụng các công cụ theo ý của bạn.

Một số công cụ để thực hiện nén

May mắn thay, bạn không nhất thiết phải là nhà phát triển hoặc biết một trong những ngôn ngữ lập trình để giảm kích thước tệp của trang web của bạn. Giảm thiểu đã trở thành một thông lệ trong thế giới thiết kế web. Vì vậy, bạn không nên 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.

Xem thêm Các plugin của 6 WordPress để hít thở cuộc sống mới vào bài viết của bạn

Dưới đây là danh sách các công cụ hữu ích để bạn bắt đầu. Vì nhiều trong số chúng có thể giảm thiểu một số loại mã, tôi đã bao gồm các tùy chọn loại mã trong ngoặc đơn.

    • cssminifier.com et javascript-minifier.com (CSS và JS) - Hai công cụ khai thác này của Andrew Chilton rất dễ sử dụng. Chỉ cần dán mã của bạn, sau đó nhấp vào nút Giảm bớt để hiển thị mã nén. Bạn thậm chí có thể tải xuống mã thoát dưới dạng tệp để thuận tiện.
    • htmlcompressor.com (HTML, CSS và JS) - Công cụ nén / thu nhỏ trực tuyến này hỗ trợ các loại HTML, CSS và JS. Nó thậm chí còn hỗ trợ các kết hợp khác nhau của các loại mã như CSS + PHP và JavaScript + PHP. Và thậm chí bạn có thể kiểm tra mã nén để tìm lỗi.
    • csscompressor.net (Chỉ CSS) - Trình nén CSS trực tuyến này nhanh, dễ sử dụng và miễn phí.
    • jscompress.com (Chỉ dành cho JS) - Công cụ nén JavaScript này cho phép bạn nén mã JavaScript sao chép và dán, nhưng bạn cũng có thể tải xuống nhiều tệp JavaScript cùng một lúc. Thật tuyệt vời khi kết hợp các tệp JavaScript thành một tệp để tải trang nhanh hơn.
    • Công cụ của Dan - Công cụ của Dan đề xuất un giảm thiểu CSSđể giảm thiểu JavaScript . Cả hai công cụ đều có giao diện người dùng thực sự sạch sẽ, dễ sử dụng. Họ không cung cấp bất kỳ tùy chọn nâng cao nào, nhưng chúng tuyệt vời cho các mục tiêu giảm thiểu chung.
    • refresh-sf.com (HTML, CSS và JS) - Trình nén này sẽ giảm các loại mã JavaScript, CSS và HTML. Nó cũng bao gồm tất cả các tùy chọn nén cho từng loại mã nếu bạn cần.
    • Trình biên dịch đóng (Chỉ dành cho JS) - Trình biên dịch đóng là một phần của Công cụ đóng cửa , một bộ công cụ từ Google Developers. Nó cho phép bạn thu nhỏ Javascript của mình bằng các tối ưu hóa hữu ích khác. Bạn có thể sử dụng mã Javascript của mình bằng cách nhập URL vào vị trí của tệp js, sau đó chọn cách bạn muốn mã được tối ưu hóa và được định dạng.

Ví dụ: bạn chọn tối ưu hóa mã của mình để chỉ xóa các khoảng trống nếu bạn muốn. Khi bạn đã nhấp vào nút biên dịch, nó sẽ giảm mã (hoặc biên dịch mã) cho bạn.

    • minifycode.com (HTML, CSS và JS) - Trang web này cung cấp công cụ khai thác cho JavaScript , CSS et HTML với giao diện người dùng đơn giản và gọn gàng, nén mã của bạn chỉ bằng một cú nhấp chuột. Nó cũng cung cấp một công cụ "làm đẹp" để giải nén mã được rút gọn để làm cho nó dễ đọc hơn (ngược lại với thu nhỏ).

Nếu bạn đang tìm kiếm các công cụ ngoại tuyến để thu nhỏ CSS hoặc JavaScript HTML cục bộ, đây là một số tùy chọn:

Cách giảm kích thước mã HTML, CSS và JavaScript của bạn bằng công cụ trực tuyến

Nhiều trong số các công cụ trực tuyến này có một 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 xuống tệp mã nguồn.
  • Tối ưu hóa cài đặt cho một đầu ra cụ thể (nếu có sẵn tùy chọn)
  • Nhấn vào nút để nén mã.
  • Sao chép kết quả mã được rút gọn hoặc tải xuống tệp mã được rút gọn.

Trong ví dụ này, tôi sẽ sử dụng các công cụ minify từ minifycode.com.

Xem thêm: Làm thế nào để thêm một mã CSS một cách an toàn trên WordPress bằng cách tham khảo liên kết này.

Đầu tiên, định vị tệp CSS (thường được gọi 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 tất cả các mã CSS vào clipboard của bạn.

phong cách css divi.jpg

đi minifycode.com và nhấp vào tab Công cụ khai thác CSS. Sau đó dán mã CSS vào vùng nhập liệu và nhấp vào nút Giảm thiểu CSS.

thu nhỏ css.jpg

Khi mã rút gọn mới được tạo, sao chép nó.

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả tiền đắt cho những gì bạn có thể tự làm. [Miễn phí]

sao chép mã nén.jpg

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 đơn giản hóa mới.

Vậy là xong!

Lặp lại quy trình tương tự để giảm (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 trên WordPress bằng cách sử dụng plugin

Cách dễ nhất để giảm thiểu mã 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 vài cú nhấp chuộ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 ví dụ.

Tự động tối đa hóa (MIỄN PHÍ)

tự động tối đa hóa wp.png
Tự động tối đa hóa có lẽ là plugin giảm thiểu WordPress phổ biến nhất. Nó là phổ biến vì nó dễ sử dụng và đóng gói với các tính năng mạnh mẽ. Nó có thể nhóm (kết hợp các tập lệnh), thu nhỏ và lưu mã của bạn. Là một phần thưởng, 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 Tự động tối đa hóa, bạn có thể tải xuống, cài đặt và kích hoạt trình cắm từ bảng điều khiển WordPress bên dưới Plugin> Thêm mới.

Để biết thêm thông tin, xem hướng dẫn của chúng tôi về: Làm thế nào để cài đặt một plugin trong WordPress

autoptimize.jpg

Khi plugin được kích hoạt, hãy đi đến Cài đặt> Tối ưu hóa tự động. Sau đó, trong tab Tham số chính, kiểm tra mã bạn muốn tối ưu hóa (HTML, CSS và / hoặc JavaScript) và nhấp vào Elưu thay đổi.

tối ưu hóa css.jpg

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 tối ưu hóa mã của bạn.

tùy chọn css advanced.jpg

Đó là về nó! Khá đơn giản và mạnh mẽ.

W3 Tổng bộ nhớ cache (MIỄN PHÍ)

v3 tổng bộ đệm.png
W3 Total Cache là một plugin lưu trữ tuyệt vời cung cấp khả năng thu nhỏ các tệp HTML, JS và CSS của bạn.

tham số chung w3 tổng bộ đệm.jpg

Bộ nhớ cache nhanh nhất WP (MIỄN PHÍ)

wp cache.png nhanh nhất
WP Cache Nhanh nhất - Plugin này WordPress bộ nhớ đệm là cực kỳ phổ biến với các đánh giá cao. Nó 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à giảm HTML CSS và JavaScript của bạn để có hiệu suất tốt hơn.

Đọc bài viết của chúng tôi về 8 WordPress plugin để thêm một cuộc trò chuyện trực tiếp trên blog của bạn

Khi plugin được cài đặt, chỉ cần nhấp vào tab WP Cache Nhanh nhất trong thanh bên WordPress của bảng điều khiển. Dưới tab Cài đặt, bạn sẽ tìm thấy các tùy chọn để kết hợp và giảm các tệp HTML và CSS. Mặc dù việc rút gọn JavaScript chỉ có sẵn trong phiên bản pro.

Bạn đang tìm kiếm các plugin và plugin WordPress tốt nhất?

Tải xuống các plugin và WordPress chủ đề tốt nhất trên Envato và dễ dàng tạo trang web của bạn. Đã tải xuống nhiều hơn 49.720.000. [ĐỘC QUYỀN]

wp cài đặt bộ nhớ cache nhanh hơn.png

Tóm tắt

Nếu bạn muốn làm cho blog của mình nhanh hơn và có hiệu suất tốt hơn, bạn cần giảm kích thước của các tệp HTML, CSS và Javascript. Với tất cả các công cụ trực tuyến có sẵn, bạn có thể dễ dàng giảm mã của bất kỳ trang web nào.

Các plugin 9 WordPress để ẩn nội dung Blog của bạn khám phá tuyệt đối

Đối với những người sử dụng WordPress, bạn có sẵn các plugin mạnh mẽ để tự động thu nhỏ các tệp này với một vài cú nhấp chuột.

Khám phá thêm một số plugin WordPress cao cấp

Bạn có thể sử dụng các plugin WordPress khác để mang lại cái nhìn hiện đại và tối ưu hóa độ bám của blog hoặc trang web của bạn.

Chúng tôi cung cấp cho bạn ở đây một số plugin WordPress cao cấp sẽ giúp bạn làm điều đó.

1. Trang lỗi 404 Chuyển hướng đến Trang chủ hoặc Trang tùy chỉnh

Dưới đây là một trong những cách tốt nhất để dễ dàng thêm trang lỗi 404 sẽ chuyển hướng khách truy cập đến trang chủ hoặc trang được cá nhân hóa, sau khi kích hoạt plugin này. WordPress cao cấp.

Tất cả các trang lỗi 404 sẽ được chuyển hướng đến trang chủ hoặc đến một URL tùy chỉnh. Sử dụng plugin WordPress này, bạn sẽ cho phép Google giảm pagerank của trang web của bạn nếu nó có nhiều trang lỗi 404.

Khám phá quá Cách sửa lỗi 413 trên WordPress

Plugin WordPress này không chỉ chuyển hướng mà còn có thể là một giải pháp phù hợp để cải thiện thứ hạng của trang web của bạn trong kết quả của các công cụ tìm kiếm.

Tải về | Bản demo | Web hosting

2. Bộ nhớ cache Borlabs

WordPress là một nền tảng được cung cấp bởi cơ sở dữ liệu tạo ra nội dung động. Bạn càng có nhiều nội dung và plugin, càng nhiều truy vấn cơ sở dữ liệu được thực thi. Điều này có thể làm chậm hiệu suất của trang web của bạn, đặc biệt là khi cơ sở dữ liệu của bạn được đặt trên một máy chủ khác.

Plugin WordPress Borlabs Cache lưu nội dung được tạo động dưới dạng tệp tĩnh trên bộ nhớ máy chủ của bạn. Khi trang được yêu cầu, tệp tĩnh này được tải và gửi cho khách truy cập, nhanh hơn đáng kể so với các truy vấn cơ sở dữ liệu thông thường. Nhưng đó không phải là tất cả.

Xem thêm của chúng tôi Plugin 5 WordPress để làm sạch cơ sở dữ liệu trang web của bạn

Các trang của bạn chứa nhiều khoảng trắng hoặc bình luận HTML không cần thiết, làm tăng kích thước trang tổng thể. Borlabs Cache sẽ xóa tất cả chúng và sử dụng GZIP để nén các trang của bạn.

Khám phá Làm thế nào để hiển thị tất cả các ấn phẩm WordPress của bạn trên một trang duy nhất

Nhiều plugin có tệp JavaScript và CSS riêng, dẫn đến nhiều yêu cầu hơn trên máy chủ của bạn. Borlabs Cache kết hợp tất cả các tệp JavaScript và CSS này để trong trường hợp tốt nhất, khách truy cập của bạn chỉ cần tải một tệp JavaScript và một tệp CSS.

Tải về | Bản demo | Web hosting

3. Báo chí đa ngôn ngữ

Báo chí đa ngôn ngữ hoạt động với cài đặt nhiều trang của WordPress và cho phép bạn liên kết các bản dịch. Plugin đi kèm với các ngôn ngữ 174 được nhúng trong trình quản lý ngôn ngữ và nó hỗ trợ và không giới hạn số lượng trang web, vì vậy bạn có thể tạo và liên kết nhiều bản dịch như bạn muốn.

Điều đó tốt cho SEO vì nó sẽ cho phép bạn giữ ngôn ngữ của mình trên các bài đăng và trang riêng biệt và nếu bạn quyết định sử dụng bản dịch khác với plugin thì nội dung của bạn vẫn còn nguyên (ngay cả sau khi vô hiệu hóa hoặc xóa plugin Đa ngôn ngữ). Bên cạnh đó, bạn có thể thêm một widget dịch để chuyển đổi giữa các bản dịch một cách dễ dàng.

Dễ dàng tạo Cửa hàng trực tuyến của bạn

Tải xuống miễn phí WooCommerce, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress. [Đề xuất]

Khám phá Cách thêm đoạn mã bằng Gutenberg trên WordPress

Đa ngôn ngữ là một tùy chọn miễn phí tuyệt vời để thêm bản dịch vào trang web WordPress của bạn thông qua nhiều site. Ngoài ra, nếu bạn thấy rằng bạn cần nhiều tùy chọn hơn, bạn có thể chọn phiên bản pro có giá 75 đô la.

Tải về | Bản demo | Web hosting

Các tài nguyên được đề xuất khác

Chúng tôi cũng mời bạn tham khảo các tài nguyên dưới đây để đi xa hơn trong việc kiểm soát và kiểm soát trang web và blog của bạn.

Kết luận

Bài viết này chứa comments 0

Để lại một bình luận

địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

Trở lại đầu trang
2 cổ phiếu
cổ phiếu2
tweet
Enregistrer