Оптимизиране на уеб шрифтове за изпълнение: Състояние на техниката

Защо потребителски уеб шрифтове?

Потребителите посещават вашия сайт за съдържание. Следователно, добрият шрифт е от решаващо значение в интернет: за да бъде разпозната вашата марка и вашето послание да работи, имате нужда от четлив, четлив и добре сглобен дизайн.

Как да направя шрифт да изглежда красиво? Най-добре е да изтеглите потребителски уеб шрифт, т.е. файлове с шрифтове, които не са инсталирани на устройствата на потребителите.

Благодарение на широко разпространената поддръжка на правилото за CSS @ font-face CSS, броят на сайтовете с персонализирани шрифтове нараства скокообразно. Шрифтовете обаче могат да бъдат тежки и зареждането на допълнителни ресурси може да бъде голяма тежест за производителността.

Трябва да се даде приоритет на това как да заредите персонализирани шрифтове, тъй като размерът на файла е основна грижа.

Съвременни тенденции и подходи в уеб разработката

Научете алгоритъма за бърз растеж от нулата при изграждането на сайтове

Какво е мигащ невидим текст (MNT)?

HTML възел, използващ същото свойство на семейство шрифтове, е посочен в @ font-face;

в браузърите Webkit и Blink възелът не трябва да е празен;

в браузъри с поддръжка на обхват на Unicode в @ font-face, съдържанието трябва да съответства на посочения обхват на символите на Unicode.

Ако всички условия са изпълнени, браузърът започва да изтегля шрифта. Тоест, браузърът трябва да анализира не само CSS кода, но и текста на сайта, преди да активира изтеглянето на шрифта. Веднага след като шрифтът започне да се зарежда, потребителите ще станат свидетели на мигане на невидим текст или MNT.

MNT: страница http://blog.instagram.com/, докато изтегляте шрифтове във Firefox v.52. Текстът не се вижда

MNT: страница http://blog.instagram.com/ след изтегляне на шрифтове във Firefox v.52. Текстът стана видим

С други думи, веднага щом браузърът започне да зарежда шрифта, целият текст става невидим. За известно време пред потребителите се отваря страница без текст, която при слаби връзки може да изглежда като цяла вечност. Освен това различните браузъри обработват MNT по различен начин:

Blink браузърите и Firefox въвеждат три секунди таймаут: текстът изчезва за три секунди, докато шрифтът се зарежда. Ако шрифтът не е имал време да се зареди в определеното време, сайтът показва резервен шрифт, който след това се заменя с персонализиран в края на изтеглянето. Това поведение генерира ново съкращение MNST или мигащ нестилиран текст.

Safari, Android Browser и Blackberry не изчакват или извеждат текст, докато не се зареди персонализираният шрифт. Ако нещо се обърка и шрифтът не се зареди, потребителите остават със страница без текст.

IE/Edge не скрива текста, но веднага показва резервния шрифт, който е най-доброто дизайнерско решение от Microsoft.

Докато внезапната промяна на шрифта по време на четене на текст на уебсайт не е най-добрият потребителски интерфейс, взирането в празен екран и изчакването на зареждането на шрифта е още по-лошо. В идеалния случай работният подход трябва да се отнася както до MNT, така и до MNT. Въпросът остава отворен, но редица експерти стигнаха до общото заключение, че MNT все пак е по-добър от MNT.

Разрешаването на проблеми с зареждането на шрифтове включва работа както за оптимизиране на размера на файла, така и за управление на стандартното поведение на браузъра, за да се премахне MNT и да се сведе до минимум въздействието на MNT. Нека разгледаме по-отблизо всяка задача.

Съвети за оптимизация за персонализирани файлове с шрифтове

Има няколко стъпки, които трябва да предприемете, за да сте сигурни, че вашите шрифтови файлове са леки.

# 1 минимизирайте броя на шрифтовете в проекта

През повечето време няколко умно подбрани шрифта могат да направят чудеса за вашия дизайн и да имат по-малко влияние върху производителността на уебсайта.

# 2 изтегляне на уеб формати на шрифтове въз основа на поддръжката на браузъра

Има 4 основни формата на шрифта:

True Type Font (TTF), често срещан формат на шрифта, който се появи в края на 80-те;

Формат на отворен шрифт в мрежата (WOFF), формат от отворен тип или True Type, разработен през 2009 г., но само с компресия и метаданни;

Формат на шрифта за отворен уеб (WOFF2), този формат има по-добра компресия от WOFF;

Вграден отворен тип (EOT), формат, разработен от Microsoft за вграждане в страници.

Можете да посочите всички формати в @ font-face, но можете да се справите с два. Пример: