반응형
IE에서 [티스토리] 유튜브 비디오 로딩 속도 최적화
블로그를 운영하면서 누구나 한 번쯤 고민을 하게 되는 문제가 바로 블로그의 글과 이미지 숫자가 많아지면서 웹사이트 로드 속도문제라 할 수 있다.
그중에서도 인터넷 익스플로러는 유튜브 링크 특히, 유튜브 영상 관련 소스코드를 본문에 삽입한 경우 웹사이트 로딩속도가 매우 느려지는 현상이 발생한다.
대다수 이용자들은 웹사이트를 처음 클릭 후 제대로 볼 수 있는데 허용할 수 있는 시간을 3-4초도 주지 않는다는데, 본문에 포함된 유튜브 영상으로 인하여 마우스 스크롤 불가와 함께 웹사이트 로딩이 10초 이상이나 지연되는 현상은 블로그 운영에 커다란 장애가 아닐 수 없다.
그 문제가 인터넷 익스플로러에서 나타나는 경우라면,
우리는 추가적인 딜레이를 주지 않으면서 그 문제를 매우 간단하게 해결할 수 있다.
이제부터 추가할 스크립트는 웹사이트 로드시간을 잡아먹는 유튜브 영상을 사용자가 클릭했을 때만 영상을 불러오도록 타이밍을 늦춰주는 역할을 함으로써 사용자가 웹사이트를 원활하게 접근할 수 있는 환경을 제공할 수 있다.
그 과정은 다음과 같다.
1. 아래 [딜레이 방지용] txt 파일을 다운 받은 후, 안에 내용물을 그대로 긁어다 </body> 위에 추가한다.
2. jpg 파일을 다운받은 후, jpg 파일을 서버에 업로드해 준다.
3. 업로드한 이미지 파일의 링크주소를 카피하여 스크립트 내의"playBtn" 경로를 수정한다.
4. 유튜브 영상을 추가할 때 소스코드를 이용해야 하는데, 소스코드를 복사하여 html모드에서 붙여넣기 한다.
그렇지 않고 주소를 이용하여 기본모드에서 직접 추가하면 본문에서 보여지는 유튜브 창이 너무 크게 보여진다.
과정이 다 왼료 되었으면 이제 익스플로러 실행하여 유튜브 소스코드가 들어간 본문을 불러들여 로드타이밍 딜레이가 여전한지 확인해 본다.
반응형
'It > Internet' 카테고리의 다른 글
| #1 스킨 애드센스 반응형 광고와 페이지 로딩 스피드. (0) | 2020.02.21 |
|---|---|
| 크롬 자동로그인 풀림 현상 (11) | 2020.02.08 |
| jquery.min.map 404 File not found 오류 (0) | 2020.01.22 |
| 중국어 CMD, 문서파일이 깨져 보일 때 간편 해결법 (2) | 2019.01.22 |
| 추적의 우려 없는 초간단 SNS 공유 아이콘 달기 (0) | 2018.10.25 |
