프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2를 수강하면서 나오는 키워드같은거 정리!
intersection observer
감시하고자 하는 요소가 다른 요소에 들어가거나 나갈때 또는 요청한 부분만큼 두 요소의 교차부분이 변경될 때 마다 실행될 콜백 함수를 등록할 수 있다. 기본적으로 observe객체가 생성될 때 한번, 화면에 들어왔을때 한번, 나갈때 한번씩 콜백함수가 호출된다.
// in useEffect
const options = {};
let callback = (entries, observer) => {
entries.forEach(entry => {
if(entry.isIntersecting) {
console.log(entry.target.dataset.src) // custom data attributes(data-*)
//...
observer.unobserver(entry.target) // 타겟 요소
}
});
};
const observer = new IntersectionObserver(callback, options);
observer.observe(imgRef.current);react에서 DOM 요소에 접근하기 위해서는 보통(?) useRef, createRef를 사용할 수 있다.
WEBP
구글산 포맷. PNG, JPG에 비해 성능이 좋은(용량, 화질) 포맷이다.
다만 지원되지 않는 브라우저가 있을 수 있다.
picture
이미지 지원을 위한 분기처리가 필요할 수 있다. 이때 사용가능한 태그가 picture다.
WEBP같은 것들을 분기 태울수 있겠다.
The type attribute
The type attribute specifies a MIME type for the resource URL(s) in the element's srcset attribute. If the user agent does not support the given type, the element is skipped.
<picture>
<source srcset="photo.avif" type="image/avif" />
<source srcset="photo.webp" type="image/webp" />
<img src="photo.jpg" alt="photo" />
</picture>Node.previousSibling
Node.previousSibling 은 읽기전용 속성이며 현재 호출하는 노드가 속해 있는 부모의 childNodes 목록에서 특정 자식 노드를 리턴하거나 childNodes 목록의 첫번째 노드일 경우 Null값을 리턴합니다. 라고 한다.
동영상 압축
고화질의 서비스가 아니라는 가정. 화질을 낮추더라도 압축해서 파일 로딩.
다만 webm같은 경우는 지원하지 않는 브라우저 있을 수 있다. 이때도 이미지떄와 마찬가지로 분기처리 해야 한다.
source태그로 분기처리 가능하다.
<video controls width="250">
<source src="/media/cc0-videos/flower.webm" type="video/webm">
<source src="/media/cc0-videos/flower.mp4" type="video/mp4">
Download the
<a href="/media/cc0-videos/flower.webm">WEBM</a>
or
<a href="/media/cc0-videos/flower.mp4">MP4</a>
video.
</video>FOUT, FOIT
Flash of Unstyled Text
폰트가 다운로드 되기 이전에는 기본폰트가 보여진다.
Flash of Invisible Text
또는 다운로드 전에는 폰트를 보여주지 않는다.
font-display
/*default*/
font-display: auto;
/*FOIT(timeout)*/
font-display: block;
/*FOUT*/
font-display: swap;
/*fallback FOIT(timeout) timeout 이후에도 불러오지 못하면 기본포트. 다운된 폰트는 캐시*/
font-display: fallback;
/*FOIT 네트워크 상태에 따라, 기본폰트를 유지할지 웹폰트를 적용할지 결정. 다운된 폰트는 캐시*/
font-display: optional; /* 추천! */FOIT를 사용할 경우 폰트가 갑자기 뜨는게 마음에 들지 않는다면 js로 폰트 다운로드 이후 페이드 인 처리로 어색함을 줄일 수 있다.
폰트 포멧 사이즈
TTF/OTF < WOFF < WOFF2
변환해주는 사이트!
위 사이트의 Characters를 활용, 정말 필요한 단어들로만 구성된 폰트로 다운 받을수도 있다.
또한 사이트에서 base64 encode를 활용, data uri로 작업할 수도 있다. (폰트 로드시 발생하는 트래픽을 줄일 수 있다.)
@font-face {
font-family: ...;
src: local(...),
url('...') format('woff2') // or 'woff' or 'truetype'
unicode-range: u+0041;
}local옵션은 사용자가 이미 폰트를 가지고 있다면 다운받지 않고 사용하게 해준다.
unicode-range옵션은 적용하고 싶은 유니코드 범위를 설정할 수 있다. (폰트가 필요없는 곳에서 폰트 다운로드 하는것을 방지할 수 있다.)
폰트 프리로드
웹팩에서 프리로드를 하도록 설정할 수 있다. 다만 CRA로 작업중인경우 커스텀이 필요하므로, react-app-rewired를 설치한다. 이 친구로 웹팩설정을 오버라이드 가능하다. 그리고 프리로드를 도와줄 친구인 preload-webpack-plugin 패키지를 설치하고 사용하면 된다.
이슈처럼 rewired에서 plugin을 추가해주고 원하는 옵션을 설정해주면 된다.
