미디어 패턴
우수한 오디오 및 동영상 재생을 위한 최신 미디어 환경을 웹에서 만듭니다.
- 실제 사용자 데이터를 사용하여 기준을 실행 가능하게 만들기
- CSS 컨테이너 쿼리의 잠재력 활용: Netflix팀의 경험담
- 패스키로 12배 더 빠른 로그인을 달성한 Tokyu
- Google Sheets에서 계산 작업자를 JavaScript에서 WasmGC로 포팅한 이유
- 불편함이 줄어들고 더 많은 제어 기능: Google Meet에서 오디오 및 동영상 권한을 개선한 방법
- MediaPipe의 온디바이스 웹 AI 솔루션을 활용하여 동영상 스트림 UX를 개선하고 세션 시간을 30% 늘린 BILIBILI
- Disney+ Hotstar가 INP를 61% 줄여 거실 기기에서 주간 카드 조회수를 100% 늘린 방법
- Google 하드웨어를 활용한 양방향 3D 웹에서: 차세대 제품 교육 경험
- PubTech의 동의 관리 플랫폼이 고객 웹사이트의 INP를 최대 64% 줄이고 광고 조회가능성을 최대 1.5% 개선한 방법
- 모든 위치에서 유용한 메모
- 콘텐츠 추천 제공업체인 Taboola가 LoAF를 사용해 게시자 파트너 웹사이트의 INP를 최대 36% 개선한 방법
- WebAssembly와 WebCodecs를 사용해 완전한 기능을 갖춘 웹 앱을 빌드하여 자연 트래픽을 83% 늘린 CapCut
- 일러스트레이터를 위한 웹의 힘: pixiv가 그리기 앱에 웹 기술을 활용하는 방법
- Tokopedia에서 머신러닝을 사용해 판매자 웹 앱을 개선하여 운영 비용을 절감한 방법
- Trendyol이 INP를 50% 줄여 클릭률을 1% 높인 방법
- Kiwix PWA를 통해 사용자가 오프라인에서 사용하기 위해 인터넷의 데이터를 GB 단위로 저장할 수 있는 방법
- Yahoo! JAPAN은 패스키 채택률을 11% 까지 늘리고 SMS OTP 비용을 절감했습니다.
- 테라가 광고 클릭률을 30% 높이고 최대 콘텐츠 렌더링 시간을 늘리는 데 프리패치를 사용한 방법
- 뒤로-앞으로 캐시가 Yahoo! JAPAN 뉴스의 모바일 수익 9% 증대
- redBus에서 웹사이트의 'Next Paint(다음 페인트)에 대한 상호작용(INP)'을 개선하고 판매를 7% 늘린 방법
- INP 문제 해결을 위한 Economic Times 퀘스트
- 브라우저 내 3D의 놀라운 기능을 조명하면서 슬로우 로드가 게이머와 개발자 모두를 놀라게 하는 방법
- 더 나은 웹 만들기: 더 빨라진 YouTube
- Rakuten 24에서 코어 웹 바이탈에 투자하여 방문자당 수익을 53.37%, 전환율을 33.13% 늘린 방법
- GoDaddy의 웹사이트 + 마케팅 서비스에서 고객 코어 웹 바이탈을 75% 개선한 방법
- 코어 웹 바이탈이 개선되어 전환율이 높아진 럭셔리 소매업체 Farfetch
- Yahoo! JAPAN은 비밀번호를 사용하지 않는 인증으로 문의량이 25% 감소하고 로그인 시간이 2.6배 빨라졌습니다.
- RebelMouse 코어 웹 바이탈을 최적화하여 충성도와 참여도를 높인 방법
- WorkBox가 포함된 Adobe Experience Manager의 최신 웹 환경
- MishiPay PWA로 거래 10배 증가, 대기 시간 2.5년 단축
- The Economic Times가 코어 웹 바이탈 기준점을 통과하고 전반적으로 43% 더 높은 이탈률을 달성한 방법
- Terra가 어두운 모드를 통해 사용자 참여도를 개선한 방법
- QuintoAndar에서 페이지 실적을 개선하여 전환율 및 세션당 페이지 수를 늘린 방법
- Kapwing: 웹을 위한 강력한 동영상 편집
- SVGcode: 래스터 이미지를 SVG 벡터 그래픽으로 변환하는 PWA
- Mail.ru 홈페이지의 코어 웹 바이탈을 개선한 결과 전환율이 평균 10% 증가했습니다.
- Renault는 콘텐츠가 포함된 최대 페인트를 측정하고 최적화하여 이탈률과 전환율을 개선한 방법
- Swappie가 코어 웹 바이탈에 집중하여 모바일 수익을 42% 늘린 방법
- 코어 웹 바이탈이 비즈니스에 미치는 영향
- 코어 웹 바이탈에 전념하여 Netzwelt의 광고 수익을 18% 늘린 방법
- Blibli의 PWA는 이전 모바일 웹사이트에 비해 사용자당 10배 더 많은 수익을 창출했습니다.
- Telegraph Media Group의 레이아웃 변경 누적 개선
- 오렌지: 새로운 PWA로 얻은 모바일 전환율 52% 향상
- PWA를 구현한 후 전환율이 55% 증가한 Mainline Menswear
- Zalando가 Lighthouse CI를 사용해 성능 피드백 시간을 1일에서 15분으로 단축한 방법
- Lowe's 웹사이트는 가장 빠른 전자상거래 웹사이트 중 하나입니다.
- Vodafone: LCP를 31% 개선하여 매출 8% 증대
- Wix가 인프라를 발전시켜 웹사이트 성능을 개선한 방법
- CLS 최적화를 통해 Yahoo! JAPAN 뉴스의 세션당 페이지 조회수 15% 증가
- Agrofy: LCP가 70% 개선되어 부하 이탈이 76% 감소
- Excalidraw Electron을 지원 중단하고 웹 버전으로 대체
- Clipchamp의 동영상 편집기 PWA 설치 수는 매월 97% 증가
- PWA 사용자의 경우 Gravit Designer PRO 구매 가능성이 2.5배 높음
- 캐싱 전략, 설치, 푸시 알림을 사용하여 모바일 전환율을 53% 높인 JD.ID
- PWA에 대한 투자로 사용자 유지율을 450% 높인 Rakuten 24
- NDTV는 코어 웹 바이탈을 기준으로 최적화하여 LCP를 55% 개선했습니다
- 웹 성능에 집중하여 Tokopedia의 클릭률을 35% 개선한 방법
- ZDF가 오프라인 모드와 어두운 모드로 동영상 PWA를 만든 방법
- Goibibo의 PWA로 전환율을 60% 높인 방법
- Mercado Libre가 웹 바이탈에 최적화된 방식 (TBT/FID)
- 밀리초 단위로 수익을 창출
- Wake Lock API 우수사례: BettyCrocker.com에서 구매 의도 지표 300% 증가
- Google에서 재확인 중 비활성으로 광고 실적을 개선한 방법
- eBay.com에서 스피드 쇼핑하기
- OYO Lite: 최고의 웹 및 Android 앱이 포함된 TWA
- AirSHIFT에서 React 앱의 런타임 성능을 개선한 5가지 방법
- Truebil이 웹을 성장 채널로 만든 방법
- OpenSooq가 웹에 투자하여 참여도를 높인 방법
- 서비스 워커를 Google 검색에 도입
- Google 어스를 웹에 도입하는 방법
- Nikkei는 다중 페이지 PWA를 통해 새로운 차원의 품질과 성능을 달성했습니다.
- George.com, 새로운 프로그레시브 웹 앱을 통해 모바일 고객 경험 개선
- 전환율을 80% 높인 BookMyShow의 새로운 프로그레시브 웹 앱
- Ele.me, 다중 페이지 프로그레시브 웹 앱으로 성능 로드 시간 개선
- WebVR의 댄스 톤
- 참여를 크게 높이고 데이터 사용량을 줄인 Twitter Lite PWA
- 프로그레시브 웹 앱으로 10억 인도 사용자의 이동성을 개선한 Ola
- 프로그레시브 웹 앱을 사용하여 모바일 웹에서의 재참여를 250% 늘린 OLX
- 0시간 1시간
- 프로그레시브 웹 앱으로 모바일 사이트 사용 시간을 2배 이상 늘린 Infobae
- MakeMyTrip.com의 새로운 PWA로 3배 높은 전환율 증가
- Jumia는 전환율이 33% 증가하고 PWA를 사용하여 사용자가 12배 늘었습니다.
- AMP 기반 PWA로 모바일 웹 환경의 속도를 4배 높이고 수익을 25% 늘린 Mynet
- 모바일 웹사이트를 PWA로 재구성하여 전환율을 17% 높인 Lancôme
- Voot의 프로그레시브 웹 앱
- PWA로 사용되는 산타 추적기
- WebVR용 Matterport VR
- Bear 71 및 WebVR
- WebVR 실험실의 핵심 상호작용
- WebVR에서 텍스트 렌더링
- 유선전화
- 카니발 유람선
- 날씨 채널
- 보호자를 위한 Smart Lock
- AliExpress용 Smart Lock
- 새로운 PWA로 전환율을 높이고 이탈률을 40% 낮춘 Housing.com
- 서비스 워커의 실제 성능에 미치는 영향 측정
- The Washington Post
- Google I/O 2016 프로그레시브 웹 앱 빌드
- eXtra 전자기기
- 주미아
- BaBe
- Konga
- 5마일
- 수우모
- 가상 아트 세션
- 네트A포터
- 프로그레시브 웹 앱으로 사이트 체류 시간을 3배 늘린 Flipkart
- 폴리머로 광선검 만들기
- Google+
- 탁월한 이상
- AirHorner.com
- 프로덕션의 서비스 워커
- Hummingbird 라이브러리
- 마데온 어드벤처 머신
- Adsy.me
- 리틀 연금술
- Hacker News Reader
- 메리 픽마스
- Chrome Dev Summit 2014
- SVGOMG
- 웹 필터
- 2014 호빗 체험
- Chrome으로 빌드
- 중간계의 프런트엔드
- 호빗 체험
- 우수사례 - The Sounds of Racer
- 우수사례 - Build Racer
- 우수사례 - Inside World Wide Maze
- Roll It 만들기
- 차세대 웹 레이아웃 - 내셔널 지오그래픽 Forest Giant
- 우수사례 - Google I/O 2013 실험
- 우수사례 - HTML5 게임 크기 자동 조정
- 우수사례 - 오즈로 가는 길 찾기
- 우수사례 - JAM with Chrome
- 별표 100,000개 만들기
- 우수사례 - JAM with Chrome
- Movi Kanti Revo - 1부 - 3D 세상 만들기
- 우수사례 - SONAR, HTML5 게임 개발
- 우수사례 - Technitone.com 구축
- 우수사례 - Bouncy Mouse
- 사례 연구 - HTML5 MathBoard
- 우수사례 - 스타니스와프 렘 Google 기념일 로고 제작
- 우수사례 - Stream Congress에서 실시간 업데이트
- 사례 연구 - Wordico를 Flash에서 HTML5로 변환
- 우수사례 - Onslaught! 아레나
- 우수사례 - 20thingsilearned.com의 페이지 넘기기 효과
- 사례 연구 - HTML5 캔버스와 관련된 문제
- 사례 연구 - deviantART muro의 HTML5
- 우수사례 - Chrome에서 드래그 앤 드롭 다운로드
- How Ray-Ban doubled conversion rate and reduced exit rate by 13% through prerendering using the Speculation Rules API
- How QuintoAndar reduced INP by 80%, increasing conversions by 36%
- How YouTube improved video performance with the Media Capabilities API
- Forbes
- Wego
- Alibaba
- AliExpress