블로그나 웹사이트의 속도를 측정해주고 개선점을 알려주는 사이트, PageSpeed Insights

오늘은 블로그 혹은 웹사이트를 운영하는 사람들에게 꼭 필요한 사이트를 한 곳 소개하려고 한다.

이제 막 블로그에 입문한 사람이 아닌 이상 꼭 한 번쯤은 방문해 본 적이 있을만한 사이트다.

페이지 스피드 인사이트(PageSpeed Insights)로 속도 측정을 해보자

PageSpeed Insights

PageSpeed Insights Docs Enter a valid URL Analyze Make your web pages fast on all devices Check out What's new Documentation Learn about Web Performance

pagespeed.web.dev

소개할 사이트는 바로 페이지 스피드 인사이트^{PageSpeed Insights}다.

구글 검색으로 '웹사이트 속도 측정' 혹은 '블로그 속도 측정'으로 검색을 하면 항상 제일 위에 뜨는 사이트다.

PageSpeed Insights의 첫 화면은 이렇게 굉장히 심플하다.

웹페이지 URL 입력 필드에 측정할 웹사이트나 블로그의 URL을 붙여 넣고 enter 키를 누르거나 '분석' 버튼을 클릭하자.

이 블로그를 측정해봤다.

(나중에 이 블로그의 URL을 바꿀 수도 있기 때문에 URL은 모자이크를 했다.)

PageSpeed Insights는 '성능', '접근성', '권장사항', '검색엔진 최적화', 이렇게 네 가지 항목을 체크해준다.

(참고로 여기서 검색엔진 최적화가 굉장히 낮게 나온 이유는 이걸 캡처할 때는 아직 이 블로그를 검색 사이트에 등록도 하지 않았고 검색도 허용하지 않았기 때문이다.)

측정 결과를 모바일과 데스크톱으로 나눠서 볼 수도 있다.

비교를 해보니, 모바일에서는 성능은 비교적 낮지만 접근성이 높게 나왔고,

데스크톱에서는 성능이 높고 접근성은 모바일에 비해 낮게 나왔다.

곧 설명하겠지만, 성능이 낮으면 접근성이 높고, 접근성이 높으면 성능은 낮은, 약간 그런 반비례하는 관계가 있는 것 같다. (무조건 그렇다고 단정할 수는 없지만)

PageSpeed Insights에서 측정해 주는 4가지 항목

PageSpeed Insights가 측정하는 네 가지 항목은 웹사이트(or 블로그)의 품질을 여러가지 측면에서 평가하는 중요한 지표들이다.

'성능', '접근성', '권장사항', '검색엔진 최적화', 이 네 가지 항목들은 각각 무엇을 의미하는지 알아보자.

1. 성능 (Performance)

성능은 웹페이지가 얼마나 빠르게 로드되고 반응하는지를 측정한다.

이 점수가 높을수록 사용자는 페이지를 빠르게 이용할 수 있다.

성능 점수에는 다음과 같은 주요 지표들이 포함된다.

• FCP (First Contentful Paint): 페이지 로딩 시작부터 화면에 첫 번째 콘텐츠(텍스트, 이미지 등)가 나타나기까지 걸리는 시간.
• LCP (Largest Contentful Paint): 페이지에서 가장 큰 콘텐츠(주요 이미지, 동영상 등)가 로딩되는 시간.
• CLS (Cumulative Layout Shift): 페이지가 로딩되는 동안 콘텐츠가 얼마나 많이 예기치 않게 움직이는지 측정.
• TBT (Total Blocking Time): 페이지가 사용자 입력에 반응하지 않는 총 시간.

2. 접근성 (Accessibility)

접근성은 장애를 가진 사용자를 포함하여 모든 사용자가 웹사이트를 얼마나 쉽게 이용할 수 있는지를 평가한다.

이 점수가 높을수록 더 많은 사용자가 웹사이트를 이용할 수 있다.

주요 평가 항목은 다음과 같다.

• 이미지에 alt 속성이 있는지.
• 폼 입력 요소에 라벨이 있는지.
• 충분한 색상 대비가 있는지.
• 스크린 리더(Screen Reader)와 같은 보조 기술이 페이지를 잘 인식할 수 있는지.

3. 권장사항 (Best Practices)

권장사항은 웹 개발의 모범 사례를 얼마나 잘 따르고 있는지를 평가한다.

이 점수는 사이트의 전반적인 품질과 안정성을 보여줍니다.

