[Blog Value Up] 이미지에 Width와 Height가 없다고?

search console에서 블로그 평가인 코어 웹 바이탈을 보면 내 블로그의 사용자 관점 점수를 보여줍니다. 여기서는 pagespeed insights 통해 여러 요소들로 페이지 최적화의 점수를 산정하고 개선 방향을 제시해줍니다. 

hobbycreator.tistory.com의 모바일 점수

점수가 매우 낮지요.. 기부니가 좋지 못합니다. 

 

첫 블로그에서도 계속 눈에 띄는 항목이 있었습니다. 

  

 

주로 이미지는 화면을 캡쳐하여 붙여넣는데 사이즈가 명시되어 있지 않다고 하네요. 그도 그럴것이 이미지를 불러오는 것이 아니라 캡쳐로 저장된 것을 ctrl + V로 넣은 것이라 HTML 코드상에서도 width와 height 정보는 없는 상태입니다. 

 

Width와 Height 정보가 없다면??

따라서 google에서는 이미지를 불러오고 표시하는데 시간이 많이 걸리게 될 것입니다. 특히 모바일 환경에서라면 크기가 정해져 있지 않으니 화면을 벗어나는 경우도 발생할 것이구요. 따라서 구글에서는 CSS 수정을 통해 사이즈를 고정하는 방법을 제안합니다.    

img{
   max-width:100%;
   height:auto;
   width:auto;
}

 

해당 코드를 티스토리 - 관리 - 스킨편집 - HTML 편집 - CSS 에서 제일 마지막 부분에 넣어줍니다. 

 

 

이것 하나 수정했을 뿐인데 성능 점수가 16점이나 올랐네요. 

여러분도 수정하고 좋은 점수 받으세요~