접속 사이트: https://developers.google.com/speed/pagespeed
서비스 명칭: PageSpeed Insights
서비스 특징: 웹 페이지 로딩 속도 측정을 통한 사용자 환경 보고서 발행
https://developers.google.com/speed
접속하면 "Make the Web Faster" 페이지를 만나게 됩니다. 한마디로 웹 접속 환경을 더 빠르게 개선하자는 목적으로 관련 도구를 제공하는 것입니다.
" Analyze and optimize your website with PageSpeed tools "
"PageSpeed tools" 도구 중 하나가 "PageSpeed Insights"입니다.
그 외에 다음과 같은 서비스도 제공합니다. 당연한 것이지만 유료 서비스도 있습니다. 처음에 접속한 PageSpeed Insights에서 제공하는 무료 사용자 환경 보고서의 분석과 이것을 바탕으로 페이지 개선에 적용시키는 도구와 방법들을 소개합니다. 자세한 정보는 해당 페이지에 접속하여 검토해 보세요.
Speed up with the PageSpeed Modules
Leverage Google's infrastructure
Speed up your browsing with Google Public DNS
Offload popular open-source libraries
Learn about Google's contributions to latest performance standards & protocols
Insights 페이지에 접속하면 간단하게 측정을 원하는 인터넷 도메인이나 주소를 입력하고 실행시키면 됩니다. 모바일과 데스크톱 2가지로 분류하여 분석 정보를 제공합니다. 아주 간단한 측정 방법입니다.
대형 검색 포탈인 구글, 네이버, 다음 초기 접속 화면의 로딩 속도를 측정했습니다.
구글 데스크톱 100, 구글 모바일 74
네이버 데스크톱 69, 네이버 모바일 15
다음 데스크톱 92, 다음 모바일 26
숫자가 높을수록 로딩 속도가 빠른 것을 의미합니다.
비교 대상의 수치가 지나치게 차이가 나는 것은 여러 가지 변수가 관여했기 때문일 것입니다.
Insights 서비스의 측정 방법
측정 서버의 위치
측정 대상과 측정 서버의 네트워크 환경
측정 대상이 되는 구글, 네이버, 다음의 사용자 선호 환경
측정 페이지에서 불러오는 타 사이트의 리소스와 측정 서버의 네트워크 환경
기타 여러 가지 있는 데, 전문가가 아닌 일반인 관점에서 이 정도 매개 변수가 생각납니다.
참고 사항으로 측정하면 됩니다. 서비스가 발행한 사용자 환경 보고서를 참고하여 하나씩 주변 환경에 맞게 개선하면 좋은 결과가 있을 것입니다.
티스토리 블로그에서 사용 가능한 스킨 몇 개를 대상으로 로딩 속도를 측정하였습니다. 각 스킨의 "적용 예시 보기"를 눌러 들어가면 데모 페이지가 뜹니다. 사용자가 스킨을 사용해 보고 자신의 블로그에 적용할 수 있도록 조성해 놓은 임시 블로그입니다.
https://skin-demo-xxxx.tistory.com
Odyssey, Poster, Whatever, Book Club 4가지 스킨의 로딩 속도입니다.
Odyssey 데스크톱 34, Odyssey 모바일 18
Poster 데스크톱 76, Poster 모바일 38
Whatever 데스크톱 68, Whatever 모바일 35
Book Club 데스크톱 48, Book Club 모바일 13
Odyssey가 최근(2020년) 발표한 스킨인데 수치가 낮게 나왔습니다. 한 번 측정한 것이니까 객관성이 많이 떨어지겠지만 티스토리 블로그를 측정해 보면 등록된 광고, 폰트와 스크립트 모듈을 불러오는 코드와 사용한 스크립트가 문제의 원인일 경우가 많습니다.
스킨 Odyssey 데스크톱과 모바일 측정 보고서
스킨 Poster 데스크톱과 모바일 측정 보고서
스킨 Whatever의 데스크톱과 모바일 측정 보고서
스킨 Book Club의 데스크톱과 모바일 측정 보고서
제 티스토리 블로그를 샘플로 하여 기본, 폰트 불러오기 제외, 폰트와 자바스크립트 모듈 불러오기 제외 3가지 유형으로 측정하였습니다. 이 블로그는 Book Club 스킨을 개인이 수정하여 사용하고 있습니다.
기본 데스크톱 53, 모바일 9
폰트 불러오기 제외 데스크톱 86, 모바일 32
폰트, 자바스크립트 불러오기 제외 데스크톱 86, 모바일 36
사용한 Book Club 스킨이 데스크톱 48, 모바일 13이니까 폰트와 자바스크립트 모듈의 제외가 많은 로딩 속도 차이를 발생시키고 있음을 알 수 있습니다.
그리고 현재 페이지 본문 상하단, 사이드바의 상하단 모두 합쳐 4개의 광고가 링크되어 있습니다. 이 광고로 인한 느린 로딩 속도를 평소에도 체감하고 있기 때문에 빠른 블로그가 반드시 필요하면 광고는 무조건 제외하여야 합니다.
개인 블로그 기본(Book Club)
다음 이미지는 페이지 로딩 속도를 측정한 보고서입니다.
구글 웹페이지였던 것 같은 데 생각이 안 나네요 ㅠ..ㅠ
페이지 리소스 요청한 것을 크기 순으로 살펴보면 스크립트, 문서(페이지), 이미지 순서로 진행됩니다.
이미지는 압축률이 낮은 PNG, JPEG 사용을 자제하고 압축률이 높아서 파일 크기가 작은 JPEG 2000, JPEG XR, WebP 사용하는 것이 다운로드 속도가 빠르고 데이터 소비량도 줄일 수 있다고 추천하고 있습니다.
WebP 이미지 포맷으로 변환할 수 있는 유틸리티 다운로드 페이지입니다.
Downloading and Installing WebP | Google Developers
명령어를 입력하여 컴파일한 실행 파일을 로딩하여 기존 이미지 파일을 변환하는 방식입니다.
페이지 왼쪽에 보면 포토샵용 플러그인 다운로드 링크 있습니다.
제 블로그는 통과한 검사가 데스크톱과 모바일이 각각 15, 18입니다. 좋지 않은 블로그의 본보기인 것 같습니다. 인터넷 사용자가 몰리는 오후 늦은 시간대에 속도를 재면 더 처참한 결과가 나옵니다.
필드 데이터 Chrome 사용자 환경 보고서에 이 페이지의 실제 속도 데이터가 충분하지 않습니다.
Origin Summary 지난 28일의 수집 기간 동안 이 출처에서 게재된 모든 페이지의 누적 경험은 핵심 성능 보고서 평가를 통과하지 못합니다. 각 페이지에 맞춤 설정된 제안을 보려면 개별 페이지 URL을 분석하세요.
측정 결과를 수치로도 확인이 가능하지만 색으로도 분류해 놓았습니다.
아래 통과한 감사(29) 페이지의 초록색 포인트는 90~100의 점수를 의미합니다. 각 항목의 오른쪽 화살표를 누르면 보다 자세한 보고서 내용을 볼 수 있습니다. 아~주 자세합니다. 연구가 필요한 내용입니다.
블로그에 등록하는 구글의 광고 중에 자동 광고가 있습니다. 광고 형식에 인 페이지 광고, 앵커 광고, 모바일 전면 광고 등 여러 가지 새로운 기법이 도입되고 있습니다.
기존 사용자 지정 광고인 디스플레이 광고, 인피드 광고, 콘텐츠 내 자동 삽입 광고, 일치하는 콘텐츠, 검색 엔진 등에 자동 광고가 추가된 것입니다.
처음 1 페이지 1개의 광고로 시작하여 오른쪽, 왼쪽, 위, 아래, 스크린형, 전체화면형, 계속해서 종류뿐만 아니라 숫자도 늘어납니다.
사용 기기의 성능을 포함하는 리소스뿐만 아니라 네트워크 대역을 더 늘려야 광고 수익도 같이 상승합니다. 구글이 자체적으로 광고의 수량을 통제할 것이라고 생각하지는 않습니다. 자신들이 필요로 하는 네트워크 대역을 다른 곳에서 끌어와야 합니다. 사용 이미지, 동영상, 폰트 모듈, 스크립트, CSS, HTML 코드의 용량을 줄이고, 캐시 시스템으로 이를 보완할 수 있을 것입니다. 단기적으로. 네트워크 대역에 여유가 생기면 또 광고의 양과 용량을 늘립니다.
내장 운영체제 관리가 가능한 모바일 기기의 내장 메모리 용량이 처음 8기가 정도에서 시작하였습니다. 16, 32, 64, 128, 256, 512 계속해서 늘다가 1 테라바이트를 넘어설 것입니다. 용량이 이 정도로 늘어나면 장기간 여유가 있어야 하는 데, 성급한 판단입니다.
앱의 용량 자체가 증가하고, 앱이 사용하는 이미지와 동영상의 용량 증가에 선명도 상승까지 더하여 기기 내장 용량 증가율을 넘어서고 있습니다. OS, CPU, GPU, 배터리 등 기술의 발전이 안겨 줄 것 같은 여유로움은 한 여름밤의 꿈이 됩니다. 일시적으로 늘어난 여유로움은 먼저 치고 들어와서 차지하는 것이 승자입니다.
댓글