Cloudflare Image Resizing Cho WordPress

Tôi đăng bài viết này vì nhận được rất nhiều yêu cầu liên quan đến Cloudflare Image Resizing và plugin WordPress của tôi.

Do cách WordPress được thiết kế, không thể làm cho plugin của tôi tương thích với mọi thứ ngoài kia, vì vậy trong bài viết này chúng ta sẽ khám phá một phương pháp khác thông qua Cloudflare Workers.

Xin lưu ý rằng tôi đã cố ý bỏ qua quá nhiều nội dung kỹ thuật để mọi người đều có thể hiểu được; thẳng thắn mà nói, không phải ai cũng là lập trình viên. Tôi thích giữ các bài viết ngắn gọn, đơn giản và đi thẳng vào vấn đề.

Ở cuối bài viết, bạn sẽ có thể đơn giản sao chép, dán và nhấn một cú nhấp chuột để thiết lập Cloudflare Image Resizing đúng cách cho WordPress của bạn.

Cloudflare Image Resizing là gì

Xin nhắc lại, với Cloudflare Image Resizing bạn có thể chuyển đổi hình ảnh trên nền tảng edge của Cloudflare. Bạn có thể thay đổi kích thước, điều chỉnh chất lượng và chuyển đổi hình ảnh sang định dạng WebP hoặc AVIF theo yêu cầu.

Cloudflare sẽ tự động lưu cache mọi hình ảnh phái sinh tại edge, vì vậy bạn chỉ cần lưu trữ một hình ảnh gốc duy nhất tại máy chủ nguồn.

Đây thực sự là một dịch vụ không thể thiếu cho các blog bận rộn như WordPress, đặc biệt nếu bạn đang sử dụng nó làm cửa hàng với nhiều hình ảnh.

Đọc thêm về điều này trong Bài đăng chính thức .

Tại sao nên sử dụng Cloudflare Image Resizing

Lý do chính là tốc độ. Ví dụ, giả sử trang web của bạn có 5 trang và mỗi trang có 10 hình ảnh có kích thước từ 1 MB đến 5, thậm chí 10 MB mỗi hình.

Khi ai đó truy cập các trang của bạn lần đầu tiên, tất cả những hình ảnh đó sẽ được trình duyệt tải xuống. Ví dụ, một trang có 10 hình ảnh, mỗi hình 1 MB; tức là 10 MB cần tải xuống chỉ riêng hình ảnh.

Điều này rất tệ cho người dùng có băng thông thấp, đặc biệt là người dùng di động. Nó cũng gây khó chịu cho người dùng PC có nhiều băng thông. Không ai muốn thấy một trang web tải chậm và nó sẽ không tuân thủ các tiêu chuẩn web.

Tôi khá chắc rằng bạn thấy nhiều trang web như vậy hàng ngày, tải mãi không xong. Lý do chính là các tài nguyên media (như CSS, JS, hình ảnh) cùng với các yếu tố khác như hosting web chậm, v.v.

Bạn có thể nghĩ: “nhưng tôi dùng CDN mà?!”, thực ra không giống nhau đâu. Cloudflare Image Resizing không chỉ là một CDN, nó thay đổi hình ảnh của bạn để chúng trở nên tốt hơn.

Với Cloudflare Image Resizing, hình ảnh của bạn sẽ được giảm kích thước ngay lập tức, vì vậy một hình ảnh 1 MB sẽ trở thành khoảng ~100/200 KB. Chúng cũng sẽ được phân phối ở định dạng thế hệ tiếp theo như WebP và AVIF.

Tóm lại:

• Cải thiện hình ảnh của bạn
• Tăng tốc trang web của bạn
• Cải thiện SEO của bạn
• Tiết kiệm băng thông

Plugin WordPress

Bạn có lẽ đã biết về plugin tôi tạo cho WordPress từ thư mục Github / WordPress Plugins của tôi.

Nó đã nhận được rất nhiều phản hồi và nhiều người đã tăng tốc đáng kể trang web của họ, nhưng nhiều người cũng gặp phải rất nhiều vấn đề mà thực sự không thể giải quyết được.

Mặc dù tôi đã cố gắng làm mọi thứ có thể để thay đổi kích thước tất cả hình ảnh, nhưng không thể thay đổi kích thước tất cả vì cách các plugin và theme WordPress được thiết kế.

Chưa kể việc xử lý CSS và những thứ khác là không thể.

Cloudflare Worker

Sau khi xem xét tất cả các vấn đề được báo cáo, tôi quyết định đi theo hướng khác và sử dụng Cloudflare Worker để viết lại đầu ra HTML cuối cùng cho Cloudflare Image Resizing.

Đây là giải pháp tối ưu để sử dụng Cloudflare Image Resizing trên WordPress vì worker sẽ lấy phản hồi cuối cùng do WordPress tạo ra, bao gồm mọi sửa đổi từ plugin, theme, CSS, v.v.

Vì Cloudflare Worker nằm giữa WordPress của bạn và người dùng, bạn có khả năng thay đổi hầu như mọi thứ ngay lập tức; nghĩa là chúng ta thậm chí có thể thay thế hình ảnh bên trong CSS inline và cả các tệp CSS.

Về lý thuyết nghe có vẻ dễ dàng và đơn giản nhưng trong thực tế nó khó hơn và tốn thời gian hơn nhiều.

Tuy nhiên, tôi đã dành rất nhiều thời gian và công sức để tìm ra cách đạt được mục tiêu này.

Plugin WordPress so với Cloudflare Worker

