오프스크린 이미지 지연하기 [티스토리]

 

코어 웹 바이털에서 확인되는 속도 저하 문제 해결 방법 중에서 오프스크린 이미지 지연하기가 있습니다.

 

오프스크린 이미지 지연하기는 웹페이지의 로딩 속도를 향상시키기 위해서 필요한 과정 중 하나인데요.

 

이미지 로드를 지연시키시면 사용자가 현재 스크롤을 내리면서 보고 있는 필요한 이미지만 먼저 다운로드 되고 보고 있지 않은 나머지는 스크롤을 내리면서 나중에 로드되도록 하기 때문에 웹페이지 속도가 빠르다고 느끼게 됩니다.

 

해결 과정을 보면 능숙한 분들은 자바스크립트를 이용하셔서 추가하시는 분들도 있었지만 쉽게 누구나 따라 하실 수 있도록 간단한 방법을 안내해 드리겠습니다.

 

오프스크린-이미지-지연하기-[티스토리]

 

 

 

 

오프스크린 이미지 지연하기 방법

 

 

잠시 상단에서 말씀드렸지만 오프스크린 이미지 지연하기를 하시면 처음부터 전체의 이미지를 불러오는게 아니라 현재 보고 있는 이미지만 불러오고 나머지는 천천히 불러오기 때문에 사용자가 빠르게 느낀다고 말씀드렸습니다.

 

그러면 이제, 직접 설정하시도록 방법을 알려드리도록 할 건데요.

 

티스토리에서 html 편집으로 들어가시면 파일 업로드 탭이 보이실 텐데 클릭해 들어갑니다.

 

그리고 아래 blank. png 파일을 다운로드하신 다음에 파일 업로드 탭에서 업로드를 해주시면 되는데요.

 

blank.png

0.00MB

 

 

이 파일은 로딩 대기중인 이미지들이 투명한 노출을 하도록 하는 역할을 한다고 합니다.

 

 

 

오프스크린이미지지연하기1.txt

0.00MB

 

그 다음은 오프스크린 이미지 지연하기.txt파일이 있는데 다운로드 하신 다음, 조금 전에 업로드 하신 Images/blank. png 파일 위에 커서를 놓고 마우스 오른쪽 버튼을 누리신 다음 링크 주소 복사를 클릭해 줍니다.

 

images/blank.png-링크-주소-복사

 

 

그다음 오프스크린 이미지 지연하기 파일을 여신 다음 ★부분에 조금 전 링크 주소 복사하신 것을 붙여넣기 해준 후 전체를 복사해 줍니다.

 

그러고 나서 html 화면으로 가셔서 방금 복사한 전체를 head 바로 아래에 붙여 넣어 주시고 나서 적용을 눌러 주시면 됩니다.

 

그러면 서치 콘솔로 가셔서 코어 웹 바이털에서 Page Speed Insights로 가셔서 분석을 누르신 다음 성능 검사를 해보세요.

 

다른 문제들도 해결된 상태라면 오프스크린 이미지 지연하기를 했을 때 성능이 좋아진 경험을 하실 수 있으실 것입니다.

 

 

마치며

 

지금까지 오프스크린 이미지 지연하기 방법에 대해서 안내해 드렸는데요.

 

코어 웹 바이털에서 생기는 문제들이 생각보다 해결하는 데 시간이 많이 들지만 속도에 영향을 미치므로 해결을 안 할 수도 없어 답답하시리라고 생각됩니다.

 

 

그렇지만 하나씩 해결해가면서 본인만의 노하우를 쌓아가는 과정도 중요하다는 생각이 드네요.

 

그리고 함께 보시면 도움 되는 글들도 하나씩 올리고 있으니 확인하시고 조금이라도 도움되셨으면 좋겠습니다.

 

CLS 문제 개선 0.1초 초과 해결

 

구글에 아직 알려지지 않은 URL.색인 생성 요청이 거부됨.특정 조건 충족

 

크롬 브라우저 속도 개선 및 메모리 최적화와 성능 향상 설정

 

Recuva 무료 앱 USB 파일 복구 손쉽고 간단하게 해결하기