로드 아카이브
lordarchieve.com
사이트를 접속하면 검색 이전에는 전체 데이터가 조회된다. 이미지가 많은 조회 결과 떄문에 렌더링이 오래걸리길래 지연로딩을 추가해주고 새로고침이나 다시 검색할 때 이미지 때문에 오래걸리는 일이 생기지 않게 이미지 캐싱을 추가해줬다. 원래는 ImageKit API를 적용해볼까 하다가 크게 의미는 없는 것 같아서 지연로딩만 적용하기로 함.
검색 결과는 캐릭터-아티팩트-스킬 순으로 출력되기 때문에 비교적 위쪽에 있는 캐릭터는 제외하고 아티팩트와 스킬의 이미지 부분에 loarding = "lazy" 추가
추가로 cloudflare로 이미지 제공을 하고 있으니 백엔드 대신 cloudflare에서 캐시 관련 설정을 추가해준다.
도메인 -> cache ->caching rules로 내 페이지에서 다루고 있는 이미지 관련 확장자만 추가해줬다.
수정 전
수정 후
