Optimisation de site web pour Safari : Liste de contrôle pour développeurs
Les sites qui se chargent fluidement sur Chrome ou Firefox ralentissent souvent sur Safari sous iOS. Les limitations du HTTP/1.1, un moteur JavaScript monothread et des limites strictes de mémoire entraînent des files d'attente de requêtes, des ralentissements et des fermetures par manque de mémoire. Cette liste de contrôle d'optimisation aborde les problèmes typiques de Safari sans compromettre les fonctionnalités.
Corrections critiques pour la stabilité de Safari
Safari limite les connexions à 6 par domaine en HTTP/1.1, créant des files d'attente lors du chargement de multiples ressources. Le moteur JS monothread peine avec les événements fréquents de défilement/redimensionnement, et les canvas dépassant 4000×10000 pixels peuvent faire planter les onglets.
Étapes essentielles
- Passer au HTTP/2
Configuration 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;
}
```
Recharger : sudo nginx -s reload. Vérifier dans DevTools : Protocole = h2.
- Chargement différé pour les images hors écran
```html
<img src="hero.jpg" alt="Bannière principale" class="hero-image">
<img src="gallery/photo1.jpg" alt="Photo" loading="lazy">
```
Pour Swiper :
```html
<img data-src="slide1.jpg" class="swiper-lazy" alt="Diapositive">
<div class="swiper-lazy-preloader"></div>
```
- Différer tous les scripts sauf 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>
```
- Supprimer les bibliothèques inutilisées
Vérifier : console.log(window.THREE). Rechercher dans le projet : THREE. ou three.js.
- Limiter défilement/redimensionnement/roulette
```javascript
let ticking = false;
window.addEventListener('scroll', () => {
if (!ticking) {
requestAnimationFrame(() => {
onScrollHeavyTask();
ticking = false;
});
ticking = true;
}
});
```
- Optimiser le canvas sur mobile
Recalculer en fonction de la largeur d'écran, réduire les particules sur les petites résolutions.
Améliorations prioritaires de chargement
Compression Gzip/Brotli dans 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;Préconnexion pour CDN dans <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 pour 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'));
});La version PostCSS est similaire.
Supprimer jQuery Migrate : s'assurer qu'il n'y a pas de JQMIGRATE dans la console.
font-display: swap :
@font-face {
font-family: 'Open Sans';
src: url('/fonts/OpenSans.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}Optimisations pour Lighthouse
CSS critique en ligne + chargement asynchrone :
<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 avec fallback :
<picture>
<source srcset="images/photo.webp" type="image/webp">
<source srcset="images/photo.jpg" type="image/jpeg">
<img src="images/photo.jpg" alt="Description" loading="lazy" width="800" height="600">
</picture>Gulp pour 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'));
});Points clés à retenir
- HTTP/2 élimine les files d'attente de connexion dans Safari.
- Limiter défilement/redimensionnement évite les ralentissements dans le JS monothread.
- Chargement différé + différer réduisent le blocage du rendu.
- PurgeCSS et suppression de bibliothèques réduisent le volume JS/CSS.
- L'optimisation du canvas est cruciale pour les arrière-plans animés.
Des audits réguliers avec cette liste minimisent la perte de trafic des audiences iOS.
— Editorial Team
Aucun commentaire pour le moment.