Lighthouse로 웹사이트 최적화하기

💡 Lighthouse, 성능최적화로 인도하는 등대

 

Lighthouse란 영어로 등대를 의미한다.

이 말처럼 Lighthouse는 우리가 공들여 만든 사이트가 제대로 굴러갈 수 있는건지,

혹은 부족한 면은 없는지 검사해주고 그에 대한 해결책을 제시해준다.

말그대로 등대같이 우리를 성능최적화의 바른 길로 이끌어주는 프로그램이다.

 

---

 

🔥 Lighthouse의 Performance항목

 

Performance 항목에서는 웹성능을 측정한다.

화면에 콘텐츠가 표시되기까지의 시간이나, 화면이 나오고 나서 클릭등의 상호작용이 먹힐때까지의 시간,

혹은 화면에 불안정한 요소가 있는지 여부를 체크한다.

 

시행시 위와 같이 각 항목별로 점수가 나온다.

 

---

 

⚡️ Performance를 개선하기 위한 Opportunities항목

 

조금 아래로가면 '추천' 영역이 보인다.

이 부분이 우리에게 실질적으로 개선을 권하는 부분이라고 볼 수 있다.

 

 

 

검사한 사이트의 경우 예상 절감을 가장 크게 할 수 있을 만한 추천 항목 

top2가 모두 이미지에 관련된 부분이었다.

확실히 이미지를 많이 넣는 사이트는 최적화에 신경쓸 필요가 있겠다 싶었다.

그래서 아래에서 그 내용들에 대해 짤막한 설명을 더한다.

 

 

1️⃣ 차세대 형식을 사용해 이미지 제공하기

 

그중 첫번째인 '차세대 형식을 사용해 이미지 제공하기'항목은

일반적인 JPG나 PNG와 같은 포맷의 이미지를 대체할

AVIF나 WEBP 이미지를 제공하는 방법을 권하는 내용이다.

 

이 AVIF와 WEBP는 모두 최신 파일 확장자이다.

WebP	-JPEG를 대체하기 위해 제시된 형식 -화질 저하를 최소화하면서 파일 크기를 축소(같은 크기지만 JPEG의 10~80%까지 압축) *지원브라우저: Chrome, Edge, Firefox, Opera, Safari (주요 브라우저에서 대부분 지원하지만 사파리는 아직 미지원 하는 버전도 상당히 존재한다.)
AVIF	-이미지와 애니메이션 포맷에 높은 효율을 자랑하는 형식. -PNG나 JPEG보다 훨씬 더 나은 압축 기능을 제공 -색 깊이, 애니메이션 프레임, 투명도 등을 지원한다. *지원브라우저: Chrome, Opera, Samsung Browser 들의 최신 버전

 

하지만 지원 브라우저 항목을 보면 알다시피, 모두 '최신'을 전제로 하며,

AVIF는 파이어폭스와 사파리가 지원이 안된다는 점에서 당연히! 이 아이들로만 웹페이지를 제공하는것은

아주아주 위험한 발상이다.

 

💡 다행히 html 태그 <picture>을 사용하면

이런 최신 형식들을 지원하는 브라우저인지 체크하고, 

지원한다면 Webp나 AVIF를, 지원하지 않는다면 다른 고전적 JPG PNG등을 띄워줄 수 있다.

 

아주 간단한 예시코드를 첨부하자면 아래와 같다.

<picture>
  <source srcset="img-url/large.avif" type="image/avif" />
  <source srcset="img-url/large.webp" type="image/webp" />
  <img src="img-url/large.jpg" alt />
</picture>

<picture>로 <img>태그를 감싸고,

<img> 태그 전에 <source>태그로 체크할 확장자이미지를 넣어주면 된다.

어렵지 않다.

 

추가로 많이 큰 이미지가 아닌 경우

Webp나 AVI확장자로 바꿀 수 있는 웹애플리케이션을 이용해서 간단하게 이 이미지들을 만들 수 있다.

구글 검색으로도 (ex. 'convert jpg to webp') 접근할 수 있다.

그 중 하나의 사이트를 링크로 들어가서 확인해봐도 된다.

 

2️⃣ 오프스크린 이미지 지연하기

 

오프스트린이란 말그대로, Off Screen, '화면 밖'을 의미한다.

화면 밖의 영역이어서 실질적으로 사용자가 지금 당장 그 화면을 볼것이란 보장이 없는데,

보이지도 않는 많은 이미지들을 로드하면 효율적이지 않을것이다.

Ligthhouse가 그런 현상을 개선하라고 친절하게 알려주고 있는것이다.

 

다행이도 오픈소스 이미지를 지연시키는 플러그인들이 많기 때문에

우리는 어렵지 않게 이 문제를 해결할 수 있다.

그 중 대표적이고, Lighthouse에서도 연결링크로 권장하는 방법이

💡 바로 Lazysizes 라는 오픈소스 API를 활용하는 방법이다.

 

Lazysizes를 사용하는 자세한 방법은 링크 를 참고한다. (좀 더 쉬운 한글 사용법은 블로그글 참고)

 

이때, 주의할 점!

🛑 lazy load를 적용하면 검색 엔진 순위(SEO)에 영향을 미친다고 한다.

블로그글 같은 웹페이지의 전체 구성 요소를 필요할때만 lazy~~하게, 게으르게 로드하다보면

검색 엔진이 해당 구성 요소를 제대로 파악하지 못해서 검색 엔진에 노출되는 효율이 줄어들 수 있다고 한다.

 

다행히 이러한 문제를 극복하는 방법이있는데, 친절하게도 구글에서 가이드를 줬다.

구글 검색 센터에 가면 해당 문제를 해결하기 위한 여러가지 방법들이 나와있으니 확인해본다.

 

 

 

 

 

 

 

 

 

---

참고자료

 

https://gusrb3164.github.io/web/2021/11/26/browser-image-optimzing/

https://web.dev/offscreen-images/?utm_source=lighthouse&utm_medium=devtools 

https://web.dev/uses-webp-images/?utm_source=lighthouse&utm_medium=devtools