이전 글에서는 웹사이트 속도를 빠르게 개선할 수 있는 기본적인 방법을 다뤘습니다. 이번 글에서는 조금 더 고급스러운 최적화 방법을 소개하겠습니다. 이 방법들을 적용하면 웹사이트의 로딩 시간을 더욱 줄이고, 사용자 경험을 한층 더 향상시킬 수 있습니다.
1. Lazy Loading 적용
Lazy Loading은 사용자가 페이지를 스크롤할 때 필요한 이미지만 로드하는 기법입니다. 페이지에 포함된 모든 이미지를 한 번에 로드하지 않고, 화면에 보여질 때만 이미지를 불러오므로 초기 로딩 시간을 줄일 수 있습니다.
1.1 HTML에서의 Lazy Loading
<img src="image.jpg" alt="Lazy Loading 이미지" loading="lazy">이미지에 loading="lazy" 속성을 추가하면 해당 이미지는 사용자가 스크롤할 때만 로드됩니다.
1.2 JavaScript로 Lazy Loading 구현
구형 브라우저에서는 loading="lazy" 속성을 지원하지 않으므로, JavaScript를 이용해 비슷한 기능을 구현할 수 있습니다.
document.addEventListener("DOMContentLoaded", function() {
const images = document.querySelectorAll("img[data-src]");
const lazyLoad = (img) => {
img.setAttribute("src", img.getAttribute("data-src"));
img.removeAttribute("data-src");
};
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
lazyLoad(entry.target);
observer.unobserve(entry.target);
}
});
});
images.forEach(img => observer.observe(img));
});여기서 data-src에 실제 이미지 경로를 저장하고, 스크롤할 때만 로드되도록 합니다.
2. 서버 응답 시간 단축
서버 응답 시간이 길면 웹사이트가 느리게 느껴질 수 있습니다. 이를 개선하기 위해서는 서버 설정과 데이터베이스 쿼리를 최적화해야 합니다.
2.1 Gzip 압축 사용
서버에서 Gzip 압축을 사용하면 HTML, CSS, JavaScript 파일을 압축하여 더 작은 파일 크기로 전송할 수 있습니다.
# Apache 서버에서 Gzip 압축 활성화
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/javascript
</IfModule>이 설정을 통해 서버에서 전송하는 파일을 압축하여 사용자에게 더 빠르게 전달할 수 있습니다.
2.2 HTTP/2 사용
HTTP/2는 기존 HTTP보다 더 빠른 프로토콜로, 요청 및 응답을 병렬로 처리하여 성능을 크게 향상시킬 수 있습니다. 서버에서 HTTP/2를 지원하도록 설정하면 더 나은 성능을 얻을 수 있습니다.
# Nginx에서 HTTP/2 활성화
server {
listen 443 ssl http2;
server_name example.com;
}3. 자바스크립트 파일 비동기 로드
자바스크립트 파일이 로드될 때, 페이지가 멈추고 해당 파일이 로드될 때까지 기다리게 됩니다. 이를 방지하기 위해 async 또는 defer 속성을 사용하여 자바스크립트 파일을 비동기 로드할 수 있습니다.
3.1 Async와 Defer의 차이
- async: 스크립트 파일을 비동기적으로 로드하여 다운로드가 완료되면 바로 실행합니다. (실행 순서가 보장되지 않음)
- defer: HTML 파싱이 완료된 후 스크립트를 실행하므로, 실행 순서가 보장됩니다.
<script src="script.js" async></script>
<script src="script.js" defer></script>페이지 로딩 시간을 줄이기 위해 defer 속성을 사용하는 것이 더 안전한 방법입니다.
4. 데이터베이스 쿼리 최적화
웹사이트 속도에 큰 영향을 미치는 요소 중 하나가 데이터베이스 쿼리입니다. 쿼리가 느리면 전체 페이지 로딩 속도가 느려질 수 있습니다.
4.1 쿼리 인덱스 추가
자주 조회하는 데이터에 인덱스를 추가하면 조회 속도가 크게 개선됩니다.
-- 사용자 이름에 인덱스 추가
CREATE INDEX idx_username ON users (username);4.2 데이터 캐싱
데이터베이스에서 자주 조회하는 데이터는 캐싱하여 데이터베이스 부하를 줄일 수 있습니다. Redis나 Memcached 같은 캐싱 도구를 사용하면 데이터를 빠르게 제공할 수 있습니다.
// PHP에서 Redis를 이용한 캐싱 예시
$redis = new Redis();
$redis->connect('127.0.0.1', 6379);
$cachedData = $redis->get('user_data');
if (!$cachedData) {
// 데이터베이스에서 가져오기
$userData = getUserDataFromDB();
$redis->set('user_data', $userData);
} else {
$userData = $cachedData;
}5. 스타일시트(CSS) 최적화
5.1 CSS 파일 병합
웹사이트에 여러 개의 CSS 파일을 로드하면 요청이 많아져 페이지 로딩 속도가 느려질 수 있습니다. 여러 CSS 파일을 하나로 병합하면 HTTP 요청을 줄이고 성능을 개선할 수 있습니다.
5.2 중요한 CSS 인라인화
초기 페이지 로딩 시간을 단축하기 위해 Critical CSS만 인라인으로 추가하고 나머지 스타일은 나중에 로드하는 방식으로 최적화할 수 있습니다.
<style>
/* Critical CSS */
body { margin: 0; padding: 0; font-family: Arial, sans-serif; }
</style>
<link rel="stylesheet" href="style.css">이 방법을 사용하면 기본적인 스타일은 즉시 적용되고, 나머지 스타일은 별도의 파일로 나중에 불러옵니다.
결론
고급 속도 최적화 기법은 웹사이트 성능을 한층 더 향상시키는 데 필수적입니다. Lazy Loading, 서버 응답 시간 단축, 비동기 스크립트 로드, 데이터베이스 쿼리 최적화, CSS 최적화와 같은 방법들은 복잡해 보일 수 있지만, 한 번 적용하면 큰 성능 개선을 가져올 수 있습니다.
다음 글에서는 더 복잡한 성능 튜닝 기법과 사례를 다룰 예정이니, 기대해주세요!
