요즘은 많은 퍼포먼스 툴들이 있다
이것저것 해보긴 하는데 솔직히
한국에서 사는한 잘 제감이 안간다.
그러나 5G 사용하는 나라는 5손가락 안에 꼽고
3g 나 2g 에 머물고 있는 나라들이 70%
이상이라니 글로벌한 시대에 맞춰야 하는가 싶다.
기준으로 할만한 게 모가 있을까
이것저것 하다가 브라우저 개발자 모드에서
제공되는 등대(;ighthouse)가 적당하지 않을까 싶다
요즘 크롬 엣지 훼일 오페라까지 몽땅 크롬 엔진이라 그런지
lighthouse가 기본으로 제공된다.
속도 높이는 문제 떄문에 이것저것 해보다가
내 나름대로의 팁이 있어 끄적여 본다
1. jsvascript는 body 안에 사용하고 defer 로 선언해준다
async를 사용하기도 하는데 이건 blocking time 에 악역향을 준다
무조건 defer 로 사용해라
defer 로 사용하는 순간 악몽을 만날수도 있다
무슨 얘기인가 하니 defer 가 어떻게 작동하는지는 구글링 통해 확인하시고
defer 를 쓰는 순간 무수한 오류가 발생할꺼다.
이유는 defer 를 쓰지 않으면 javscript는 선언되는 순서대로 로드 되지만
defer를 쓰면 선언순서와 관계없이 로드된다.
악몽을 피하기 위해서는
코어되는 스크립트와 우선 로드되어야 하는 최소한의 스크립트를 모아
defer 선언없이 사용하고 나머지를 몽땅 defer 로 사용하는거다.
이렇게 선언하고 오류나는 부분에 대해서는
코어쪽으로 올리고 다시 컴파일 이런식으로 해야 한다
예제)
<script type="text/javascript" charset="utf-8" src="/IMS02/module/js.min/IMS_Z_Core.js">/script>
<script type="text/javascript" charset="utf-8" src="/IMS02/custom/IMS_Config.js"></script>
<script defer type="text/javascript" charset="utf-8" src="/IMS02/module/js.min/json3.js"></script>
<script type="text/javascript" charset="utf-8" src="/IMS02/module/js.min/IMS_$U.js"></script>
2. css 로 지연로딩을 사용한다. 다음과 같이 나는 사용한다
<link rel="stylesheet" type="text/css" href="/resources/css/expert/core.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="/resources/css/expert/form.css" media="print" onload="this.media='screen'"/>
<link rel="stylesheet" type="text/css" href="/resources/css/expert/element.css" media="print" onload="this.media='screen'"/>
스크립트 로드와 마찬가지로 코어부분을 따로 구분해서 올리고
나머지는 지연로딩을 사용한다
내가 쓰는 방법은 media를 print로 선언한다음 onload 이후에 media를 변경해주는 방식이다.
잘 동작한다.
코어부분은 보통 뼈대 부분을 추출해서 만든다
decoration 부분 ( 칼라, radius, border width ) 등등을 지연로딩 한다.
이것도 잘 생각해서 만들어야 한다.
3. 폰트오섬을 사용하는 경우 js 보다는 css 를 사용하는 것이 속도면에서 유리하다
난 폰트오섬을 다운로드해서 사용한다 cdn 선언없이도 사용이 가능하고
속도면에서 유리하다고 생각해서다
이경우 두가지로 선언할수가 있는데
<link rel="stylesheet" type="text/css" href="/IMS02/module/html/font-awesome/6.0.0/css/all.min.css?version=${version}" media="print" onload="this.media='screen'"/>
이렇게 CSS로 선언할수도 있고
<script defer type="text/javascript" charset="utf-8" src="/IMS02/module/html/font-awesome/6.0.0/js/all.min.js?version=${version}"></script>
자바스크립트로 선언할수도 있다.
경험해본결과 css 로 선언하는게 더 속도면에서 유리하다
4. 웹폰트 로드는 구글웹폰트 로드를 사용한다
난 다운로드 받아 사용한다
내가 쓰는 방식은 다음과 같다
<script defer type="text/javascript" charset="utf-8" src="/IMS02/module/js.min/webfont.js?version=${version}"></script>
<script defer type="text/javascript">
function gfn_webfontload(){
try{
WebFontConfig = {
active: function() {
sessionStorage.fonts = true;
}
};
WebFont.load({
custom: {
families: ['IMS_FONT'],
urls: ['/IMS02/module/html/css/IMS_font.css']
}
});
} catch(e){
setTimeout(function(){
gfn_webfontload();
},100);
}
}
gfn_webfontload();
</script>
잘 동작한다.
5. image 는 webp 난 avif 로 변환하여 사용한다
용량이 많이 줄어드는것을 알수 있다
브라우저별로 지원안하는 경우가 있으니
img onerror 이벤트를 이용하여 적절히 사용하는 것이 좋다
avif 는 브라우저별로 제한된 것이 많다
그래서 난 webp 를 사용한다
무료로 변환해주는 사이트다
https://cdkm.com/kr/jpg-to-webp
JPG WEBP 변환 - JPG 를 WEBP 로 온라인에서 무료로 변환하십시오
cdkm.com
이외에도 여러가지 방법이 있을듯 한데
여기까지만 적용해도
속도면에서 많이 나아짐을 체감할수 있다
도움이 되었길....