[UI&UX]Optimization(최적화)

 

❓What Is Optimization?

Optimaztion(최적화)는 주어진 조건에서 최댓값 혹은찾는 것입니다.
👉제약된 환경 속에서 최고의 효율을 뽑아내는 것이라 볼 수 있습니다,

 

❓Why We Need Optimization?

그렇다면 우리는 왜 최적화를 사용해야 하는 것일까요?

📌이탈률 감소

최적화가 잘 되어 있지 않은 웹의 경우 웹페이지 화면 로딩에 오래 걸릴확률이 높습니다.
❗하지만 사용자는 대다수는 웹페이지가 5초 안에 로딩되지 않으면 페이지를 떠나버립니다.
👉따라서 이탈하는 사용 자을 붙잡기 위해서는 최적화가 필요합니다,

📌전환율 증가

이탈률이 감소하면서 빈사 이익으로 전환율이 높아질 확률도 커집니다.
👉사용자가 이탈하지 않으면 사용자들의 숫자는 새로운 유입으로증가하게 됩니다.

📌수익 증대

이탈률이 줄고 전환율이 증가하면서 사용자가 증가하여 그에 따른 수익증대 효과를 볼 수 있습니다,
👉사용자 증가 = 💲 증가

📌사용자 경험 향상

최적화는 사용자가 웹 사이트를 더 빠르고 간편하게 이용할 수 있게 해 줍니다.
👉최적화 웹의 효율 극대화 = 사용자 경험 향상⬆

 

❓How Can We Apply Optimization?

그렇다면 웹을 최적화하기 위해서는 어떤 기법들이 필요할까요?

 

📝HTML  최적화하기

📌DOM트리 가볍게 만들기

DOM트리가 깊고, 자식 요소가 많을수록 DOM의 크기가 커집니다.
👉크기가 커지게 되면 DOM변경 시 계산할 양도 많아집니다.

❗불필요한 태그들을 제거하거나 중복되는 태그를 합쳐 DOM 트리를 가볍게 만들어야 합니다.

📌인라인 스타일 사용하지 않기

인라인 스타일로 작성 시 불필요하게 중복되는 부분이 많이 생기고 코드에 양도 늘어나게 됩니다.
👉중복되는 양이 많아지면 코드의 리플로가 그만큼 더 발생함으로 웹페이지가 느려집니다.

❗인라인 스타일보다는 Style sheet에 작성하는 것이 더 합리적!

<div style="margin: 10px;"> This is your Web </div>
//인라인 스타일 방식

<div  class="margin10"> This is your Web </div>
//스타일 시트 방식

 

🎨CSS 코드 최적화

📌사용하지 않는 CSS제거 하기

불필요한 코드가 많으면 많을수록 웹 페이지는 느려집니다. 
👉때문에 사용하지 않는 CSS 코드들은 제거해 주는 것이 좋습니다.

📌간결한 실렉터 사용하기

CSS 코드가 복잡하고 방대하면 이 또한 웹페이지를 느리게 만드는 원인이 될 수도 있습니다.
👉어렵고 복잡한 실렉터 보다는 간결한 셀렉터 사용을 지향해야 합니다.

.cart_page .cart_item #firstItem { ... }
// 복잡한 셀렉터

.cart_item { ... }
// 간결한 셀렉터 사용

 

🧠로딩 최적화

📌CSS파일은 문서의 최상단에 불러오기

웹 페이지가 로드되면서 가장 먼저 HTML과 CSS가 동시에 파싱 되는데
HTML과 CSS 파일은 시각적인 부분이기 때문에 가장 먼저 로딩될수록 좋습니다,

📌JavaScript파일 문서의 최하단에 불러오기

HTML과 CSS의 파싱이 실행될 때 Script파일을 만나면 파싱을 멈추고 해당 파일을 우선적으로 다운로드합니다.
따라서 script파일은 HTML 파일의 최하단에 위치하는 것이 좋습니다.

📌Async Defer사용

위의 HTML파싱 시 script파일을 만났을 때 파싱을 멈추는 문제를 해결하기 위해 사용할 수 있습니다.
Async 
async속성이 붙은 스크립트는 페이지와 완전히 독립적으로 동작할 수 있습니다.
Defer
derfer속성이 붙은 스크립트는 백그라운드에서 다운되고 HTML 파일이 전부 파싱 된 후 스크립트를 실행합니다.

📌브라우저 이미지 형식을 최적화한다

스포라이트 사용하기
👉이미지 스프라이트(image sprite)란 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미합니다.

➡이미지를 개별적으로 따로따로 보내지 않고 한대 모아 한 번에 보낸 뒤 백그라운드 속성으로 이미지의일정 부분만 때어서 사용하는 기법을 말합니다.

아이콘 폰트 사용하기
👉이미지 파일보다는 아이콘을 사용하는 것이 웹페이지를 더 빠르게 로드할 수 있습니다.

WebP 또는 AVIF 이미지 포맷 사용하기
👉이미지 포맷(압축)을 통해 더욱 효율적으로 용량을 감소시킬 수 있습니다.

 

📁캐시 관리

캐시(Cache)는 다운로드한 데이터나 값을 미리 복사해 놓는 임시 장소를 말합니다.
🧐동일한 파일을 다시 받아오거나 사용할 때마다 계속 다운로드하여야 된다면 아무래도 낭비되는 용량이 많을 수밖에 없습니다.

