페이지 로딩 속도 개선을 위해 첫번째로 해야하는 것

바로 이미지 최적화입니다.

이전글의 어도비 예시에도 나왔듯 lcp, fid, cls에 페이지 레이아웃에 적절한 이미지 사이즈, 그리고 로딩 전략이 중요합니다.

페이지 로딩은 단순하게 보면 리소스 다운로드 -> 리소스 활용 -> 조정으로 이뤄지는데 이중 일반적으로 리소스 다운로드가 가장 오래 걸리는 과정입니다.

그 리소스 다운로드중에서도 70%정도를 이미지가 차지합니다.

이미지는 2차원이기 때문에 이미지 가로폭이 2배 차이나면 용량은 4배 차이가 납니다. 따라서 실제 활용되는 사이즈에 딱 맞는 이미지를 사용하지 않으면 용량이 말 그대로 기하급수적으로 늘어납니다.

그리고 이는 html img tag의 적절한 활용과 cdn을 통해서 구현 가능합니다.