웹 사이트 성능 최적화_ (feat. 해보진 않았지만 알아 본다.)
웹 사이트 성능 최적화
웹 사이트 성능 최적화....
시니어 자격요건이나 우대사항에 나와 있는 그놈!!!!
(❗ 내가 알고 어렴풋이 알고 있는 거(추측)라고는.... )
1. 웹 사이트 성능 최적화는 로딩 속도와 관련된 게 아닐까?
👉 로딩 시간 몇 초 차이로 사이트 이탈률도 높아지니까 중요할 거 같다.
👉 구글에서는 최적 사용자 경험을 위해서는 3초 이하 페이지 로딩 시간 추천한다고 함
실제로 나도 몇 초 이상 기다리다가 사이트 나가버린 적이 많았지...😥
2. 그럼 코드의 양을 불필요하게 늘리면 안되겠구나! 코드를 최적화하자.
👉 내가 불필요하게 테스트한다고 적어놓고 주석처리 해놨던 코드들
👉 반복되는 코드들
👉 사용하지 않는 코드는 없애고, 반복되는 코드는 제거할 필요가 있겠다!
👉 리팩토링(코드 구조 개선 및 중복 제거)이 필요하겠네?
3. 로딩은 결국 이미지와도 관련 있을 거 같아. 이미지를 최적화하자.
👉 이미지 저장할 때 웹용으로 저장 또는 이미지 파일 형식은?
👉 webP는 어떨까? (이미지 압축효과 높고 화질 저하 최소화, jpeg보다 크기 작아짐)
👉 이미지 스프라이트를 사용하자 (IS기법 - 여러개의 이미지를 하나의 이미지로 합쳐 관리)
📍11번가에서 주워온 스프라이트 이미지 이렇게 하나의 이미지로 만든 후 background로 처리해 위치 조절하는 식으로 사용함
1. 웹성능 측정 도구 사용하기
웹 사이트 성능 진단 도구를 사용하면, 웹 사이트의 성능 문제를 찾을 수 있다.
개발자도구, pageSpeed, WebPageTest 에 대한 좀 더 자세한 설명은 펀코딩에서 확인 가능
- 크롬 개발자 도구
- 구글 PageSpeed Insights (무료 사용 가능)
- GTmetrix (무료/유료 버전)
- Pingdom (무료 - 모니터링 / 부분 유료)
- WebPageTest (무료 / 부분 유료)
2. 이미지 최적화 하기
웹 사이트의 이미지는 로딩 시간에 많은 영향을 미치므로, 이미지 파일을 줄이는 것으로 로딩 시간을 단축할 수 있다.
1) 이미지 스프라이트(이미지 분할) 사용하기
스프라이트 이미지는 여러개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미한다.웹페이지에서 이미지를 사용하는 경우, 해당 이미지 다운 시 브라우저는 서버에 이미지를 요청한다.로딩 시간이 오래 걸리는 이유는 사용된 이미지 개수 만큼 서버에 요청을 해야되기 때문!!!
이 때 이미지 스프라이트를 사용하면, 서버 요청을 줄일 수 있기 때문에 시간을 단축할 수 있다.
.menu .m1 a {background: url(./sprite_all.jpg) 0 0}
.menu .m2 a {background: url(./sprite_all.jpg) 0 -120px}
.menu .m3 a {background: url(./sprite_all.jpg) 0 -240px}
2) 이미지 지연 로딩
lazy loading
웹페이지에 필요한 리소스를 지연해서 로딩하는 기술👉 페이지 로딩 속도와 페이지 성능을 향상시킨다.
img 태그 loading 속성
img 태그에서는 loading 속성을 이용해 lazy loading을 구현할 수 있다.img의 loading 속성은 브라우저가 이미지를 불러올 때 사용할 방식을 지정하는 것으로loading의 값으로는 eager(기본값)와 lazy 를 사용할 수 있다.(IE에서는 지원 X , 브라우저에서는 지원 O)
- eager : 기본값, 뷰포트 안 위치여부와 상관없이 이미지 즉시 불러온다.
- lazy : 이미지가 뷰포트의 일정 거리 안으로 들어올 때 불러온다.
<img src="./star.jpg" alt="star" loading="eager">
<img src="./star.jpg" alt="star" loading="lazy">
3. 코드 최적화하기
1) 불필요하게 주석 처리해 둔 코드(사용하지 않는 CSS) 제거
2) 불필요한 div 제거하기
위에서 언급한 웹 성능 최적화 방법 외에 다양한 최적화 방법은
아래 [최적화] 웹 성능 최적화 방법 5분 완성에서 잘 설명해뒀으니 나중에 참고해야지!
* 참고 사이트: