안녕하세요!! 이번 시간에는 프론트엔드 개발자로서 중요하게 생각해야할 클라이언트의 성능 향상을 시켜줄 대표적인 몇가지 방법들에 대해 소개해볼까 합니다!!

리소스를 압축하여 최소화하자!!

기본적으로 저희가 IDE에서 HTML, CSS 그리고 자바스크립트에 마크업과 코드들을 작성할때 띄어쓰기, 엔터 , 주석등 불필요한 공간들이 매우 매우 많이 생기게 됩니다!!

// minify 안한 상태
export function Hello(name) {
  console.log(`Hellooo ${name}`)
}

//minify 한 상태
export function Hello(o){console.log(`Hellooo ${o}`)}

그래서 위와같이 공백같은 불필요한 것들을 모두 날리고 꽉 꽉 압축하여 리소스를 최대한 줄이는 것이 핵심입니다!! 일반적으로 저희가 webpack과 같은 번들러를 사용할때 env가 production인 경우 minify해주는 옵션을 넣어 번들링을 해주게됩니다.

서버에 대한 요청을 최대한 줄여보자!

기본적으로 프론트에서 서버로 요청이 많이 들어가면 많이 들어갈수록 로드하는 속도는 더욱 더 오래걸리게 됩니다! 왜냐하면 서버에 어떠한 요청을 한다는것은 페이지가 렌더링이 되기전에 이루어져야하는 경우가 있기 때문입니다. 그렇기때문에 이러한 요청을 줄이기 위한 몇가지 방법들이 있습니다

CSS Sprites를 사용하자!

외부의 요청이 빈번하게 일어나는 써드파티 사용을 줄이자!

필요하지 않는 커스텀 폰트는 줄이자!

최근 커스텀 폰트에 대한 인기가 굉장히 많아졌습니다! 직접 제작한 폰트는 웹사이트에 개성을 더해주기 때문이죠 ㅎㅎㅎ 하지만 이러한 폰트들은 높은 퍼포먼스를 요구합니다

커스텀 폰트들은 사이즈들이 꽤 큽니다.. 구글 폰트와 같은 웹 폰트들은 HTTP에 추가 요청을 하게되는데 이것들은 페이지 렌더링 속도를 저하시키게 됩니다.

웹사이트에서 폰트를 사용하면서 웹 성능을 개선 시키고 싶다면 다음과 같은 방법을 취해주시면 됩니다

<link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin>

파일을 압축하자!!

개발자들이 열심히 개발한 코드들을 배포를 할때 이 파일 사이즈들이 커지면 커질수록 로드하는데는 더 많은 시간이 걸리게 됩니다! 시간이 지날 수록 웹서비스의 규모가 거대해지면서 HTML, CSS, 자바스크립트의 파일들이 계속 무거워져만갑니다.. ㅠ

하지만 이것들을 최대한 압축할 수 있을만큼 압축해서 획기적인 속도 개선을 만들 수 있습니다.

일반적으로 압축하는 대표적인 알고리즘이 2가지가 있는데 Gzip과 Brotli 방법입니다

위의 사진은 후니로그 네트워크 탭에서 확인한 헤더인데 content-encoding이 br로 되어있는것을 보실 수 있습니다. 이말은 제 홈페이지의 압축 알고리즘이 Brotli로 이루어져있음을 볼 수 있습니다

이미지 최적화를 해줍니다!

아마 전세계의 모든 웹사이트에서 이미지가 안들어간 곳은 거의 없을거라고 생각이 됩니다! 그만큼 이미지는 웹사이트에서 빼놓을 수 없는 요소중 하나인데, 이 이미지들의 사이즈가 생각보다 엄청나게 크고 웹서비스를 굉장히 느리게 만들어버립니다! 때문에 이미지 최적화 작업이 엄청 중요하다고 볼 수 있습니다

이미지를 최적화하기 위한 방법이 몇가지 존재하는데 그것은 바로

WebP 나 AVIF 의 확장자 이미지를 사용하는 것입니다

후니로그의 메인 backgroudn image가 초기에 jpg 확장자로 되어있었습니다. 당시 크롬에서 Lighthouse 측정을 해봤었을때

보이시나요?? 퍼포먼스 차이가?! 저는 background image 확장자를 변경해서 업로드 했을 뿐인데 엄청난 성능 개선을 보여줬습니다.

webp가 png나 jpeg대비 25%~35% 더 가볍다고 하며, avif는 50% 나 더 가볍고 webp보다도 20%나 더 가볍다고 합니다

