Cài đặt plugin W3 Total Cache Minify: Cách chọn loại nhúng? Kinh nghiệm khắc phục sự cố và lời khuyên hữu ích của tôi

Bạn đang gặp khó khăn trong việc chọn loại nhúng phù hợp cho W3 Total Cache Minify? Bài viết này chia sẻ kinh nghiệm thực tế của một quản trị viên web và cung cấp hướng dẫn từng bước để chọn chính xác loại nhúng Minify phù hợp, tránh tình trạng không nhất quán về kiểu dáng trang web và lỗi tải trang. Bài viết cũng bao gồm giải pháp thiết lập đơn giản mà ngay cả người mới bắt đầu cũng có thể dễ dàng áp dụng.WordPress Tăng tốc mà không bị va chạm!

Tôi đang tối ưu hóa một trang web và khi mở cài đặt Minify trong W3 Total Cache, tôi hoàn toàn choáng váng. Menu thả xuống cho loại nhúng có bốn tùy chọn: Mặc định (Chặn), Sử dụng JS cho Không chặn, Sử dụng "Bất đồng bộ" cho Không chặn và Sử dụng "Trì hoãn" cho Không chặn.

Tôi suy nghĩ một lát, tất cả chuyện này là sao vậy?

Hãy tin tôi, bạn không phải là người duy nhất. Bốn lựa chọn này có thể khiến ngay cả người mới bắt đầu cũng bối rối, chứ đừng nói đến người đã sử dụng WordPress nhiều năm. Bài viết này trình bày những khó khăn tôi đã gặp phải và những bài học tôi đã rút ra được. Bạn không cần phải tham khảo tài liệu; chỉ cần làm theo hướng dẫn của tôi.

Bốn loại nhúng này chính xác là gì?

Trước tiên, hãy cùng thảo luận xem bốn lựa chọn này thuộc loại nhân vật nào.

Mặc định (Bị chặn)Đây được gọi là chặn mặc định. Đó là phương pháp đơn giản nhất: trình duyệt dừng lại khi gặp một tập lệnh, tải xuống và thực thi toàn bộ tập lệnh đó, rồi tiếp tục hiển thị trang. Nghe có vẻ đáng tin cậy, phải không? Nhưng nhược điểm là quá trình tải trang ban đầu sẽ bị chặn; người dùng sẽ phải đợi tập lệnh chạy xong mới có thể thấy nội dung.

Sử dụng JavaScript cho chế độ không chặn.Điều này khá thú vị. Thay vì viết trực tiếp các thẻ `<script>` trên trang, nó trước tiên xuất ra một đoạn mã nhỏ, sau đó tự động chèn các đoạn mã cần tải vào trang thông qua JavaScript sau khi trang đang chạy. Bằng cách này, trang có thể được hiển thị trước, và các đoạn mã có thể được tải dần dần. Nghe có vẻ tuyệt vời, phải không? Tuy nhiên, vấn đề là quá trình chèn động này có thể làm gián đoạn thứ tự thực thi ban đầu của các đoạn mã. Nếu một số đoạn mã trên trang của bạn phụ thuộc nhiều vào thứ tự thực thi, thì có thể phát sinh sự cố.

Sử dụng "asynchronous" cho chế độ không chặn.Điều này bao gồm việc thêm thuộc tính `async` vào thẻ `<script>`. Tập lệnh sẽ được tải xuống bất đồng bộ trong nền và thực thi ngay sau khi tải xuống xong, mà không cần trang web phải chờ. Tuy nhiên, nhược điểm là thứ tự thực thi hoàn toàn không thể kiểm soát; tập lệnh nào tải xuống xong trước sẽ được thực thi trước, bất kể thứ tự bạn đã chỉ định trong mã.

