글이 로딩이 느린 이유

한 페이지에 용량이 큰 이미지나 동영상이 한 두개가 아닌 많이 있을 경우 화면 밖에 있는 이미지나 동영상 같이 당장 필요하지 않은 요소도 페이지가 로딩될 때 한꺼번에 불러오기 때문에 페이지가 로딩되는 시간이 길어질 수 밖에 없습니다.

로딩 시간을 줄이는 방법

로딩 시간을 줄이려면 이미지나 동영상의 용량이나 사이즈를 줄이는 극단적인 방법이 효과적일 수는 있으나 현대 사회에서 그러기는 쉽지 않으므로 각각의 요소가 화면 안에 가까워 질 쯤 로딩을 하는 방법이 있으며 이를 지연 로딩(Lazy loding)이라고 합니다.

그래서 어떻게 하는데?

에디터에서 기본 모드에서 html 모드로 전환한 뒤 첨부한 요소를 찾습니다.

그러나 티스토리의 경우 안타깝게도 이미지를 첨부하면 <img로 시작하지 않고 [##_Image| 와 같이 알 수 없는 요상하게 생긴 소스가 첨부되어 더 이상 소스를 추가할 수가 없습니다.

따라서 에디터에서 수정으로 로딩 속도를 조금이라도 줄이는 방법은 iframe으로 첨부된 동영상이나 기타 iframe에 가능한데, 이러한 iframe 찾은 뒤 <iframe 옆에 loading="lazy"를 추가하기만 하면 됩니다. 첨부된 지도도 <iframe으로 시작하기 때문에 추가하면 로딩 속도에 조금 도움이 될 수 있습니다. (쉽게 찾는 방법은 키보드 단축키 컨트롤+F iframe 검색)

<!-- 유튜브 동영상 첨부 예시 -->
<figure data-ke-type="video" data-ke-style="alignCenter" data-video-host="youtube" data-video-url="<https://www.youtube.com/watch?v=_ZAgIHmHLdc>" data-video-thumbnail="<https://scrap.kakaocdn.net/dn/eicXDc/hyRwGPrcmS/WSZneWto2oSOqNFGRzVrJK/img.jpg?width=1280&amp;height=720&amp;face=392_148_1174_488>" data-video-width="860" data-video-height="484" data-video-origin-width="860" data-video-origin-height="484" data-ke-mobilestyle="widthContent" data-original-url="" data-video-title="">
	<iframe **loading="lazy"** src="<https://www.youtube.com/embed/_ZAgIHmHLdc>" width="860" height="484" frameborder="0" allowfullscreen="true"></iframe>
<figcaption>동영상 설명</figcaption>
</figure>

글이 로딩이 느린 이유

로딩 시간을 줄이는 방법

그래서 어떻게 하는데?

관련 정보