웹 성능 컨설턴트: Astro
Astro 사이트의 최대 성능을 끌어냅니다
Astro는 처음부터 성능을 위해 설계되었습니다: 기본적으로 HTML, island를 통한 opt-in JavaScript. 오늘날 시장에서 가장 빠른 framework 중 하나입니다. 올바른 building block을 활용해야 합니다. Astro 아키텍처에 작업해 선택을 검증하고 LCP를 최대로 push합니다.
고객들이 신뢰합니다
Astro에서 검증하거나 push할 lever
Astro는 기본적으로 performant하지만 아키텍처 선택이 최종 결과를 결정합니다.
🏝️ client:load로 너무 광범위하게 hydrated된 island
client:load는 즉시 hydrate합니다. Astro의 정신에 반합니다. client:idle 또는 client:visible이 LCP를 위해 main thread를 보존합니다. 감사가 recalibrate할 island을 식별합니다.
📦 Astro에도 너무 무거운 JS 번들
Astro는 island에 embedded된 무거운 dependency를 보호하지 않습니다. Full Material-UI를 import하는 React island는 200 KB를 추가합니다. Island 감사가 각 contributor를 정량화합니다.
🖼️ 모든 곳에서 사용되지 않은 Astro Image component
<Image> component가 AVIF/WebP, lazy loading, srcset을 자동화합니다. 그 일반화가 적용할 가장 빠른 LCP lever입니다.
📚 잘못 활용된 Content collection
Astro content collection은 TS typing + Zod validation + 최적화된 rendering을 가능하게 합니다. Partial 통합은 성능을 테이블에 남깁니다.
🔄 내부 navigation에서 활성화되지 않은 view transition
Native view transition은 비용 없이 SPA-like 느낌을 전달합니다. Light e-commerce 또는 content 사이트에서 무료 UX와 성능 이득입니다.
🌐 정적 출력 대신 SSR Astro
Astro는 정적 모드(build에서 정적 사이트) 또는 SSR(모든 요청)로 생성할 수 있습니다. 정적 모드가 최적 TTFB를 제공합니다. SSR 모드는 진정으로 동적 content에 대해서만 정당화됩니다.
Astro 최적화 방법론
4 성과를 변환하는 단계
1. Island 및 client:* directive 감사
모든 island 매핑, 사용된 directive 검증, client:idle / client:visible 기회 평가.
2. Island당 번들 감사
Island당 embedded JS 측정(React, Vue, Svelte). 교체하거나 추가로 격리할 무거운 dependency 식별.
3. Image 및 font 최적화
Image component 일반화, LCP 이미지에 fetchpriority, font-display swap, font subsetting. 일반적인 LCP 이득: 200-500ms.
4. 정적 vs SSR 출력
Build 모드 평가(static vs SSR vs hybrid). SSR 사용 시 caching 전략 검증(hosting에 따라 Cloudflare, Netlify, Vercel).
1. Island 및 client:* directive 감사
모든 island 매핑, 사용된 directive 검증, client:idle / client:visible 기회 평가.
2. Island당 번들 감사
Island당 embedded JS 측정(React, Vue, Svelte). 교체하거나 추가로 격리할 무거운 dependency 식별.
3. Image 및 font 최적화
Image component 일반화, LCP 이미지에 fetchpriority, font-display swap, font subsetting. 일반적인 LCP 이득: 200-500ms.
4. 정적 vs SSR 출력
Build 모드 평가(static vs SSR vs hybrid). SSR 사용 시 caching 전략 검증(hosting에 따라 Cloudflare, Netlify, Vercel).
미션 약속
Frequently asked questions
Content 사이트를 위한 Astro vs Next.js?
Astro가 e-commerce에 관련 있나?
Astro DB를 사용해야 하나?
Astro engagement는 어떻게 구조화됩니까?
Astro를 최대 성능으로 push하세요
2023-2026 데이터
고객 후기
훌륭한 작업입니다.
Paul은 사이트 속도를 눈에 띄게 개선했고 Google 권장사항에 완벽히 맞춰 주었습니다.
전문적이고 꼼꼼하며 효율적이라 강력히 추천합니다.
Nicolas - April Moto
디지털 & 이커머스 디렉터
저희는 Paul의 업무에 매우 만족하고 있습니다. 그는 신속하고, 언제든지 응대 가능하며, 특히 효율적입니다. 그가 합류한 이후 성과와 대응력 측면 모두에서 매우 좋은 결과가 확인되었습니다. 저희 팀의 진정한 자산입니다.
Léo - Maison de luxe
이커머스 프로덕트 오너
우리가 이 말을 충분히 했는지는 모르겠지만.
하지만 로딩 속도를 개선하고,
Google을 만족시키고 Core Web Vitals를 초록 영역으로 만들고 싶다면,
Paul Delcloy에게 연락하세요.
Florian Darroman - Les Makers
공동 창업자
Astro, 성능을 위해 설계된 framework
Astro는 최근에 등장한 가장 혁신적인 frontend framework 중 하나입니다. 원칙: 기본적으로 HTML, island를 통한 opt-in JavaScript. React, Vue, Angular가 SPA를 전달하기 위해 완전한 runtime을 ship하는 곳에서 Astro는 정적 HTML을 생성하고 명시적으로 interactive로 표시된 컴포넌트에만 JavaScript를 inject합니다.
결과: 일반적인 Astro 사이트는 총 JavaScript를 50 KB 미만으로 ship하고, 처음부터 녹색 Core Web Vitals를 hit하고, 1.5초 미만의 mobile LCP에 도달합니다. Content 사이트(블로그, institutional 사이트, documentation, portfolio)의 경우 Astro는 오늘날 성능에서 기본 선택입니다.
Island 아키텍처, 차별화된 lever
Island 원칙은 서버 측에서 HTML을 render한 다음(또는 정적 사이트의 build에서) client:load, client:idle, client:visible로 명시적으로 interactive로 선언된 컴포넌트만 hydrate합니다. 각 island은 격리됩니다. 그 JavaScript는 페이지의 나머지를 오염시키지 않습니다.
이 아키텍처는 동일한 Astro 페이지에서 React, Vue, Svelte, Preact 컴포넌트를 결합할 수 있게 합니다. 각각 격리됩니다. 도전은 client:* directive 사용을 규율화하는 것입니다: 상호작용이 즉각적이지 않을 때 client:visible 또는 client:idle이 LCP를 위해 main thread를 자유롭게 합니다.
Image 최적화 및 view transition
Astro는 next-gen 형식(AVIF, WebP), lazy loading, responsive srcset 및 prioritization을 자동화하는 Image component를 통합합니다. LCP에서 가장 보람 있는 컴포넌트 중 하나입니다. 그 일반화는 종종 image-heavy 사이트에서 LCP를 녹색으로 만드는 데 충분합니다.
Native view transition(Astro 3부터)이 real SPA의 JavaScript 비용 없이 SPA-like 유동성을 추가합니다. Content 사이트와 light e-commerce의 경우 현대 UX와 성능 사이의 훌륭한 타협입니다. 기존 Astro 사이트의 웹 성능 감사의 경우 angle은 island 사용을 검증하고 최적화 가능한 것을 최적화하는 것입니다.
기타 전문 분야 기술
Angular
Angular 최적화: lazy modules, OnPush change detection, SSR Universal 또는 Analog, signals, zone.js 제거. Enterprise SPA에서 안정적인 Core Web Vitals.
더 알아보기
Drupal
Drupal 최적화: Render API 및 cache contexts, Dynamic Page Cache + BigPipe, Views 성능, MySQL tuning. 전략적 템플릿에서 녹색 Core Web Vitals.
더 알아보기
Laravel
Laravel 최적화: Eloquent N+1, opcache + JIT, Octane, Redis cache, async queue, MySQL tuning. 떨어진 TTFB와 녹색 Core Web Vitals.
더 알아보기