웹 앱 패턴
웹 앱 빌드를 위한 공통 패턴 모음입니다.
- 장기 작업 최적화
- 결제 수단 설정
- 모듈 미리 로드
- 양식에서 브라우저 자동 완성 측정
- 1단계: 온라인 악성 댓글을 방지하기 위한 클라이언트 측 AI
- 2단계: 클라이언트 측 AI 독성 감지 빌드
- 총 차단 시간 (TBT)
- 최대 콘텐츠 렌더링 시간 최적화
- 웹 바이탈 측정 시작하기
- Web Vitals
- Core Web Vitals를 개선하는 가장 효과적인 방법
- CSS content-visibility 속성이 이제 기준으로 새로 제공됨
- LLM 기능과 요약 비교
- Core Web Vitals 측정항목 기준점을 정의하는 방법
- 실습에서 느린 상호작용 수동으로 진단
- Google 도구를 사용한 코어 웹 바이탈 워크플로
- 기준
- 뒤로-앞으로 캐시
- CSSNestedDeclarations를 사용하면 CSS 중첩이 개선됨
- First Input Delay (FID)
- 현장에서 성능 디버그
- 클라이언트 측 AI의 성능 및 UX 개선
- CSS @property의 성능 벤치마킹
- Google 도구로 Core Web Vitals와 광고 수익을 상관시키기
- 이제 오프스크린 iframe을 지연 로드해 보겠습니다.
- 웹용 스토리지
- 동일한 도메인에 여러 프로그레시브 웹 앱 구축
- 웹 푸시 프로토콜
- 좋은 프로그레시브 웹 앱의 특징은 무엇인가요?
- Chrome에서 웹 앱 매니페스트 업데이트를 처리하는 방법
- 설치할 수 있게 되는 데 필요한 것은 무엇입니까?
- 웹 앱 매니페스트 추가
- 엄격한 콘텐츠 보안 정책 (CSP)으로 교차 사이트 스크립팅 (XSS) 완화
- 웹에서 하드웨어 기기에 액세스
- 관련 출처 요청을 통해 사이트 전반에서 패스키 재사용 허용
- 올바른 이미지 형식 선택
- 웹용 브라우저 수준 이미지 지연 로드
- 커스텀 측정항목
- Google 애널리틱스 4 및 BigQuery로 성능 측정 및 디버그
- 웹 권한 권장사항
- 쿠키 알림 권장사항
- Media Session API로 미디어 알림 및 재생 컨트롤 맞춤설정
- 필드에서 느린 상호작용 찾기
- tabindex 사용
- TTFB (Time to First Byte)
- 소규모 LLM을 위한 실용적인 프롬프트 엔지니어링
- 첫 바이트까지의 시간 최적화
- Interaction to Next Paint(다음 페인트와의 상호작용)(INP)
- Light-dark()를 사용한 CSS 색상 스키마에 종속된 색상
- 웹 앱의 WebAssembly 성능 패턴
- CSS 애니메이션 그리드 레이아웃
- 게임패드로 Chrome 공룡 게임을 플레이하세요.
- inert 속성
- 인공지능이란?
- Web.dev AI팀 소개
- 윤리 및 AI
- 사이트 검색 업그레이드: 생성형 AI를 통한 상황별 답변
- AAGUID로 패스키 제공업체 확인
- Binaryen으로 Wasm 컴파일 및 최적화
- <model-viewer> 웹 구성요소
- HTML5에서 오디오 및 동영상 캡처
- userVerification 심층 분석
- CrUX 데이터가 RUM 데이터와 다른 이유는 무엇인가요?
- 웹 개발자를 위한 접근성
- Largest Contentful Paint (LCP)
- 타사 자바스크립트 로드
- 이미 패스키가 있는 경우 새 패스키의 생성을 방지합니다.
- IndexedDB 사용
- 모든 프런트엔드 개발자가 2024년에 알아야 할 5가지 CSS 스니펫
- URL의 구성요소는 무엇인가요?
- 검색 가능한 사용자 인증 정보 자세히 알아보기
- 렌더링 성능
- ResizeObserver: 요소의 document.onresize와 유사
- 텍스트 기반 애셋의 인코딩 및 전송 크기 최적화
- 오프스크린 캔버스—웹 작업자로 캔버스 작업 속도를 높이세요.
- First Contentful Paint (FCP)
- 콘텐츠 전송 네트워크 (CDN)
- 좋은 로그아웃 경험의 조건
- 상호작용 시작 시간 (TTI)
- Fetch Priority API로 리소스 로드 최적화
- :user-유효한 가상 클래스 및 :user-invalid 유사 클래스
- 비즈니스 의사 결정권자를 위해 Core Web Vitals 최적화
- 자바스크립트에서 base64 인코딩 문자열의 미묘한 차이
- CSS 서브 그리드
- 페이지 속도에 영향을 주지 않으면서 광고를 효과적으로 로드하기
- 일반적인 코드 적용 범위의 네 가지 유형
- 테스트하거나 하지 않는 것의 기술적 관점
- 테스트 사례 및 우선순위 정의
- 사용자 중심 성능 측정항목
- 반응형 이미지 미리 로드
- CSS로 사용자 환경설정에 맞게 서체 조정
- 피라미드 vs. 게? 적절한 테스트 전략 찾기
- 테스트 자동화의 세 가지 일반적인 유형
- 불필요한 다운로드 제거
- WebAssembly란 무엇이며 어디에서 발생했나요?
- mkbitmap을 WebAssembly로 컴파일
- 최신 웹 애플리케이션에서 사용자 데이터를 안전하게 호스팅
- 원본 비공개 파일 시스템
- 응답성이 높은 웹사이트를 위한 AVIF 배포
- 다음 페인트에 대한 상호작용 최적화
- 지금 사용할 수 있는 기준 기능
- 스크립트 평가 및 장기 작업
- 큰 DOM 크기가 상호작용에 미치는 영향과 이에 대해 취할 수 있는 조치
- HTML 및 상호작용의 클라이언트 측 렌더링
- 입력 지연 최적화
- 웹 바이탈 확장 프로그램을 사용하여 코어 웹 바이탈 문제 디버그
- 레이아웃 변경 누적 최적화
- WordPress 플레이그라운드 및 WebAssembly로 브라우저 내 WordPress 환경 빌드
- Cumulative Layout Shift (CLS)
- WebAssembly가 제공하는 새로운 개발자용 기능
- 소스 맵이란 무엇인가요?
- 앱 스토어의 PWA
- 모든 프런트엔드 개발자가 2023년에 알아야 할 6가지 CSS 스니펫
- CSS의 삼각 함수
- requestVideoFrameCallback()을 사용하여 동영상에서 효율적인 동영상 프레임별 작업 수행
- GDE 커뮤니티 하이라이트: Lars Knudsen
- 신속한 CSS 팁 애니메이션 그라데이션 텍스트
- 미디어 앱을 위한 새로운 패턴
- Chrometober 빌드
- 도움말 구성요소 빌드
- 비밀번호 없는 로그인의 패스키 생성
- 양식 자동 완성을 통한 패스키 로그인
- 플로팅 작업 버튼 (FAB) 구성요소 빌드
- 글꼴 권장사항
- 신속한 CSS 팁 애니메이션 로더
- GDE 커뮤니티 하이라이트: Alba Silvente Fuentes
- 웹 디자인 색상 대비 테스트
- 웹사이트의 기본 탐색 메뉴 빌드하기
- :modal?
- 비뚤어진 그리드 착시 현상 만들기
- 광고 소재 목록 스타일 지정
- 태그 및 태그 관리자를 위한 권장사항
- Nordhealth가 웹 구성요소에서 커스텀 속성을 사용하는 방법
- 개별 변환 속성으로 CSS 변환을 세밀하게 제어
- CSS 테두리 애니메이션
- BBC에서 보안 및 성능 향상을 위해 HSTS를 출시하는 방법
- 실험실 및 현장 데이터가 다를 수 있는 이유와 해야 할 일
- 윈윈 상황
- Internet Explorer의 끝
- HTML5Rocks 사용 중단
- 퍼스트 파티 쿠키 레시피
- 웹에서 오디오와 동영상 재생 동기화
- 원뿔 그래디언트를 사용해 멋진 테두리 만들기
- Fetch API 사용 시 오류 처리 구현
- 자바스크립트 라이브러리 또는 프레임워크 선택
- 자바스크립트 라이브러리와 프레임워크의 차이점
- 빠르고 아름다운 웹 글꼴을 위한 API
- 터미널에 대한 프런트엔드 개발자 가이드
- GOV.UK는 프런트 엔드에서 jQuery를 삭제합니다.
- 버튼 구성요소 빌드
- 브라우저 미리 로드 스캐너와 싸우지 마세요.
- 격차 줄이기
- 현장에서 웹 바이탈을 측정하기 위한 권장사항
- 개발자 커뮤니티에서 용기와 영감 얻기
- 실제 사용되는 가변 글꼴
- CSS Gradient Creator로 빠르게 멋진 CSS 그래디언트 만들기
- 주요 웹 개발자 고충사항 심층 탐구
- images.tooling.report를 사용하여 사이트 사진을 완벽하게 만들기
- 전역 및 로컬 변수 범위
- 대화상자 구성요소 빌드
- 웹에서 미디어 재생 오류 디버그
- GDE 커뮤니티 하이라이트: Nishu Goel
- 너무 많은 지연 로드가 성능에 미치는 영향
- 로드 표시줄 구성요소 빌드
- 양식에서 사용자 인증 정보 저장
- Chrome 및 Firefox 곧 메이저 버전 100 출시
- 적응형 파비콘 빌드
- HTTP 캐시를 업데이트하여 보안 및 개인 정보 보호 개선
- Emscripten에서 캔버스에 그리기
- 추가 HTML 요소
- USB 애플리케이션을 웹에 포팅 파트 2: gPhoto2
- 네트워크 오류 로깅 (NEL)
- WebAssembly 기능 감지
- USB 애플리케이션을 웹에 포팅 파트 1: libusb
- 테마 스위치 구성요소 빌드
- Emscripten을 사용하여 C++에 자바스크립트 스니펫 삽입하기
- Oculus 퀘스트 2의 PWA
- 건물 디자인
- Designcember 계산기
- 구조화된 Clone을 사용하여 자바스크립트 딥 복사
- 토스트 메시지 구성요소 빌드
- UI 펀드
- 3D 게임 메뉴 구성요소 빌드
- 애니메이션 부드러움 측정항목에 대응
- Lighthouse 사용자 플로우
- Chrome Dev Summit 2021에서 발표된 모든 내용
- PageSpeed Insights의 새로운 기능
- Photoshop의 웹 여정
- 다중 선택 구성요소 빌드
- Navigation Timing 및 Resource Timing을 통해 필드의 로드 성능을 평가하는 방법
- Sanitizer API를 사용한 안전한 DOM 조작
- 서드 파티 삽입 사용 시 권장사항
- SPA 아키텍처가 코어 웹 바이탈에 미치는 영향
- JavaScript 이벤트 자세히 알아보기
- 자바스크립트가 아닌 리소스 번들링
- 분할 버튼 구성요소 빌드
- CSS 모듈 스크립트를 사용하여 스타일시트 가져오기
- switch 구성요소 빌드
- CSS 강조 색상
- 사용자 환경설정 미디어 기능 클라이언트 힌트 헤더
- 탐색경로 구성요소 빌드
- C, C++, Rust의 WebAssembly 스레드 사용
- 미디어 프레임워크
- 미디어 스트리밍 기본사항
- 미디어 암호화
- 오프라인 스트리밍 기능이 있는 PWA
- 웹 바이탈 확장 프로그램 업데이트에서 필드 데이터로 길을 찾으세요
- 색 구성표 빌드
- @font-face용 CSS 크기 조정
- AVIF를 사용하여 사이트의 이미지 압축
- 웹 바이탈용 CSS
- 웹 도구의 누적 레이아웃 변경 변화
- 새로운 CSS 함수 의사 클래스 선택기 :is() 및 :where()
- 새로운 프로그레시브 웹 앱 교육 이용 가능
- 새로운 반응형: 구성요소 중심 환경에서의 웹 디자인
- User-Agent 클라이언트 힌트로 이전
- Excalidraw 및 Fugu: 핵심 사용자 여정 개선
- 보안 헤더 빠른 참조
- 서비스 워커의 ES 모듈
- 미디어 스크롤러 구성요소 빌드
- Lighthouse를 사용하여 웹 바이탈 최적화
- WebAssembly에서 비동기 웹 API 사용
- PWA 제목 표시줄의 창 컨트롤 오버레이 맞춤설정
- 타사 스크립트의 제어 유지
- WebOTP API를 사용하여 교차 출처 iframe 내의 OTP 양식 작성
- DataTransfer API를 사용한 장벽 해소
- 분할 텍스트 애니메이션 빌드
- CLS 측정항목 발전
- 웹 개발자 만족도
- 설정 구성요소 빌드
- 레이아웃 변경 디버그
- 자바스크립트: 이 기능의 의미는 무엇인가요?
- 프로젝트 구조, 수명 주기, 번들
- H5 및 QuickApp이란 무엇인가요?
- 미니 앱 구성요소
- 미니 앱 오픈소스 프로젝트
- 미니 앱 프로그래밍 방식
- 웹 개발자의 미니 앱에 관한 의견 마무리하기
- 미니 앱 마크업, 스타일 지정, 스크립팅, 업데이트
- 예시 프로젝트에 미니 앱 프로그래밍 원칙 적용
- Streams - 최종 가이드
- Tabs 구성요소 빌드
- 교차 출처 분리 사용 설정 가이드
- Origin-Agent-Cluster: 헤더로 성능 격리 요청
- CSS aspect-ratio 속성
- WebRTC는 이제 W3C 및 IETF 표준입니다.
- 캐러셀 권장사항
- 로컬 개발에 HTTPS 사용
- 의견 요청: 수명이 긴 페이지의 레이아웃 변경 측정항목을 개선하기 위한 개선
- 로컬 개발에 HTTPS를 사용해야 하는 경우
- Codelab: Sidenav 구성요소 빌드
- sidenav 구성요소 빌드
- Codelab: CSS의 중앙에 배치
- CSS의 가운데 맞춤
- 캐시가 마음에 드네요 ❤️
- 더 빠른 애플리케이션을 위한 최신 JavaScript 게시, 제공, 설치
- 교차 브라우저 페인트 워크렛 및 Houdini.how
- 가입 양식 권장사항
- 가입 양식 권장사항 Codelab
- AutoWebPerf로 감사 자동화
- 결제 및 주소 양식 권장사항
- 결제 양식 권장사항 Codelab
- SMS OTP 양식 권장사항
- 주소 양식 권장사항 Codelab
- 서비스 워커를 사용하여 페이지에 업데이트 브로드캐스트
- 서비스 워커와의 양방향 통신
- 작업자 개요
- 명령형 캐싱 가이드
- 마우스 가속을 사용 중지하여 더 나은 FPS 게임 환경을 제공합니다.
- 스토리 구성요소 빌드
- Codelab: 스토리 구성요소 빌드
- 스키마가 있는 Same-Site
- CMS용 브라우저 수준 지연 로드
- Codelab: 푸시 알림 클라이언트 빌드
- Codelab: 푸시 알림 서버 빌드
- 푸시 알림 개요
- 오프라인 사용 측정
- 고성능 CSS 애니메이션의 예
- CSS min(), max(), clamp()
- 서명된 교환 (SXG)
- 흐름 기준 약식을 사용한 논리 레이아웃 개선
- 일부 애니메이션이 느린 이유는 무엇인가요?
- 고성능 CSS 애니메이션을 만드는 방법
- 서비스 워커에서 범위 요청 처리
- 카메라 이동, 기울이기, 확대/축소를 제어합니다.
- 서드 파티 오리진 트라이얼이란 무엇인가요?
- 분리된 창 메모리 누수
- 오프라인 대체 페이지 만들기
- Core Web Vitals
- CSS의 마스크 이미지 속성으로 이미지에 효과 적용
- CSS의 클립 경로 속성으로 흥미로운 이미지 도형 만들기
- CSS ::marker를 사용한 맞춤 글머리기호
- 비밀번호 변경을 위한 잘 알려진 URL을 추가하여 사용자가 비밀번호를 쉽게 변경할 수 있도록 지원합니다.
- 서비스 워커를 사용한 결제 트랜잭션 조정
- 서비스 워커로 선택적 결제 정보 처리
- ARIA: 독극물 또는 해독제?
- Emscripten을 사용하여 WebAssembly의 메모리 누수 디버깅
- 콘텐츠 가시성: 렌더링 성능을 향상시키는 새로운 CSS 속성
- 클립보드 액세스 차단 해제
- 리퍼러 및 리퍼러 정책 권장사항
- Android의 웹
- Google에서 PWA 구축, 1부
- Lighthouse CI로 성능 모니터링
- Google 계정에서 패스키의 사용자 환경 설계
- @property: CSS 변수에 초능력 부여
- Android 결제 앱의 배송 및 연락처 정보 제공
- 서비스 워커 캐싱 및 HTTP 캐싱
- 웹 기반 결제 앱 개요
- 웹 기반 결제 앱 등록
- 사이트 속도와 비즈니스 측정항목 관련 정보
- Chrome UX 보고서를 통해 현장 성능 살펴보기
- 탐색 요청 처리
- 한 줄의 CSS로 이루어진 10개의 최신 레이아웃
- devicePixelContentBox로 완벽한 픽셀 렌더링
- web.dev 실시간 스트리밍 요약
- 로그인 양식 권장사항
- 크로스 플랫폼 브라우저 기능을 사용하여 로그인 양식 작성
- 프로그레시브 웹 앱을 점진적으로 개선하기
- Google 검색의 자바스크립트 문제를 디버깅하기 위한 웹 개발자 도구
- Workbox로 복원력이 우수한 검색 환경 빌드
- 웹페이지에 미디어 추가
- 이전에 아무도 링크한 적이 없는 대담한 링크: 텍스트 프래그먼트
- 좋은 브라우저 버그를 신고하는 방법
- PWA를 앱처럼 구현
- RAIL 모델을 사용한 성능 측정
- Quicklink로 React에서 탐색 속도 높이기
- 메타데이터 가져오기로 웹 공격으로부터 리소스 보호
- 콘텐츠 재정렬
- Chromium 84의 Web Animations API 개선사항
- 결제 거래의 처리 과정
- Android 결제 앱 개발자 가이드
- 웹 결제를 통한 결제 앱 지원
- Chromium 83의 macOS system-ui 글꼴에 관한 더 많은 가변 글꼴 옵션
- 앱 바로가기로 빠르게 작업하기
- 프로그레시브 웹 앱이 비즈니스 성공을 이끄는 방법
- AppCache 삭제 준비
- 영구 스토리지
- 설치 전략을 정의하는 방법
- CommonJS가 번들을 더 크게 만드는 방법
- Chrome에서 웹 오디오 앱 프로파일링
- 강력한 기능을 위해 '교차 출처 분리'가 필요한 이유
- 세분화된 청크 분할로 Next.js 및 Gatsby 페이지 로드 성능 개선
- '동일 사이트' 및 '동일 출처'
- COOP 및 COEP를 사용하여 웹사이트를 '교차 출처 분리'했습니다.
- measureUserAgentSpecificMemory()로 웹페이지의 총 메모리 사용량을 모니터링합니다.
- web.dev 엔지니어링 블로그 #1: 사이트 구축 및 웹 구성요소 사용 방법
- color-scheme CSS 속성 및 해당 메타 태그로 어두운 모드 기본 스타일 지정이 개선되었습니다.
- 코로나19 사태 동안 모든 사용자가 웹사이트를 사용할 수 있도록 지원하세요
- 색상 및 대비 접근성
- 액세스 가능한 탭 타겟
- 접근성이 뛰어난 반응형 디자인
- 오버로드된 서버 문제 해결
- 신뢰할 수 있는 유형으로 DOM 기반 교차 사이트 스크립팅 취약점 방지
- Android 앱에서 PWA 사용
- 선택적 글꼴을 미리 로드하여 레이아웃 변경 및 보이지 않는 텍스트 (FOIT)의 플래시 방지
- nginx를 사용하여 서명된 HTTP 교환 (SXG)을 배포하는 방법
- nginx를 사용하여 서명된 HTTP 교환 (SXG)을 설정하는 방법
- 미디어 쿼리로 CSS 배경 이미지 최적화
- 여러 부서에서 웹사이트 속도 수정
- 레이아웃 변경 후 스크롤 맞추기
- 웹 패키지 도구를 사용하여 서명된 교환을 설정하는 방법
- 나만의 인앱 설치 환경을 제공하는 방법
- 실제 뷰에서 가상 객체 배치
- 웹에 도입된 가상 현실 2부
- 증강 현실: 이미 알고 계신가요?
- 웹 프레임워크 생태계 발전
- 프로그레시브 웹 앱이란?
- 마스크 가능한 아이콘이 있는 PWA에서 적응형 아이콘 지원
- Workbox를 사용하여 내장된 공유 UI에 PWA 통합
- 동기 XMLHttpRequest()에서 페이지 닫기 개선
- 모듈 작업자로 웹 스레딩
- 속도 도구의 진화: Chrome Developer Summit 2019의 주요 소식
- 적응형 로드: 느린 기기에서 웹 성능 개선
- 웹 작업자를 사용하여 브라우저의 기본 스레드에서 자바스크립트 실행
- 2019년 여름 이미지 최적화 설문조사 의견
- 푸시 알림 서버 빌드
- Next.js에서 경로 미리 가져오기
- Web Share API를 사용하여 OS 공유 UI와 통합
- Next.js를 사용한 기본 성능
- AMP가 Next.js 앱에서 빠른 속도를 보장하는 방법
- Next.js에서 동적 가져오기를 사용한 코드 분할
- 웹으로 만나는 가상 현실
- SameSite 쿠키 레시피
- 쿠키 이해
- 빠른 광고의 중요성
- 푸시 알림을 사용하여 사용자 참여 유도 및 재참여 유도
- 알림 API 시작하기
- 서비스 워커를 사용하여 알림 관리
- 레이아웃 불안정성 수정
- 피처폰에서도 웹 앱을 빠르게 로드하는 기술
- Houdini의 새 API를 사용한 더 스마트한 맞춤 속성
- 향후 탐색 속도를 높이기 위해 리소스 미리 가져오기
- 미리 가져오는 두 가지 방법: <link> 태그 및 HTTP 헤더
- 혼합 콘텐츠란 무엇인가요?
- 혼합 콘텐츠 수정
- 기본적인 웹용 동영상으로 단순한 이미지 활용
- 프로그레시브 웹 앱에 Apple 터치 아이콘 추가
- Ready Player 웹
- 다중 출처 사이트의 프로그레시브 웹 앱
- 웹 글꼴 크기 줄이기
- WebFont 로드 및 렌더링 최적화
- Angular CLI로 프로그레시브 웹 앱 만들기
- 속도가 느린 서드 파티 자바스크립트 식별
- 이미지 CDN을 사용하여 이미지 최적화
- 서드 파티 자바스크립트를 효율적으로 로드
- 서드 파티 자바스크립트 성능
- 서드 파티 자바스크립트 최적화
- 더 강력한 양식 제어 기능
- 조기에 네트워크 연결을 설정하여 체감되는 페이지 속도 개선
- 배경화면 필터로 OS 스타일 배경 만들기
- 비활성 상태 재검증을 통해 최신 상태 유지
- Angular CDK를 사용하여 대규모 목록 가상화
- Angular에서 경로 미리 로드 전략
- Angular의 변경 감지 최적화
- 네트워크 품질에 따라 이미지 제공에 맞게 동영상 조정
- 예측 미리 가져오기를 통한 빠른 웹 탐색
- codelyzer로 Angular 앱의 접근성 검사
- Angular CLI를 사용한 성능 예산
- Angular 서비스 워커로 사전 캐싱
- Preferreds-color-scheme: 안녕 어둠, 내 오랜 친구
- Angular에서 경로 수준 코드 분할
- 웹 성능을 위한 주요 팁
- 시작하기: Angular 애플리케이션 최적화
- 웹 구성요소: 웹을 작동시키는 비밀 요소
- 성능 예산에 Lighthouse 사용
- Web Payments API 업데이트
- 속도의 가치
- 데스크톱에서 프로그레시브 웹 앱용 주소 표시줄 설치
- 실적으로 어떻게 전환을 개선할 수 있나요?
- PWA 설치 승격 패턴
- PWA를 설치할 수 있다고 사용자에게 알리려면 어떻게 해야 하나요?
- 서비스 워커 사고방식
- 빠른 로드 시간 등을 위한 이미지 정책
- 긴 자바스크립트 작업으로 인해 상호작용 시작 시간이 지연되고 있나요?
- 중요한 CSS 추출
- '중요'로 중요한 CSS 추출 및 삽입
- 대규모 속도: 웹 성능의 새로운 기능은 무엇인가요?
- PROXX 소개
- 웹 인식 툴킷을 사용한 시각적 검색
- SameSite 쿠키 설명
- 네트워크 품질에 따른 적응형 게재
- 포털 실습: 웹에서 원활한 탐색
- brotli로 네트워크 페이로드 축소 및 압축
- I/O 2019의 web.dev
- 속도를 유지하는 방법
- 속도 측정 방법
- 속도란 무엇인가요?
- React.lazy 및 Suspense를 사용한 코드 분할
- 반응 스냅을 사용하여 경로 사전 렌더링
- Workbox로 React 앱 만들기에서 사전 캐싱
- React 앱 만들기로 웹 앱 매니페스트 추가
- react-axe 및 eslint-plugin-jsx-a11y를 사용한 접근성 감사
- 반응 창을 사용하여 대규모 목록 가상화
- 시작하기: React 앱 최적화
- Codelab: 중요한 애셋을 미리 로드하여 로드 속도 개선
- Preferreds-reducedmotion: 때로는 적은 움직임이 더 효과적일 수 있습니다.
- 중요하지 않은 CSS 연기
- 신뢰는 좋고 관찰은 더 좋습니다: Intersection Observer v2
- 반응형 웹 디자인 기본사항
- 구성 가능한 스타일시트
- 웹에서 렌더링
- Travis CI와 함께 bundlesize 사용
- 빌드 프로세스에 성능 예산 통합
- webpack으로 성능 예산 설정
- Lighthouse 봇을 사용하여 성능 예산 설정
- Emscripten 및 npm
- 앱이 설치되었나요? getInstalledRelatedApps()로 알 수 있습니다.
- 페이지 로드 속도를 높이기 위해 최신 브라우저에 최신 코드 제공하기
- 클라이언트 힌트를 사용하여 사용자에 맞게 조정
- 접근성이란 무엇인가요?
- 시맨틱 및 스크린 리더
- 키보드 액세스 기본사항
- tabindex로 포커스 제어
- 라벨 및 텍스트 대체
- 키보드 입력을 쉽게 하기 위해 시맨틱 HTML 사용
- 제목 및 랜드마크
- 스타일 포커스
- 보안은 너무 두려워해서는 안 됩니다.
- Lighthouse로 성능 기회 탐색하기
- 명령줄로 WebP 이미지 만들기
- 코드 분할로 자바스크립트 페이로드 줄이기
- DevTools 네트워크 패널 살펴보기
- 여러 슬롯 너비 지정
- 서비스 워커 및 Cache Storage API
- 검색의 원리
- 반응형 이미지 제공
- 페이지 로드 속도를 높이기 위해 최신 브라우저에 최신 코드 제공하기
- 교차 출처 리소스 공유(CORS)
- 코드 분할로 자바스크립트 페이로드 줄이기
- 밀도 설명자 사용
- 페이지 로드 속도를 높이기 위해 애니메이션 GIF를 동영상으로 대체합니다.
- 동일한 출처 정책 및 가져오기 요청
- 사용하지 않는 코드 삭제하기
- GIF를 동영상으로 바꾸기
- 브라우저 샌드박스
- 사용하지 않는 코드 삭제하기
- 올바른 크기로 이미지 제공
- WebP 이미지 사용
- webpack과 함께 Imagemin 사용
- HTTP 캐시로 불필요한 네트워크 요청 방지