1. 이미지 포맷 변경

jpg, png도 훌륭하지만 webp, avif로 바꾸면 사진 크기가 엄청 줄어들어 로딩이 빨라진다


               

github.png               github.webp

(16.5KB)                    (7.5KB)

사이즈는 모두 500x500 이고 avif 포맷은 아카가 지원하지 않아서 못올렸지만 크기는 가장 작은 4.6KB

avif는 비교적 최신이라 지원 안하는 브라우저도 있으니 webp를 추천한다

인터페이스 아이콘은 svg 써라 작은건 몇백 바이트밖에 안한다


2. 최신 문법 쓰기

CSS3, ES6/7/8/9 잘 쓰면 같은 결과라도 훨씬 소스 덜 쓸 수 있음

그냥 구글링 해보면서 유용하고 자신이 많이 쓸거같은거만 골라서 쓰기만 해도 좋다

게다가 속도 향상도 충분히 노릴 수 있어서 적극 추천한다

근데 IE나 구형 브라우저를 지원해야 하는 상황이라면 그냥 레거시 써라

babel이나 polyfill로 지원하게 할 수 있지만 추천하지 않는다


3. 라이브러리 최소화

너가 존나 삽질하면서 만든 코드가 오히려 최적화에 도움을 줄 수 있음

딱 필요한 만큼 기능을 만들어서 소스 크기 줄일 수 있고 또 실력도 늘일 수 있으니 일석이조

근데 이것도 자기 실력이 안되거나 많은 기능이 필요하면 오히려 독이 될 수 있으니 알아서 판단해서 써