[Nextjs] PageSpeed Insights SEO 및 웹 최적화 적용

 

 

 

 

웹사이트를 운영하면서 중요한 것 중 하나는 사용자 경험이다. 이를 위해 최근에는 SEO(검색엔진 최적화)는 필수적인 요소가 되었다. 내가 Nextjs로 프로젝트를 제작하게 된 계기도 SEO를 직접 구성해보고 작업해보면서 중요성을 경험해보기 위함이기도 하다.

SEO는 단순히 검색엔진에서 상위 노출을 위한 것은 아니다. 더 나은 사용자 경험을 제공하기 위한 방법이다.

사용자 경험에서 중요한 것 중 하나는 성능이다. 빠른 로딩속도와 안정적인 서비스로 사용자의 만족도를 높이고, 검색엔진에도 긍정적으로 평가받는다.

그러나 성능만이 전부는 아니다. 웹사이트의 접근성은 다양한 사용자들에게 동일한 서비스를 제공하기 위해 필수적으로 작성해야 한다.

권장사항과 검색엔진 최적화 또한 웹사이트의 전반적인 품질을 높이기 위해 고려해야 할 부분이다.

 

 

PageSpeed Insight

 

 

PageSpeed Insight는 Google에서 제공하는 웹사이트 성능향상 도구이다. 로딩속도나 사용자 경험, 접근성 등에 관한 정보를 제공한다. 4가지의 카테고리를 바탕으로 웹사이트를 평가해주고, 보다 나은 성능을 위해 수정사항을 제공해준다.

 

1. 성능최적화
   • 이미지 최적화: 이미지 크기 등 적절하게 변경하는 것을 추천함.
   • JS, CSS 최적화: 불필요한 파일들을 최소화하여 번들사이즈를 줄이도록 함.
   • 서버 응답시간 최적화: CDN 사용이나 캐싱등을 통해 서버 부하를 줄이도록 함.
2. 접근성 최적화
   • 색상 대비: 사용자가 텍스트를 쉽게 읽을 수 있도록 적절한 색상 대비를 추천함.
   • 텍스트 크기: 적절한 크기와 스타일을 사용하도록 추천함.
3. 권장사항
   • 브라우저 캐싱 활용: 자주 사용되는 리소스에 대한 캐싱 전략을 통해 로딩속도를 향상.
   • 렌더링 차단 리소스 제거: 로딩을 지연시키는 렌더링 차단 리소스를 최소화하도록 추천함.
4. 검색엔진 최적화(SEO)
   • 메타태그 활용: 적절한 메타 태그를 활용하여 검색 엔진에 웹사이트 내용이 잘 전달하도록 추천함.
   • 구조화된 데이터: 주요 컨텐츠를 검색엔진에게 명확하게 전달하기 위해 구조화된 데이터를 활용하도록 함.

PageSpeed Insight에서 제공하는 위 기능들로 내 프로젝트를 최적화해보자.

첫 배포 직후 분석을 하니, 권장사항을 제외하고 수정해야 할 부분들이 많이 있는 것 같다. 아래 분석내용을 바탕으로 알아서 수정해야 할 부분들을 알려주니, 차근차근 짚어가며 수정하면 된다.

 

 

 

 

백그라운드 대비율이 충분하지 않다고 한다. 배경색에 대한 텍스트의 색상을 변경해주면 된다.

 

 

html요소에 lang속성을 넣기 위해, _document.tsx 파일이 필요하다. Nextjs에서 예제코드를 제공하고 있다. 추가로 후에 html의 프로퍼티를 변경하는 것을 이용해 Tailwind CSS로 다크모드를 구현할 수 있다.

 

 

이름 및 라벨에는 title요소를 넣어라고 한다. Nextjs에서는 Head태그로 title과 meta를 입력할 수 있으므로 작업하도록 하자. 검색엔진 최적화(SEO)에도 동일하게 적용될 것 같다.

 

 

검색엔진 최적화에서 링크 크롤링에 대한 부분은 antd에서 사용하는 pagination의 버튼에 a태그로 인해 나타나는 것 같다.

해당 버튼은 params등과 같이 url을 변경하는 것이 아니라 데이터만 받아오기 때문에, 딱히 정보를 제공하지 않는다. 의미없는 태그이므로 크게 신경쓰지 않아도 될 것 같다.

 

 

접근성에 대한 부분은 Image 태그에 alt를 꼬박꼬박 유의미하게 입력해줘서 딱히 다른 접근성에 대한 문제는 없는 것 같다. Nextjs의 Image태그에서 alt를 입력하지 않으면 에러가 나오기에 미리 접근성에 대한 부분을 채워넣을 수 있었다.

 

 

권장사항에 대한 부분도 딱히 건드릴 부분은 없는 것 같다.

 

 

Products

 

 

products페이지에 대한 부분을 모두 수정하여 성능을 끌어올렸다. 검색엔진 최적화는 pagination 버튼 때문에 91점이 나오는 것 같다.

 

 

ProductDetail

 

 

제품 상세페이지에 대한 부분도 상당부분 수정하여 최적화하였다.

 

 

Main

 

 

분석할 때 마다 성능점수는 조금씩 바뀌지만, 전반적으로 깔끔하게 최적화한 것 같다. 메인페이지는 단지 몇 시간 만에 만들었지만 왠지 모를 뿌듯함을 느끼게 해주어 기분이 좋다.

 

 

PageSpeed Insight와 같은 도구들을 이용하여 내 프로젝트의 부족한 점을 빠르게 찾아내고 수정해 볼 수 있었다. 그러나 중요한 점은 실제 사용자의 경험 및 피드백 등을 고려하여 다양한 요소를 지속적으로 수정하며 최적화하고 개선해야 한다. 물론 한 번의 최적화로 끝나는 것은 아니다. 이후 추가적인 개발을 하거나 데이터가 많아지면 고려해야 할 부분이 현재보다 복잡해질 수 도 있으므로 지속적으로 관리하여 최적화해야 한다.