[HTML, CSS] 이미지 로딩 속도 개선

⚡️문제점

---

이번에 만든 심리테스트는 총 16문제로 구성되어있다.

문제의 상황에 맞춰 이미지도 삽입을 했는데, 100kb밖에 안되는 이미지들이 로딩하는데 2~3초가량 걸리는 문제가 있었다.

 

 

⚡️해결 방법

---

문제 해결을 위해 캐시메모리에 이미지들을 미리 담아두는 방법을 사용했다.

<article class="loading">
        <img src="1.jpg">
        <img src="2.jpg">
        <img src="3.jpg">
        <img src="4.jpg">
        <img src="5.jpg">
        <img src="6.jpg">
        <img src="7.jpg">
        <img src="8.jpg">
        <img src="9.jpg">
        <img src="10.jpg">
        <img src="11.jpg">
        <img src="12.jpg">
        <img src="13.jpg">
        <img src="14.jpg">
        <img src="15.jpg">
        <img src="16.jpg">
    </article>

.loading {
    width: 0;
    height: 0;
}

 

사이트 접속 시 미리 이미지 정보를 보이지 않는 크기로 불러와 캐시 메모리에 담아줘,

다음 질문으로 넘어갈 시 이미지들을 바로바로 불러와 2~3초 걸리던 로딩 속도를 확실하게 줄일 수 있었다.