| PHP | PHP 7.0 |
|---|---|
| CMS | Rhymix |
안녕하세요.
최초 화면 로딩 속도가 느려 용량이 큰 fontawesom 같은 CSS, JS를 지연 로딩시켜 보려고 하는데요.
구글링해도 답이 잘 안나와서 질문 드립니다.
그냥 layout 맨 하단에 추가하면 되는 건가요? 아니면 아래처럼 하는 걸까요?
<load target="css/1.min.js" type="body" index="-1" />
<load target="js/2.min.js" type="body" index="-2" />
<load target="js/3.min.js" type="body" index="-3" />
감사합니다.
HTML 로딩은 CSS/IMG -> JS -> 기타파일(폰트등) 의 순서로 이뤄집니다.
(CSS파일이 어디에 있던 폰트 로딩하곤 별 상관 없다는 의미입니다)
그리고 기본원칙은 CSS는 맨위에 JS는 맨 아래에입니다.
이유는 간단합니다. 체감로딩속도를 빠르게 하려면 화면을 빠르게 그려내야 합니다.
그리고 화면을 그려낼려면 CSS 로딩이 끝나야 합니다. 그러므로 필수적인 CSS는
조금이라도 빨리 로딩을 시작해야만 합니다. 그리고 화면을 처음 그려내는데
딱히 필요없는 JS는 일단 화면을 다 그리고서 그때부터 로딩해야 하는겁니다.
그리고 JS파일도 필수적인 것들 외에는 async defer 옵션을 줘서 로딩을 지연시킬 수
있습니다. 이렇게 하면 웹페이지 사용 가능 시점이 앞당겨집니다.
CSS는 딱히 지연해서 로딩한다는 개념이 없습니다.
자바스크립트 XHR로 JS를 지연로딩하기도 하는데 async defer와 크게 다를바 없습니다.
컨텐츠와 연관된 폰트,js 등은 지연시키는 대상이 아닐겁니다. 폰트를 늦게 불러오면 글자를 늦게 표시하고 그 자리에 이상한 표시만 나올뿐이고 js가 있어야 컨텐츠가 제대로 출력될 수 있습니다. 따라서 이걸 지연시켜서 얻을게 없습니다.
오히려 이런 대상은 요청하지 않아도 서버에서 푸시해주는 기능까지 사용하는 상황입니다.
컨텐츠와 상관없는 추가적인 js등이 상호작용으로 컨텐츠 로딩을 방해할때 컨텐츠 로딩 후 동작 또는 로딩하도록 합니다.