Sử dụng "delay" cho chế độ không chặn.Đây là ý nghĩa của việc thêm thuộc tính `defer`. Đoạn mã sẽ chờ cho đến khi toàn bộ trang được phân tích cú pháp xong trước khi thực thi, và điều quan trọng là nó sẽ giữ nguyên thứ tự ban đầu bạn đã viết. Điều này khá thân thiện với người dùng, vì nó không chặn màn hình đầu tiên cũng như không làm xáo trộn thứ tự các màn hình.

Tôi nên chọn cái nào?

Nói một cách đơn giản, bốn lựa chọn này giống như một câu hỏi trắc nghiệm:Bạn muốn tốc độ hay sự trật tự?

Đề xuất của tôi như sau:

Nếu trang web của bạn nhỏ, có ít mã script và bạn không có yêu cầu quá cao về tốc độ tải, thì sử dụng cài đặt mặc định (bị chặn) là lựa chọn dễ nhất. Mặc dù chậm hơn một chút, nhưng nó sẽ không gây ra bất kỳ vấn đề nào.

Nếu bạn muốn cải thiện tốc độ hiển thị màn hình đầu tiên và các tập lệnh của bạn không có sự phụ thuộc chặt chẽ kiểu "A phải thực thi trước B", hãy ưu tiên...Sử dụng "delay" cho chế độ không chặn.(hoãn lại). Đây gần như là giải pháp lý tưởng nhất hiện nay, vì nó không làm gián đoạn quá trình hiển thị cũng như không phá vỡ thứ tự thực hiện.

Nếu bạn thử dùng `defer` mà vẫn thấy một số hàm gặp sự cố, thì hãy xem xét...Sử dụng JavaScript cho chế độ không chặn.Giải pháp này có phần triệt để hơn, nhưng khả năng tương thích lại kém hơn một chút.

Sử dụng "asynchronous" cho chế độ không chặn.(Async) là tùy chọn tôi ít khuyến nghị nhất. Bởi vì thứ tự thực thi bị xáo trộn hoàn toàn, nó rất dễ bị lỗi trừ khi bạn hoàn toàn chắc chắn rằng tất cả các tập lệnh của mình đang chạy độc lập.

Hai sai lầm lớn mà tôi đã mắc phải

Nói thì dễ. Tôi đã viết ra hai sai lầm mình từng mắc phải; bạn có thể so sánh chúng với kinh nghiệm của bản thân để xem liệu có thể tránh được những sai lầm đó hay không.

Nhược điểm đầu tiên: Các giao diện WordPress tùy chỉnh không thể được xem trước theo thời gian thực.

Trước đây, khi tùy chỉnh giao diện, sau khi nhấn lưu, bản xem trước không tự động cập nhật. Tôi đã thực hiện một số thay đổi, làm mới trang, nhưng tình trạng vẫn vậy.

Sau một hồi điều tra, tôi phát hiện ra chức năng nén của Minify chính là nguyên nhân. Giải pháp rất đơn giản:

Truy cập plugin W3 Total CacheCài đặt chung,vặn to lên"nén"Bỏ chọn tùy chọn đó. Sau đó, nhấp vào mũi tên nhỏ bên dưới "Lưu cài đặt" ở góc trên bên phải và chọn "..."Lưu cài đặt và xóa bộ nhớ đệmBước này rất quan trọng; nếu bạn không xóa bộ nhớ cache, bạn vẫn sẽ thấy phiên bản cũ.

Sau khi hoàn tất, hãy quay lại phần tùy chỉnh giao diện, và chế độ xem trước trực tiếp sẽ trở lại bình thường.

Vấn đề thứ hai: Ô tìm kiếm của giao diện Astra không phản hồi khi nhấp chuột.

Tôi đã gặp phải vấn đề này cách đây khá lâu. Tôi đang sử dụng giao diện Astra, và một ngày nọ, tôi đột nhiên phát hiện ra rằng ô tìm kiếm không phản hồi dù tôi có nhấp chuột thế nào đi nữa. Lúc đầu, tôi nghĩ đó là vấn đề của chính giao diện, nhưng sau đó tôi phát hiện ra rằng nguyên nhân là do cài đặt Minify của W3TC.

