[A.A.F 이사 시리즈] 티스토리 블로그 로딩 속도 개선(이미지 확장자 변환)

안녕하세요.

블로그 기본 설정이 끝이 안 보여서 슬슬 지쳐가는 azunyaa입니다.

네이버 블로그에서는 당연히 되던 것들을 수동으로 해줘야 하는 것이 많아 조금은 힘듭니다.

자유의 대가는 크네요.

---

티스토리 로딩 속도?

티스토리는 각 스킨마다 html코드가 다르고 특히 이미지 부분에서 최적화가 되어 있지 않아서 업로드할 때 이미지의 용량을 줄이지 않으면 페이지가 뜨는데 지연이 생깁니다. 네이버 블로그에서는 글에 뜨는 이미지는 따로 압축되어 보이고 이미지를 선택하였을 때 다른 창에서 원본이 뜨도록 미리 처리를 해주기 때문에 큰 용량의 이미지를 올릴 때 전혀 고민하지 않았던 점이라 블로그 최적화에 대한 정보를 찾으면서 이런 점까지 신경 써야 한다는 것에 조금 놀랐습니다.

 

그리고 당연한 이야기이지만 사이트의 속도가 느리면 방문자가 로딩되기 전에 이탈하는 경우도 있고 무엇보다 구글 검색은 사이트 속도가 빠른 웹 페이지를 우선적으로 보여주기 때문에 블로그 초반부터 개선하는 것이 좋습니다.

---

내 블로그의 로딩속도는?

내 블로그의 로딩 속도는 아래 링크의 구글 페이지스피드 인사이트에 들어가면 알 수 있습니다. 내 블로그의 URL을 적으면 모바일과 데스크톱에서의 점수를 각각 알려주는데 이는 로딩되는 속도에 비례하는 것이 아니고 블로그에 개선할 점이 많으면 점수가 낮게 나오고 최적화가 잘되어 있으면 점수가 높게 나옵니다.

 

기본적으로 점수가 50 이하인 경우 이미지와 관련되어 있는 경우가 많습니다. 그리고 90점 이상 받기 위해서는 티스토리에서 기본적으로 제공하는 스킨의 코드에 수정을 가해야 합니다. 코드를 수정하는 것은 전문적인 지식이 없는 블로거의 입장에서는 리스크가 있는 작업이기 때문에 이 글에서는 이미지에 집중하였습니다.

PageSpeed Insights

 

---

블로그 로딩 속도를 줄이는 법 (이미지 확장자 변환)

저희가 기본적으로 사용하는 이미지 확장자는 JPG와 PNG입니다. 이러한 확장자들은 일반적인 활동에 적합하지만 압축률이 낮기 때문에 웹에 최적화된 확장자에 비해 용량이 큽니다. 그래서 저희는 구글이 추천하는 WEBP라는 확장자를 사용해 볼 것입니다.

 

- 온라인 -

따로 프로그램을 사용하지 않을 예정이라면 이미지를 변환해 주는 웹 사이트를 이용하면 됩니다.

 

1. 이미지 관련 웹 툴을 제공하는 사이트에 들어갑니다.(서비스를 무료로 제공하는 대신 광고 배너로 수익을 얻는 사이트입니다.)

이미지 90% 압축률 -PNG, JPG, WEBP, GIF형식 지원 (2021)

2. 이미지 변환 기능을 선택합니다.

3. 이미지를 다음으로 변환 옆에 이미지 확장자 이름을 WEBP로 변경하고 이미지를 드래그하거나 이미지 추가를 눌러 이미지를 업로드합니다.

4. 이미지 이름 옆에 다운로드 버튼으로 개별적으로 다운로드하거나 모두 저장을 눌러 압축파일 형태로 한 번에 다운로드하시면 됩니다.

- 오프라인 -

프로그램을 다운로드하여 오프라인 상황에서 이미지를 변환할 수도 있습니다. 그림판에서는 WEBP확장자를 지원하지 않고 여러 장의 사진을 변환하는데 적합하지 않기 때문에 제가 사용하는 무료 프로그램을 소개하겠습니다.

 

1. 프로그램의 이름은 XnConvert로 비영리 목적으로는 무료인 제품입니다.

↓ XnView에 대한 위키백과 정보

XnView

↓XnConvert 다운로드 페이지

XnConvert · Batch Image Converter | XnView.com

2. 파란색 창에 있는 가격표는 영리 목적으로 사용할 경우 가격이고 아래 비영리 목적으로 사용하는 경우 플랫폼에 맞춰 다운로드하여 설치합니다.

3. 다 설치하고 실행하면 이 창이 뜹니다. 빈 공간에 변환한 사진을 드래그 앤 드롭하거나 파일 추가 버튼을 이용하여 업로드합니다.

4. 이후 상단 탭에 출력을 클릭하고 아래와 같이 설정을 바꾸고 저장할 위치를 정해줍니다.(메타 데이터를 제외하는 이유는 네이버 블로그와 같은 사진으로 검색엔진에서 인식되지 않게 하기 위함입니다.)

5. 형식 아래 설정을 클릭하면 세부 설정을 할 수 있습니다. 설정한 이후 Convert를 눌러주면 선택한 폴더에 저장됩니다.

 

---

그래서 무엇이 달라지는가?

첫째, 확장자를 변환하여 화질을 약간 희생하는 대신 용량을 큰 폭으로 줄일 수 있습니다.

원본(좌, 668KB, JPG), 압축후(우, 150KB, WEBP)

둘째, 구글 페이지스피드 인사이트 점수가 높아집니다. 즉, 블로그 로딩 시간을 단축할 수 있습니다.

더 점수를 올리려면 html을 수정해야 한다.

마무리

2021년 2분기 애니 목록처럼 고화질의 이미지가 많은 글은 각 이미지를 이렇게 확장자를 바꾸는 것만으로 눈에 띄게 빨라진 것을 느낄 수 있었습니다. 그리고 프로그램을 사용하여 변환할 때 메타데이터를 제거할 수 있어서 네이버 블로그를 같이 운영하는 입장에서 검색엔진이 두 이미지를 다른 이미지로 인식하도록 할 수 있었습니다. 조금은 귀찮지만 기존 확장자를 사용하다가 글이 많아지면서 로딩 속도가 느려질 수 있으니 WEBP확장자를 사용하는 습관을 가지는 것도 나쁘지 않아 보입니다.

---

[A.A.F 뉴스] '킹덤 3' PV

 

[A.A.F] 2021년 2분기 애니 목록(키비주얼, PV, 정보)