[티스토리 꾸미기] 블로그 성능 높이기

오늘도 어김없이 티.꾸를 하는 나...

타닥타닥..

블로그 사이드바가 허전하여

요로코롬

사질 저 고양이 네임택에 깃허브 링크 걸어놨었는데 갑자기 개인정보 걱정돼서 내렸다. 하하

 

예쁜 프로필을 넣어줬더랬다.

 

그런데 이 프로필을 넣자 문제가 생겼다.

 

바로 프로필을 넣기 전 초록색이던 SEO 성능에 주황불이 들어온것.

98인가 92로 높았던 성능이 갑자기 훅 떨어졌다.

아.. 앙대🥹..

이유는 저 프로필사진이었다..

 

이미지가 검색 성능에 영향을 미치다니 처음 아는 사실이었다..

(GIF, JPG 문제가 아니라 그냥 이미지 자체가 문제인것..)

그래서 급하게 수정에 들어갔다.

 

1. SEO 높이기

예전 스터디에서 프로필 이미지를 background로 처리하면 성능이 높아진다는 얘기를 들었었다.

그래서 저 프로필 이미지를 background로 처리하기로 했다.

 

<div class="profile-container"></div>

 

그냥 div로 이미지가 들어갈 컨테이너 하나 만들어주고,

 

.profile-container {
  width: 100%; 
  height: 원하는 크기 px;
  background-image: url('path-to-your-image.jpg'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

 

그냥 이렇게 background-image의 url 에 이미지 주소 넣으면 된다.

그리하여 SEO 복귀..

근데 예전처럼 높아지긴 불가능인가보다.

 

하지만 예쁘니까 당분간은 이렇게 둘래.. ㅠㅠ

내 블로그잖아.. 잉잉..

 

2. Performance 높이기

사실 Performance 낮은거 보고 충격.. 받음

근데 프로필 넣기 전에는 70몇이었는데 뚝.. 떨어졌다.. (아아..)

이미지에 loading="lazy" 이거 넣는것 만으로도 성능이 높아진다.

웹 페이지 초기 로딩 시간을 줄여주기 때문이다.

Lazy Loading 페이지 안에 있는 실제 이미지들이 '실제로 화면에 보여질 필요가 있을 때' 로딩을 할 수 있게 하는 기능. 로딩 시점을 뒤로 미룬다고 생각하면 된다.

 

아까 만든 div 컨테이너에

<div class="profile-container" loading="lazy"></div>

 

이렇게 추가해주면,

그나~마 성능이 2가 올라갔음을 알 수 있다.

 

3.  WEBP 사용하기

헤더 이미지를 로딩하는데 시간이 오래 걸렸다고한다.

이미지를 최적화 하기 위해 새로운 확장자인 WEBP를 사용했다.

성능이 확 올라갔음을 알 수 있다.

 

 WEBP가 뭐임?

구글에서 2010년도에 발표한 최신 이미지 포맷.

웹(web) 환경을 위해서 만들어진 효율적인 이미지 포맷이다.

---

스킨만 신명나게 수정하지 말고

블로그 성능 최적화도 차근차근 해야겠다..

아이고 두야😮‍💨