Как на ipad сделать свой браузер по умолчанию

Как на ipad сделать свой браузер по умолчанию

Давным-давно каждый сайт использовал для отображения текста только такие шрифты, как Arial, Verdana, Garamond или Times New Roman, потому что только эти шрифты наверняка были установлены почти на любом компьютере. Но эти времена позади. Веб-шрифты распространяются по всему интернету, но мы все еще толком не знаем, как загружать их эффективнее.

pagespeed99

Эта статья – моё простое руководство о том, что делать, чтобы предложить оптимальный пользовательский опыт без необходимости избегать «дорогих украшений» (ака веб-шрифтов)

0. Если лень читать полностью

Суть метода:

Используем шрифты только в формате woff Другие браузеры получает старые «безопасные» шрифты Загружаем шрифт в бинарном формате и оптимизируем его Отдаем шрифты сами Отдаем их в качестве CSS-файлов – URIs с закодированными в base64 данными Если у пользователя нет шрифта, загружаем его асинхронно и сохраняем в localStorage Иначе загружаем его из localStorage без обращения к серверу. Радуемся, потому что ваш сайт отображается намного быстрее, а ваши пользователи получают намного больше удобства

Для тех, кто всё ещё читает, вот мои разъяснения, насчет верхних пунктов.

Обновлено – 09.10.2014

Если вы не особо доверяете этой оптимизации, я сделал две демо-странички. Просто протестируйте их и взгляните на то, как они загружаются, что блокируется, а что нет.

Демо-страница: Загрузка из шрифтов Google. Страница тестирования скорости: загрузка из шрифтов Google (79/100) Демо-страница: асинхронная загрузка и получение позже из localStorage. Страница тестирования скорости: асинхронная загрузка/ localStorage (100/100) 1. Поддержка браузерами

Согласно caniuse, 84% используемых браузеров поддерживают формат woff. Исключением являются старые браузеры – IE8 и встроенные браузеры старых андроидов. Следовательно, вполне достаточно предоставить веб-шрифты только современным браузерам с поддержкой формата woff. А старые браузеры могут довольствоваться запасным решением в виде шрифта Arial, например. А также пользователи будут вам признательны за то, что ваш сайт быстрее отображается в браузере. Просто постарайтесь найти то, что лучше подходит для дизайна вашего сайта.

2. Не используйте внешние источники шрифтов, такие как Google Fonts или Typekit

Они либо вызывают многие дополнительные блокирующие запросы, либо раздражающее мигание во время асинхронной загрузки. Чуть позже мы увидим гораздо лучшие способы загрузки веб-шрифтов.

3. Необходимость лицензии

Внимательнее выбирайте шрифт, который вы загружаете себе. К сожалению, не все лицензии позволяют это делать. Но к счастью, многие позволяют — как те, что с открытыми исходниками. Например, такие как Open Sans или Source Sans Pro. Когда вы выберете шрифт, скачивайте «двоичные» файлы (форматов otf или ttf)

4. Оптимизация, уменьшение размера, генерация CSS

Заходите на: генератор веб-шрифтов Font Squirrel.

Во время выбора режима Эксперт, вы так же можете выбрать удаление некоторых кодировок. Вы должны решить, какие наборов символов вам действительно необходимы. Ваше содержание только на английском? Тогда вам нужно только базовое подмножество. Ваше содержание на китайском? Значит, скорее всего вам потребуются все наборы символов.

Важно выбрать правильный вариант, чтобы сгенерировать CSS-файл, который содержит шрифты, закодированные в base64. Это будет файл, который вам действительно нужен.

5. Отдача CSS-файла

Файл может быть довольно большим (вплоть до 100-300кб) в зависимости от выбора кодировок и других опций. Поэтому важно правильно сжать файл с помощью gzip и установить строгое кеширование во время его получения пользователями.

