Safari-Website-Optimierung: Eine Checkliste für Entwickler
Websites, die in Chrome oder Firefox flüssig laden, hängen oft in Safari auf iOS. HTTP/1.1-Limits, eine Single-Thread-JavaScript-Engine und strenge Speichergrenzen führen zu Anfragewarteschlangen, Thrashing und OOM-Kills. Diese Optimierungscheckliste behandelt typische Safari-Probleme, ohne die Funktionalität zu beeinträchtigen.
Kritische Korrekturen für Safari-Stabilität
Safari begrenzt Verbindungen auf 6 pro Domain in HTTP/1.1, was Warteschlangen beim Laden mehrerer Ressourcen verursacht. Die Single-Thread-JS-Engine kämpft mit häufigen Scroll-/Resize-Events, und Canvas-Elemente über 4000×10000 Pixel können Tabs abstürzen lassen.
Wesentliche Schritte
- Auf HTTP/2 umstellen
Nginx-Konfiguration:
```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;
}
```
Neu laden: sudo nginx -s reload. In DevTools prüfen: Protocol = h2.
- Lazy Loading für unterhalb des Folds liegende Bilder
```html
<img src="hero.jpg" alt="Hauptbanner" class="hero-image">
<img src="gallery/photo1.jpg" alt="Foto" loading="lazy">
```
Für Swiper:
```html
<img data-src="slide1.jpg" class="swiper-lazy" alt="Slide">
<div class="swiper-lazy-preloader"></div>
```
- Defer für alle Skripte außer 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>
```
- Unbenutzte Bibliotheken entfernen
Prüfen: console.log(window.THREE). Projekt durchsuchen: THREE. oder three.js.
- Scroll/Resize/Wheel drosseln
```javascript
let ticking = false;
window.addEventListener('scroll', () => {
if (!ticking) {
requestAnimationFrame(() => {
onScrollHeavyTask();
ticking = false;
});
ticking = true;
}
});
```
- Canvas auf Mobilgeräten optimieren
Neuberechnung basierend auf Bildschirmbreite, Partikel auf kleinen Auflösungen reduzieren.
Hochprioritäre Ladeverbesserungen
Gzip/Brotli-Kompression 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;Preconnect für 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>PurgeCSS für 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'));
});PostCSS-Version ist ähnlich.
jQuery Migrate entfernen: sicherstellen, dass keine JQMIGRATE in der Konsole.
font-display: swap:
@font-face {
font-family: 'Open Sans';
src: url('/fonts/OpenSans.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}Optimierungen für Lighthouse
Kritische CSS inline + asynchron laden:
<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 mit Fallback:
<picture>
<source srcset="images/photo.webp" type="image/webp">
<source srcset="images/photo.jpg" type="image/jpeg">
<img src="images/photo.jpg" alt="Beschreibung" loading="lazy" width="800" height="600">
</picture>Gulp für 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'));
});Wichtige Erkenntnisse
- HTTP/2 beseitigt Verbindungswarteschlangen in Safari.
- Drosselung von Scroll/Resize verhindert Thrashing in der Single-Thread-JS.
- Lazy Loading + Defer reduzieren Render-Blocking.
- PurgeCSS und Bibliotheksentfernung verringern JS/CSS-Volumen.
- Canvas-Optimierung ist entscheidend für animierte Hintergründe.
Regelmäßige Audits mit dieser Checkliste minimieren Traffic-Verluste durch iOS-Nutzer.
— Editorial Team
Noch keine Kommentare.