블로그

티스토리 블로그 속도 체크, 최적화하기, PageSpeed Insights

Gazua3185 2023. 2. 26. 16:26
반응형

 


목차

1. PageSpeed Insights란?

2. 블로그 속도 체크하기

3. 블로그 성능 개선하기

4. 블로그 성능개선 방안


 

PageSpeed InsightS
PageSpeed InsightS

 

PageSpeed Insights는 구글에서 제공하는 무료 도구 중 하나로, 웹 페이지의 성능을 평가하고 최적화하는 데 도움을 주는 도구입니다. 블로그 속도를 측정하고 개선하기 위해 PageSpeed Insights를 사용하는 방법과 추천 사항을 다음과 같이 안내해드리겠습니다.

 

1. PageSpeed Insights란?

 

PageSpeed Insights는 웹 페이지를 평가하여 다음과 같은 세 가지 카테고리의 성능을 측정합니다.

 

  • 사용자 경험(User Experience): 웹 페이지의 로딩 속도, 반응성 및 시각적 안정성과 같은 사용자 경험을 평가합니다.
  • 성능(Performance): 웹 페이지의 로딩 시간, 페이지 크기, 요청 수 및 캐시 사용과 같은 성능을 평가합니다.
  • SEO: 웹 페이지의 구조, 내용 및 구성과 같은 SEO 요소를 평가합니다.

 

PageSpeed Insights는 결과를 각 카테고리에서 0부터 100점까지의 점수로 표시합니다. 90점 이상이면 "좋음", 50점 이상이면 "보통", 그리고 50점 미만이면 "나쁨"으로 표시됩니다.

 

2. 블로그 속도 체크하기

 

PageSpeed Insights를 사용하여 블로그의 속도를 측정하려면 다음 단계를 따르세요.

 

1)PageSpeed Insights 웹 사이트에 접속합니다.(https://developers.google.com/speed/pagespeed/insights/)

 

2)웹 페이지의 URL을 입력하고 "분석" 버튼을 클릭합니다.

 

3)몇 초 후, PageSpeed Insights는 웹 페이지의 성능 결과를 표시합니다.

  

블로그 속도 체크하기
블로그 속도 체크하기

 

3. 블로그 성능 개선하기

PageSpeed Insights에서 제공하는 결과를 기반으로 저의 블로그 성능을 체크해 보고 개선하는 방법을 보여드리겠습니다. 여러분도 따라해 보시고, 블로그 로딩 속도를 높여 검색엔진최적화를 달성하시기 바랍니다. 

 

1. 분석결과 확인하기

  제 티스토리 블로그의 분석이 완료되었습니다.  왼쪽 상단에 보시면 '모바일' 과 '데스크톱' 사양에서 내 사이트가 얼마나 빠른지를 선택해서 볼 수 있습니다. 제 블로그의 데스톱 분석결과는 전반적으로 우수하나, 모바일의 경우는 성능이 32점으로  언뜻 수치만 놓고 보면 매우 낮게 보 입니다. 유명한 블로거 분들의 사 이트를 넣어봤지만 제 블로그 보다 더 낮게 나와서 안심이 되었습니다. 

 

휴대전화 분석결과
휴대전화 분석결과

 

 

데스크톱 분석결과
데스크톱 분석결과

 

2. 분석결과 및 추천하는 방안을 보고 로딩 속도 개선하기

 

스크롤을 아래로 내려보시면 더 정확한 분석자료를 볼 수 있습니다. 설명이 자세히 나와있 긴 하지만 솔직히 어떤 내용인지는 전문적인 지식이 부족하여 모두 이해할 수 는 없습니다.

 

분석결과 및 추천하는 방안
분석결과 및 추천하는 방안

 

 다만 추천 제안중에 차세대 이미지 파일을 적용하여 2.75초의 시간을 단축할 수 있다는 제 수준으로 실행 가능한 제안을 적용하여 얼만나 성능이 향상되는 지 확인해 보겠습니다. 현재 이미지 파일이 PNG 형식이 적용되어 있는데, 차세대 이미지 형식이라는 WEBP로 변환하여 적용해 본 결과아래와 같이 전반적인 성능 향상이 됩을 확인하였습니다. 

 

