사파리 웹사이트 최적화: 개발자를 위한 체크리스트
크롬이나 파이어폭스에서는 원활하게 로드되는 사이트가 iOS 사파리에서는 종종 지연됩니다. HTTP/1.1 제한, 단일 스레드 자바스크립트 엔진, 엄격한 메모리 제한으로 인해 요청 대기열, 스래싱, OOM-킬이 발생합니다. 이 최적화 체크리스트는 기능을 저해하지 않으면서도 일반적인 사파리 문제를 해결합니다.
사파리 안정성을 위한 핵심 수정사항
사파리는 HTTP/1.1에서 도메인당 연결을 6개로 제한하여 여러 리소스를 로드할 때 대기열을 발생시킵니다. 단일 스레드 JS 엔진은 빈번한 스크롤/리사이즈 이벤트에 어려움을 겪으며, 4000×10000 픽셀을 초과하는 캔버스는 탭을 충돌시킬 수 있습니다.
필수 단계
- HTTP/2로 전환
Nginx 구성:
```nginx
server {
listen 443 ssl http2;
server_name mysite.com;
ssl_certificate /path/to/cert.pem;
ssl_certificate_key /path/to/key.pem;
root /var/www/html;
index index.html;
}
```
재로드: sudo nginx -s reload. DevTools에서 확인: Protocol = h2.
- 화면 아래 이미지에 대한 지연 로딩
```html
<img src="hero.jpg" alt="메인 배너" class="hero-image">
<img src="gallery/photo1.jpg" alt="사진" loading="lazy">
```
Swiper용:
```html
<img data-src="slide1.jpg" class="swiper-lazy" alt="슬라이드">
<div class="swiper-lazy-preloader"></div>
```
- jQuery를 제외한 모든 스크립트에 defer 적용
```html
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="js/slider.js" defer></script>
<script src="js/main.js" defer></script>
```
- 사용하지 않는 라이브러리 제거
확인: console.log(window.THREE). 프로젝트 검색: THREE. 또는 three.js.
- 스크롤/리사이즈/휠 스로틀링
```javascript
let ticking = false;
window.addEventListener('scroll', () => {
if (!ticking) {
requestAnimationFrame(() => {
onScrollHeavyTask();
ticking = false;
});
ticking = true;
}
});
```
- 모바일에서 캔버스 최적화
화면 너비를 기준으로 재계산, 작은 해상도에서 입자 수 줄이기.
고우선순위 로딩 개선사항
Gzip/Brotli 압축 in nginx:
gzip on;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml;CDN에 대한 사전 연결 in <head>:
<link rel="preconnect" href="https://code.jquery.com">
<link rel="preconnect" href="https://cdn.jsdelivr.net">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>CSS용 PurgeCSS (Gulp):
const gulp = require('gulp');
const purgecss = require('gulp-purgecss');
gulp.task('purge', () => {
return gulp.src('dist/css/style.css')
.pipe(purgecss({
content: ['**/*.html', '**/*.js'],
safelist: [/swiper/, /modal/, /active/, /open/]
}))
.pipe(gulp.dest('dist/css'));
});PostCSS 버전도 유사합니다.
jQuery Migrate 제거: 콘솔에 JQMIGRATE가 없는지 확인.
font-display: swap:
@font-face {
font-family: 'Open Sans';
src: url('/fonts/OpenSans.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}Lighthouse 최적화
중요 CSS 인라인 + 비동기 로딩:
<style>
.header { background: #fff; }
.hero { font-size: 2rem; }
</style>
<link rel="preload" href="css/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="css/main.css"></noscript>폴백과 함께 WebP:
<picture>
<source srcset="images/photo.webp" type="image/webp">
<source srcset="images/photo.jpg" type="image/jpeg">
<img src="images/photo.jpg" alt="설명" loading="lazy" width="800" height="600">
</picture>WebP용 Gulp:
const imagemin = require('gulp-imagemin');
const webp = require('gulp-webp');
gulp.task('webp', () => {
return gulp.src('src/images/**/*.{jpg,png}')
.pipe(webp())
.pipe(gulp.dest('dist/images'));
});핵심 요약
- HTTP/2는 사파리에서 연결 대기열을 제거합니다.
- 스크롤/리사이즈 스로틀링은 단일 스레드 JS에서 스래싱을 방지합니다.
- 지연 로딩 + defer는 렌더링 차단을 줄입니다.
- PurgeCSS와 라이브러리 제거는 JS/CSS 용량을 절감합니다.
- 캔버스 최적화는 애니메이션 배경에 중요합니다.
이 체크리스트로 정기적인 감사를 수행하면 iOS 사용자로부터의 트래픽 손실을 최소화할 수 있습니다.
— Editorial Team
아직 댓글이 없습니다.