Cách nhóm và tối ưu tài nguyên trong WordPress

Có được hiệu suất tốt nhất có thể là ước mơ của tất cả mọi người quản lý một trang web, nhóm và thu nhỏ tài nguyên trên WordPress là một trong những điều tốt nhất chúng ta có thể làm cho điều đó nhưng nó có thể thực sự khó khăn. Nhóm tất cả các tài nguyên của bạn (chủ yếu là tệp css và js) có thể khiến trang web của bạn gặp rủi ro nếu bạn không phải là lập trình viên vì nó có thể gây ra xung đột.

WP Speed of Light là giải pháp tốt nhất để thực hiện trang web wordpress của bạn vì nó có rất nhiều tùy chọn để làm cho trang web của bạn tải nhanh với một bảng điều khiển thân thiện thực sự và vâng, một trong những tùy chọn này là nhóm và thu nhỏ tài nguyên. Việc bao gồm/loại trừ tệp đơn lẻ khỏi quá trình nhóm và thu nhỏ là chìa khóa cho tối ưu hóa tùy chỉnh mà không có xung đột.

Chúng tôi sẽ sử dụng một trang web WordPress ví dụ cho bài đăng blog này và chúng tôi sẽ học cách thực hiện điều này để quá trình cấu hình mọi thứ sẽ dễ dàng hơn.

Cách thực hiện tối ưu hóa JS và CSS trong WordPress

Hãy cùng tìm hiểu cách thực hiện tối ưu hóa JavaScript và CSS cho WordPress nhưng trước tiên, chúng ta cần biết tối ưu hóa nghĩa là gì “Tối ưu hóa đề 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 tài nguyên được xử lý bởi trình duyệt - ví dụ: các bình luận mã và định dạng, loại bỏ mã không sử dụng, sử dụng tên biến và hàm ngắn hơn, v.v.”.

Bây giờ những gì chúng ta sẽ làm là kiểm tra tốc độ trang web của chúng ta để xem những thay đổi, ví dụ này, chúng ta đang sử dụng một trang web với woocommerce và một số sản phẩm để lần đầu tiên nó sẽ tải chậm một chút.

Vâng, 2,79 giây để tải trang, không tệ nhưng có thể tốt hơn, hãy thử nén file JavaScript và CSS xem sự khác biệt, vào WP Speed of light > SpeedUp > Group & Minify, bạn sẽ thấy menu với tất cả các tùy chọn để nén. Phiên bản miễn phí của plugin đã bao gồm tùy chọn nhóm và nén nhưng tính năng loại trừ tệp hiển thị chỉ có trong phiên bản PRO Addon .

PRO addon bao gồm: Loại trừ tập lệnh nội tuyến (Loại trừ tập lệnh nội tuyến khỏi quá trình thu nhỏ), di chuyển tập lệnh xuống chân trang (cho phép bạn tăng tốc trang web bằng cách di chuyển tất cả các tập lệnh đã được thu nhỏ xuống chân trang), Nhóm phông chữ và Phông chữ Google (Nhóm các phông chữ cục bộ và phông chữ Google vào một tệp duy nhất để được phục vụ nhanh hơn) và Loại trừ tệp nâng cao.
 
Như bạn thấy, bạn có tùy chọn thu nhỏ JS, CSS và cả HTML, chỉ cần kích hoạt các tùy chọn này, nhấp vào lưu và tất cả tài nguyên của bạn sẽ được thu nhỏ ngay lập tức. Quá trình này có thể gặp sự cố vì đây là cấu hình nâng cao, nhưng mọi thứ đều có thể được khắc phục bằng cách loại trừ một số mã và tệp (với tiện ích addon).

Bây giờ tất cả công việc của lập trình viên có thể mất hàng giờ đã được thực hiện chỉ trong vài giây.

Bước tiếp theo, WordPress tối ưu hóa CSS và JS

Với plugin này, chúng ta sẽ cho phép WordPress tối ưu hóa CSS và JS chỉ bằng cách bật tùy chọn nhóm trên bảng điều khiển. Hãy vào WP Speed of Light > SpeedUp > Group & Minify, bạn sẽ thấy một bảng điều khiển với các tùy chọn để nhóm CSS và JS.

Các tùy chọn này cho phép bạn:

• Nhóm JS: Nhóm một số tệp Javascript vào một tệp duy nhất sẽ giảm thiểu số lượng yêu cầu HTTP
• Nhóm CSS: Nhóm một số tệp CSS vào một tệp duy nhất sẽ giảm thiểu số lượng yêu cầu HTTP.

Yêu cầu HTTP: đây là những yêu cầu được gửi đến máy chủ mỗi khi chúng ta chọn một cái gì đó hoặc đi đến một trang khác trong cùng một trang web để nếu chúng ta có thể giảm các yêu cầu này, thời gian tải sẽ giảm.

Để kiểm tra số lượng tệp và tập lệnh bạn có thể nhóm trên website, chỉ cần mở bảng điều khiển trình duyệt (nhấp chuột phải > Kiểm tra hoặc F12) và mở bảng điều khiển mạng.

