웹성능 2

웹 성능 개선 - 폰트편

[TL;DR] 기본적으로 사용하는 폰트를 최소화하고, 폰트 사이즈를 줄여 'woff2' 포맷 파일로 'preload' 한다. 폰트가 적용된 글자수가 적다면 불필요한 글자를 제거한 서브셋 폰트를 사용하자. 잘 모르겠다면 구글 웹폰트를 사용하자. 쓰려는 폰트가 없거나 더 욕심나면 커스텀 하자. 디자이너와 개발자 모두 읽을 수 있도록 가벼운 수준으로 작성했으니 참고 부탁드립니다. [목차] 1. 사용 폰트 최소화 2. font-display - FOUT vs FOIT 3. 폰트 사이즈 줄이기 4. 폰트 호출 시점 앞당기기 5. 구글 웹폰트 1. 사용 폰트 최소화 기본적으로 사용하는 폰트는 최소화하는 게 좋다. 당신이 디자인을 하든 개발을 하든 모두 해당된다. 나처럼 열심히 공부하지 않은 날라리라도 모던 디자인을..

개발/Etc 2023.01.12

웹 성능 개선 - 이미지편(1MB에서 10KB가 되기까지)

바쁜 현대인을 위한 간단 요약(TL;DR) 무손실 이미지를 압축하고 썸네일 이미지를 만들어 index 화면 로딩 속도를 개선한다. 대략 1mb 짜리 이미지를 100~200kb로 압축하고 또 그 이미지를 다시 줄여 결론적으로 10~20kb 용량의 썸네일 이미지로 대체하는 과정을 기록했다. 참고로 DB는 구글 파이어베이스(Firebase) 8 버전을 사용하고 있다. 새해에는 뭔갈 해야 할 것만 같은 초조함에 시달리다 못해 결국 미뤄놨던 숙제를 꺼냈다. 매일 보는 뉴스와 그날의 날씨를 다시 꺼내보기 쉽도록 취미삼아 만든 사이트가 하나 있다.(하지만 꺼내보기 어려움) 아래 링크한 '오늘의 날씨와 경제'라는 아주 직관적이고 재미없있는 이름의 사이트다.(weather&economy라서 weaco) https://w..

개발/Etc 2023.01.08
728x90
반응형