Tối ưu tốc web wordpress với WP Rocket

Đầu tiên đi đến Cài đặt -> WP Rocket và bạn sẽ được đưa đến trang cài đặt của plugin. Có 10 tab hoặc phần bạn sẽ cần định cấu hình và điều chỉnh cài đặt cho plugin như sau:

1. Bảng Điều Khiển (Dashboard) (thanh mặc định)
2. Cài đặt bộ nhớ cache
3. Cài đặt tối ưu hóa tệp CSS & JS
4. Cài đặt phương tiện
5. Cài đặt tải trước
6. Cài đặt quy tắc nâng cao
7. Cài đặt cơ sở dữ liệu
8. Cài đặt CDN
9. Bổ trợ (Cloudflare)
10. Công cụ
⇒ Tiền thưởng: Cấu hình WP Rocket cho HTTP / 2
⇒ Tiền thưởng: Sử dụng WP Rocket với KeyCDN
⇒ Tiền thưởng: Những máy chủ web nào tương thích và hoạt động với WP Rocket?
⇒ Tiền thưởng: Tải xuống tệp cấu hình WP Rocket của tôi
⇒ Bây giờ chúng ta hãy đi qua cấu hình các cài đặt được đề xuất cho WP Rocket, cho mỗi phần trong số 10 phần.

Lưu ý: nội dung hình ảnh dưới đây của plugin là được mua License nên có phần khác khi bạn dùng License Free, nhưng bạn vẫn dùng tốt với license free

Bảng điều khiển cung cấp cho bạn thông tin về giấy phép của bạn và khi hết hạn. Bạn cũng có thể chọn tham gia để trở thành một Máy thử tên lửa (chương trình thử nghiệm beta) và Phân tích tên lửa (cho phép WP Rocket thu thập dữ liệu ẩn danh). Tại đây bạn cũng tìm thấy các liên kết để hỗ trợ và các câu hỏi thường gặp về WP Rocket.

Trong Bảng điều khiển, bạn có thể Xóa tất cả các tập tin lưu trữ (nên làm khi bạn đã định cấu hình xong cài đặt WP Rocket), Bắt đầu tải trước bộ đệm (tạo bộ đệm cho trang chủ của bạn và tất cả các liên kết nội bộ trên trang chủ) và Purge OPcache Nội dung (thanh lọc OPcahce để ngăn sự cố khi bạn cập nhật plugin WP Rocket).

1. Kích hoạt bộ nhớ đệm cho thiết bị di động nên được kích hoạt vì nó cho phép lưu vào bộ nhớ cache cho thiết bị di động và làm cho trang web của bạn thân thiện hơn với thiết bị di động.

Cũng chọn Tách tập tin bộ nhớ cache cho thiết bị di động. Bởi vì bộ đệm di động WP Rocket hoạt động an toàn nhất với cả hai tùy chọn được bật. Khi nghi ngờ, hãy giữ cả hai.

2. Kích hoạt bộ đệm để đăng nhập WordPress Người sử dụng, điều này chỉ được khuyến nghị kích hoạt khi bạn có trang web thành viên hoặc tương tự khi người dùng phải đăng nhập để xem nội dung.

3. Tuổi thọ bộ nhớ cache được tự động đặt thành 10 giờ và điều này có nghĩa là các tệp được lưu trong bộ nhớ cache sẽ tự động bị xóa sau 10 giờ trước khi được tạo lại. Nếu bạn hiếm khi cập nhật trang web hoặc có nhiều tĩnh nội dung, bạn có thể tăng này.

Lưu và kiểm tra, kỹ lưỡng! Vô hiệu hóa cài đặt nếu bạn nhận thấy bất cứ điều gì bị hỏng trên trang web của bạn.

Giảm thiểu tập tin giảm kích thước tập tin và có thể cải thiện thời gian tải. Giảm thiểu loại bỏ khoảng trắng và nhận xét khỏi các tệp tĩnh, cho phép trình duyệt và công cụ tìm kiếm xử lý nhanh hơn các tệp HTML, CSS và JavaScript.

Kết hợp các tập tin sẽ ghép các tệp thành các nhóm nhỏ hơn để đảm bảo tính tương thích của chủ đề / plugin và hiệu suất tốt hơn. Tuy nhiên, không nên ghép nối chỉ vào 1 tệp duy nhất vì các trình duyệt tải xuống nhanh hơn tới 6 tệp nhỏ hơn song song hơn 1-2 tệp lớn.

