Optimalizace webových stránek pro Safari: kontrolní seznam pro vývojáře
Stránky, které se plynule načítají v Chrome nebo Firefoxu, často v Safari na iOS zpomalují. Omezení HTTP/1.1, jednovláknový JavaScriptový engine a přísné limity paměti vedou k frontám požadavků, thrashingu a OOM-kill. Tento kontrolní seznam optimalizací řeší typické problémy Safari bez kompromisů ve funkčnosti.
Kritické opravy pro stabilitu v Safari
Safari omezuje 6 spojení na doménu v HTTP/1.1, což způsobuje fronty při načítání mnoha zdrojů. Jednovláknový JS engine nezvládá časté události scroll/resize a canvas přes 4000×10000 pixelů vede k zavření záložky.
Povinné kroky
- Přechod na HTTP/2
Konfigurace 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;
}
```
Restart: sudo nginx -s reload. Kontrola v DevTools: Protocol = h2.
- Lazy loading pro obrázky pod foldem
```html
<img src="hero.jpg" alt="Hlavní banner" class="hero-image">
<img src="gallery/photo1.jpg" alt="Foto" loading="lazy">
```
Pro Swiper:
```html
<img data-src="slide1.jpg" class="swiper-lazy" alt="Snímek">
<div class="swiper-lazy-preloader"></div>
```
- Defer pro všechny skripty kromě 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>
```
- Odstranění nepoužívaných knihoven
Kontrola: console.log(window.THREE). Vyhledávání v projektu: THREE. nebo three.js.
- Throttle pro scroll/resize/wheel
```javascript
let ticking = false;
window.addEventListener('scroll', () => {
if (!ticking) {
requestAnimationFrame(() => {
onScrollHeavyTask();
ticking = false;
});
ticking = true;
}
});
```
- Optimalizace canvas na mobilních zařízeních
Přepočet podle šířky obrazovky, snížení částic na malých rozlišeních.
Vysokoprioritní vylepšení načítání
Komprese gzip/Brotli v 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 pro CDN v <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 pro 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 varianta je podobná.
Odstranění jQuery Migrate: zkontrolujte absenci JQMIGRATE v konzoli.
font-display: swap:
@font-face {
font-family: 'Open Sans';
src: url('/fonts/OpenSans.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}Optimalizace pro Lighthouse
Kritický CSS inline + async načítání:
<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 s fallbackem:
<picture>
<source srcset="images/photo.webp" type="image/webp">
<source srcset="images/photo.jpg" type="image/jpeg">
<img src="images/photo.jpg" alt="Popis" loading="lazy" width="800" height="600">
</picture>Gulp pro 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 je důležité
- HTTP/2 odstraňuje fronty spojení v Safari.
- Throttle scroll/resize zabraňuje thrashingu jednovláknového JS.
- Lazy loading + defer snižují blokování vykreslování.
- PurgeCSS a odstranění knihoven redukují objem JS/CSS.
- Optimalizace canvas je kriticky důležitá pro animovaná pozadí.
Pravidelný audit podle kontrolního seznamu minimalizuje ztráty návštěvnosti od iOS publika.
— Editorial Team
Zatím žádné komentáře.