열심히 애드 고시를 통과한 후 수익화를 하여 디지털 노매드를 꿈꾸는 우리는 양질의 글도 중요하지만, 결국 사람들에게 보이는 SEO와 저희 블로그가 그 콘텐츠 이용자의 화면에 빨리 나타나는 것이 중요하죠? 콘텐츠 사용자의 50%가 웹페이지 속도가 느리면 바로 이탈을 한다고 합니다. 즉, 저희의 콘텐츠를 소비시킬 시간조차 받을 수 없게 되는데요. Html을 모르는 저는 며칠 동안 속도 개선을 위해서 힘써왔는데 오늘은 그 방법과 결과에 대해 알려드리려고 합니다.
먼저 나의 블로그 속도를 확인하기
PageSpeed Insights
올바른 URL을 입력하세요.
pagespeed.web.dev
먼저 이 곳에 들어가서 자신의 티스토리나 블로그 주소를 입력합니다.
그렇다면 이제 모바일과 데스크톱에 따라서 성능을 확인할 수 있는데요?! 하지만 저희가 신경 써야 하는 부분은
바로 모바일입니다. 한국 같은 경우에 4G WIFI등 여러 망이 잘 깔려있지만, 조금이라도 높은 연령대의 타기팅을 위주로 글을 썼는데, 그분들은 확률적으로 로딩 속도가 느릴 수 도 있기 때문입니다.
또한 페이지스피드 인사이트 뿐만아니라 구글 크롬으로 접속하셔서 크롬 스토어에서 Light House를 확장시켜서 설치해주세요. 이 2가지를 병행하여 확인하면 좀 더 체계적이고 정확합니다.
1. 티스토리 간단 편집하기
블로그 관리 탭에 들어가서 꾸미기 란에 모바일을 누릅니다. 그리고 티스토리 모바일웹 자동연결을 사용합니다로 바꿔주시면 됩니다. 그 후에 다시 확인해보시면 5~8% 정도의 성능 개선이 이루어진 것을 확인하실 수 있습니다.
2. 포스팅 전 이미지 압축하기
TinyPNG – Compress WebP, PNG and JPEG images intelligently
Make your website faster and save bandwidth. TinyPNG optimizes your WebP, PNG and JPEG images by 50-80% while preserving full transparency!
tinypng.com
모든 글에 첨부되어있는 이미지들을 모두 다운로드 한 후, 위 사이트에 접속해서 모두 압축한 다음 차세대 형식(Webp)으로 변경 후 포스팅한 글들에 재 첨부를 진행하는 방법이 있습니다. 이 방법이 속도 개선에 제일 효과적인 방법이라고 느껴집니다. 하지만 미리 글을 쓰시기 전에 준비를 하신다면 훨씬 더 간편하게 속도 개선의 효과를 볼 수 있습니다. 가급적이면 모든 사진을 Webp이미지로 저장하는것이 가장 좋습니다.
3.카카오 애드 핏이나 텐핑 등의 상단 광고 해제
블로그 속도가 너무 느린데, 광고의 송출에 욕심을 계속 부리게 되면, 모두 다 잃을 수 있습니다. 아깝더라도, 하나의 광고와 더 빠른 블로그 속도를 위해서 텐핑이나 다음 애드 핏 등을 본문에만 추가를 하든 최소한의 개재 형식으로 바꾸어 줍니다.
4.게시글 상단 그림 안 뜨게 하기(제목단의 그림 비활성화)
블티스토리 블로그 설정에서 html 편집으로 들어갑니다.
Ctrl=f을 누르고 "post-cover"를 찾습니다.
스킨 편집의 html 드래그 한 부분을 none으로 바꿔줍니다.
'background-image:none"이 되어야 합니다.
그리고 이러한 html 편집 작업할 때 자칫 잘못하면 돌이킬 수 없는 실수를 저지를 수 있습니다.
그러므로 수정 작업 전에 스킨 보관을 하는 게 중요합니다. (스킨 백업인 셈입니다.)
스킨 수정과 코드압축
푸터(footer)라 불리는 블로그 하단 바를 제거해봅니다. 블로그 가장 하단을 살펴보면, 본래 푸터에는 일반적으로 웹사이트의 제작자 혹은 작성자, 저작권 정보, 연락처, 사이트맵 등을 기술하는 것이 일반적입니다. 이는 나중에 얼마든지 정보를 삽입할 수 있어서 지우는 것이 좋습니다.
마지막으로 https://refresh-sf.com/
Refresh-SF - Online JavaScript and CSS Compressor
A minifier removes the comments and unnecessary whitespace from a program. Depending on how the program is written, this can reduce the size by about half. An obfuscator also minifies, but it will also make modifications to the program, changing the names
refresh-sf.com
이곳에 들어가서 우리 티스토리 블로그 스킨 html 코드를 모두 복사 붙여 넣기해서 Press(압축)을 시킨 후 다시
압축된 html 코드를 붙여 넣어줍니다.
이번 시간에는 블로그 속도 개선을 알아보는 시간을 가졌습니다. 앞으로도 여러분들의 블로그를 한 번씩 계속 확인해보시길 바랍니다!
댓글