WordPress용 Cloudflare Image Resizing

Cloudflare Image Resizing과 제 WordPress 플러그인에 대해 많은 요청을 받았기 때문에 이 글을 게시합니다.

WordPress의 설계 방식 때문에 제 플러그인을 모든 것과 호환되게 만드는 것은 불가능하므로, 이 글에서는 Cloudflare Workers를 통한 다른 방법을 탐색합니다.

모든 사람이 이해할 수 있도록 너무 많은 기술적 내용을 의도적으로 생략했다는 점을 참고하세요. 솔직히 말해서, 모든 사람이 개발자는 아닙니다. 저는 글을 짧고 간단하며 핵심만 담는 것을 좋아합니다.

글 끝에서 간단히 복사하고 붙여넣고 한 번 클릭하면 WordPress에 Cloudflare Image Resizing을 올바르게 설정할 수 있습니다.

Cloudflare Image Resizing이란

다시 한번 말씀드리면, Cloudflare Image Resizing을 사용하면 Cloudflare의 엣지 플랫폼에서 이미지를 변환할 수 있습니다. 온디맨드로 이미지 크기 조정, 품질 조정, WebP 또는 AVIF 형식으로 변환이 가능합니다.

Cloudflare는 엣지에서 모든 파생 이미지를 자동으로 캐싱하므로, 원본 서버에 하나의 원본 이미지만 저장하면 됩니다.

WordPress와 같은 바쁜 블로그, 특히 많은 이미지가 있는 쇼핑몰로 사용하는 경우 정말 필수적인 서비스입니다.

공식 포스트 에서 자세히 읽어보세요.

Cloudflare Image Resizing을 사용하는 이유

주된 이유는 속도입니다. 예를 들어 웹사이트에 5개의 페이지가 있고 각 페이지에 이미지당 1MB에서 5MB, 심지어 10MB에 이르는 이미지가 10개 있다고 가정해 봅시다.

누군가 처음으로 페이지를 방문하면 모든 이미지가 브라우저에 의해 다운로드됩니다. 예를 들어 한 페이지에 10개의 이미지가 있고, 각각 1MB 크기라면 이미지만으로 10MB를 다운로드해야 합니다.

이는 낮은 대역폭 사용자, 특히 모바일 사용자에게 매우 나쁩니다. 대역폭이 많은 PC 사용자에게도 불쾌합니다. 아무도 느리게 로딩되는 웹사이트를 보고 싶어하지 않으며, 웹 표준에도 부합하지 않습니다.

매일 영원히 로딩되는 그런 웹사이트를 많이 보실 것입니다. 주된 이유는 느린 웹 호스팅 등의 다른 요인과 함께 미디어 자산(CSS, JS, 이미지 등)입니다.

“하지만 CDN을 사용하고 있는데?“라고 생각하실 수 있지만, 같은 것이 아닙니다. Cloudflare Image Resizing은 단순한 CDN이 아니라, 이미지를 더 좋게 변경합니다.

Cloudflare Image Resizing을 사용하면 이미지가 즉석에서 크기가 줄어들어, 1MB 이미지가 약 100/200KB 정도로 됩니다. 또한 WebP 및 AVIF와 같은 차세대 형식으로 제공됩니다.

요약하면:

이미지를 향상시킵니다
웹사이트 속도를 높입니다
SEO를 개선합니다
대역폭을 절약합니다

WordPress 플러그인

아마도 제 Github / WordPress Plugins 디렉토리에서 WordPress용으로 만든 플러그인을 알고 계실 것입니다.

많은 피드백을 받았고 많은 분들이 웹사이트를 상당히 빠르게 만들었지만, 말 그대로 해결할 수 없는 많은 문제에 부딪힌 분들도 많습니다.

모든 이미지를 리사이징하기 위해 가능한 모든 것을 시도했지만, WordPress 플러그인과 테마의 설계 방식 때문에 모든 이미지를 리사이징하는 것은 불가능합니다.

CSS 처리 및 기타 사항은 말할 것도 없이 불가능합니다.

Cloudflare Worker

보고된 모든 문제를 검토한 후, 다른 방법을 택하여 Cloudflare Worker를 사용해 Cloudflare Image Resizing을 위한 최종 HTML 출력을 다시 작성하기로 결정했습니다.

이것은 WordPress에서 Cloudflare Image Resizing을 사용하기 위한 궁극적인 솔루션입니다. Worker가 플러그인, 테마, CSS 등의 모든 수정 사항을 포함하여 WordPress가 생성한 최종 응답을 가져오기 때문입니다.

Cloudflare Worker가 WordPress와 사용자 사이에 위치하기 때문에, 거의 모든 것을 즉석에서 변경할 수 있습니다. 즉, 인라인 CSS 내의 이미지와 CSS 파일 내의 이미지도 교체할 수 있습니다.

이론적으로는 쉽고 간단해 보이지만, 실제로는 훨씬 더 어렵고 시간이 많이 걸렸습니다.

그럼에도 불구하고, 이 목표를 달성하는 방법을 찾기 위해 많은 시간과 노력을 들였습니다.

WordPress 플러그인 vs Cloudflare Worker

