웹 사이트 성능 최적화_ (feat. 해보진 않았지만 알아 본다.)

웹 사이트 성능 최적화

웹 사이트 성능 최적화....

시니어 자격요건이나 우대사항에 나와 있는 그놈!!!!

 

 

(❗ 내가 알고 어렴풋이 알고 있는 거(추측)라고는.... )

 

1. 웹 사이트 성능 최적화는 로딩 속도와 관련된 게 아닐까?

👉 로딩 시간 몇 초 차이로 사이트 이탈률도 높아지니까 중요할 거 같다.

👉 구글에서는 최적 사용자 경험을 위해서는 3초 이하 페이지 로딩 시간 추천한다고 함

 

실제로 나도 몇 초 이상 기다리다가 사이트 나가버린 적이 많았지...😥

 

2. 그럼 코드의 양을 불필요하게 늘리면 안되겠구나! 코드를 최적화하자.

👉 내가 불필요하게 테스트한다고 적어놓고 주석처리 해놨던 코드들

👉 반복되는 코드들 

👉 사용하지 않는 코드는 없애고, 반복되는 코드는 제거할 필요가 있겠다!

👉 리팩토링(코드 구조 개선 및 중복 제거)이 필요하겠네?

 

3. 로딩은 결국 이미지와도 관련 있을 거 같아. 이미지를 최적화하자.

👉 이미지 저장할 때 웹용으로 저장 또는 이미지 파일 형식은?

👉 webP는 어떨까? (이미지 압축효과 높고 화질 저하 최소화, jpeg보다 크기 작아짐)

👉 이미지 스프라이트를 사용하자 (IS기법 - 여러개의 이미지를 하나의 이미지로 합쳐 관리)

 

📍11번가에서 주워온 스프라이트 이미지 이렇게 하나의 이미지로 만든 후 background로 처리해 위치 조절하는 식으로 사용함

 

11번가 스프라이트 이미지

 

 

 

---

 

 

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분 완성에서 잘 설명해뒀으니 나중에 참고해야지!

 

* 참고 사이트: 

• [최적화] 웹 성능 최적화 방법 5분 완성
• 웹 성능 최적화 기법