주요 평가 항목은 다음과 같다.

• HTTPS를 사용하고 있는지.
• rel="noopener"와 같은 보안 관련 속성을 적절히 사용하고 있는지.
• 브라우저의 API가 안전하게 사용되고 있는지.
• 콘솔에 오류가 발생하지 않는지.

4. 검색엔진 최적화 (SEO)

검색엔진 최적화는 검색 엔진이 웹페이지를 얼마나 잘 이해하고 색인할 수 있는지를 평가한다.

이 점수가 높을수록 검색 결과에 더 잘 노출될 가능성이 커진다.

주요 평가 항목은 다음과 같다.

• 메타 태그가 적절하게 설정되어 있는지.
• lang 속성이 올바르게 지정되었는지.
• 페이지에 모바일 친화적인 디자인이 적용되었는지.
• 링크가 올바른 구조로 작성되었는지.

이렇게 네 가지 항목들이 어떤 것들을 측정하고 있는지 알아보았다.

아까 위에서 '성능이 낮으면 접근성이 높고, 접근성이 높으면 성능은 낮은, 약간 그런 반비례하는 관계가 있는 것 같다.'라고 했었다.

그렇게 말한 이유는 접근성을 높이기 위해서 어떤 특정 태그에 특정 속성을 추가해야 하는 일들이 있는데, (예를 들면 img 태그에 alt 속성을 추가한다거나..)

구글 블로그 HTML 편집에 들어가서 직접 그 속성을 추가할 수가 없는 구조로 되어있어서 자바스크립트를 이용해서 강제적으로 속성을 추가해야 할 때가 있다.

그런데 자바스크립트 코드는 늘어나면 늘어날수록 성능이 낮아질 수밖에 없다.

그래서 접근성을 높이기 위해서 성능이 낮아지는 일이 있다.

어쨌든 PageSpeed Insights에 대한 소개는 여기까지다.

아래에 링크된 포스트들은 전부 '접근성' 항목을 높여주는 방법들을 올린 포스트다.

구글 블로그 SEO의 첫걸음, lang 속성 추가하기

구글 블로그의 html 태그에 lang 속성이 없나요? 이 글은 SEO, 웹 접근성, 번역 서비스 등 lang 속성을 꼭 넣어야 하는 이유와 그 장점을 설명합니다. 직접 HTML을 수정하여 lang 속성을 추가하는 방법까지 확인하세요.

구글 블로그 접근성을 위한 필수 설정, 뷰포트 maximum-scale 속성을 수정해 보자

내 블로그의 뷰포트 태그에서 maximum-scale을 최소 5로 설정해야 하는 이유를 알려드립니다. 이 설정을 통해 사용자의 웹 접근성을 높이고, 모바일에서도 자유롭게 화면을 확대할 수 있는 방법을 알아보세요.

구글 블로그 위젯 유튜브 영상을 다른 영상으로 바꾸는 법

구글 블로그 사이드바나 푸터에 있는 유튜브 영상을 바꾸고 싶으신가요? 이 글은 위젯의 HTML 코드만 간단하게 수정하여 원하는 영상으로 교체하는 방법을 알려드립니다. 초보자도 쉽게 따라 할 수 있는 가이드로 블로그를 업데이트해 보세요.

구글 블로그의 링크에 시각 장애인을 위한 인식 가능한 이름을 포함하는 방법

이 글은 aria-label 속성을 추가해 시각 장애인도 블로그를 쉽게 이용하도록 접근성을 개선하는 방법과 PageSpeed Insights의 '링크에 인식 가능한 이름이 포함되어 있지 않습니다'라는 문제 메시지에 대한 해결 방법을 알려줍니다.

구글 블로그 백그라운드와 텍스트의 색상 대비율 문제를 해결해 보자.

이 글은 블로그의 백그라운드 및 포그라운드 색상의 대비율을 수정하는 방법과 함께 푸터의 블로그 템플릿 사이트 링크의 색상을 변경하는 방법을 알려줍니다.

PageSpeed Insights로 블로그의 접근성을 100으로 만들어봤다.

PageSpeed Insights 데스크톱 접근성 점수를 87점에서 100점으로 올린 해결 과정을 소개합니다. ARIA role 오류의 원인과 해결 방법을 자세히 확인해보세요.

이 글이 도움이 됐거나 유익했다면 스크롤을 조금만 더 내려서 댓글을 남겨주세요. (비로그인도 가능합니다!)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊

지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.