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, chỉ cần giảm thiểu js và CSS và xem sự khác biệt, đi đến WP Speed of light > Tăng tốc > Nhóm & Thu gọn, bạn sẽ có thể xem menu với tất cả các tùy chọn để thu gọn. Phiên bản miễn phí của plugin bao gồm tùy chọn nhóm và thu gọn nhưng loại trừ tệp hình ảnh chỉ có sẵn trong phiên bản Addon PRO

PRO addon các tùy chọn là: 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 rút gọn), di chuyển tập lệnh đến chân trang (nó cho phép bạn tăng tốc trang web của mình bằng cách di chuyển tất cả các tập lệnh đã được rút gọn đến chân trang), Nhóm phông chữ và Phông chữ Google (Nhóm phông chữ cục bộ và phông chữ Google trong một tệp duy nhất để được phục vụ nhanh hơn) và Loại trừ tệp nâng cao.
 
Bạn có tùy chọn rút gọn, như bạn có thể thấy, JS, CSS và cả HTML bây giờ 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ả các tài nguyên của bạn sẽ được rút gọn ngay lập tức, nó có thể gặp sự cố vì đó là cấu hình nâng cao nhưng mọi thứ có thể được khắc phục bằng cách loại trừ một số mã và tệp (với 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 tôi sẽ để WordPress tối ưu hóa CSS và JS chỉ bằng cách kích hoạt các tùy chọn nhóm trên bảng điều khiển, đi đến WP Speed of Light > Tăng tốc > Nhóm & Thu gọn, bạn sẽ có thể xem 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 có bao nhiêu tệp, 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? Vâng! bạn sẽ có thể tối ưu hóa độ đậm của phông chữ và nó sẽ dễ dàng như kích hoạt tùy chọn trên cài đặt, chỉ cần đi đến WP Speed of Light > Tăng tốc > Nhóm & Tối ưu hóa > Nhóm phông chữ và Phông chữ Google tùy chọn.
Tùy chọn nhóm phông chữ và phông chữ Google sẽ cho phép bạn nhóm chúng trong một tệp duy nhất để được phục vụ nhanh hơn, điều này khá tiện dụng vì hầu hết các theme và bố cục WordPress đi kèm với 2 hoặc nhiều phông chữ theo mặc định với tất cả các kiểu (đều, đậ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 rút gọn có thể gây ra sự cố trong trang web của bạn, nó chủ yếu xảy ra khi bạn nhóm các tệp nhất định có chứa lỗi trong lỗi cú pháp hoặc biến tương tự, tên lớp. Đó là lý do tại sao với tùy chọn "loại trừ rút gọn tệp", bạn sẽ có thể loại trừ các tệp khỏi quá trình rút gọn và nhóm, hãy đi đến WP Speed of Light > Tăng tốc > Nhóm & Rút gọn, bạn sẽ có thể thấy tùy chọn 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ê tập lệnh được tải trên website, WP Speed of Light cần quét thư mục của bạn để liệt kê chúng. Chúng thường được chứa trong thư mục /wp-content của bạn, nhóm tất cả các plugin và theme. 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 một tệp gây ra sự cố, khi kích hoạt nhóm tệp và rút gọn, bạn có thể loại trừ nó 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 và bằng cách này, dễ dàng giải quyết bất kỳ vấn đề nào có thể tồn tại khi tối ưu hóa tài nguyên… Quá trình nhóm và tối ưu hóa vẫn cần một số công việc, đặc biệt là trong việc kiểm tra, nhưng nó chắc chắn đáng để nỗ lực, và bạn sẽ luôn có thể kiểm tra cách nó 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 tiếp tục và thử WP Speed of Light: https://www.joomunited.com/wordpress-products/wp-speed-of-light