Giải pháp như sau:

Vào W3 Total Cache → Cài đặt chung → Cài đặt nén nâng cao → JS → Cài đặt công cụ thu nhỏ → Cài đặt ngôn ngữ, và thay đổi loại nhúng thành một trong hai loại sau:

1. Trước đây, việc không chặn được thực hiện bằng JavaScript.
2. Sau đó, sử dụng JavaScript để xử lý không chặn.

Tương tự, việc xóa bộ nhớ cache và làm mới trang sẽ giúp hộp tìm kiếm hoạt động bình thường trở lại.

Về lý do tại sao hai tùy chọn này được chọn thay vì các tùy chọn khác, tôi đã tìm hiểu. Nói một cách đơn giản, các thành phần giao diện người dùng của theme Astra khá nhạy cảm với thời điểm thực thi script, và một số phương thức không chặn có thể khiến việc liên kết sự kiện thất bại. Sử dụng chế độ "không chặn với JS" đảm bảo rằng script chỉ được thực thi sau khi trang đã tải xong, đồng thời tránh được tình trạng thực thi không đồng bộ như khi sử dụng async.

Danh sách các địa điểm cần tham quan

Cuối cùng, đây là danh sách kiểm tra bạn có thể làm theo trực tiếp:

Bước đầu tiên là làm rõ mục tiêu của bạn. Bạn muốn tốc độ tải trang ban đầu nhanh nhất, hay ưu tiên sự ổn định và hoạt động không lỗi? Điều này sẽ quyết định loại nhúng nào bạn nên sử dụng.

Bước thứ hai là không nên thay đổi mọi thứ cùng một lúc. Trước tiên, hãy tìm một trang ít quan trọng hơn để thử nghiệm, quan sát nó trong một hoặc hai ngày, và chỉ áp dụng cho toàn bộ trang web nếu bạn chắc chắn rằng không có vấn đề gì.

Thứ ba, luôn luôn xóa bộ nhớ cache sau mỗi lần sửa đổi. Cơ chế lưu cache của W3TC sẽ ngăn bạn xem được những thay đổi mới nhất, vì vậy bước "xóa bộ nhớ cache và kiểm tra lại" là vô cùng cần thiết.

Thứ tư, hãy sử dụng công cụ dành cho nhà phát triển của trình duyệt hoặc các công cụ như PageSpeed ​​Insights để so sánh tốc độ tải trang trước và sau khi tối ưu hóa. Hãy để dữ liệu tự nói lên tất cả, chứ không chỉ dựa vào cảm nhận chủ quan của bạn.

Viết ở cuối

Thành thật mà nói, khi lần đầu tiên nhìn thấy kiểu thiết lập nhúng này, tôi đã rất ngạc nhiên. Chế độ chặn mặc định có vẻ quá chậm, trong khi chế độ bất đồng bộ không đảm bảo thứ tự thực hiện, còn chế độ trì hoãn có thể gây ra các vấn đề tương thích. Tôi cảm thấy không chắc chắn nên chọn tùy chọn nào.

Nhưng sau đó tôi nhận ra đó là một sự đánh đổi. Bạn không thể có cả tốc độ nhanh nhất và độ ổn định cao nhất; bạn luôn phải hy sinh một trong hai. Kinh nghiệm của tôi là sử dụng `defer` trước, hiện là giải pháp không chặn an toàn nhất, và sau đó sử dụng `callback` nếu có vấn đề phát sinh.

Nếu bạn gặp phải những vấn đề tương tự, hoặc nếu bạn vẫn còn gặp các vấn đề khác sau khi đã làm theo phương pháp của tôi, đừng ngần ngại thảo luận. Phát triển website là cả một quá trình thử và sai; không ai là ngoại lệ.

Cảm ơn bạn đã đọc bài viết của tôi. Hẹn gặp lại lần sau.