애드블럭 종료 후 보실 수 있습니다.

ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 웹 성능 최적화 기법
    Tip 2024. 7. 1. 15:10
    728x90
    반응형

    웹 성능 최적화(Web Performance Optimization, WPO)

     

    웹 성능 최적화(Web Performance Optimization, WPO)는 빠르고 원활한 사용자 경험을 보장하기 위해 필수적입니다.

    이는 사용자 유지와 SEO에 매우 중요합니다.

    웹 성능을 향상하기 위한 주요 기법과 모범 사례를 소개합니다.

    웹 성능 최적화를 위한 주요 기법

    1. HTTP 요청 최소화

    페이지에서 HTTP 요청을 요구하는 요소의 수를 줄이면 로드 시간을 크게 단축할 수 있습니다.

    CSS와 JavaScript 파일을 결합하고, 이미지에는 CSS 스프라이트를 사용합니다.

    <link rel="stylesheet" href="styles.min.css">
    <script src="scripts.min.js" defer></script>

    2. 이미지 최적화

    이미지를 품질 손실 없이 압축하고 크기를 조정하여 로드 시간을 줄입니다.

    TinyPNG나 ImageOptim과 같은 도구를 사용하고, WebP와 같은 최신 형식을 채택합니다.

    <img src="image.webp" alt="Optimized Image" width="800" height="600">

    3. 브라우저 캐싱 활용

    웹사이트의 일부를 캐시 하여 다음 방문 시 처음부터 로드할 필요가 없도록 합니다.

    정적 리소스에 적절한 캐시 헤더를 설정합니다.

    4. CSS, JavaScript 및 HTML 최소화

    파일 크기를 줄이기 위해 코드에서 불필요한 문자를 제거합니다.

    UglifyJS, CSSNano, HTMLMinifier와 같은 도구를 사용합니다.

    5. 콘텐츠 전송 네트워크(CDN) 사용

    콘텐츠를 전 세계의 다양한 서버에 분산시켜 지연 시간을 줄이고 로드 시간을 개선합니다.

    Cloudflare, Akamai, Amazon CloudFront와 같은 인기 있는 CDN을 사용합니다.

    6. 지연 로딩

    비 필수 리소스의 로딩을 필요할 때까지 지연시킵니다.

    이미지, 비디오, iframe에 loading="lazy" 속성을 사용하여 지연 로딩을 구현합니다.

    <img src="image.jpg" loading="lazy" alt="Lazy Loaded Image">

    7. 비동기 스크립트 로딩

    JavaScript를 비동기 로딩하여 페이지 렌더링을 차단하지 않도록 합니다.

    async 또는 defer 속성을 스크립트 태그에 사용합니다.

    <script src="script.js" async></script>

    8. 서버 응답 시간 단축

    서버와 데이터베이스 쿼리를 최적화하여 빠른 응답을 보장합니다.

    서버 측 캐싱을 사용하고 데이터베이스 인덱스와 쿼리를 최적화합니다.

    CREATE INDEX idx_user_id ON users(user_id);

    9. 웹 폰트 최적화

    폰트 변형 수를 줄이고 WOFF2와 같은 최신 형식을 사용하여 로드 시간을 줄입니다.

    font-display: swap을 구현하여 로딩 중 보이지 않는 텍스트를 방지합니다.

    @font-face {
      font-family: 'MyFont';
      src: url('myfont.woff2') format('woff2');
      font-display: swap;
    }

    10. Gzip 압축 구현

    파일 크기를 줄여 네트워크 전송 속도를 빠르게 합니다.

    서버에서 Gzip 또는 Brotli 압축을 활성화합니다.

    웹 성능 최적화를 위한 모범 사례

    1. 성능 모니터링 및 분석

    Google PageSpeed Insights, Lighthouse, GTmetrix와 같은 도구를 사용하여 사이트 성능을 모니터링하고 분석합니다.

    First Contentful Paint (FCP) 및 Time to Interactive (TTI)와 같은 지표를 정기적으로 확인합니다.

    2. 중요 렌더링 경로 최적화

    가장 중요한 리소스가 먼저 로드되도록 하여 인식된 성능을 향상합니다.

    폴드 위 콘텐츠를 우선하고 CSS와 JavaScript를 효율적으로 로드합니다.

    3. 최신 이미지 형식 사용

    WebP 및 AVIF와 같은 형식을 채택하여 더 나은 압축과 품질을 제공합니다.

    이 형식들은 JPEG와 PNG에 비해 우수한 압축률을 제공합니다.

    <img src="image.avif" alt="Modern Image Format">

    4. CSS 전달 최적화

    CSS가 페이지 렌더링을 차단하지 않도록 합니다.

    중요 CSS는 인라인으로 추가하고 나머지는 비동기로 로드합니다.

    <style>
      /* Critical CSS */
    </style>
    <link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">

    5. 프리페칭 및 프리로딩

    리소스를 미리 로드하는 기법을 사용합니다.

    프리페칭은 사용자가 다음에 방문할 가능성이 있는 페이지의 리소스를 로드하고, 프리로딩은 중요한 리소스를 가능한 한 빨리 로드합니다.

    <link rel="preload" href="main.css" as="style">
    <link rel="prefetch" href="next-page.html">

     

    위에서 소개한 내용 대부분은 NextJS를 사용할 경우 대부분 자동으로 적용되거나, 간단하게 처리할 수 있는 사항들입니다.

    하지만 언제나 알고 사용하는 것과 그냥 사용하는 것이 다르듯 이 글을 참고하여 프로젝트를 진행하시는데 도움이 되기를 바랍니다.

    반응형

    'Tip' 카테고리의 다른 글

    2024년 JavaScript 트렌드  (0) 2024.07.26
    리액트(React) vs 앵귤러(Angular) vs 뷰(Vue)  (0) 2024.07.11
    웹 접근성 개선을 위한 가이드  (0) 2024.06.21
    GraphQL vs REST API  (0) 2024.06.11
    vh 버그 해결 방법(feat. safari)  (0) 2024.03.19

    댓글

Designed by Tistory.