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 701.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 mình. Bây giờ chúng ta không nói về việc cắt giảm một nửa tốc độ tải trang của bạn hay bất cứ thứ gì, nhưng khi nói đến tốc độ trang web của bạn, bất kỳ chút nào cũng đều quan trọng.

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 đối với thứ hạng của 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. Các ký tự này bao gồm dấu cách, dấu 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 giảm thiểu 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.

Đọ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 điều này sẽ tiết kiệm được bao nhiêu dung lượng khi thu nhỏ 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 thủ công, kỹ thuật bạn có thể. Nhưng bạn sẽ có nguy cơ mắc lỗi cao và lãng phí thời gian quý báu của mình 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 các ngôn ngữ lập trình để giảm kích thước tệp trang web của mình. Giảm thiểu đã trở thành một thực tế phổ biến 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í) có sẵn để thực hiện công việc cho bạn.

Xem thêm 6 plugin WordPress để thổi luồng sinh khí mới vào các bài viết của bạn

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

    • cssminifier.com et javascript-minifier.com (CSS và JS) - Hai trình thu nhỏ này của Andrew Chilton rất dễ sử dụng. Bạn chỉ cần dán mã của mình, 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 & JS) - Công cụ nén / rút gọn trực tuyến này hỗ trợ các loại mã 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à bạn thậm chí có thể kiểm tra mã nén để tìm lỗi.
    • csscompressor.net (Chỉ dành cho CSS) - Trình nén CSS trực tuyến này nhanh chóng, dễ dàng và miễn phí để sử dụng.
    • jscompress.com (Chỉ JS) - Công cụ nén JavaScript này cho phép bạn nén mã JavaScript bằng cách 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. Điều này lý tưởng để kết hợp các tệp JavaScript thành một tệp duy nhất để có tốc độ tải trang tốt hơn.
    • Dan's Tools - Dan's Tools đề xuất un giảm thiểu CSS và để 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. Chúng không cung cấp bất kỳ tùy chọn nâng cao nào, nhưng chúng rất tuyệt vời cho các mục đích thu nhỏ thông thường.
    • refresh-sf.com (HTML, CSS và JS) - Máy 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ỉ JS) - Trình biên dịch đóng cửa 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 giảm thiểu 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 của vị trí của tệp js và sau đó chọn cách bạn muốn mã được tối ưu hóa và đị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ác trình thu nhỏ 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 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 trình thu nhỏ CSS. Sau đó, dán mã CSS vào ô 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.

Đó là tất cả!

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 trong WordPress bằng Plugin

Cách dễ nhất để giảm thiểu HTML, CSS và JavaScript của bạn trong WordPress là sử dụng một 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ỉ với một vài lần nhấp vào nút.

Có rất nhiều plugin sẽ hoàn thành 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
Autoptimize có lẽ là plugin WordPress minify phổ biến nhất. Nó phổ biến vì nó dễ sử dụng và được tích hợp các tính năng mạnh mẽ. Nó có thể đóng gói (kết hợp các tập lệnh), thu nhỏ và lưu mã vào bộ nhớ cache. Như một phần thưởng, bạn có các tùy chọn bổ sung để tối ưu hóa Phông chữ Google, 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, 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 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 việc tối ưu hóa mã của bạn.

tùy chọn css advanced.jpg

Nó ít nhiều là như vậy! 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 bảng điều khiển WordPress. 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 thu gọn 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ữ

Multilingual Press 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 174 ngôn ngữ được tích hợp 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 bao nhiêu bản dịch tùy thích.

Đ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