[7/27 TIL]이미지 최적화 시도

최적화 시도 전의 성능. Lighthouse로 측정했다.

최적화 시도 후의 성능.

1. 접근성의 경우 잘못된 html 태그 사용이 있어서 수정했다.!

2. 더보기 기능을 구현할 때, useState에 기존 데이터와 새로운 데이터를 누적해서 렌더링 하는 것보다. 기존 데이터는 캐싱데이터를 불러오고 새로운 데이터를 더해서 보여줄 때 약간이나마 성능이 상승했다.

3. img 태그에 크기 정보를 명시해줬다.

4. 이미지를 스크롤에 따라 늦게 부르는 lazy 설정을 추가 해줬다.

next
gatsby-plugin-image을 사용해서 이미지 최적화를 시도해보고 싶었는데 어떻게 쓰는 지 모르겠다. 계속 찾아봐야지