본문 바로가기
티스토리

티스토리 블로그 SEO 속도 최적화 방법

by 로니킴 2021. 3. 31.


사이트 로딩 속도는 구글 상위 노출을 위한 지표 중에 중요한 영향을 줍니다. 한국은 인터넷 속도가 빨라서 크게 체감이 덜 하지만, 해외의 경우 인터넷 속도가 매우 느리며 속도에 민감합니다. 따라서 구글(SEO)은 느린 속도의 페이지보다 빠른 속도의 페이지를 더 좋아합니다.  

 

목차

     


    티스토리 블로그 SEO 속도 최적화 방법

     

     

    티스토리-블로그-SEO-속도-최적화-방법
    티스토리-블로그-SEO-속도-최적화-방법

     

     

     


     

     

     

     

    구글 서치콘솔 접속

    티스토리 블로그와 구글 서치 콘솔을 연결합니다. 티스토리의 플러그인에서 구글 서치 콘솔로 연결할 수 있습니다. 

     

    구글-서치콘솔-접속-방법-화면
    구글-서치콘솔-접속-방법-화면

     

     

    만약 2차 도메인을 설정한 상태라면 플러그인을 사용하지 말고, 직접 구글 서치 콘솔에서 연결을 진행해야 합니다. 

    예를 들어 blog.steamedu123.com 으로 2차 도메인을 사용할 경우, 티스토리 플로그인 블로그로 연결 시 blog.tistory.com 가 연결되게 됩니다. 

     

     


     

    구글 설치콘솔 PageSpeed Insights

    구글 서치 콘솔에서 티스토리가 제대로 연결되어 있는지 확인합니다. 구글 서치 콘솔에서 [핵심적인 웹 지표]를 클릭하고 [PageSpeed Insgiths 사용해 보기]를 클릭합니다. 

     

    구글-설치콘솔-PageSpeed-Insights-화면
    구글-설치콘솔-PageSpeed-Insights-화면

     

    [PageSpeed Insgiths 사용해 보기]는 모바일과 데스크톱에 대한 지표를 제공해줍니다. 필드 데이터, First Contentful Paint, Time Interactive, Speed Index, Total Blocking Time, Largest Contentful Paint, Cumulative Layout Shift 등의 항목을 검사하고 상태를 보여 줍니다. 

     

    구글-설치콘솔-PageSpeed-Insights-점수-화면
    구글-설치콘솔-PageSpeed-Insights-점수-화면

     

    페이지 로딩에 가장 큰 영향을 주는 것은 이미지입니다. 너무 큰 이미지를 로딩하게 되면 페이지 속도에 나쁜 영향을 줍니다. 

     

     

     

    블로그 속도 최적화를 위해서는 여러 가지 방법이 있습니다.

     

    1. 외부 폰트 사용 금지

    2. 이미지 무손실 압축 또는 WEBP 형식으로 전환해서 업로드 

    3. 본문 제목 배경에 썸네일 사용하지 않기 

     

     


     

     

     

     

    구글 SEO 최적화 하기 - 외부 폰트 사용 금지

    외부 폰트는 속도에 영향을 줍니다. 외부 폰트(web font load, sans, nanum) 사용을 하지 않도록 CSS에서 수정합니다.

     

    구글-SEO-최적화-외부-폰트-사용-금지-화면
    구글-SEO-최적화-외부-폰트-사용-금지-화면

    [수정코드]

    /* Web Font Load 
    @import url('https://fonts.googleapis.com/css?family=Nanum+Myeongjo:800&subset=korean');
    @import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');
    */
    
    /* Type Selector Reset */
    body {
    	-webkit-text-size-adjust: 100%;
    	font-weight: 400;
    	/* font-family: 'AppleSDGothicNeo', 'Noto Sans KR', sans-serif; */
    	font-size: 1em;
    	line-height: 1.25;
    	color: #555;
    }
    
    input, select, textarea, button {
    	/* font-family: 'Noto Sans KR', sans-serif; */
    	font-size: 100%;
    	border-radius: 0;
    }
    
    #header h1 {
    	padding: 23px 0 ;
    	/* font-family: 'Nanum Myeongjo'; */
    	font-weight: 800;
    	font-size: 1.75em;
    	line-height: 32px;
    	letter-spacing: -0.2px;
    	color: #333;
    }

     

    다음과 같이 수정전과 수정후의 화면을 비교할 수 있다. 

     

    구글SEO최적화-외부-폰트-사용-전후-비교-화면
    구글SEO최적화-외부-폰트-사용-전후-비교-화면


     

     

    구글 SEO 최적화 하기 - 이미지 무손실 압축

    구글에서는 webp 파일 포맷의 이미지를 선호합니다. 무료로 변환해주는 사이트는 쉽게 찾을 수 있습니다. 파일 1개 변화는 웹페이지를 이용하면 되지만, 폴더로 변환하기에는 웹 페이지를 이용하기 불편합니다.

    따라서 다음과 같은 프로그램을 사용하면 됩니다. 

     

     

    iPress(avx2) v2.12.zip
    1.20MB

     

     

    구글-SEO-최적화-이미지-무손실-압축-프로그램
    구글-SEO-최적화-이미지-무손실-압축-프로그램

     


     

     

    구글 SEO 최적화 하기 - 본문 제목 썸네일 사용하지 않기

    블로그 관리 → 스킨 편집 → html 편집을 선택합니다. CTRL-F를 누르고 post-cover를 검색하면 <s_permalink_article_rep>의 <s_article_rep_thumbnail>를 찾을 수 있습니다. 코드를 아래와 같이 변경합니다. 

     

    구글-SEO-최적화-본문-제목-썸네일-사용하지-않기-화면
    구글-SEO-최적화-본문-제목-썸네일-사용하지-않기-화면

     

     

    [수정전]

    <div class="post-cover notice"<s_notice_rep_thumbnail> style="background-image: url();"</s_notice_rep_thumbnail>>

     

    [수정후]

    <div class="post-cover"<s_article_rep_thumbnail> style="background-color:#4B4B4B;"</s_article_rep_thumbnail>>

     

     

    다음과 같이 수정전과 수정후의 화면을 확인할 수 있다. 

     

    본문-제목-썸네일-사용-전후-비교-화면
    본문-제목-썸네일-사용-전후-비교-화면

     

     

     


     

     

     

     

     

     

    마무리

    외부 폰트 사용 금지, 본문 제목 썸네일 이미지 사용금지, 이미지 무손실 압축 등의 방법으로 속도를 향상할 수 있습니다. 사이트 로딩 속도는 구글 상위 노출을 위한 지표 중에 중요한 영향을 줍니다. 한국은 인터넷 속도가 빨라서 크게 체감이 덜 하지만, 해외의 경우 인터넷 속도가 매우 느리며 속도에 민감합니다. 따라서 구글(SEO)은 느린 속도를 가진 페이지보다 빠른 속도의 페이지를 더 좋아합니다.

    추가로 항상 블로그의 최적화를 신경써야 합니다. 또한 블로그의 저품질이 되지 않도록 페이지의 상태를 자주 확인해야 합니다. 

     

     

    [결과화면]

     

    구글-설치콘솔-PageSpeed-Insights-점수-결과-화면
    구글-설치콘솔-PageSpeed-Insights-점수-결과-화면

     



    댓글