안녕하세요!
오늘은 어느정도 모습을 갖고있는 블로그 프로젝트의 성능 체크를 해볼 생각입니다. 블로그 성능은 seo 검사와, 모바일 친화성 테스트, seo 테스트 이렇게 3개를 진행할 예정입니다.
나의 웹사이트 속도 및 성능체크
우선 첫번째는 모바일, 데스크톱 버전의 성능체크를 진행할 예정입니다. 웹 성능체크하기 의 링크를 타고 들어간 후 나의 웹사이트 주소를 입력하면 성능체크를 해줍니다.
우리의 블로그 https://bangul-log.vercel.app 의 성능을 한번 체크해보도록 하겠습니다.
데스크톱
데스크톱 기준으로 성능99, 접근성95, 권장사항92, 검색엔진 최적화100 이 나왔습니다. 오.. 상당히 준수하게 나왔네요, 아래에 리포트가 있으니 한번 확인해보도록 하겠습니다.
감점을 먹은 내용입니다. 스크롤 없이 볼 수 있는 이미지가 지연 로드 되면 페이지 수명 주기 후반에 렌더링되므로 최대 콘텐츠 렌더링 시간이 늘어날 수 있다고 경고를 하고 있습니다.. Image 때문인가.? 이런 한번 제가 확인 후 수정해 감정을 없애보도록 하겠습니다.
데스크톱 버전 기준으로 크게 크리티컬한 내용은 없는 것 같으니 이제 모바일로 넘어가겠습니다.
모바일
모바일 기준으로 성능76, 접근성100, 권장사항92, 검색엔진 최적화100 이렇게 나왔습니다. 우선 평균은 성능부분에 73이 평균이라고 하더라구요.. 76이라니.. 모바일에서 무슨 문제라도 있는걸까.. 아래에 리포트가 나와있으니 한번 확인해보도록 하겠습니다.
1초..? 데스크톱은 분명 30밀리초인데, 왜 모바일은 1초나..? 흠.. 살펴보도록 하죠..
최대 콘텐츠 렌더링 시간 이미지가 지연 로드되었습니다. 는 위 데스크톱에도 있던 내용 같은데.. 이것도 다시 한번 확인해봐야 겠습니다. 데스크톱에 비해 성능이 너무 떨어져서 좀 놀랐네요.. 모바일에 너무 안일했나..
모바일 친화성 테스트
모바일 친화성 테스트도 동일하게, 접속 후 나의 웹사이트 주소를 입력하면 알아서 검사를 진행해줍니다.
tailwindcss 를 사용해서 모바일, 웹 css를 구분해둬서 모바일 친화성 테스트는 매우 좋게 나올거라 생각합니다.
만족합니다 ㅎㅎ, 성능쪽 부분을 개선하면 될 것 같군요~
SEO 테스트
SEO테스트를 따로 진행한 이유는 위에서 seo점수가 100점이였으나, 다른 seo 검사 사이트에서 좀 낮은 점수를 받아서..
제가 진행한 seo테스트 홈페이지 도 동일하게, 방문 후 주소를 입력하면 되는 구조로 되어있습니다.. 참담한 나의 점수..
빨간색만 보면 머리가 아파오는 이슈..
간략하게 정리된 이슈가 저정도 스크롤.. 오.. 우선 대충 살펴보자면 “H1 태그나 H2 태그를 사용해!” 란 내용이 보이네요 타이틀 구분은 h1과 h2를 사용하는게 좋을 것 같습니다. 또 404에러페이지를 따로 만드는게 좋을 것 같다는 말이 있네요! 이건 생각하지 못했는데, next의 error 처리를 통해 에러페이지를 하나 만들어 두는 것도 좋을 것 같습니다.
OK.. description 도 길게 쓰도록 할게.. 빨간색만 되지 말아줘..
이건 왜이거른 거지.. tag를 query params로 빼고 있는데 왜 이건 좀 더 알아보도록 해야겠습니다..
좀 중요한 내용들인 것 같습니다. 우선 html 태그를 통해서 google search 설정은 해두었으나, robots.txt가 있어야 웹 크롤링에 유리하기 때문에 나온 것 같습니다. sitemap은 어떻게 해야하지.. vercel 배포인데 따로 할 수 있는 방법이 있나..
다음은 robots.txt를 한번 써보는 것고 좋을 것 같네요..
생각보다 나쁘진 않은 점수였지만, 뭔가 그렇게 좋지만도 않았던.. 좀 더 성능을 끌어올려보자고~ ㅎㅎ 화이팅~