시작하기
저희 유하를 사용해 보셨다면 아래의 화면이 익숙하실 것으로 생각합니다.
홈페이지
해당 페이지의 성능을 extension 등의 영향을 받지 않고 측정하기 위해 incognito 모드에서 lighthouse로 측정한 결과입니다.
Lighthouse란?
Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO, and more.
(참조: https://developer.chrome.com/docs/lighthouse/overview/)
다른 수치들에 비해서 performance 부분이 낮은것을 확인할 수 있었습니다. 좀 더 자세히 살펴보면 Largest Contentful Paint(LCP)가 주요 원인인 것을 알 수 있었습니다.
LCP(Largest Contentful Paint)란?
최대 콘텐츠 풀 페인트(LCP)는 페이지의 메인 콘텐츠가 로드되었을 가능성이 있을 때 페이지 로드 타임라인에 해당 시점을 표시하므로 사용자가 감지하는 로드 속도를 측정할 수 있는 중요한 사용자 중심 메트릭입니다. LCP가 빠르면 사용자가 해당 페이지를 사용할 수 있다고 인지하는 데 도움이 됩니다.
(참조: https://web.dev/lcp/#what-is-lcp)
그리고 lighthouse에서 알려준 LCP에 영향을 주는 가장 큰 문제점은 다음과 같이 폰트와 이미지의 문제였습니다. 이 중 폰트의 경우에는 기존의 폰트 파일 대신 subset파일을 사용하여 기존의 786.7KiB의 파일 대신 266.6KiB의 subset파일을 사용하여 66% 정도 감소시켰습니다.
이미지 최적화하기
이미지 최적화를 위해서 저는 두 가지 정도의 작업을 진행했습니다.
1.
이미지 파일의 크기 자체를 줄이기
2.
next/image의 Image 컴포넌트를 사용하기
이미지 압축
이미지의 파일 크기 자체를 줄이는 데는 다양한 방법이 있습니다. 제가 가장 처음 시도한 방법은 간단하게 이미지 품질을 유지하면서 크기를 줄여주는 image compression 기능을 제공하는 웹사이트를 사용하는 방법이었습니다. 그래서 Tinypng 를 사용하여 기존 png파일들을 같은 png 파일로 최적화 시켰습니다. 그 결과는 11개의 이미지를 67%, 총 2MB 줄이는데 성공했습니다.
동작원리
“양자화(quantization)”라고 불리는 기술을 이용해 업로드된 PNG 파일에서 비슷한 색상들을 통합시킵니다. 색상의 종류를 줄이면서 24비트 PNG 파일이 훨씬 작은 8비트 인덱스 색상 이미지로 변환됩니다. 또한 필요 없는 메타 데이터들도 제거됩니다.
최적화 이전
최적화 이후
절반 이하로 줄어든 파일 크기에도 이미지 품질은 크게 떨어지지 않았습니다. 하지만 여전히 11개의 이미지 파일에 1.1mb로 큰 크기를 가지고 있었고 더 줄일 수 있는 방법을 찾아보게 되었습니다.
WebP
WebP란?
WebP는 웹에서 이미지에 우수한 무손실 및 손실 압축을 제공하는 최신 이미지 형식입니다. 웹마스터와 웹 개발자는 WebP를 사용하여 더 작고 풍부한 이미지를 만들어 웹을 더 빠르게 만들 수 있습니다.
WebP 형식은 위의 설명과 같이 png에 비해 훨씬 작은 크기를 가질 수 있습니다. 또 최근에는 거의 모든 브라우저에서 사용할 수 있어서 호환성을 걱정할 필요도 없습니다.
png를 webp로 변환해주는 웹사이트를 찾아서 변환한 결과입니다. 저는 ezgif이라는 페이지를 사용했습니다.
파일크기가 86%이상 줄어든 것을 확인할 수 있습니다. 이렇게 총 11개의 파일을 변환한 결과 총 3MiB의 파일 크기가 270KiB로 기존대비 8.4%, 즉 91.5% 이상 줄어든 것을 확인해 볼 수 있었습니다.
기존 파일(710.58KiB)
.webp&blockId=5cb77c0e-35a7-4cc1-9989-ac3895aaeeea)
WebP 변환 파일(98.26KiB)
크기가 90% 가까이 줄어든 것에 비해 이미지 품질을 비교해 보면 크게 차이가 나지 않습니다.
CLI를 사용해서 변환하기 - 구글에서 제공하는 cwebp를 사용하는 방법
mac os 기준) webp 설치 (여기서 다른 설치 방법을 확인할 수 있습니다)
brew install webp
Bash
이미지 하나(flower1.jpg) webp로 변환하기 (품질 50)
cwebp -q 50 images/flower1.jpg -o images/flower1.webp
Bash
images 폴더에 있는 모든 파일 webp로 변환하기 (품질 50)
`for file in images/*; do cwebp -q 50 "$file" -o "${file%.*}.webp"; done`
Bash
아래 문서를 참고하면 설치 방법, 사용 방법이 자세하게 설명되어 있습니다.
Next Image 컴포넌트
또 이러한 static 파일과 몇몇 이미지 파일에 대해서 img 태그 대신 Next Image 컴포넌트를 사용했습니다.
Image 컴포넌트를 사용하면 다음과 같은 장점들이 있습니다.
Some of the optimizations built into the Image component include:
Image 컴포넌트를 사용하는 방법은 Next.js 문서에 자세히 적혀 있으므로 간단히 설명하자면,
프로젝트 내부의 local 이미지 파일이 아닌 경우에는 next.config.js 파일에 도메인 혹은 remotePatterns를 추가해 준 뒤에 Image 컴포넌트를 사용하면 되고, local 이미지 파일인 경우에는 그냥 바로 사용할 수 있습니다. (관련 문서)
// next.config.js
// Remote Patterns
module.exports = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'example.com',
port: '',
pathname: '/account123/**',
},
],
},
}
// Domain (공식 문서에서는 RemotePatterns를 더 추천하고 있습니다.)
module.exports = {
images: {
domains: ['assets.acme.com'],
},
}
JavaScript
Image 컴포넌트의 사용법은 아래와 같습니다.
import Image from 'next/image'
export default function Home() {
return (
<>
<h1>My Homepage</h1>
<Image
src="/me.png"
alt="Picture of the author"
width={500}
height={500}
/>
<p>Welcome to my homepage!</p>
</>
)
}
JavaScript
width, height를 지정해 주거나 layout=”fill”을 이용해서 부모 element를 채울수 있습니다.
이런 과정을 거쳐 최적화 된 유하의 홈페이지를 lighthouse를 이용해 다시 한번 측정해 보았습니다. 이 전과 똑같이 Incognito에서 측정한 결과입니다. (Best Practices 와 SEO 점수 차이는 배포된 버전과 공개되지 않은 버전의 차이라고 보여져서 무시하겠습니다.)
Performance 점수가 확실히 향상되었고 LCP가 6.1초에서 2.2초로 줄어든 것을 확인할 수 있습니다.
LCP 관련 Diagnostics 에서도 무려 7MiB 가까이 하던 Avoid enormous network payloads가 사라졌습니다.
물론 여전히 개선의 여지는 남아있지만 간단한 작업들을 통해서 페이지 성능을 향상할 수 있었습니다.
아직 이미지 최적화 작업을 하지 않으셨다면 Lighthouse로 웹페이지 성능 측정을 해서 이미지 최적화가 필요한 상황인지 한번 확인해 보는 것을 추천해 드립니다.
그 외의 자료들
CSS를 기반으로 해서 이미지를 최적화 하는 방법들에 대해 소개하고 있습니다.
저자소개
나건일은 티켓플레이스에서 프론트엔드 개발자로 일하고 있습니다. Youha의 서비스 웹페이지뿐 아니라 내부의 Back office들을 개발하는데 열과 성을 다하고 있습니다. Youha의 채팅기능을 비롯한 많은 새로운 기능들을 개발하는데 더 효과적으로 개발하는 것을 고민하고 좋은 방법론들을 실천하고 있습니다. 특별히 여러 개발자들이 그와 함께 일하고 싶어할만큼 친화력이 좋습니다.