웹 최적화를 하는 이유는 간단히 말하면 사이트가 더 잘 노출되고, 이미지도 바로바로 뜨고, 속도도 개선하기 위해서다. SEO는 마케팅 팀쪽에서 홈페이지에 광고를 달거나 할 때 기본적으로 점수를 넘기지 못하면 그 쪽 일을 진행하지 못하니, 개발자가 미리미리 마크업 짤때부터 제대로 코드짜야된다.
그럼, 어떻게 해야하냐
chrome lighthouse를 이용하면된다. 알아서 performance, accessibility, best practice, SEO로 나눠서 진단도 해주고 어떻게 하는지도 알려준다.
일단 웹 최적화 하기 앞서서 가져야할 상식은 언제 렌더되고 언제 CSSOM 만들어지는지 알아야한다. 안그럼 전체적으로 최적화하기 어렵다. 기본적으로 어디서 지금 딜레이되고있고 어떤 이미지가 비정상적으로 시간 잡아먹고 있는지 파악해야된다.
여기선 First Contentful paint, Time to Interactive, Largest Contentful Paint등 기준으로 퍼포먼스를 체크한다. 모바일, 웹 두경우 다른 식으로 체크하니 더 자세히 알아보고싶으면 공식문서를 참고하길.
그럼 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>
<link rel=preload> must have a valid 'as' value
라는 에러가 발생하면<link href="./styles/reset.css" rel="preload" as="style"/>
preload 쓰려면 as를 넣어줘야한다.
Document가 title element를 가지고 있는지, html이 lang 속성이 있는지, 태그에 알맞은 속성이 부여됐는지 체크한다. 이거 올리는 건 그렇게 어렵지는 않다. 마크업부터 제대로 하면 된다.
여기서 문제가 발생했다. 아직도 해결하지는 못했는데 SameSite cookie 부분이다. 해당 이슈로 구글링 해보니, 내쪽에서만 해결할 수 없는 문제같기에 일단은 넘겼다. 시간이 난다면 더 알아보고 해결할 예정이다.
이건 검색엔진마다 좀 다른 정책을 가지고 있어서 본인 사이트가 네이버, 구글 두 개의 검색엔진에서 상단에 위치했으면 좋겠다 싶으면 각각 정책 알아보고 해줘야한다. 네이버의 경우 서치어드바이저에서 하면 된다. 여기서도 시키는대로 하면 크롤링되고 나서 적용된다. (1일~3일 정도 기다려야함. 바로 안됨)
<title> </title>
안에 들어가는 내용은 브라우저에 사이트를 북마크할 때 내용물을 추천하는 북마크 이름으로 사용하기도 한다.//robot.txt 이런식임 추가할 거 있으면 추가하면 됨
User-agent: *
Allow: /
lighthouse 이용하면 어떻게 최적화 시킬 것인지도 다 상세하게 알려주기 때문에, 웹 만들때 사용하면 좋을 것 같다. 추천함
참고 자료
command line을 이용하여 webp 생성하기
using WebP Images in CSS
prefetch,preload..etc