WP 로켓 SaaS: 비하인드 스토리

게시 됨: 2024-09-12

이 기술 문서에서는 NodeJS, Puppeteer 및 BullMQ를 사용하여 분당 15,000개 이상의 웹 페이지를 처리할 수 있는 웹 크롤러의 개발 및 최적화에 대해 자세히 설명합니다. 사용하지 않는 CSS 제거(RUCSS) 기능이 불필요한 CSS를 제거하고, 로드 시간을 개선하고, 주요 성능 지표를 강화하여 웹 성능을 향상시키는 방법을 설명합니다. 또한 리소스 수집을 위해 Puppeteer를 활용하고, JavaScript 라이브러리를 사용자 정의하고, BullMQ를 사용하여 대기열 시스템을 구현하여 비효율적인 처리 및 안정성 문제를 포함한 초기 과제를 해결한 방법에 대해 설명합니다. 마지막으로, 고품질 표준 유지, 신속한 혁신 지원, 효율적인 고객 지원을 목표로 운영 우수성을 달성한 방법을 간략하게 설명합니다.

RUCSS란 무엇입니까?

RUCSS(사용하지 않는 CSS 제거) 기능은 웹페이지에서 사용되지 않는 모든 CSS와 스타일시트를 제거하고 각 페이지에 필요한 CSS만 유지하도록 설계되었습니다. 최적화가 적용되면 웹사이트는 사용자가 요청하는 특정 페이지에 필요한 CSS만 제공하므로 페이지 로드 속도가 훨씬 빨라집니다!

평균적으로 이 최적화를 통해 전달된 CSS의 크기가 76% 감소했습니다!

RUCSS의 이점

  • 페이지 크기 축소 : 웹 페이지의 전체 크기를 최소화합니다.
  • HTTP 요청 감소 : 로드해야 하는 CSS 스타일시트 수를 줄입니다.
  • 더 빨라진 로드 시간 : 페이지 로딩 속도가 향상됩니다.
  • 향상된 핵심 웹 바이탈 : LCP(Largest Contentful Paint), FCP(First Contentful Paint) 및 CLS(Cumulative Layout Shift)와 같은 주요 성능 지표를 향상합니다.
  • 렌더링 차단 CSS 제거 : CSS가 페이지 렌더링을 지연시키는 것을 방지합니다.

사용되지 않는 CSS 식별: 외과적 공격

사용되지 않는 CSS를 제거하는 과정은 매우 복잡합니다. 제거하는 모든 CSS 규칙에 대해 해당 페이지에서 해당 규칙이 필요하지 않도록 해야 합니다. 그렇지 않으면 레이아웃이 깨질 수 있습니다! 사용되지 않는 CSS를 올바르게 식별하려면 다음과 같은 많은 요소를 고려해야 합니다.

  • JavaScript 상호 작용 : JavaScript는 DOM과 CSS를 동적으로 변경합니다. 예를 들어, 버튼을 클릭하면 팝업이 나타나 새로운 DOM 요소와 CSS 규칙을 소개할 수 있습니다. 이러한 상호 작용을 처리하는 것은 사용된 CSS를 정확하게 식별하는 데 중요하며 더 많은 슬라이더, 캔버스 외부 메뉴 및 갤러리가 있습니다.
  • CSS 및 HTML 변형 : WordPress 테마 및 플러그인은 CSS 규칙의 끝없는 변형을 도입합니다. 중첩된 CSS, 특수 사례 및 구문 오류를 처리하는 것이 필수적입니다. 사용되지 않는 CSS를 효과적으로 식별하고 제거하려면 정확한 HTML 구문 분석이 필요합니다.
  • 뷰포트 크기 : 일부 CSS 스타일은 화면 크기의 특정 조건에 따라 적용됩니다. CSS가 모바일 및 데스크톱 사용자에게 올바르게 제공될 수 있도록 다양한 화면 크기에 사용된 CSS를 제공하고 방문할 때마다 관련 CSS만 제공합니다. 또한 반응형 CSS 스타일에는 특정 최적화 규칙이 적용됩니다.

SaaS 솔루션으로서의 RUCSS

