Optymalizacja stron internetowych dla Safari: checklista dla programistów
Strony, które płynnie ładują się w Chrome lub Firefox, często zwalniają w Safari na iOS. Ograniczenia HTTP/1.1, jednowątkowy silnik JavaScript i surowe limity pamięci prowadzą do kolejek żądań, thrashingu i OOM-kill. Ta checklista optymalizacji eliminuje typowe problemy Safari bez kompromisów w funkcjonalności.
Krytyczne poprawki dla stabilności w Safari
Safari ogranicza do 6 połączeń na domenę w HTTP/1.1, co powoduje kolejki przy ładowaniu wielu zasobów. Jednowątkowy silnik JS nie radzi sobie z częstymi zdarzeniami scroll/resize, a canvas powyżej 4000×10000 pikseli prowadzi do zamknięcia karty.
Obowiązkowe kroki
- Przejście na HTTP/2
Konfiguracja 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;
}
```
Przeładowanie: sudo nginx -s reload. Sprawdzenie w DevTools: Protocol = h2.
- Lazy loading dla obrazów poniżej fold
```html
<img src="hero.jpg" alt="Główny baner" class="hero-image">
<img src="gallery/photo1.jpg" alt="Zdjęcie" loading="lazy">
```
Dla Swiper:
```html
<img data-src="slide1.jpg" class="swiper-lazy" alt="Slajd">
<div class="swiper-lazy-preloader"></div>
```
- Defer dla wszystkich skryptów oprócz jQuery
```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>
```
- Usuwanie nieużywanych bibliotek
Sprawdzenie: console.log(window.THREE). Wyszukiwanie w projekcie: THREE. lub three.js.
- Throttle dla scroll/resize/wheel
```javascript
let ticking = false;
window.addEventListener('scroll', () => {
if (!ticking) {
requestAnimationFrame(() => {
onScrollHeavyTask();
ticking = false;
});
ticking = true;
}
});
```
- Optymalizacja canvas na urządzeniach mobilnych
Przeliczanie od szerokości ekranu, redukcja cząstek na małych rozdzielczościach.
Wysokopriorytetowe ulepszenia ładowania
Kompresja gzip/Brotli w 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;Preconnect dla CDN w <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>PurgeCSS dla CSS (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'));
});Wariant PostCSS jest analogiczny.
Usuwanie jQuery Migrate: sprawdź brak JQMIGRATE w konsoli.
font-display: swap:
@font-face {
font-family: 'Open Sans';
src: url('/fonts/OpenSans.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}Optymalizacje dla Lighthouse
Krytyczny CSS inline + asynchroniczne ładowanie:
<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 z fallback:
<picture>
<source srcset="images/photo.webp" type="image/webp">
<source srcset="images/photo.jpg" type="image/jpeg">
<img src="images/photo.jpg" alt="Opis" loading="lazy" width="800" height="600">
</picture>Gulp dla WebP:
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'));
});Co jest ważne
- HTTP/2 eliminuje kolejki połączeń w Safari.
- Throttle scroll/resize zapobiega thrashingowi jednowątkowego JS.
- Lazy loading + defer redukują blokowanie renderowania.
- PurgeCSS i usuwanie bibliotek zmniejszają objętość JS/CSS.
- Optymalizacja canvas jest kluczowa dla animowanych tła.
Regularny audyt według checklisty minimalizuje utratę ruchu z audytorium iOS.
— Editorial Team
Brak komentarzy.