Tối ưu lại site WordPress thời kì “chia tay Cloudflare”



Tình hình là hôm trước, sau khi gỡ bỏ Cloudflare và viết bài chia tay em gấu cũ, mặc dù đã lường trước được việc tốc độ load trang sẽ chậm, nhưng quả thật mình không ngờ nó lại chậm đến như vậy. Mình nghĩ nguyên nhân chủ yếu là do đứt cáp mà mình thì vẫn đang sử dụng gói hosting Value của Namecheap, vậy nên tốc độ nó mới rùa bò đến như vậy. Thế mới biết sức mạnh tăng tốc WordPress của CF nó “bá đạo” đến nhường nào. Nhưng thôi không sao cả, cái gì phải đến rồi cũng sẽ đến. Trong bài viết hôm nay, mình sẽ giới thiệu với các bạn những việc cần làm để tối ưu lại trang web WordPress thời kì “hậu Cloudflare”.

1. Tìm một dịch vụ CDN mới

Việc sử dụng CDN của CF có ý nghĩa rất nhiều đến việc tăng tốc tải trang bởi máy chủ của họ trải khắp thế giới. Hai cụm máy chủ gần chúng ta nhất nằm ở Hongkong và Singapore cho tốc độ về Việt Nam cực nhanh. Bởi thế mà dù cho máy chủ của bạn ở nước ngoài và chẳng may có đứt cáp đi chăng nữa thì cũng không chịu ảnh hưởng nhiều. Không cần đi đâu xa, có thể thấy ngay Toiyeuwp.com chính là ví dụ điển hình nhất lúc này. Vừa mới gỡ Cloudflare có vài phút thôi mà đã chậm đến nỗi không load nổi ảnh bài viết, điều này ảnh hưởng rất nhiều đến độc giả.



Nhắc đến việc load không nổi ảnh thì mình đã nghĩ ngay đến dịch vụ Photon nằm trong gói Jetpack plugin. Đây mà dịch vụ CDN dành riêng cho ảnh, hoàn toàn miễn phí; ảnh của bạn sẽ được nén dạng webp và lưu trữ trên hệ thống của Automattic (WordPress.com). Không cần suy nghĩ nhiều, mình đã cài ngay và bật Photon lên. Phải công nhận rằng tốc độ load ảnh đã tăng lên hơn rất nhiều so với trước đó. Một phần là do ảnh được nén nên nhẹ hơn. Một phần khác là do ảnh được load về từ hệ thống CDN nên đương nhiên sẽ nhanh hơn rất nhiều so với việc load từ máy chủ Namecheap.

2. Tối ưu lại lazy load hình ảnh

Trước đây mình có viết một bài giới thiệu về a3 Lazy Load, là 1 trong số 3 plugin mà mình rất thích dùng. Tuy nhiên, điều đáng tiếc ở đây là a3LL không tương thích với Photon. Đó là lí do vì sao mà mình tạm thời deactivate em nó để cài một thằng khác có tên là Lazy Load. Lý do mà nó hoạt động với Photon đơn giản bởi vì nó cũng là một sản phẩm của Automattic team. Thằng này nó chỉ đơn giản lazy load mỗi hình ảnh thôi nên chỉ cần kích hoạt là xong, không có gì phải tùy chỉnh cả.

3. Sử dụng Autoptimize

Bạn nào chưa có thì cài ngay cu này nhé. Trước đây, mình có viết bài hướng dẫn về nó rồi, có thể xem tại đây. Nó cũng thuộc danh sách 3 plugin mà mình hay dùng. Lý do vì sao phải dùng nó? Đơn giản vì nó giúp gộp và làm giảm kích thước css, js khi tải trang xuống, điều này rất có ích cho việc tăng tốc. Tuy nhiên, nếu chẳng may bị lỗi giao diện khi sử dụng cu này thì bạn có thể gỡ bỏ nó đi là sẽ hết lỗi thôi. Tuy nhiên, cho đến nay mình đã test thử nhiều site khác nhau mà chưa gặp phải lỗi bao giờ nên bạn cũng không cần lo lắng quá nhé.

4. Cấu hình Browser caching (nếu chưa có)

Cái này mình bật sẵn từ lâu rồi (trong mục settings của plugin WP Fastest Cache). Vậy nên lần tổng tối ưu này, mình cũng không cần chỉnh sửa gì thêm. Bạn nào chưa bật thì nên bật nó lên. Nếu các plugin của bạn không thằng nào hỗ trợ tính năng này thì có thể thêm cụm sau copy vào file .htaccess (để ở đầu file luôn nhé).

## EXPIRES CACHING ##

ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"

## EXPIRES CACHING ##

Hiểu nôm na về tính năng này, thì nó sẽ báo cho trình duyệt lưu lại các mã css, js, ảnh vào cache ở trình duyệt để những lần sau vào lại trang thì không cần tải lại chúng nữa.

5. Gỡ bỏ các hệ thống bình luận của bên thứ 3

Đang trong đợt thanh trừng diện rộng nên mình đã gỡ luôn bỏ hệ thống comment của Facebook và chuyển sang dùng hệ thống mặc định của WordPress, kết hợp với tính năng Discussion trong Jetpack luôn. Cái hay của Jetpack là cách thức đăng bình luận của nó chống lại được các công cụ spam hàng loạt. Mình đánh giá rất cao điều đó.

6. Kết luận

Sau khi tối ưu lại qua 5 bước kể trên, mình mở chế độ ẩn danh lên, gõ vào trang chủ. Cảm giác đã nhanh hơn rất nhiều so với trước. Nếu bạn cũng là một người giống mình, mới chia tay người yêu cũ Cloudflare xong thì mình tin chắc bài viết này sẽ có thể an ủi bạn, cảm thấy đỡ buồn hơn trong giai đoạn khó khăn này. Chúc anh em sớm có gấu mới! 😀

 





Bình luận

avatar