프론트엔드 최적화

프론트엔드 최적화

개요

Rhymix에서 프론트엔드 성능을 최적화하는 다양한 방법을 소개합니다.

리소스 최적화

CSS/JS 병합 및 압축

Rhymix는 CSS와 JavaScript 파일을 자동으로 병합하고 압축하는 기능을 제공합니다.

// 관리자 페이지에서 설정
관리자 페이지 > 시스템 설정 > 고급 설정 > 최적화

이미지 최적화

  1. 적절한 포맷 사용
    - 사진: JPEG
    - 아이콘, 로고: PNG 또는 SVG
    - 애니메이션: GIF 또는 WebP

  2. 지연 로딩(Lazy Loading)

<img src="placeholder.jpg" data-src="actual-image.jpg" class="lazy">

// Intersection Observer를 사용한 지연 로딩
const lazyImages = document.querySelectorAll('.lazy');
const imageObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;
            img.classList.remove('lazy');
            imageObserver.unobserve(img);
        }
    });
});

lazyImages.forEach(img => imageObserver.observe(img));

캐싱 전략

브라우저 캐싱

.htaccess 파일에서 캐싱 설정:

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg "access plus 1 year"
    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType image/gif "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType text/css "access plus 1 month"
    ExpiresByType application/javascript "access plus 1 month"
</IfModule>

CDN 활용

// config/config.user.inc.php
$rx_defaults->cdn = array(
    'url' => 'https://cdn.example.com',
    'include' => array('css', 'js', 'img'),
    'exclude' => array('*.php', '*.html')
);

렌더링 최적화

Critical CSS

페이지 상단에 표시되는 콘텐츠의 CSS를 인라인으로 포함:

<style>
/* Critical CSS */
body { margin: 0; padding: 0; }
.header { background: #fff; height: 60px; }
/* ... */
</style>
<link rel="preload" href="main.css" as="style" onload="this.rel='stylesheet'">

JavaScript 최적화

  1. 비동기 로딩
<script async src="analytics.js"></script>
<script defer src="main.js"></script>
  1. 코드 분할
// 동적 import를 사용한 코드 분할
document.getElementById('loadMore').addEventListener('click', async () => {
    const module = await import('./heavy-module.js');
    module.init();
});

네트워크 최적화

HTTP/2 활용

서버에서 HTTP/2를 활성화하여 다중 요청을 효율적으로 처리합니다.

리소스 힌트

<!-- DNS 사전 연결 -->
<link rel="dns-prefetch" href="//cdn.example.com">

<!-- 사전 연결 -->
<link rel="preconnect" href="//api.example.com">

<!-- 리소스 사전 로드 -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

<!-- 다음 페이지 사전 렌더링 -->
<link rel="prerender" href="next-page.html">

모니터링 및 분석

성능 측정 도구

  1. Lighthouse: Chrome DevTools에 내장된 성능 분석 도구
  2. WebPageTest: 상세한 성능 분석 제공
  3. GTmetrix: 종합적인 성능 리포트

실제 사용자 모니터링(RUM)

// Navigation Timing API 사용
window.addEventListener('load', () => {
    const perfData = window.performance.timing;
    const pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;
    console.log('Page Load Time:', pageLoadTime, 'ms');
});

모바일 최적화

반응형 이미지

<picture>
    <source media="(max-width: 768px)" srcset="small.jpg">
    <source media="(max-width: 1200px)" srcset="medium.jpg">
    <img src="large.jpg" alt="반응형 이미지">
</picture>

터치 이벤트 최적화

/* 터치 지연 제거 */
a, button {
    touch-action: manipulation;
}

관련 문서