VietNetwork.Vn

Bạn có muốn thu nhỏ các tập tin trên trang WordPress của mình không?

Giảm thiểu các tập tin CSS và JavaScript WordPress của bạn có thể làm cho chúng tải nhanh hơn và tăng tốc trang web WordPress của bạn.

Trong hướng dẫn này, mình sẽ chỉ cho bạn cách dễ dàng rút gọn các tập tin CSS/JavaScript trong WordPress để cải thiện hiệu suất và tốc độ.

Minification là gì và khi nào bạn cần?

Thuật ngữ 'minify' được sử dụng để mô tả một phương pháp làm cho kích thước tập tin trang web của bạn nhỏ hơn. Nó thực hiện điều này bằng cách loại bỏ khoảng trắng, dòng và các ký tự không cần thiết khỏi mã nguồn.

Đây là một ví dụ về mã CSS bình thường:

body {
margin:20px;
padding:20px;
color:#333333;
background:#f7f7f7;
}
h1 {
font-size:32px;
color#222222;
margin-bottom:10px;
}
Sau khi rút gọn mã, nó sẽ trông như thế này:

body{margin:20px;padding:20px;color:#333;background:#f7f7f7}
h1{font-size:32px;margin-bottom:10px}
Thông thường, chỉ nên rút gọn các tập tin được gửi đến trình duyệt của người dùng. Điều này bao gồm các tập tin HTML, CSS và JavaScript.

Bạn cũng có thể thu nhỏ các tập tin PHP, nhưng việc thu nhỏ nó sẽ không cải thiện tốc độ tải trang cho người dùng của bạn. Đó là bởi vì PHP là ngôn ngữ lập trình phía máy chủ, có nghĩa là nó chạy trên các máy chủ trước khi bất kỳ thứ gì được gửi đến trình duyệt web của khách truy cập.

Ưu điểm của việc thu nhỏ tập tin là tốc độ và hiệu suất WordPress được cải thiện, vì các tập tin nhỏ gọn tải nhanh hơn.

Tuy nhiên, một số chuyên gia tin rằng việc cải thiện hiệu suất là rất nhỏ đối với hầu hết các trang web và không đáng để gặp rắc rối. Minification chỉ loại bỏ một vài kilobyte dữ liệu trên hầu hết các trang web WordPress. Bạn có thể giảm thời gian tải trang nhiều hơn bằng cách tối ưu hóa hình ảnh cho web.

Nếu bạn đang cố gắng đạt được điểm số 100/100 trên Google Pagespeed hoặc công cụ GTMetrix, thì việc rút gọn CSS và JavaScript sẽ cải thiện đáng kể điểm số của bạn.

Chúng ta hãy xem cách dễ dàng rút gọn CSS / JavaScript trên trang web WordPress của bạn.

Mình sẽ xem xét 3 tùy chọn khác nhau mà bạn có thể chọn:

• Phương pháp 1. Giảm thiểu CSS / JavaScript trong WordPress bằng WP Rocket (Khuyến nghị)
• Phương pháp 2. Giảm thiểu CSS / JavaScript trong WordPress bằng cách sử dụng SiteGround
• Phương pháp 3. Giảm thiểu CSS / JavaScript bằng Autoptimize

Hãy bắt đầu với phương pháp được đề xuất hàng đầu của mình.

1. Phương pháp 1. Giảm thiểu CSS / JavaScript trong WordPress bằng WP Rocket

Phương pháp này dễ dàng hơn và được khuyến khích cho tất cả người dùng. Nó hoạt động bất kể bạn đang sử dụng dịch vụ lưu trữ WordPress nào.

Đầu tiên, bạn cần cài đặt và kích hoạt plugin WP Rocket. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của mình về cách cài đặt plugin WordPress.

WP Rocket là plugin bộ nhớ đệm WordPress tốt nhất trên thị trường. Nó cho phép bạn dễ dàng thêm bộ nhớ đệm vào WordPress và cải thiện đáng kể tốc độ trang web và thời gian tải trang.

Để biết thêm chi tiết, hãy xem hướng dẫn của mình về cách cài đặt và thiết lập WP Rocket trong WordPress.

Sau khi kích hoạt, bạn cần truy cập trang Settings >> WP Rocket và chuyển sang tab 'File Optimization'.


Từ đây, bạn cần kiểm tra tùy chọn Minify CSS files.

Sau đó, WP Rocket sẽ hiển thị cho bạn một cảnh báo rằng điều này có thể phá vỡ mọi thứ trên trang web của bạn. Tiếp tục và nhấp vào nút 'Activate Minify CSS'. Bạn luôn có thể hủy kích hoạt tùy chọn này nếu nó gây ra bất kỳ sự cố nào với trang web của bạn.


Tiếp theo, bạn cần kéo xuống phần tập tin JavaScript bên dưới.

Tại đây, chỉ cần chọn hộp bên cạnh tùy chọn 'Minify JavaScript files'.


Một lần nữa, bạn sẽ thấy cảnh báo rằng điều này có thể phá vỡ mọi thứ trên trang web của bạn. Tiếp tục và nhấp vào nút 'Activate Minify JavaScript'.

Sau đó, đừng quên nhấp vào nút Save thay đổi để lưu trữ cài đặt của bạn.

WP Rocket bây giờ sẽ bắt đầu thu nhỏ các tập tin CSS và JavaScript của bạn. Bạn có thể xóa bộ nhớ cache của mình trong cài đặt plugin để đảm bảo rằng nó bắt đầu sử dụng CSS và JavaScript được rút gọn cho người truy cập trang web tiếp theo.

2. Phương pháp 2. Giảm thiểu CSS / JavaScript trong WordPress bằng cách sử dụng SiteGround

Nếu bạn đang sử dụng SiteGround làm nhà cung cấp dịch vụ lưu trữ WordPress của mình, thì bạn có thể giảm thiểu các tập tin CSS bằng cách sử dụng SiteGround Optimizer.

SiteGround Optimizer là một plugin tối ưu hóa hiệu suất hoạt động trên nền tảng của riêng họ. Nó hoạt động tốt với PHP Ultrafast của họ để cải thiện thời gian tải trang web của bạn.

Chỉ cần cài đặt và kích hoạt plugin SiteGround Optimizer trên trang WordPress của bạn. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của mình về cách cài đặt plugin WordPress.

Sau đó, bạn cần nhấp vào menu SG Optimizer trong thanh bên quản trị viên WordPress của mình.


Điều này sẽ đưa bạn đến cài đặt SG Optimizer.

Từ đây, bạn cần nhấp vào nút 'Go To Frontend' trong phần 'Other Optimizations'.


Trên màn hình tiếp theo, bạn cần bật nút gạt bên cạnh tùy chọn 'Minify CSS files'.


Tiếp theo, bạn cần chuyển sang tab JavaScript và bật nút gạt bên cạnh tùy chọn 'Minify JavaScript Files'.

Đó là tất cả. Giờ đây, bạn có thể làm trống bộ nhớ cache WordPress của mình và truy cập trang web của bạn để tải các phiên bản rút gọn của tập tin CSS và JS.

3. Phương pháp 3. Giảm thiểu CSS / JavaScript bằng Autoptimize

Phương pháp này được khuyến nghị cho những người dùng không ở trên SiteGround và không sử dụng WP Rocket.

Đầu tiên, bạn cần cài đặt và kích hoạt plugin Autoptimize. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của mình về cách cài đặt plugin WordPress.

Sau khi kích hoạt, bạn cần truy cập trang Settings >> Autoptimize tối ưu hóa để cấu hình cài đặt plugin.

Từ đây, trước tiên bạn cần kiểm tra tùy chọn 'Optimize JavaScript Code' trong Tùy chọn JavaScript.


Sau đó, bạn cần cuộn xuống Tùy chọn CSS và chọn hộp bên cạnh tùy chọn 'Optimize CSS code'.


Đừng quên nhấp vào nút Save Changes để lưu cài đặt của bạn.

Sau đó, bạn có thể nhấp vào nút Empty Cache để bắt đầu sử dụng các tập tin được thu nhỏ của mình. Plugin này cũng có thể được sử dụng để sửa lỗi JavaScript và CSS chặn hiển thị trong WordPress.

Mình hy vọng bài viết này đã giúp bạn giảm thiểu CSS và JavaScript trên trang web WordPress của mình. Bạn cũng có thể muốn xem hướng dẫn của mình về cách tối ưu hóa các quan trọng web cốt lõi trong WordPress và làm theo hướng dẫn hiệu suất WordPress cuối cùng của mình.