웹 성능 컨설턴트 frontend
빠른 frontend, 녹색 Core Web Vitals
드리프트하는 JavaScript 번들, INP를 죽이는 third-party 스크립트, prioritized되지 않은 LCP 이미지. React, Angular, Astro 및 critical path에 작업해 측정 가능하고 지속 가능한 frontend를 제공합니다.
프론트엔드 최적화
자원 압축 파이프라인
Ils me font confiance
감사를 부르는 frontend 신호
대부분의 Core Web Vitals 문제는 frontend에서 옵니다. 프로젝트마다 비슷해 보입니다.
📦 첫 로드에서 JavaScript 번들이 500 KB 이상
Tree-shaking되지 않은 Webpack, 무거운 dependencies (Moment, full lodash, MUI), code splitting 없음. 감사가 각 contributor를 식별합니다.
🐢 복잡한 상호작용에서 빨간 mobile INP
불필요한 re-render, 전체 DOM을 touch하는 event listener, Long Tasks를 chain하는 third-party 스크립트. React DevTools Profiler가 패턴을 노출합니다.
🖼️ prioritized되지 않은 LCP 이미지, 결코 AVIF가 아닌 형식
Hero 이미지에 fetchpriority 없음, WebP/AVIF 대신 JPEG, misplaced lazy loading. LCP가 3s 이상으로 드리프트.
📊 Main thread를 죽이는 Long Tasks
15개 스크립트를 로드하는 tag manager, 한 블록으로 로드되는 chatbot, synchronous A/B testing. Main thread가 포화되고, INP가 폭발합니다.
🌐 SSR 없음, hydration을 기다리는 LCP
SEO stake가 있는 public 사이트의 pure SPA. SSR (Next.js, Astro, Remix) 없이는 LCP가 모든 JS가 다운로드되고 실행되기를 기다립니다.
🧪 CI에 performance budget 없음
Lighthouse CI, bundle size check, SpeedCurve 없이 모든 PR이 보이지 않는 회귀를 도입할 수 있습니다. Budget 디스크립닌이 유지하는 유일한 보장입니다.
제가 최적화하는 frontend 스택
React (SPA, Next.js, RSC), Angular (lazy modules, OnPush, SSR), Astro (islands, partial hydration). 그리고 templating 측 CMS (WordPress, Drupal, Shopify Liquid).
미션 약속
Frequently asked questions
성능을 위한 React, Vue, Angular, Astro 중 어느 것?
제 frontend에 실제 문제가 있는지 어떻게 알 수 있나?
Next.js 또는 Astro로 rebuild해야 하나?
Frontend engagement는 어떻게 구조화됩니까?
Frontend를 녹색으로 만드세요
2023-2025 데이터
Ce qu'en disent mes clients
훌륭한 작업입니다.
Paul은 사이트 속도를 눈에 띄게 개선했고 Google 권장사항에 완벽히 맞춰 주었습니다.
전문적이고 꼼꼼하며 효율적이라 강력히 추천합니다.
Nicolas - April Moto
디지털 & 이커머스 디렉터
저희는 Paul의 업무에 매우 만족하고 있습니다. 그는 신속하고, 언제든지 응대 가능하며, 특히 효율적입니다. 그가 합류한 이후 성과와 대응력 측면 모두에서 매우 좋은 결과가 확인되었습니다. 저희 팀의 진정한 자산입니다.
Léo - Maison de luxe
이커머스 프로덕트 오너
우리가 이 말을 충분히 했는지는 모르겠지만.
하지만 로딩 속도를 개선하고,
Google을 만족시키고 Core Web Vitals를 초록 영역으로 만들고 싶다면,
Paul Delcloy에게 연락하세요.
Florian Darroman - Les Makers
공동 창업자
Frontend, 사용자 측에서 모든 것이 일어나는 곳
브라우저는 용서가 없습니다. HTML을 parse하고, CSS를 발견하고, JavaScript를 실행하며, critical resource가 도착할 때까지 아무것도 render할 수 없습니다. 200 KB unminified CSS 파일, render-blocking으로 로드된 font, head에 inject된 analytics 스크립트. 이 각각이 사용자가 화면에서 무언가를 보는 순간을 push back합니다.
감사에서 만나는 대부분의 Core Web Vitals 문제는 frontend 문제입니다. Preload 없이 2 MB PNG hero image에 의해 저하된 LCP. Full DOM re-render를 트리거하는 event listener에 의해 죽임당하는 INP. 로드 후 페이지에 insert되는 광고 또는 embed에 의한 CLS.
Third-party 스크립트, 방 안의 elephant
감사하는 대부분의 e-commerce 사이트에서 third-party 스크립트는 실행된 JavaScript의 50~80%를 차지합니다. Tag manager, tracking pixel, A/B testing, chatbot, recommendation widget. 각각 무게와 네트워크 요청을 추가합니다.
문제는 누구도 누적 영향을 보지 않는다는 것입니다. 80 KB의 tag manager는 괜찮습니다. 각각 자체 logic을 실행하는 15개 tag를 로드할 때 Long Tasks가 chain up하고 INP가 폭발합니다. 해결책은 항상 모든 것을 제거하는 것이 아닙니다 - 각 스크립트의 실제 영향을 감사하고, 더 이상 서비스하지 않는 것을 drop하고, 다른 것은 non-blocking으로 로드하는 것입니다.
실무에서 Critical Rendering Path
개념은 간단합니다: 브라우저가 visible content를 표시하기 전에 다운로드하고 실행해야 하는 것을 최소화. 실무에서 모든 것을 다룹니다. Head tag ordering, font 로드 전략, JavaScript code splitting, critical CSS extraction.
주제를 흥미롭게 만드는 것은 모든 스택이 함정을 가진다는 것입니다. SSR이 있는 React 사이트는 우수한 TTFB를 가질 수 있지만 hydration으로 catastrophic INP를 가질 수 있습니다. 12개 plugin이 있는 WordPress 사이트는 종종 400 KB CSS를 로드하며 90%가 현재 페이지에 적용되지 않습니다. SFCC 사이트는 impeccable HTML을 서비스할 수 있지만 personalization layer를 위해 3 MB JavaScript를 inject할 수 있습니다.
중요한 것 측정
Lighthouse score는 시작점으로 유용하지만 실제 경험을 반영하지 않습니다. 사이트는 lab에서 95를 score하고 field에서 4초 LCP를 가질 수 있습니다. 차이는 네트워크, 디바이스, headless 모드에서 로드되지 않는 third-party에서 옵니다.
CrUX 데이터(Chrome User Experience Report)는 실제 사용자가 지난 28일 동안 경험하는 것을 측정합니다. Google이 ranking에서 Core Web Vitals를 평가하기 위해 사용하는 유일한 source입니다. 모든 최적화의 영향을 측정하기 위해 사용하는 source이기도 합니다. 템플릿별, 디바이스별 granularity를 위한 dedicated RUM(SpeedCurve LUX, Akamai mPulse)으로 보완됩니다.
제 frontend 전문 페이지
- React: bundle splitting, hydration, RSC, Next.js SSR
- Angular: lazy module, OnPush, SSR Universal, signal
- Astro: islands 아키텍처, image 최적화, view transition
- SpeedCurve: performance budget, LUX RUM, CI/CD
- Akamai mPulse: 템플릿별 세분화된 RUM
- Cloudflare, Akamai, Fastly: critical path를 위한 CDN
E-commerce 사이트의 경우 frontend angle은 complete 웹 성능 감사 또는 e-commerce 최적화에서 backend와 CDN과 결합합니다.