페이지 리소스를 처리하고 사용된 CSS를 생성하는 것은 리소스 집약적입니다. 고객 웹사이트에서 직접 이러한 작업을 수행하면 속도가 느려질 수 있으며 모든 서버와 호스팅에서 실행 가능하지 않을 수 있습니다. 따라서 Removed Unused CSS와 같은 WP Rocket의 가장 고급 기능 중 일부는 SaaS를 통해 제공됩니다. 이러한 최적화는 WP Rocket 플러그인의 요청에 따라 서버에서 수행되며 결과는 자동으로 웹사이트에 적용됩니다. 이 접근 방식은 고객에게 다음과 같은 몇 가지 큰 이점을 제공합니다.

  • 리소스 집약적인 최적화를 수행하고 사용자 서버의 부하를 줄입니다.
  • 가능한 한 빨리 개선 사항을 제공하고 피드백을 신속하게 처리하세요.
  • 지원 티켓을 기다리지 않고 문제와 오류를 사전에 관찰하고 수정합니다.
  • 클라이언트 측 업데이트 없이 모든 사용자가 최신 버전의 혜택을 누릴 수 있도록 하세요.
  • WP Rocket 플러그인을 업데이트할 필요 없이 빠르게 반복하고 개선 사항을 배포하세요.

무대 뒤에서는 어떤 모습일까요?

WP Rocket SaaS는 분당 최대 20,000페이지를 방문하고 최적화하여 CSS와 스크롤 없이 볼 수 있는 이미지를 처리합니다! 이를 위해 우리는 2분 이내에 모든 사용자 요청을 처리하기 위해 ~40개의 서로 다른 서버에서 수천 개의 웹 브라우저를 지속적으로 운영하고 있습니다. 이를 달성하기 위해 우리 팀은 NodeJS, Django, Redis, CockroachDB 및 Kubernetes를 포함한 최첨단 기술을 활용하고 이를 group.One 팀과 함께 운영하고 있습니다.

주요 기술적 과제

1. 페이지 리소스 수집

우리는 헤드리스 Chrome 또는 Chromium 브라우저를 제어하기 위해 높은 수준의 API를 제공하는 노드 라이브러리 인 Puppeteer를 광범위하게 사용합니다. 이 도구는 실제 사용자처럼 웹 페이지를 렌더링하여 모든 동적 요소를 캡처하는 기능 덕분에 리소스 수집 전략에 필수적입니다. 이는 뷰포트 크기 제어, 요청 차단 등과 같이 프로세스를 최적화하기 위해 의존하는 많은 강력한 기능을 제공합니다.

2. 페이지 리소스 처리

WordPress 테마와 플러그인은 다양한 CSS와 JavaScript를 활용하므로 이러한 파일을 처리할 수 있는 강력한 솔루션이 필요했습니다.

Webpack, PostCSS, CleanCSS 등 페이지 리소스를 처리하는 다양한 방법을 테스트한 후 마침내 특정 요구 사항에 더 잘 맞도록 사용자 정의된 JavaScript 라이브러리를 포크하고 유지하기로 결정했습니다. 여기에는 모든 사용자가 최적화를 안정적으로 수행할 수 있도록 하기 위해 다양한 WordPress 테마 및 플러그인에서 발견되는 극단적인 사례, 중첩된 CSS 규칙 및 구문 문제를 처리하는 작업이 포함됩니다.

3. 우리 팀의 전문성을 활용한 미세 조정

CSS 처리는 매우 까다로울 수 있으며 프로세스에 충분한 주의를 기울이지 않으면 페이지 레이아웃이 손상될 위험이 높습니다. 우리 팀은 인기 있는 WordPress 테마 및 페이지 빌더에 대한 광범위한 지식을 보유하고 있으며 최신 WordPress 트렌드와의 호환성에 대해 수십만 명의 사용자로부터 지속적인 피드백을 받고 있습니다. 따라서 우리는 팀원들이 SaaS의 CSS 처리 규칙을 실시간으로 직접 업데이트하여 최적화를 지속적으로 조정하고 매일 호환성을 높일 수 있는 동적 안전 목록 시스템을 개발했습니다.

4. 분당 수천 페이지의 흐름 관리

분당 15,000개의 웹페이지 흐름을 처리하기 위해 BullMQ를 사용하여 큐잉 시스템을 구현했습니다. 이 시스템은 다음을 제공합니다:

  • 플러그인에서 비동기 백엔드로 최적화 프로세스를 오프로드하는 비동기 처리 .
  • 로드 밸런싱 및 동시성 관리 : 작업을 여러 서버에 분산하여 SaaS가 많은 수의 URL을 효율적으로 처리하고 쉽게 확장할 수 있도록 합니다.
  • 신뢰성 및 내결함성 : 제출된 모든 작업과 그 결과는 사용 가능해지면 저장됩니다. 이는 당사 서버 중 하나가 실패하거나 사용자 웹사이트가 결과를 즉시 검색할 수 없는 경우 복원력을 제공합니다.
  • 우선 순위 지정 : BullMQ 대기열을 사용하여 작업 우선 순위를 지정하여 더 중요한 작업이 먼저 처리되도록 할 수 있습니다. 예를 들어, 홈페이지 최적화는 사용자가 홈페이지에서 개선 사항을 즉시 확인하고 Pagespeed를 통해 즉시 테스트할 수 있도록 하는 데 우선순위를 둡니다!

