웹 성능 최적화3 유튜브 임베드 최적화 (반응형, CLS 방지, Facade 패턴) 유튜브 퍼가기 버튼을 누르고 코드를 그대로 붙여넣었다가 낭패를 본 적 있으신가요. 모바일에서 확인해보면 영상이 화면 밖으로 삐져나와 있는 상황, 저도 블로그를 시작하고 꽤 오랫동안 겪었습니다. 처음에는 단순히 보기 나쁜 문제라고 생각했는데, 파고들수록 그게 성능 지표와 검색 순위에까지 연결되는 문제라는 걸 알게 됐습니다.반응형 임베드와 aspect-ratio: 코드 절반으로 같은 효과를유튜브가 제공하는 기본 퍼가기 코드는 width="560" height="315"처럼 픽셀 단위 고정 크기로 되어 있습니다. 데스크톱에서는 문제없어 보이지만, 모바일 화면에서는 이 숫자가 그대로 적용되면서 iframe이 뷰포트를 벗어납니다. 제가 처음에 꺼낸 해결책은 max-width: 100%를 붙이는 것이었는데, 솔직히.. 2026. 6. 18. Lazy Loading (LCP, CLS, 스켈레톤 UI) loading="lazy" 한 줄이면 웹 성능 최적화가 끝난다고 생각한 적 있으셨나요? 저도 그랬습니다. 처음 이 속성을 발견했을 때 "이게 전부야?" 싶어서 사이트 이미지 전체에 붙여버렸습니다. 결과는 오히려 점수가 떨어지는 역효과였습니다. 그리고 솔직히 그 역효과가 즉시 눈에 띄지 않았기 때문에 더 골치가 아팠습니다. 한 줄짜리 최적화처럼 보이는 것이 잘못 쓰면 독이 된다는 걸, 직접 겪고 나서야 제대로 이해했습니다.Lazy Loading과 LCP: 무조건 적용이 아닌 선택적 적용Lazy Loading이란 사용자의 뷰포트, 즉 현재 화면에 보이는 영역에 이미지가 들어오기 전까지 로드를 미루는 기술입니다. HTML img 태그에 loading="lazy" 속성 하나만 추가하면 Chrome, Firefo.. 2026. 6. 16. CLS·LCP·INP 직접 잡은 경험기 - Core Web Vitals 실전 개선 CLS 수치 0.31. 구글 서치 콘솔에서 경고 메일을 받았을 때 저도 처음엔 이게 뭔 숫자인지 몰랐습니다. 페이지가 로드되면서 뭔가 살짝 밀리는 느낌은 늘 있었는데, 그게 구글한테 측정되고 있었다는 걸 그날 처음 알았습니다. 솔직히 그 전까지 Core Web Vitals라는 게 현실적인 SEO 영향력이 있는 건지 반신반의했습니다. 경고 메일을 받고 나서야 이걸 진지하게 보게 됐습니다.CLS를 잡는 데 이미지 태그 하나가 이렇게 중요할 줄 몰랐다CLS(Cumulative Layout Shift)란 페이지가 로드되는 동안 화면의 요소들이 얼마나 많이, 얼마나 크게 움직이는지를 수치로 나타낸 지표입니다. 쉽게 말해 "로딩 중에 화면이 얼마나 덜컹거리는가"를 측정하는 값인데, 구글은 0.1 이하를 좋음 기준으.. 2026. 4. 26. 이전 1 다음
