Как заставить браузер Safari сохранять шрифт в кэше?

Question

Руслан

safari , telegram , css , vue

Как заставить браузер Safari сохранять шрифт в кэше?

В приложении Telegram web app шрифты загружаются через CDN, как показано в следующем примере: <br/> <pre><code class="html">&lt;link rel="stylesheet" as="style" crossorigin
	      href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css"/&gt;</code></pre> <br/> Я подключаю этот шрифт в index.html, используя Vue 3. На странице присутствует лоадер, который отображается минимум 3 секунды, пока с бэкенда не прилетят данные о пользователе. Во всех браузерах шрифт загружается один раз и кешируется, поэтому при перезагрузке текст остается стабильным. Однако на устройствах iPhone и Mac при перезагрузке шрифты скачиваются заново, и я не знаю, как это исправить. <br/> Это заказная работа, и большинство пользователей находятся на iOS, поэтому они очень просят решить эту проблему. <br/> @EdyaCloudRobot - пример одного из их ботов, где уже используется этот шрифт.

11 декабря 2024 г. 19:03

Ответы на вопрос 1

Похожие вопросы

Answer 1

Существует несколько способов оптимизации загрузки шрифтов в браузере Safari, чтобы он сохранял их в кэше и не загружал заново при перезагрузке страницы. Вот несколько рекомендаций, которые могут помочь:

1. **Используйте правильные заголовки кеширования**:
Убедитесь, что ваш CDN (Content Delivery Network) настраивается так, чтобы возвращать правильные заголовки кеширования (Cache-Control). Например, заголовок `Cache-Control: max-age=31536000` заставит браузер кешировать шрифт на долгое время.

2. **Добавьте `preload` и `preconnect`**:
Можно использовать `<link rel="preload" href="..." as="font" type="font/woff2" crossorigin="anonymous">`, чтобы предзагрузить шрифт. Это может помочь браузеру быстрее кэшировать шрифты. Пример:
```html
<link rel="preload" href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.woff2" as="font" type="font/woff2" crossorigin="anonymous">
```

3. **Проверьте использование Font-display**:
Убедитесь, что в вашем CSS используется свойство `font-display: swap`, чтобы браузеры могли кешировать шрифт, не блокируя рендеринг страницы.

4. **HTTP/2**:
Убедитесь, что ваш CDN использует HTTP/2, что позволяет эффективно кешировать шрифты и другие ресурсы.

5. **Избегайте критических CSS**:
Убедитесь, что стиль шрифтов не является частью критических CSS файлов, которые могут блокировать рендеринг. Можете попробовать загрузить эти стили асинхронно.

6. **Проверка кэша**:
Иногда Safari может вести себя странно с кэшем. Попробуйте очистить кэш на устройстве и посмотреть, сохраняется ли шрифт.

7. **Локальное резервирование**:
Если возможно, рассмотрите возможность включения шрифтов непосредственно в ваш проект, а не загрузку с CDN. Это снизит вероятность повторной загрузки.

Если после выполнения всех этих шагов проблема останется, возможно, стоит обратиться на форум поддержки Safari или использование других способов для диагностики проблемы. Safari может иметь свои особенности обработки кэша, особенно на мобильных устройствах и в macOS, которые отличны от других браузеров.