웹 성능 컨설턴트: Shopify
Shopify 스토어의 웹 성능을 최적화합니다
Shopify는 SaaS입니다: 서버 접근 없음, 백엔드 tuning 없음. 최적화는 theme, app 및 third-party 스크립트에서 발생합니다. 실제 영향으로 모든 app을 감사하고, 필요시 theme을 rebuild하며, 녹색 Core Web Vitals를 위해 LCP를 prioritize합니다.
고객들이 신뢰합니다
감사를 부르는 Shopify 신호
Shopify는 백엔드를 숨기지만 무거운 theme과 통제되지 않은 app 쌓임의 결과를 spotlight합니다.
📱 product page 또는 checkout에서 빨간 mobile INP
Shopify는 active한 JavaScript injecting app이 4~5개를 초과하자마자 빨간 INP를 제공합니다. Main thread가 포화되고, 모든 상호작용이 둔하게 느껴집니다. App 감사 + aggressive deferral이 수정합니다.
🐌 모바일에서 LCP가 4초 이상
prioritized되지 않은 hero image, WebP/AVIF 대신 JPEG 형식, LCP 이미지에 misplaced된 lazy loading. Shopify Image API는 next-gen 형식을 지원하지만 theme이 이를 사용해야 합니다.
📦 추가 JS 번들이 1 MB 이상
Klaviyo + Loox + Recart + Loyalty + chat + analytics. 각 app은 스크립트를 추가합니다. Booster 또는 Avada Shopify와 같은 commercial theme으로 JS 무게는 쉽게 2 MB를 초과합니다. App 감사 + selective 제거는 50% 무게를 얻습니다.
🎨 Pre-Online Store 2.0 구식 theme
Brooklyn, Debut, Minimal theme은 2017-2018년이며, JSON section을 사용하지 않으며 architecturally 구식입니다. lean OS 2.0 theme으로 이동은 전체 무게에서 30~50%를 얻습니다.
🛒 INP를 죽이는 customized된 Shopify Plus checkout
Shopify Plus에서 checkout은 customizable합니다. 잘못 코딩된 customization(무거운 JS validation, injected third-party 스크립트)이 INP를 저하시킵니다. Chrome DevTools profiling이 refactoring을 위한 Long Tasks를 식별합니다.
🔁 유용한 app이 설치되어 있지만 모든 곳에서 로드
review app(Loox, Judge.me)은 product page에서 유용하고, home 또는 cart에서는 쓸모없습니다. Liquid를 통한 conditional loading이 app이 서비스하는 곳에서 active를 유지하면서 이를 수정합니다.
Shopify 최적화 방법론
4 성과를 변환하는 단계
1. App 감사 + 영향 측정
Active app 목록, SpeedCurve LUX 또는 동등을 통한 app당 JS 무게 및 LCP/INP 영향 측정. 제거, defer 또는 교체할 app 식별.
2. 현재 theme 평가
Theme 감사(OS 2.0 또는 pre-2.0 아키텍처, asset 무게, Liquid 품질). Rebuild vs in-place 최적화 평가.
3. Liquid 및 asset 최적화
LCP 이미지 prioritization(fetchpriority, Shopify Image API를 통한 next-gen 형식), 비critical 스크립트 defer, 적절한 lazy loading, critical section 최적화.
4. 지속적 모니터링
SpeedCurve LUX 설치 또는 Shopify Web Performance dashboard 사용. 미래 app 추가에 연결된 회귀를 차단하기 위해 시간에 따라 Core Web Vitals 추적.
1. App 감사 + 영향 측정
Active app 목록, SpeedCurve LUX 또는 동등을 통한 app당 JS 무게 및 LCP/INP 영향 측정. 제거, defer 또는 교체할 app 식별.
2. 현재 theme 평가
Theme 감사(OS 2.0 또는 pre-2.0 아키텍처, asset 무게, Liquid 품질). Rebuild vs in-place 최적화 평가.
3. Liquid 및 asset 최적화
LCP 이미지 prioritization(fetchpriority, Shopify Image API를 통한 next-gen 형식), 비critical 스크립트 defer, 적절한 lazy loading, critical section 최적화.
4. 지속적 모니터링
SpeedCurve LUX 설치 또는 Shopify Web Performance dashboard 사용. 미래 app 추가에 연결된 회귀를 차단하기 위해 시간에 따라 Core Web Vitals 추적.
미션 약속
Frequently asked questions
서버 접근 없이 정말로 Shopify를 최적화할 수 있나?
최적화하려면 Shopify Plus로 이동해야 하나?
Online Store 2.0 theme으로 이동해야 하나?
Shopify engagement는 어떻게 구조화됩니까?
Shopify를 녹색으로 만드세요
2023-2026 데이터
고객 후기
훌륭한 작업입니다.
Paul은 사이트 속도를 눈에 띄게 개선했고 Google 권장사항에 완벽히 맞춰 주었습니다.
전문적이고 꼼꼼하며 효율적이라 강력히 추천합니다.
Nicolas - April Moto
디지털 & 이커머스 디렉터
저희는 Paul의 업무에 매우 만족하고 있습니다. 그는 신속하고, 언제든지 응대 가능하며, 특히 효율적입니다. 그가 합류한 이후 성과와 대응력 측면 모두에서 매우 좋은 결과가 확인되었습니다. 저희 팀의 진정한 자산입니다.
Léo - Maison de luxe
이커머스 프로덕트 오너
우리가 이 말을 충분히 했는지는 모르겠지만.
하지만 로딩 속도를 개선하고,
Google을 만족시키고 Core Web Vitals를 초록 영역으로 만들고 싶다면,
Paul Delcloy에게 연락하세요.
Florian Darroman - Les Makers
공동 창업자
Shopify, SaaS 제약과 집중된 lever
Shopify는 SaaS 플랫폼입니다: 서버 접근 없음, Varnish 또는 Redis tuning 없음, custom install 없음. 그것도 그 commercial 강점입니다(관리할 인프라 zero), 그리고 Shopify가 수십만 스토어를 motorize하는 이유입니다. 웹 성능 측면에서 서버 접근 부재는 전체 stake를 제어할 수 있는 것으로 이동시킵니다: Liquid theme, 설치된 app, third-party 스크립트 및 native Shopify feature(Online Store 2.0, 통합 CDN, image API)의 적절한 사용.
Shopify는 여전히 훌륭한 시작점을 제공합니다: 포함된 글로벌 CDN, 자동으로 scaled된 hosting, 일반적으로 200ms 미만의 origin TTFB. 무거운 theme + 15개 app + 6개 marketing 스크립트를 쌓을 때 문제가 시작됩니다. Core Web Vitals가 드리프트하고, mobile INP가 빨간색이 되고, catalog SEO가 떨어집니다.
App 감사, lever number one
Shopify 미션에서 첫 work-stream은 거의 항상 app 감사입니다. Klaviyo, Loox, Judge.me, ReCharge, Loyalty Lion, Recart, PageFly. 각 app은 일반적으로 50 KB~300 KB의 JavaScript를 추가하며, 종종 모든 페이지에서 로드됩니다(유용한 곳만이 아님). 15개 app으로 쉽게 2 MB의 추가 JS를 초과합니다.
감사는 SpeedCurve LUX 또는 동등 RUM을 통해 LCP, INP 및 CLS에 대한 각 app의 영향을 측정합니다. 일부 app은 uninstall될 수 있고(방문자가 거의 사용하지 않음), 다른 app은 defer될 수 있으며(특정 페이지에서만 로드), 다른 app은 더 가벼운 custom 통합으로 교체될 수 있습니다. 5~10개의 최적화된 app은 일반적으로 1.5초의 LCP를 얻습니다.
Online Store 2.0 및 lean theme
Shopify는 2021년에 Online Store 2.0을 출시했습니다: 새로운 theme 아키텍처, JSON section, native metafield 지원. Pre-2.0 theme(Brooklyn, Debut, Minimal)은 구식이며 무겁습니다. lean Online Store 2.0 theme(Dawn, Sense 또는 lightweight custom theme)으로 이동은 종종 app 감사 후 두 번째 work-stream입니다.
마지막 angle은 Liquid 최적화입니다: 비효율적 loop 제거, 적절한 section_render 사용, 비LCP 이미지의 lazy loading, hero image의 fetchpriority. 완전한 e-commerce 감사를 원하는 스토어의 경우 이러한 lever는 더 광범위한 노력에 맞춰집니다.
기타 전문 분야 CMS
Magento
웹 성능을 위해 최적화된 Magento: Varnish Full Page Cache, Hyvä 마이그레이션, ElasticSearch tuning, checkout, opcache 및 MySQL.
더 알아보기
Prestashop
Prestashop 최적화: module 감사, Smarty cache 및 fragment, MySQL tuning, hook 최적화, lean frontend. 녹색 Core Web Vitals.
더 알아보기
WordPress
WordPress 감사 및 최적화: origin TTFB, plugin, theme, full page cache, object cache, CDN, 이미지. Core Web Vitals 녹색, SEO 회복.
더 알아보기