[next] 포폴 랜딩 페이지 뜯어고치자

PageSpeed Insights에서 성능측정을 해보았다.
아래는 휴대전화에서의 결과이다. 데스크톱에서는 성능이 100이 나온다.

어디서 감점이 되었을까 살펴보았다.

접근성

button

일단 접근성을 보니 캐러셀에서 쓰인 버튼에 접근 가능한 이름이 없다고 한다.
name을 주었는데 접근이 여전히 안된다고 하기에 aria-label로 수정했다.

<button
  name="before"
  className={styles.card_carouselHandle_button}
  onClick={() => showSlide(-1)}
  ><button>
        //-> 수정
  <button
    aria-label="before"
    className={styles.card_carouselHandle_button}
    type="button"
    onClick={() => showSlide(-1)}
    ><button>

콘텐츠 가독성

백그라운드 및 포그라운드 색상의 대비율이 충분하지 않다고 한다.
음... 이건 디자인적 요소때문에 발생한 건데 고민이 된다.
글자에 스트로크를 주고 내부 컬러는 백그라운드와 같아서 생긴 문제인데,
스트로크를 좀더 굵게 주자니 너무 튀고 폰트컬러를 주자니 마음에 안들고.
해서 일단 나뒀다. 꼭 100%여야 하는 건 아니니까...

성능

이미지

이미지 크기 적절하게 설정하라고 한다. 이 문구는 모바일에서만 발생한다. 현재 내가 짜놓은 코드는 아래와 같다.

<Image
  src={eunseo}
  alt="eunseo"
  placeholder="blur"
  fill
  sizes="(min-width: 480px) 100vw, (min-width:600px) 500px, 500px"
  />

그리고 이 이미지가 들어가는 컨텐츠의 스타일링이 아래와 같다.

.intro {
  max-width: 400px;
  @include for-tablet {
    max-width: 70%;
  }
  &_img_wrap {
    width: 300px;
    height: 300px;
    object-fit: contain;
    object-fit: cover;
    @include for-tablet {
      width: 400px;
      height: 400px;
    }
  }

css짤때는 모바일기준으로 한다고 짜고 막상 html코드에서는 min-width로 하고 또 스타일링 한거랑 단위도 다르고 여튼... 문제가 많다. 그래서 css 코드랑 결이 맞게 수정해보았다.

<Image
  src={eunseo}
  alt="eunseo"
  placeholder="blur"
  fill
  sizes="(max-width: 480px) 300px, (max-width:600px) 400px, 400px"
  />

최대 콘텐츠 렌더링 시간 이미지가 지연로드되었다고 한다.
이건 좀더 알아봐야할거같다. next에서 어떻게 이미지를 최적화하는지 알아봐야할듯.

일단 위와 같이 수정했더니 아래와 같은 결과가 나온다. 굿!