Optimización de Sitios Web para Safari: Lista de Verificación para Desarrolladores
Los sitios que cargan sin problemas en Chrome o Firefox a menudo se ralentizan en Safari en iOS. Las limitaciones de HTTP/1.1, un motor JavaScript de un solo hilo y límites estrictos de memoria provocan colas de solicitudes, trashing y cierres por falta de memoria (OOM). Esta lista de verificación de optimización aborda problemas típicos de Safari sin comprometer la funcionalidad.
Correcciones Críticas para la Estabilidad en Safari
Safari limita las conexiones a 6 por dominio en HTTP/1.1, lo que causa colas al cargar múltiples recursos. El motor JS de un solo hilo tiene dificultades con eventos frecuentes de desplazamiento/redimensionamiento, y los lienzos (canvas) de más de 4000×10000 píxeles pueden bloquear pestañas.
Pasos Esenciales
- Cambiar a HTTP/2
Configuración de 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;
}
```
Recargar: sudo nginx -s reload. Verificar en DevTools: Protocolo = h2.
- Carga diferida para imágenes debajo del pliegue
```html
<img src="hero.jpg" alt="Banner principal" class="hero-image">
<img src="gallery/photo1.jpg" alt="Foto" loading="lazy">
```
Para Swiper:
```html
<img data-src="slide1.jpg" class="swiper-lazy" alt="Diapositiva">
<div class="swiper-lazy-preloader"></div>
```
- Diferir todos los scripts excepto 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>
```
- Eliminar bibliotecas no utilizadas
Verificar: console.log(window.THREE). Buscar en el proyecto: THREE. o three.js.
- Limitar eventos de desplazamiento/redimensionamiento/rueda
```javascript
let ticking = false;
window.addEventListener('scroll', () => {
if (!ticking) {
requestAnimationFrame(() => {
onScrollHeavyTask();
ticking = false;
});
ticking = true;
}
});
```
- Optimizar lienzos en móviles
Recalcular según el ancho de pantalla, reducir partículas en resoluciones pequeñas.
Mejoras de Alta Prioridad en la Carga
Compresión Gzip/Brotli en 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;Preconexión para CDN en <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 para 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 versión de PostCSS es similar.
Eliminar jQuery Migrate: asegurarse de que no haya JQMIGRATE en la consola.
font-display: swap:
@font-face {
font-family: 'Open Sans';
src: url('/fonts/OpenSans.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}Optimizaciones para Lighthouse
CSS crítico en línea + carga asíncrona:
<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 con respaldo:
<picture>
<source srcset="images/photo.webp" type="image/webp">
<source srcset="images/photo.jpg" type="image/jpeg">
<img src="images/photo.jpg" alt="Descripción" loading="lazy" width="800" height="600">
</picture>Gulp para 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'));
});Conclusiones Clave
- HTTP/2 elimina las colas de conexión en Safari.
- Limitar eventos de desplazamiento/redimensionamiento evita el trashing en el JS de un solo hilo.
- La carga diferida + diferir reduce el bloqueo de renderizado.
- PurgeCSS y la eliminación de bibliotecas reducen el volumen de JS/CSS.
- La optimización de lienzos es crítica para fondos animados.
Las auditorías regulares con esta lista minimizan la pérdida de tráfico de audiencias iOS.
— Editorial Team
Aún no hay comentarios.