WordPress 플러그인과 Cloudflare Worker의 차이점을 이해하는 것은 매우 유익합니다. 이를 통해 어떤 것을 사용할지 결정하고 왜 worker를 추천하는지 이해할 수 있습니다.

	WordPress 플러그인	Cloudflare Worker
무료	예	예
처리 속도	빠름	매우 빠름
의존성	PHP 7+	없음
일반 호환성	부분적	완전
테마 호환성	일부	전부
플러그인 호환성	일부	전부
CSS 처리	아니오	예
모든 태그 처리	아니오	예
최적화	아니오	예

위에서 볼 수 있듯이, worker가 승리합니다. 백엔드(WordPress)에서 어떤 변경을 하든 worker가 이미지 링크를 변경할 수 있기 때문에 최고의 솔루션입니다.

Cloudflare Worker 설정

가장 먼저 해야 할 중요한 것은 WordPress 플러그인이 설치되어 활성화되어 있다면 비활성화하는 것입니다. 이 단계를 건너뛰면 worker가 많은 일을 하는 것을 볼 수 없습니다.

두 번째로 매우 중요한 것은 Google Pagespeed 로 가서 이미지 리사이징 없이 웹사이트 테스트를 수행하는 것입니다. 나중에 차이를 확인하는 데 필요합니다.

이제 Cloudflare 계정으로 이동하여 Workers로 갑니다. 여기서 “Create a Service"를 클릭합니다. 서비스 이름을 원하는 대로 지정하거나, 자동 생성된 랜덤 이름을 그대로 둘 수 있습니다. 스타터는 “HTTP handler"로 그대로 두세요.

생성 후 서비스를 클릭하고 오른쪽 상단의 “Quick Edit"를 클릭합니다. 편집기가 나타나면 기존 코드를 모두 선택하고 Github 의 제 worker로 교체합니다. “Save and deploy"를 클릭하고 편집기를 닫습니다.

새 서비스 페이지에서 “Triggers"로 이동하고 Routes 아래의 “Add route"를 클릭합니다. 라우트에 웹사이트 도메인을 와일드카드로 설정합니다. 예를 들어 "example.com/*"처럼 합니다. 존에는 자신의 도메인을 선택하는데, 제 예제에서는 example.com입니다.

이것이 전부입니다!

문제 해결

이미지가 리사이징되지 않는 등의 문제가 있는 경우 다음 조건을 확인하세요:

이미지가 귀하의 도메인에 속합니까? Cloudflare 대시보드에서 이 기능을 명시적으로 활성화하지 않는 한 다른 도메인의 이미지는 리사이징할 수 없습니다.
이미지가 다시 작성되고 있습니까? 새 worker 탭에서 "Logs"를 활성화하고 예외가 있는지 확인하세요. 발견하면 제 Github 저장소에 보고하세요.
이미지 링크가 잘못 다시 작성되고 있습니까? 이 경우 Github에 문제를 보고하세요.

보너스 최적화

WordPress에 HTML body 태그 바로 뒤에 빈 SVG 태그가 몇 개 포함되어 있다는 것을 알아차렸을 것입니다. 무슨 말인지 모르겠다면 이것을 보세요:

솔직히 이에 대한 유효한 사용 사례를 이해할 수 없어서, 이를 제거하는 추가 코드를 넣었습니다. HTML 출력이 약간 작아져 약간의 추가적인 속도 향상을 가져옵니다.

시간이 되면 더 많은 최적화를 추가할 예정입니다.

비용

Cloudflare Image Resizing을 사용하려면 이 글 작성 시점 기준으로 웹사이트에 Pro 구독(월 25달러)이 필요합니다. 이미지 리사이징 서비스는 저장된 이미지 100,000개당 5달러, 배달된 이미지 100,000개당 1달러부터 시작하며, 이그레스 비용이나 리사이징 및 최적화에 대한 추가 요금은 없습니다.

WordPress 플러그인 사용은 완전히 무료이며 비용이 들지 않습니다. Worker도 비교적 무료로 사용할 수 있지만, 제한이 더 작고 처리 능력도 약간 낮습니다.

유료 workers 플랜과 unbound 옵션 사용을 강력히 권장합니다. 사이트에 이미지가 많을수록 다시 작성해야 할 HTML 태그가 많아지고 그만큼 처리 시간(GBs Duration)이 더 필요합니다.

단 5달러로 400,000 GB-s worker 제한을 받을 수 있으며, 제 테스트 기준으로 충분합니다.

라이선스

많은 사람들이 제 코드를 가져가서 판매하는 것을 발견했기 때문에 MIT 라이선스를 사용하지 않기로 결정했습니다. 쿨하지 않습니다, 여러분.

따라서 새 라이선스 모델은 Apache License 2.0이므로, 제 작업을 재판매하지 마세요.

유용한 링크

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

제 Cloudflare Worker가 귀하의 웹사이트를 상당히 개선할 것이라고 강력히 믿습니다. 제가 맞다면 Github에 별을 남겨주세요. 틀렸다면 대신 피드백을 남겨주세요.

댓글을 기다리겠습니다.