최적화

1. Lighthouse를 이용한 검사 해당 웹페이지의 성능 검사 및 성능 향상을 위한 가이드를 제공해줌. 결과 페이지에서 성능 점수와 Metrics, 페이지와 로드되는 과정 등을 알려준다. Metrics 왜 점수가 낮게 나왔는지를 보여주는곳 Oppotunities

1. 디스플레이의 주사율 일반적인 디스플레이의 주사율은 초당 60 Frame(60FPS) 브라우저의 주사율이 초당 30, 20 Frame 일때 쟁크 발생(애니메이션이 버벅이는 현상) 왜 브라우저가 60Frame을 못 그리는걸까? 먼저 브라우저가 화면을 그리는 과정에

1. Intersection Observer를 이용한 lazy loading 상황 사이트의 첫 메인화면에 영상이 재생이 되고 아래에는 이미지들이 존재. 이미지가 다운로드 다 된 이후에 영상이 다운로드 시작되므로 영상 재생이 조금 늦어질수 있음 해결 방법 이미지를 빠르

웹 폰트의 문제점 FOUT - 폰트가 적용 되지 않은 text가 먼저 표시되고 웹폰트가 적용이되면 text가 바뀜(IE, Edge) FOIT - 폰트가 적용 되기 전가지 text가 표시 되지 않음(Chrome, Safari) 웹 폰트 최적화방법 1. 폰트 적용 시

폰트 사이즈 줄이기 1. 폰트 사이즈 줄이는 다양한 방법 웹 폰트 포멧 사용 local 폰트 사용 subset 사용 Unicode Range 적용 data-uri로 변환 2. 브라우저별 폰트 포멧 파일 크기 : EOT > TTF/OTF > WOFF > WOFF2