최적화 성능만 본다면 avif가 제일 좋지만 단점이 있습니다. webp는 대부분의 브라우저에서 지원하지만 avif는 아직 지원하는 브라우저가 적은걸로 알고있습니다. 때문에 이러한것을 고려하고 사용하면 되겠습니다!

또 이미지 최적화에 중요한 작업이 반응형이미지를 사용하는 것입니다!

일반적인 html에서 img 태그 안에 무거운 고해상도 이미지를 넣어버린 후 모바일에서 그 이미지를 사용하게 된다면 너무 불필요한 트래픽을 보여줍니다. 예를들어 데스크탑에서 보여줄 width가 1920 인 해상도 이미지를 넣었는데 모바일에서는 굳이 1920 짜리가 필요가 없습니다. 훨씬 더 작은 이미지를 넣어도 똑같이 보여지기 때문에 용량이 더 낮아진 이미지를 로드시키는게 훨씬 더 빠른 로드를 불러일으킬 것입니다.

Next.js에서 지원해주는 Image 컴포넌트를 사용하면 큰 설정 없이 이미지 최적화가 이루어지고 (lazy loading 포함) 그게 아니라면 img 에 srcset 속성을 넣거나 picture 태그를 사용하여 반응형 이미지를 만들어내면 됩니다!

지연 로딩(Lazy Loading)을 사용해주세요!

지연로딩도 웹 최적화를 위해 많이 사용되는 기법입니다! 사용자가 굳이 안보고 있는곳에는 렌더링을 시키지 않는것입니다!

예를들어 후니로그 페이지에 처음 방문했을때 굳이 아래에 있는 아이템 카드들을 미리 다 로드할 필요가 없겠죠?

아래와 같이 스켈레톤 컴포넌트를 넣어 최대한 웹페이지 렌더를 가볍게 만들어놓은 상태입니다. 그리고 저기서 스크롤바를 조금 더 내리면 상대방이 이제 저 컨텐츠를 봐야하니까 그때 진짜 컨텐츠를 로드해서 사용자가 볼 수 있게 만드는 것입니다!

위와 같이 스켈레톤 기법과 지연로딩을 같이 사용하게 되면 웹 퍼포먼스도 올리고 UX까지 개선시킬 수 있습니다

CDN을 사용합시다!!

CDN은 Content Delivery Network 의 약자입니다.

유저가 지리적으로 굉장히 멀리 있을때, 컨텐츠를 전송하는 속도에 영향이 가게됩니다. 때문에 지리적으로 서버를 여러곳에 분산시켜 사용자와 가까운곳에서 웹컨텐츠를 전송시켜서 사용자가 컨텐츠를 빨리 받아 볼 수 있게 전송 속도를 높여주는 네트워크입니다.

예를들어 한국 사람이 미국에서 호스팅된 서버에 접속했을때 한국에 위치한 네트워크 서버에서 해당 사이트의 컨텐츠를 받는 것입니다.

또한 CDN을 사용함으로써 HTML, CSS, 자바스크립트 파일 그리고 이미지들까지도 최적화를 할 수 있다고 합니다.

마지막으로 JAMSTACK을 활용하자!

jamstack은 javascript, api, markup의 약자입니다!

클라이언트의 모든 처리는 자바스크립트가 담당하고

모든 비즈니스 로직은 재사용 가능한 api로 처리하고

SSG를 사용하여 미리 Markup을 하는 것입니다

JAMSTACK 개념에서 제일 중요한것이 바로 마크업입니다!

후니로그를 만들때 사용한 Next.js도 대표적인 JAMSTACK을 위한 react 프레임워크이며

빌드할때 미리 markup을하여 pre rendering을 하게 됩니다!

말 그대로 사용자가 볼 요소들을 미리 그려놨기 때문에 서버에서 html을 응답받았을때 사용자는 훨씬 더 빠른 속도로 웹서비스를 볼 수 있게 됩니다!

때문에 향상된 퍼포먼스를 경험 할 수 있게 되는 것입니다

이로써 프론트엔드에서 성능 향상을 시켜줄 8가지 방법에 대해 알아보았습니다.

하나 하나 다 자세하게 학습하여 자세하게 다루고 싶었지만 하나의 게시글에서는 모든 내용을 다 담기 버거워 간략하게만 내용을 다루었습니다.

추후에 더 자세하게 학습 후 자세한 내용 공유드리도록 하겠습니다!

감사합니다 🙂