운영 우수성

SaaS를 위한 확장 가능하고 안정적인 시스템을 구축하는 것은 고객의 편의성과 효율성을 보장하고 늘어나는 사용자 수와 증가하는 페이지 처리 요청량을 처리하는 데 필수적입니다. 이러한 우수성을 달성할 수 있었던 단계를 자세히 살펴보겠습니다.

1. 확장 가능한 아키텍처

WP Rocket은 언제든지 전 세계 수백만 개의 웹사이트에서 사용됩니다. 따라서 SaaS는 항상 가용성을 유지하고 예상대로 작동해야 합니다. 이 서비스는 다양한 지역에 위치한 40개 이상의 물리적 서버에서 호스팅됩니다. 컨테이너 수명주기의 배포, 확장 및 관리를 쉽게 하기 위해 Kubernetes와 함께 조정됩니다. 우리는 활동성 프로브, 롤링 업데이트, 자동 크기 조정과 같은 강력한 기능을 사용하여 서비스에 탄력성을 부여하고 모든 상황에서 가동 시간을 유지합니다. 또한 사용자 지정 게이트웨이 서비스는 작업 관리를 수행하고 API 보안(속도 제한, 인증 등)을 시행합니다.

2. 모니터링 및 경고

이러한 모든 서비스와 서버는 Prometheus 및 Grafana를 통한 기술 지표와 기능 지표를 통해 지속적으로 모니터링 및 관찰되어 서비스가 안정적이고 사용자에게 최고의 성능을 제공하는지 확인합니다. 심층적인 모니터링을 통해 작업 기간을 낮게 유지하고 최적화 효율성을 동급 최고 수준으로 유지하면서 높은 성공률을 유지할 수 있습니다. Prometheus 및 Metabase와 같은 도구의 경고를 통해 무언가가 예상대로 작동하지 않는 경우 실시간으로 대응할 수 있습니다.

3. 고객을 돕기 위한 관찰 가능성

고객이 SaaS를 쉽게 사용할 수 있도록 최선을 다하고 있지만 방화벽, 보안 규칙 또는 충돌하는 플러그인이나 테마가 많은 WordPress 웹사이트 등의 매우 복잡한 설정에서는 일부 어려움이 발생할 수 있습니다. SaaS 접근 방식 덕분에 우리 지원팀은 메타베이스를 통해 특정 사용자와 관련된 데이터에 액세스하고 최적화 작업과 결과를 관찰할 수 있는 내부 도구를 갖추고 있어 가능한 문제를 신속하게 식별할 수 있습니다. 그런 다음 PostMan 및 Metabase를 통해 반복하고, 조정하고, 미세 조정할 수 있으며 실시간 피드백을 받을 수 있습니다. 결과적으로 그들은 어려움을 겪고 있는 고객을 효율적으로 도울 수 있으며 SaaS 최적화 규칙을 직접 조정하여 사용자의 잠금을 해제할 수도 있습니다.

4. 자동화된 테스트 및 지속적인 통합

상당한 납품률을 유지하면서 고품질 표준을 유지하는 것은 엔지니어에게 어려운 일이 될 수 있습니다. 우리는 각 코드 변경이 이루어지는 안정적인 자동화로 이 문제를 해결합니다. 자동화된 테스트부터 프로덕션의 원버튼 배포까지 미러링, 섀도우 릴리스 메커니즘 및 점진적 릴리스 롤아웃도 활용합니다. 이러한 모든 강력한 접근 방식을 통해 엔지니어링 팀은 서비스 품질을 위험에 빠뜨리지 않고 성공하고 혁신을 지속할 수 있습니다. 이 중 대부분은 자동화되어 있으므로 우리는 그것에 대해 생각할 필요도 없고 중요한 것, 즉 사용자를 위한 최고의 기능을 구축하는 것에만 집중할 수 있습니다!

마무리

요약하자면, NodeJS, Puppeteer 및 BullMQ를 사용하여 웹 크롤러를 개발하고 최적화하면 분당 15,000개 이상의 웹 페이지를 처리할 수 있는 매우 효율적이고 확장 가능한 솔루션이 탄생했습니다. 초기 과제를 해결하고 고급 도구 및 방법론을 활용함으로써 RUCSS(사용하지 않는 CSS 제거) 기능을 통해 웹 성능을 크게 향상시키는 강력한 시스템을 만들었습니다. 지속적인 통합, 자동화된 테스트, 확장성과 안정성에 중점을 두어 당사 서비스는 최고 수준을 유지하며 사용자에게 더 빠른 로드 시간과 향상된 전반적인 웹 경험을 제공합니다.