Kết hợp CSS và JS vào ít tệp hơn được coi là cách thực hành tốt nhất theo HTTP / 1, đó không nhất thiết là trường hợp với HTTP / 2. Nếu trang web của bạn chạy trên HTTP / 2, đây là những điều bạn nên xem xét khi cấu hình WP Rocket cho HTTP / 2.
1. Giảm thiểu các tệp HTML sẽ xóa khoảng trắng và bình luận để giảm kích thước của các trang web trên trang web của bạn.

2. Kết hợp các tệp Google Fonts sẽ giảm số lượng yêu cầu HTTP (đặc biệt nếu bạn đang sử dụng nhiều phông chữ).

3. Xóa chuỗi truy vấn từ tài nguyên tĩnh có thể cải thiện cấp hiệu suất trên GT Metrix. Cài đặt này sẽ loại bỏ chuỗi truy vấn phiên bản khỏi các tệp tĩnh (ví dụ: style.css? Ver = 1.0) và mã hóa nó thành tên tệp thay vào đó (ví dụ: style-1-0.css).

4. Giảm thiểu các tệp CSS sẽ xóa khoảng trắng và các bình luận để giảm kích thước tệp bản định kiểu.

5. Kết hợp các tệp CSS hợp nhất tất cả các tệp của bạn vào chỉ một tệp, điều này sẽ làm giảm số lượng yêu cầu HTTP. Không được đề xuất nếu trang web của bạn sử dụng HTTP / 2.

Quan trọng: Điều này có thể phá vỡ mọi thứ! Nếu bạn nhận thấy bất kỳ lỗi nào trên trang web của mình sau khi kích hoạt cài đặt này, chỉ cần tắt nó một lần nữa và trang web của bạn sẽ trở lại bình thường.

6. Tối ưu hóa phân phối CSS loại bỏ CSS chặn hiển thị trên trang web của bạn để có thời gian tải nhanh hơn. Điều này có nghĩa là trang của bạn sẽ bắt đầu tải mà không có kiểu CSS và đây là điều mà Google PageSpeed ​​Insights cân nhắc khi ‘chấm điểm’ tốc độ trang.

CSS đường dẫn quan trọng có nghĩa là trang của bạn sẽ bắt đầu tải mà không cần tất cả các kiểu CSS. Điều đó có nghĩa là nó có thể trông hơi lạ trong một vài khoảnh khắc trong khi tải.

Này được gọi là FOUC (flash của nội dung chưa được lọc). Để tránh điều này, bạn phải sử dụng cái được gọi là CSS đường dẫn quan trọng. Điều này có nghĩa là CSS cho nội dung ở đầu trang của bạn phải được đặt trực tiếp trong HTML để tránh FOUC trong khi tải trang.

Để tạo CSS đường dẫn quan trọng, bạn có thể sử dụng công cụ tạo CSS đường dẫn quan trọng này.

7. Giảm thiểu các tệp JavaScript xóa khoảng trắng và các bình luận để giảm kích thước của các tệp JS.

8. Kết hợp các tệp JavaScript kết hợp thông tin JavaScripts của trang web của bạn ít tệp hơn, giảm yêu cầu HTTP. Không được đề xuất nếu trang web của bạn sử dụng HTTP / 2.

Quan trọng: Điều này có thể phá vỡ mọi thứ! Nếu bạn nhận thấy bất kỳ lỗi nào trên trang web của mình sau khi kích hoạt cài đặt này, chỉ cần tắt nó một lần nữa và trang web của bạn sẽ trở lại bình thường.

9. Tải JavaScript hoãn lại loại bỏ JS chặn hiển thị trên trang web của bạn và có thể cải thiện thời gian tải. Đây là điều mà Google PageSpeed ​​Insights cân nhắc khi ‘chấm điểm’ tốc độ trang.

10. Chế độ an toàn cho JQuery đảm bảo hỗ trợ cho các tham chiếu jQuery nội tuyến từ các chủ đề và plugin bằng cách tải jQuery ở đầu tài liệu dưới dạng tập lệnh chặn kết xuất.

Lưu và kiểm tra, kỹ lưỡng! Vô hiệu hóa cài đặt nếu bạn nhận thấy bất cứ điều gì bị hỏng trên trang web của bạn.

1. Tải hình ảnh lười biếng có nghĩa là hình ảnh sẽ chỉ được tải khi chúng nhập (hoặc sắp nhập) chế độ xem, tức là chỉ được tải khi người dùng cuộn xuống trang. Tải nhanh giúp giảm số lượng yêu cầu HTTP có thể cải thiện thời gian tải.

