요즘 데이터 속도가 빨라져서 괜찮다고는 하지만 접속을 했는데 블로그 페이지가 잘 안열리고 오래걸리면 방문을 하려고 했던 사람들도 떠나가기 마련이죠.
SEO 최적화를 위해서도 그렇지만 블로그에 접속했을 때 페이지의 로딩 속도는 무엇보다 중요합니다. 특히나 티스토리나 워드프레스와 같이 관리자가 직접 코딩을 넣고 하는 부분들은 디자인에만 신경쓰다보면 정작 이를 놓치게되는 경우가 많고, 전문가가 아니라면 손데기도 쉽지가 않습니다.
Google PageSpeed Insights를 활용하면 도대체 내 블로그의 어느부분이 로딩 속도를 깍아먹고 있는지를 보여주기 때문에 이 부분들만 손을 본다면 속도가 높아지고 블로그에 머물게되는 시간이 많아짐으로써 심리적 감탄(?)과 함께 다음에 또 방문해주실 확률이 높겠죠?
물론 제공하는 포스팅의 질이 무엇보다 중요하겠지만, 속도를 빠르게 높여놓아서 두마리 토끼를 모두 잡으시길 바랍니다.
일단 2가지를 적용해보았습니다. 바로 ① 스크립트 제거, ② 이미지 로딩속도 개선인데요 하나씩 알아보도록 하겠습니다.
블로그 속도를 분석하자
Google PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/
위 사이트에 들어가시면 아래의 화면같이 내가 속도를 측정해보고 싶은 블로그 주소를 넣으면 해당 코딩내역이나 이미지로딩속도 등을 분석해서 어느부분에서 부하가 걸리고 있는지를 보여주게 됩니다.
분석을 한번 눌러보겠습니다. 제 티스토리 블로그의 속도는 얼마나 나올까요? 두구두구
OMG!!! 제 블로그의 속도는 최악이였습니다. ㅠㅠ 역시 전문가가 아닌상태에서 이런저런 플러그인 넣고 광고 넣고, 이미지도 그냥 캡쳐해서 고용량의 것들을 넣고 하다보니 .. ㅠㅠ 쉣(SHIT!!)
제 블로그의 속도는 100을 기준으로 볼때 9 였습니다. 이게 무슨일인가요? 100이 가장 빠르다고 볼때 9라면 완전최하위 중에서도 최하였습니다.
너무나도 쇼킹했습니다. 어찌 이런일이 스크롤을 해서 내려보면 어디서 병목이 걸리고 있으며 속도를 저하시키는 이미지와 스크립트 등이 어떤 것이 있는지 나오는데요.
오프스크린 이미지 지연, 차세대 형식을 사용, 렌더링 차단 리소스 제거, 이미지 크기 적절하게 설정, 효율적으로 이미지 인코딩 등의 방식을 통해서 속도를 개선할 수 있다라고 나옵니다.
가끔 구글(Google)에서 제공하는 분석정보는 자세해서 좋지만, 너무 전문적인 느낌이 들어서 어찌해야할지 모를때가 많은데 딱 지금 그랬습니다.
쓸데없는 스크립트 없애자
우측에 아래화살표를 누르면 일단 어떤 것들이 있는지를 보여주는데요. 사실 맞는지는 모르겠지만 그냥 제가 가장 쉽게할 수 있는 것부터 개선을 시작했습니다.
렌더링 차단 리소스를 제거하는 것부터 시작을 했는데요. 아래가 Google PageSpeed Insights에서 보기에 이런 것들은 제거하는게 좋겠다라고 나오는 스크립트 코드들 입니다. 복잡하죠?
근데 아마 가장 쉽게 티스토리를 운영하시는 분들이 적용할 수 있는 것이라고 생각합니다. 저는 여기에 나온 리스트를 보고 바로 일단 몇가지를 적용했습니다.
티스토리 스킨편집에 들어가서 HTML부분에서 <head> ~~~ </head> 사이에 엄청나게 많은 스크립트들이 들어가 있습니다.
저는 일단 블로그에 어떤 영향을 줄지는 모르겠지만 구글에서 제안하는 스크립트 코드들을 아래와 같이 주석처리 해버렸습니다. 확실히 이것만 적용하더라도 제가 접속했을때 속도가 확연하게 달라진것을 느꼈습니다.
(사실 어떻게 동작하는지 몰라서 막기는 했지만 블로그가 제대로 동작하지 않을 수도 있습니다. -_-;;)
② 이미지 로딩속도를 높이자
사실 블로그를 운영하면서 텍스트만으로는 이목을 끌수가 없기때문에 많은 이미지가 들어가고 썸네일도 들어가고 이것저것 들어가게되는데요.
이부분 역시나 최초에 사용자가 접속을 하게되면 한꺼번에 불러오느라 화면 속도에 영향을 주고 있다라는 것이 Google PageSpeed Insights의 분석정보 입니다.
저 위에 요약정보에서는 오프스크린 이미지 지연하기, 차세대 형식으로 이미지 제공하기, 효율적으로 이미지 인코딩하기 가 바로 그것인데요 사실 다른 것은 잘 모르겠고, 제가 적용시켜 본 것은 오프스크린 이미지 지연하기 입니다.
※오프스크린 이미지 지연하기 : 화면에 보이는 이미지를 먼저 로딩하고 스크롤 될 때마다 이미지를 가져오도록 해서 부하를 줄여주는 방식
이것은 어떻게 적용하는지 구글링을 통해서 엄청나게 몇시간을 검색을 했지만 도저히 소스코드를 이해할 길이 없어서 적용하지 못했습니다.
구글(Google)에 Lazy load image(늦은 이미지 로딩)를 검색하시면 엄청난 양의 소스코드들과 함께 어찌저찌 설명이 나오는데요. 알아본 바에 의하면 소스코드를 너무 많이 손데야 합니다.
그리고 결정적으로 본문에 출력되는 이미지에 대한 로딩을 지연시켜야하는데 이것은 강제로 태그도 바꾸는 스크립트를 넣어야하고 겁나게 복잡해서 중도 포기하였습니다.
어쨌거나 위와같이 스크립트를 제거하는 것만으로도 블로그 속도를 높일 수 있었습니다. 그나마 네이버메인페이지나 다음메인페이지가 20정도라는데 위안을 삼아본다 ^^;;
이미지 지연 로딩(Lazy Loading images) 대신 사용 가능한 방법 https://imagecompressor.com/ko/ 위 사이트를 이용하시면, 내가 블로그에 올리고자 하는 이미지를 최적화해서 다운로드를 다시 받을 수 있습니다. 이미지 사이즈라도 줄여서 블로그 속도를 높이시기 바랍니다. |
위 LazyLoad() 본문 이미지에 적용하는 방법(이미지 태그의 변경 등)은 고수분들이시라면 해결 가능하리라 생각되는데요. 혹시 소스코드를 쉽게 적용하는 방법을 알고계시면 저에게 알려주세요 ^^;;
'기타 투자 > 블로그로 돈벌기' 카테고리의 다른 글
| 구글 애드센스 수익 왜 늘었나? (12) | 2019.12.06 |
|---|---|
| 디지털노마드 나도 할 수 있을까? (18) | 2019.11.23 |
| 블로그 운영팁 11. 키워드 경쟁강도 확인(상위노출) (11) | 2019.11.11 |
| 블로그 돈벌기 - 운영 1주년 결과(통계, 수익) (28) | 2019.11.04 |
| 쿠팡 파트너스 - 블로그로 돈벌기 방법③ (10) | 2019.10.30 |
RECENT COMMENT