Sẽ rất có lợi nếu bạn có thể hiểu được sự khác biệt giữa Plugin WordPress và Cloudflare Worker. Bằng cách này, bạn có thể quyết định sử dụng cái nào và hiểu tại sao tôi khuyên dùng worker.

Như bạn có thể thấy ở trên, worker chiến thắng. Đây đơn giản là giải pháp tốt nhất vì bất kể bạn thực hiện thay đổi gì trên backend (WordPress), worker sẽ có thể thay đổi các liên kết hình ảnh.

Thiết lập Cloudflare Worker

Điều quan trọng đầu tiên bạn cần làm là vô hiệu hóa Plugin WordPress nếu bạn đã cài đặt và kích hoạt nó. Nếu bạn bỏ qua bước này, bạn sẽ không thấy worker hoạt động nhiều.

Điều quan trọng thứ hai là truy cập Google Pagespeed và thực hiện kiểm tra trang web của bạn mà không có image resizing. Bạn sẽ cần điều này sau để xem sự khác biệt.

Bây giờ hãy truy cập tài khoản Cloudflare của bạn và đi đến Workers. Từ đây nhấp “Create a Service”. Đặt tên dịch vụ tùy ý, bạn cũng có thể để tên ngẫu nhiên được tạo tự động. Để starter là “HTTP handler”.

Sau khi tạo, nhấp vào dịch vụ và ở góc trên bên phải nhấp “Quick Edit”. Trình soạn thảo sẽ hiện ra và đơn giản chọn tất cả mã hiện có và thay thế bằng worker của tôi từ Github . Nhấp “Save and deploy” và thoát trình soạn thảo.

Trên trang dịch vụ mới của bạn, đi đến “Triggers” và dưới Routes nhấp “Add route”. Trong route, đặt tên miền trang web của bạn với wildcard match-all, ví dụ "example.com/*". Đối với zone, bạn sẽ chọn tên miền của mình, trong ví dụ của tôi là example.com.

Vậy là xong!

Khắc phục sự cố

Trong trường hợp bạn gặp bất kỳ vấn đề nào, như không có hình ảnh nào được thay đổi kích thước, hãy kiểm tra các điều kiện sau:

1. Hình ảnh có thuộc tên miền của bạn không? Bạn không thể thay đổi kích thước hình ảnh từ tên miền khác trừ khi bạn đã kích hoạt tính năng này trong bảng điều khiển Cloudflare.
2. Có hình ảnh nào được viết lại không? Bật "Logs" trên tab worker mới của bạn và xem bạn có phát hiện ngoại lệ nào không. Nếu có, hãy báo cáo trên kho Github của tôi.
3. Các liên kết hình ảnh có bị viết lại sai không? Trong trường hợp này hãy báo cáo vấn đề trên Github.

Tối ưu hóa bổ sung

Tôi khá chắc rằng bạn đã nhận thấy WordPress của bạn chứa một số thẻ SVG trống ngay sau thẻ HTML body. Nếu bạn không biết tôi đang nói gì, hãy xem đây:

Thẳng thắn mà nói, tôi không thể hiểu được trường hợp sử dụng hợp lệ nào cho điều này; vì vậy tôi đã thêm một số mã bổ sung để loại bỏ nó. Nó sẽ làm cho đầu ra HTML của bạn nhỏ hơn một chút, giúp tăng tốc độ thêm một chút.

Tôi sẽ thêm nhiều tối ưu hóa hơn khi có thời gian.

Chi phí

Để sử dụng Cloudflare Image Resizing, bạn cần có gói đăng ký Pro (25$/tháng) cho trang web của bạn tại thời điểm viết bài này. Dịch vụ thay đổi kích thước hình ảnh bắt đầu từ 5$ cho mỗi 100.000 hình ảnh được lưu trữ và 1$ cho mỗi 100.000 hình ảnh được phân phối – không có chi phí egress hay phí bổ sung cho việc thay đổi kích thước và tối ưu hóa.

Sử dụng Plugin WordPress là hoàn toàn miễn phí và không tốn chi phí. Worker cũng tương đối miễn phí để sử dụng, tuy nhiên giới hạn nhỏ hơn và sức mạnh xử lý cũng thấp hơn một chút.

Tôi khuyến nghị mạnh mẽ bạn sử dụng gói workers trả phí với tùy chọn unbound. Càng nhiều hình ảnh trên trang web của bạn, càng nhiều thẻ HTML cần được viết lại và do đó cần nhiều thời gian xử lý hơn (GBs Duration).

Hãy lưu ý rằng chỉ với 5$ bạn nhận được giới hạn worker 400.000 GB-s, theo các bài kiểm tra của tôi là quá đủ.

Giấy phép

Tôi đã quyết định không sử dụng giấy phép MIT vì tôi nhận thấy nhiều người lấy mã của tôi và bán lại. Không hay lắm, các bạn ơi.

Vì vậy, mô hình giấy phép mới được sử dụng là Apache License 2.0, xin đừng bán lại công việc của tôi.

Liên kết hữu ích

• Webpagetest: https://www.webpagetest.org/
• Google Pagespeed Insights: https://pagespeed.web.dev/
• Giá Workers: https://developers.cloudflare.com/workers/platform/pricing/

Tôi tin tưởng mạnh mẽ rằng Cloudflare Worker của tôi sẽ cải thiện đáng kể trang web của bạn. Nếu tôi đúng, hãy để lại một ngôi sao trên Github. Nếu tôi sai, hãy để lại phản hồi thay thế.

Đợi bình luận của các bạn.