(Đôi khi tôi vô hiệu hóa tải hình ảnh lười biếng, chỉ vì khi bật tải lười biếng, hãy neo liên kết chỉ vào một vị trí bên dưới hình ảnh được tải lười biếng cuộn đến vị trí sai của trang web)

2. Tải xuống iframe và video có nghĩa là iframe và video sẽ chỉ được tải khi chúng nhập (hoặc sắp nhập) chế độ xem, tức là chỉ được tải khi người dùng cuộn xuống trang. Tải nhanh giúp giảm số lượng yêu cầu HTTP có thể cải thiện thời gian tải.

3. Thay thế iframe YouTube bằng hình ảnh xem trước có thể cải thiện đáng kể thời gian tải của bạn nếu bạn có nhiều video YouTube trên một trang.

Có thể tắt Lazyload trên từng trang / bài đăng riêng lẻ (bạn tìm thấy cài đặt này trong thanh bên của bài đăng / trang)

4. Vô hiệu hóa biểu tượng cảm xúc nên bị vô hiệu hóa vì nên sử dụng biểu tượng cảm xúc mặc định của trình duyệt của khách truy cập thay vì tải biểu tượng cảm xúc từ WordPress.org. Vô hiệu hóa bộ nhớ đệm biểu tượng cảm xúc làm giảm số lượng yêu cầu HTTP có thể cải thiện thời gian tải.

5. WordPress nhúng nên bị vô hiệu hóa vì nó ngăn người khác nhúng nội dung khỏi trang web của bạn, nó cũng ngăn bạn nhúng nội dung từ các trang web khác và xóa các yêu cầu JavaScript liên quan đến WordPress Nhúng.

Lưu và kiểm tra, kỹ lưỡng! Vô hiệu hóa cài đặt nếu bạn nhận thấy bất cứ điều gì bị hỏng trên trang web của bạn.

1. Tải trước sơ đồ trang web sử dụng tất cả các URL trong sơ đồ trang XML của bạn để tải trước khi hết tuổi thọ bộ đệm và toàn bộ bộ đệm đã bị xóa.

2. Sơ đồ trang web SEO SEO Yoast. WP Rocket sẽ tự động phát hiện sơ đồ trang web XML được tạo bởi Plugin Yoast SEO. Bạn có thể kiểm tra tùy chọn để tải trước nó.

3. Tải trước bot chỉ nên được kích hoạt và sử dụng trên các máy chủ hoạt động tốt. Sau khi được kích hoạt, nó sẽ được kích hoạt tự động sau khi bạn thêm hoặc cập nhật nội dung trên trang web của mình. Thay đổi thành Thủ công nếu điều này gây ra vấn đề về hiệu suất hoặc sử dụng CPU cao.

Khi bạn viết hoặc cập nhật một bài đăng hoặc trang mới, WP Rocket sẽ tự động xóa bộ nhớ cache cho nội dung cụ thể đó và bất kỳ nội dung nào khác liên quan đến nó. Bot tải trước sẽ thu thập dữ liệu các URL này để tạo lại bộ đệm ngay lập tức.

4. Tìm nạp trước các yêu cầu DNS cho phép phân giải tên miền xảy ra song song với (thay vì nối tiếp với) việc tìm nạp nội dung trang thực tế.

Bạn có thể chỉ định các máy chủ bên ngoài (như //fonts.googleapis.com & //maxcdn.bootstrapcdn.com) được tìm nạp trước vì tìm nạp trước DNS có thể làm cho các tệp bên ngoài tải nhanh hơn, đặc biệt là trên mạng di động.

Các URL phổ biến nhất để tìm nạp trước là:

⇒ //maxcdn.bootstrapcdn.com
⇒ // pl platform.twitter.com
⇒ //s3.amazonaws.com
⇒ //ajax.googleapis.com
⇒ //cdnjs.cloudflare.com
⇒ //netdna.bootstrapcdn.com
⇒ //fonts.googleapis.com
⇒ //connect.facebook.net
⇒ //www.google-analytics.com
⇒ //www.googletagmanager.com
⇒ //maps.google.com

Lưu và kiểm tra, kỹ lưỡng! Vô hiệu hóa cài đặt nếu bạn nhận thấy bất cứ điều gì bị hỏng trên trang web của bạn.