👉위와 같은 문제를 해결하기 위해 캐시 관리 방법을 사용할 수 있습니다.

html, css, js, image 등을 첫 요청 시에 내려받은 뒤 캐시에 복사본을 저장하고, 이후 동일한 URl의 리소스 요청이 왔을 때 이전에 저장해둔 파일을 사용하면 더 빠르게 로딩할 수 있습니다. 

출처 :https://dodeon.gitbook.io/study/kimyounghan-http-basic/08-http-header-cache

응답 결과를 캐시에 저장할 수있습니다.

출처 : https://dodeon.gitbook.io/study/kimyounghan-http-basic/08-http-header-cache

 

 

⭐웹 평가하기(Light house 사용하기)

웹의 최적화를 하기 위한 기법을 사용하여 웹을 최적화한 후 성능 확인이 필수 겠지요?
❓그렇다면 웹의 성능 확인은 어떻게 할 수 있을까요?

👉Light house툴을 사용하면 됩니다.

➡Lighthouse는 구글에서 개발한 오픈소스로서 웹 페이지의 품질을 개선할 수 있는 자동화 툴입니다. Lighthouse는 성능, 접근성, PWA, SEO 등을 검사하며 이를 이용해 사용자는 어떤 웹페이지든 품질 검사를 할 수 있습니다.

🔥Chrome 개발자 도구에서 Light house 실행하기

크롬에서 검사하고 싶은 페이지의 로 들어간 후
➡개발자 도구를 열어
➡Light house툴을 실행해한 후
➡Generate report클릭하면 페이지의 각종 성능이 평가됩니다,
📍저는 바이낸스 웹으로 평가를 진행했습니다.

 

🔨Light house분석 결과 항목

Light house분석 결과 항목들은 다음과 같습니다.

 

📌Performance(성능)

Performance 항목에서는 웹 성능을 측정합니다. 화면에 콘텐츠가 표시되는데 시간이 얼마나 걸리는지, 표시된 후 사용자와 상호작용하기 까진 얼마나 걸리는지, 화면에 불안정한 요소는 없는지 등을 확인합니다.

그동안 바이낸스를 사용하면서 웹이 상당히 느리다고 많이 생각하였는데 그 말을 증명이라도 하듯 성능 점수에서 아주 나쁜 결과가 나온 것을 알 수 있다.

 

📌Accessibility(접근성)

Accessibility 항목에서는 웹 페이지가 웹 접근성을 잘 갖추고 있는지 확인합니다. 대체 텍스트를 잘 작성했는지, 배경색과 콘텐츠 색상의 대비가 충분한지, 적절한 WAI-ARIA 속성을 사용했는지 등을 확인합니다.

그래도 전 세계 사람들이 많이 사용하는 사이트다 보니 접근 성만큼은 상당히 높은 점수임을 알 수 있었다.

 

📌Best Practices(권장 사항)

Best Practices 항목에서는 웹 페이지가 웹 표준 모범 사례를 잘 따르고 있는지 확인합니다. HTTPS 프로토콜을 사용하는지 , 사용자가 확인할 확률은 높지 않지만 콘솔 창에 오류가 표시되지는 않는지 등을 확인합니다.

마찬가지로 권장 사항에서도 꽤나 준수하게 나온 것을 볼 수 있다. 느린 것을 제외한다면 상당히 간편하고 뛰어난 웹이다.

 

📌SEO(검색 최적화)

SEO 항목에서는 웹 페이지가 검색 엔진 최적화가 잘 되어있는지 확인합니다. 애플리케이션의 robots.txt가 유효한지, <meta> 요소는 잘 작성되어 있는지, 텍스트 크기가 읽기에 무리가 없는지 등을 확인합니다.

내용적인 면에서 직관적인 부분들이 많아서 설명이 적어서 발생하는 문제인 듯하다. 그래도 전 세계에서 1위 거래소 사이트인 만큼 SEO는 크게 상관없을 것 같다.

 

📌PWA (Progressive Web App)

PWA 항목에서는 해당 웹 사이트가 모바일 애플리케이션으로서도 잘 작동하는지 확인합니다. 앱 아이콘을 제공하는지, 스플래시 화면이 있는지, 화면 크기에 맞게 콘텐츠를 적절하게 배치했는지 등을 점수가 아닌 체크리스트로 확인합니다.

그래도 역시 세계 1등 거래소 에는 이유가 있는 듯하다. 마지막 설치 가능 요건이 충족되지 않는 이유 한 개는 상관하지 않아도 될듯하다.

 

🪓Light house로 성능 개선하기

Lighthouse는 성능을 측정할 뿐 아니라 무엇이 시간을 많이 소모하는지, 어떻게 개선하여 최적화를 할 수 있을지 해결책도 제시해줍니다.
👉문제 진단 후 문제를 해결할 수 있는 설루션 또한 진단 결과로 나옵니다.

너무 느리다 해서 뭐가 문제일까 찾아보았는데 기본 스레드 작업이 생각보다 엄청 시간을 잡아먹는 것을 발견했다.
🔎어떻게 하면 문제를 해결할 수 있을까 문제를 자세히 보았더니
script 평가가 3만 ms가 나왔다. 역시 기능이 엄청 많아서 그런가 스크립트 양이 생각보다 큰 모양이다.