LCP 점수 올리는 이미지 최적화 방법, 로딩 속도가 빨라져요

웹사이트 속도 때문에 고민이신가요? 구글이 중요하게 생각하는 핵심 웹 지표 중 LCP라는 게 있는데, 이미지만 잘 다듬어도 이 점수를 꽤 올릴 수 있어요. 오늘은 LCP가 무엇인지, 그리고 어떻게 이미지를 설정해야 로딩이 시원시원해지는지 편하게 이야기해 드릴게요.

LCP 점수, 왜 이미지가 중요할까요?

검색엔진 최적화를 할 때 이미지를 타겟으로 잡는 게 생각보다 정말 효과적이에요. LCP는 화면에서 가장 큰 덩어리가 뜨는 시간을 말하는데, 이게 2.5초 안으로 들어와야 점수가 잘 나오거든요. 글자 폰트 로딩 때문에 늦어지는 것보다 이미지를 딱 띄우는 게 사용자 입장에서도 보기가 훨씬 좋답니다.

이미지로 시선을 사로잡는 이유

LCP는 페이지가 열릴 때 뷰포트, 그러니까 우리 눈에 보이는 화면 안에서 가장 큰 콘텐츠가 뜨는 시간이에요. 텍스트보다 이미지가 디자인적으로도 예쁘고, 폰트가 늦게 떠서 글자가 깜빡거리는 현상도 피할 수 있어서 좋아요. 첫 화면에 중요한 이미지가 빨리 뜨면 방문자가 사이트를 이탈할 확률도 확 줄어든답니다.

로딩 지연을 막는 이미지 설정 꿀팁

그냥 이미지를 올린다고 끝나는 건 아니에요. 성공적인 최적화를 위해서는 몇 가지 신경 써야 할 점들이 있어요. JPG나 PNG 대신 가벼운 WEBP 파일로 바꾸는 건 기본이고요. 모바일이랑 PC에서 보이는 이미지를 따로 만들어서 불필요한 데이터를 아끼는 게 중요해요.

꼭 기억해야 할 체크리스트

우선 내가 직접 코드를 수정하고 관리할 수 있는 이미지를 타겟으로 정해야 해요. 그리고 작업이 끝난 뒤에도 PageSpeed Insights 같은 도구로 속도가 잘 나오는지 틈틈이 확인해보는 게 좋아요. 이미지 크기는 품질을 유지하는 선에서 최대한 줄이고, 화면 밖으로 넘어가지 않게 사이즈를 잘 맞춰주는 것도 중요하답니다.

반응형 이미지와 파일 크기 줄이기

모바일과 PC, 각각 따로 준비하세요

반응형 웹이 대세인 만큼, 모바일용과 PC용 이미지를 따로 준비하는 게 좋아요. 너무 작으면 LCP 타겟으로 인식이 안 될 수도 있고, 너무 크면 로딩이 느려지니까 적당한 사이즈를 찾는 게 포인트예요. 보통 모바일은 가로 300픽셀, PC는 500픽셀 정도면 적당한 것 같아요. 상황에 따라 조금씩 달라질 수는 있겠죠?

웹용 포맷으로 변환하고 압축하기

이미지를 만들었다면 WEBP 같은 웹 전용 포맷으로 변환해 보세요. 용량이 정말 많이 줄어들거든요. 그리고 이미지가 검색엔진 최적화에 도움을 주려면 스크롤을 내리지 않아도 보이는 첫 화면, 즉 뷰포트 안에 배치되는 게 가장 효과적이랍니다.

코딩으로 로딩 속도 날개 달기

태그로 우선순위 정해주기

이제 코드를 조금 만져볼게요. `picture` 태그를 쓰면 모바일과 PC 상황에 맞춰 다른 이미지를 보여줄 수 있어요. 그리고 `fetchpriority` 같은 태그를 써서 브라우저한테 “이 이미지 먼저 가져와!” 하고 알려주면 속도가 훨씬 빨라져요.

아래 코드를 참고해서 이미지 태그를 작성해보세요. 모바일과 PC 상황에 맞춰서 알아서 이미지를 바꿔주는 똑똑한 코드랍니다.

<picture> <source srcset="모바일용_이미지주소.webp" media="(max-width: 767px)"> <source srcset="PC용_이미지주소.webp" media="(min-width: 768px)"> <img src="기본_이미지주소.webp" alt="LCP 최적화 이미지" loading="eager"> </picture>