성능향상
성능향상

 

 

제 지식 수준을 더 넓혀서 다른 추천 제안들도 실행해 볼 수 있도록 할 예정입니다. WEBP로의 이미지 파일 변환은 아래 링크의 웹페이지를 통해 하였으니 참조하세요.

https://convertio.co/kr/webp-converter/

 

4. 블로그 성능 개선 방안

PageSpeed Insights에서 제공하는 결과를 기반으로 블로그 성능 개선을 달성할 수 있는 것들은 다음과 같습니다. 

 

1. 이미지 최적화하기

 

이미지는 웹 페이지의 크기를 크게 만들 수 있으며, 로딩 시간을 늦출 수 있습니다. PageSpeed Insights에서는 이미지를 최적화하는 방법과 관련된 추천 사항을 제공합니다. 예를 들어, 이미지 크기를 줄이거나, 이미지를 WebP 또는 JPEG 2000와 같은 압축 형식으로 변환하거나, 이미지를 캐시하거나, CSS 스프라이트를 사용하는 등의 방법이 있습니다.

 

2. CSS 및 JavaScript 최적화하기

 

CSS 및 JavaScript 파일은 웹 페이지의 크기를 크게 만들 수 있으며, 로딩 시간을 늦출 수 있습니다. PageSpeed Insights에서는 CSS 및 JavaScript 파일을 최적화하는 방법과 관련된 추천 사항을 제공합니다. 예를 들어, CSS 파일과 JavaScript 파일을 압축하고, 렌더링 차단 리소스를 줄이는 등의 방법이 있습니다.

 

3. 브라우저 캐시 활용하기

 

브라우저 캐시는 브라우저에서 웹 페이지를 저장하는 메커니즘입니다. PageSpeed Insights에서는 캐시 가능한 리소스에 대한 캐시를 활용하고 캐시를 유지하는 방법과 관련된 추천 사항을 제공합니다. 예를 들어, 리소스의 캐시 가능 기간을 늘리고, 캐시 가능한 리소스를 적극적으로 활용하는 등의 방법이 있습니다.

 

4. 서버 응답 시간 개선하기

 

서버 응답 시간은 웹 페이지의 로딩 속도에 영향을 미치는 중요한 요소 중 하나입니다. PageSpeed Insights에서는 서버 응답 시간을 개선하는 방법과 관련된 추천 사항을 제공합니다. 예를 들어, 서버를 최적화하고, 네트워크 대기 시간을 줄이는 등의 방법이 있습니다.

 

5. AMP(Accelerated Mobile Pages) 적용하기

 

AMP는 모바일 장치에서 웹 페이지를 빠르게 로딩하고 쉽게 사용할 수 있도록 하는 프레임워크입니다. PageSpeed Insights에서는 AMP를 적용하여 모바일 웹 페이지의 성능을 개선하는 방법과 관련된 추천 사항을 제공합니다.

 

 

PageSpeed Insights를 사용하여 블로그 속도를 체크하고 개선하는 방법에 대해 알아보았습니다. 블로그 속도를 개선함으로써 사용자 경험을 개선하고 검색 엔진 최적화에도 도움이 될 수 있습니다. 따라서 PageSpeed Insights를 주기적으로 사용하여 블로그의 성능을 모니터링하고, 개선하는 것이 좋습니다.

 

 

같이 읽으면 좋은 글
같이 읽으면 좋은 글

블로그 속도 체크하는 방법, 구글봇 검색엔진최적화

구글봇이 좋아하는 글 핵심 정리

티스토리 글 PC에서 편집하면서 모바일 화면 확인하는 방법

내 블로그 글이 구글에서 검색되는지 확인하는 방법

반응형