Chrome lighthouse를 이용하여 웹 최적화 하기

유다혜·2021년 7월 7일
0

why

웹 최적화를 하는 이유는 간단히 말하면 사이트가 더 잘 노출되고, 이미지도 바로바로 뜨고, 속도도 개선하기 위해서다. SEO는 마케팅 팀쪽에서 홈페이지에 광고를 달거나 할 때 기본적으로 점수를 넘기지 못하면 그 쪽 일을 진행하지 못하니, 개발자가 미리미리 마크업 짤때부터 제대로 코드짜야된다.

그럼, 어떻게 해야하냐
chrome lighthouse를 이용하면된다. 알아서 performance, accessibility, best practice, SEO로 나눠서 진단도 해주고 어떻게 하는지도 알려준다.

일단 웹 최적화 하기 앞서서 가져야할 상식은 언제 렌더되고 언제 CSSOM 만들어지는지 알아야한다. 안그럼 전체적으로 최적화하기 어렵다. 기본적으로 어디서 지금 딜레이되고있고 어떤 이미지가 비정상적으로 시간 잡아먹고 있는지 파악해야된다.

Performance

여기선 First Contentful paint, Time to Interactive, Largest Contentful Paint등 기준으로 퍼포먼스를 체크한다. 모바일, 웹 두경우 다른 식으로 체크하니 더 자세히 알아보고싶으면 공식문서를 참고하길.

  1. WebP 이미지를 css에서 사용하기 위해서는 Modernizr가 가장 쉬운 방법이다. Modernizr는 브라우저에서 감지할 수 있는 특성을 감지하는 라이브러리인데, 이를 이용하면 .no-webp 아니면 .webp 를 이용하여 구분지을 수 있다. 자사 홈페이지에도 webp를 사용했는데 이거 쓰면 퍼포먼스 올려준다해서 썼다.

그럼 webp이미지는 어떻게 만드느냐,
간단하다 터미널에 명령어 치면 됨.

//terminal
cwebp -q 50 images/flower1.jpg -o images/flower1.webp

위 방법은 참고 링크 읽고 하면 된다.
주의!
해야할 점은 어떤 브라우저에서는 <picture>태그 안에 있는 webp이미지를 읽을 수 없을 수도 있기 때문에(버전 ?부터 가능), <img> 태그로 같은 파일을 넣어줘야한다.

        <picture>
        <source type="image/webp" srcset="images/이미지.webp"     
           class="w-56 md:w-2/5 md:hidden">
        <img
          width="220"
          height="385"
          class="w-56 md:w-2/5 md:hidden"
          src="images/이미지.png"
          alt="모모 사진"
        />
      </picture>
  1. lighthouse에서 시키는대로 했는데, 아래와 같이
    <link rel=preload> must have a valid 'as' value 라는 에러가 발생하면
<link href="./styles/reset.css" rel="preload" as="style"/>

preload 쓰려면 as를 넣어줘야한다.

Accessibility

Document가 title element를 가지고 있는지, html이 lang 속성이 있는지, 태그에 알맞은 속성이 부여됐는지 체크한다. 이거 올리는 건 그렇게 어렵지는 않다. 마크업부터 제대로 하면 된다.

Best Practices

여기서 문제가 발생했다. 아직도 해결하지는 못했는데 SameSite cookie 부분이다. 해당 이슈로 구글링 해보니, 내쪽에서만 해결할 수 없는 문제같기에 일단은 넘겼다. 시간이 난다면 더 알아보고 해결할 예정이다.

SEO

이건 검색엔진마다 좀 다른 정책을 가지고 있어서 본인 사이트가 네이버, 구글 두 개의 검색엔진에서 상단에 위치했으면 좋겠다 싶으면 각각 정책 알아보고 해줘야한다. 네이버의 경우 서치어드바이저에서 하면 된다. 여기서도 시키는대로 하면 크롤링되고 나서 적용된다. (1일~3일 정도 기다려야함. 바로 안됨)

  • <title> </title>안에 들어가는 내용은 브라우저에 사이트를 북마크할 때 내용물을 추천하는 북마크 이름으로 사용하기도 한다.
  • 매 사이트의 page 마다 meta description이 필요하다. signup.html이면 네이버에 회원가입 하세요 이런식으로 meta description을 작성해줘야함.
  • robots.txt를 만들어줘야 웹크롤러가 잘 읽는다. (네이버에서 서치어드바이저 하면 이거먼저 시킨다.)
//robot.txt 이런식임 추가할 거 있으면 추가하면 됨
User-agent: *
Allow: /

결론

lighthouse 이용하면 어떻게 최적화 시킬 것인지도 다 상세하게 알려주기 때문에, 웹 만들때 사용하면 좋을 것 같다. 추천함

참고 자료
command line을 이용하여 webp 생성하기
using WebP Images in CSS
prefetch,preload..etc

0개의 댓글