lighthouse로 성능 체크 & 개선하기
성능체크를위해 크롬 lighthouse를 사용해보았다.
아직은 큰 기능이 없기때문에 성능이 그렇게 나쁘지않다.
참고로 개발환경이아닌 production환경으로 체크해야 결과가 제대로 나온다.
이제 하나하나 살펴보며 성능을 개선해보자
1. Next.js Image fill속성 사용 시 사이즈 넣어주기
<Image
src={currentCourt.IMGURL}
fill
style={{ objectFit: "cover" }}
/>현재 이미지에 fill을 넣어주고있는데, Next.js문서를 보면
'fill'속성 사용시 'size'를 주냐 안주냐에 따라 성능에 큰 차이를 줄수있다고 한다.
2. 버튼에 accessible name이 없다?
웹 접근성 개선을위해 라이트하우스가 알려주는 감점요인을 확인해보았다.
accessible이 없다는 얘기는 Mac과 윈도우에는 모두 웹 서비스를 스크린 리더로 읽을 수있는 내장 기능이 포함되어있다.
맥에서는 cmd + F5 단축키로 확인해 볼 수있는데, 현재 내 사이트는 이 음성지원 기능을 활용할 수 없다는 얘기이다.
이 버튼이 정확하게 어떤 동작을 하는지 알기 어렵다는 것..!
따라서 각각의 버튼이나 a tag마다 접근성이 있는 이름 또는 설명을 주어야한다.
<button
className={`${styles.arrowButton} ${openModal ? styles.opened : ""}`}
onClick={() => setOpenModal(!openModal)}
disabled={!currentCourt}
aria-label={openModal ? "코트 정보 닫기" : "코트 정보 열기"}
>설명을 주기위해선 aria-label로 주면된다.
3. <title>element가 없다는 것도 해결해보자
<Head>
<title>테니스 코트 찾기</title>
<meta name="코트 잡기 하늘의 별따기" content="위쉐어랑 코트 잡자!" />
</Head>_document.tsx파일에 title과 메타 태그를 추가해주었다.
하지만 document에 추가해주면 페이지가 변경되어도 항상 똑같은 타이틀을 보여주기때문에, 각각의 페이지마다 next/head를 import하여 <Head><title/></Head>로 만들어주는 것이 더 좋다.
그.러.나. 이렇게 되면 또 각 페이지마다 수십개의 페이지가 생긴다면..?
너무 많은 타이틀과 메타태그를 관리해야하게 될것이다.
그래서 이를위해 SEO와 관련된 메타태그들을 관리하는 라이브러리가있다.
next-seo library
GitHub - garmeeh/next-seo: Next SEO is a plug in that makes managing your SEO easier in Next.js projects.
Next SEO is a plug in that makes managing your SEO easier in Next.js projects. - GitHub - garmeeh/next-seo: Next SEO is a plug in that makes managing your SEO easier in Next.js projects.
github.com
import { NextSeo } from "next-seo";
<Fragment>
<NextSeo
title="위쉐어! 테니스 코트 찾기"
description="코트 잡기 하늘의 별따기"
/>
<Header
.
.
.
많이 개선되었지만 Best Practices는 여전하다.
이 부분은 HTTPS로 배포하면서 개선해 볼 예정이다.