К счастью для ваших пользователей, вам будет нужно отдать им этот файл только один раз. В первый раз, когда у пользователя не окажется этого шрифта, браузер загрузит его асинхронно и поместит в localStorage. В это время пользователи с медленным соединением могут видеть, как браузер перерисовывает «запасные» шрифты в ваши веб-шрифты, но это происходит не более одного раза. А большинство пользователей вообще ничего не заметят.

Начиная со второй загрузки страницы, вы будете загружать только CSS-файл из localStorage. Который загружается достаточно быстро (5-50мс). Пользователи не увидят даже мерцания, потому что все действия синхронны, но потребуют всего пары миллисекунд.

6. Покажите мне код

После того, как мы сохранили файл в localStorage, этому методу необходим код только на клиентской стороне. Вот, возьмите:

<head> ... <script> (function(){ function addFont() { var style = document.createElement('style'); style.rel = 'stylesheet'; document.head.appendChild(style); style.textContent = localStorage.sourceSansPro; } try { if (localStorage.sourceSansPro) { // The font is in localStorage, we can load it directly addFont(); } else { // We have to first load the font file asynchronously var request = new XMLHttpRequest(); request.open('GET', '/path/to/source-sans-pro.woff.css', true); request.onload = function() { if (request.status >= 200 && request.status < 400) { // We save the file in localStorage localStorage.sourceSansPro = request.responseText; // ... and load the font addFont(); } } request.send(); } } catch(ex) { // maybe load the font synchronously for woff-capable browsers // to avoid blinking on every request when localStorage is not available } }()); </script> ... </head> 7. Чего мы добились Устранили как минимум один, а скорее всего множество блокирующих запросов Максимум одно мерцание у пользователя, во время замены «запасного» шрифта на веб-шрифт (первое посещение, первый запрос) Ускорили время отображения на первой странице запроса Улучшили показатели скорости в Google Page Speed Insights и WebPageTest.org 8. Увидеть это в действии

Этот метод используется в моём блоге. Вы можете протестировать его в ваших смартфонах, планшетах или ноутбуках. Я обещаю, что это будет быстро:)

В этой статье всё ещё отсутствуют некоторые мелкие подробности. Если у вас есть вопросы или отзывы, то добро пожаловать в комментарии.

Обновлено – 10.11.2014

Пользователь Twitter’a @Kseso, проинформировал меня о другом подходе, который также получает 99/100 баллов в Google Page Speed Insights.

Я выступаю против этого подхода, потому что он надолго задерживает отображение текста. Поэтому давайте более детально расссмотрим, что происходит в этом методе.

Мы сразу же определяем семейство шрифтов в обычном HTML-файле: <head> ... <style> @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400; src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/ODelI1aHBYDBqgeIAH2zlBBHWFfxJXS04xYOz0jw624.woff) format('woff'); } </style> ... </head> Браузер не будет получать файл шрифта до тех пор, пока не убедится, что этот шрифт вообще понадобится где-либо на странице. Браузер дождется окончательного построения DOM и CSSOM Браузер начнёт получать файл шрифта из Google Fonts (заметьте, что для fonts.gstatic.com требуется лишний DNS-запрос).

gfonts-timeline

Эта шкала времени показывает, как браузер начинает загружать файл шрифта только перед событием DOMContentLoaded.

Если вам этого мало, большинство браузеров просто отобразят пустой текст на месте загружаемого шрифта: Только IE начнёт отображение немедленно с «запасными» шрифтами Firefox и Chrome35+ ждут полной загрузки шрифта в течение трех секунд (а затем отображают «запасной» шрифт) Safari и Chrome до 35-й версии ждут полной загрузки шрифта без каких-либо таймаутов.

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

Больше информации можно найти в блоге Ильи Григорика.

Так же я создал тестовую страницу, где вы можете проверить это сами.

Перевод статьи Loading webfonts with high performance on responsive websites с сайта bdadam.com, c разрешения автора —
Адама Береша-Дика.

P.S. Это тоже может быть интересно:
Как на ipad сделать свой браузер по умолчанию

Похожие записи:



Вышивки крестиком птиц

Схемы плетения жемчугом

Журналы по вязанию для игрушек крючком со схемами