Sau đó, bạn có thể liệt kê tất cả các tệp được tải theo loại, ở đây trong ví dụ này, tôi chỉ nhấp vào danh sách tệp JS.

Bây giờ khi chúng ta đang ở trong cài đặt này, chỉ cần kích hoạt các tùy chọn nhóm (Nhóm CSS và Nhóm JS) và nhấp vào lưu, hãy lưu ý rằng các tùy chọn này phải được sử dụng một cách thận trọng và bạn sẽ phải kiểm tra trang của mình vì nó có thể gây ra xung đột.

Hãy nghiêm túc và tối ưu hóa độ đậm của phông chữ

Cái gì? Tối ưu hóa khác nữa à? Đúng vậy! Bạn có thể tối ưu hóa độ đậm của phông chữ và việc này rất dễ dàng, chỉ cần bật tùy chọn trong cài đặt, vào WP Speed of Light > SpeedUp > Group & Minify > Group fonts and Google Fonts .
Tùy chọn Group fonts and Google Fonts sẽ cho phép bạn nhóm chúng vào một tệp duy nhất để tải nhanh hơn, điều này khá tiện lợi vì hầu hết themevà layout WordPress đều đi kèm với 2 hoặc nhiều phông chữ theo mặc định với đầy đủ các biến thể (thường, đậm, nghiêng...). 

Chỉ cần kích hoạt tùy chọn đó, nhấp vào lưu và tất cả các phông chữ sẽ được nhóm lại.

Bây giờ chúng ta đã kích hoạt tất cả các tùy chọn để thu nhỏ và nhóm các tài nguyên, chúng ta nên thấy sự khác biệt về thời gian tải của trang web, Hãy kiểm tra tốc độ.

Thật tuyệt vời! Từ 2,8 đến 0,56 giây! Như chúng tôi đã nói với bạn ngay từ đầu bài viết này, chúng tôi có thể cải thiện thời gian tải ;)

Cách sử dụng loại trừ tối ưu hóa tệp

Việc nén mã có thể gây ra sự cố cho trang web của bạn, chủ yếu xảy ra khi bạn nhóm các tệp nhất định chứa lỗi cú pháp hoặc lỗi tương tự về biến, tên lớp. Đó là lý do tại sao với tùy chọn "loại trừ tệp khỏi quá trình nén", bạn có thể loại trừ các tệp khỏi quá trình nén và nhóm. Hãy vào WP Speed of Light > SpeedUp > Group & Minify, bạn sẽ thấy tùy Loại trừ tệp nâng cao .

Để sử dụng loại trừ tệp nâng cao, trước tiên bạn sẽ phải chạy quét, kích hoạt tùy chọn và nhấp vào Chạy Quét.

 
Để có thể liệt kê các tập lệnh được tải trên websitethemetheme themethemeWP Speed of Lightcần quét thư mục của bạn để liệt kê chúng. Thông thường, tất cả chúng đều nằm trong thư mục /wp-content, nơi tập hợp tất cả các plugin và. Chọn thư mục đó (ít nhất) và nhấp vào cần quét thư mục của bạn để liệt kê chúng. Thông thường, tất cả chúng đều nằm trong thư mục /wp-content, nơi tập hợp tất cả các plugin và. Chọn thư mục đó (ít nhất) và nhấp vào themetheme themethemecần quét thư mục của bạn để liệt kê chúng. Thông thường, tất cả chúng đều nằm trong thư mục /wp-content, nơi tập hợp tất cả các plugin và. Chọn thư mục đó (ít nhất) và nhấp vào cần quét thư mục của bạn để liệt kê chúng. Thông thường, tất cả chúng đều nằm trong thư mục /wp-content, nơi tập hợp tất cả các plugin và. Chọn thư mục đó (ít nhất) và nhấp vào “Quét ngay”.

Nó sẽ chạy quét, cuối cùng, nhấp vào xem kết quả khi quá trình quét hoàn tất.

Danh sách các tệp được phân loại theo loại (Tất cả, JS, CSS, Phông chữ) sẽ được hiển thị bên dưới. Nếu bạn xác định được một tệp gây ra sự cố khi kích hoạt nhóm tệp và nén, bạn có thể loại trừ tệp đó khỏi đây bằng cách sử dụng công tắc BẬT/TẮT.

Điều này sẽ giúp bạn loại trừ các tập tin và bằng cách đó, dễ dàng giải quyết mọi sự cố có thể phát sinh khi thu nhỏ tài nguyên… Quá trình nhóm và thu nhỏ vẫn cần một số thao tác, đặc biệt là trong giai đoạn thử nghiệm, nhưng chắc chắn đáng để nỗ lực, và bạn sẽ luôn có thể kiểm tra cách thức hoạt động bằng cách chạy thử nghiệm tốc độ trực tiếp từ WP Speed of Light.
 
Hãy thử WP Speed of Light: https://www.joomunited.com/wordpress-products/wp-speed-of-light