Приемането на уеб шрифтове продължава да се ускорява в Интернет. 37% от топ 300 000 сайта използват уеб шрифтове от 2014 г. Пример за използване на Webfonts е The Guardian или BBC, което се превръща в увеличение 2x + през последните дванадесет месеца. Но има и други много важни сайтове, които използват системни шрифтове като Washington Post, ABC, El Mundo или El País, тъй като те са шрифтове, които се зареждат много бързо, когато са в системата. Шрифтът вече е инсталиран в операционната система на устройството. Оптимизирайте уеб шрифтовете, когато зареждате уебсайт. Знам ли, че трябва да използвам уеб шрифтове?

шрифтовете

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

Разбира се, това не би трябвало да е толкова изненадващо, колкото повечето от нас. Типографията винаги е била важна част от добрия дизайн, брандиране и четливост на шрифтовете предлага допълнителни предимства - текстът е избираем, с възможност за търсене, мащабиране и удобен за DPI. Получавате точен и последователен текст, който се изобразява независимо от размера и разделителната способност на екрана. Уеб шрифтовете осигуряват задоволителен дизайн, потребителско изживяване и производителност. Използването на уеб шрифтове осигурява по-уникално изживяване. Ако става въпрос и за корпоративна типография, ние ще затвърдим идентичността на нашата марка.

Но всичко не е красиво и има цена. Трябва да се вземат предвид възможните технологични ограничения и да се намерят решения за тях. Основните са: Не всички браузъри са съвместими, време за изтегляне, консумация на данни и качество на изобразяване при използване на стари устройства и браузъри. В допълнение, заявките за шрифтове са външни ресурси, които отделят време за изобразяване на браузъра, когато рисуват страницата и трябва да се гарантира, че резервният текст се вижда по време на зареждане, като се избягва светкавицата на невидим текст или Foit.

В това ръководство ще ви помогнем да направите малко НИРД, за да вземете решения. Тъй като няма ясен отговор на въпроса.

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

Отговорът е, че зависи. Ако искате идентичност на марката, да. Но не трябва да допускате зареждане на повече от два или най-много три персонализирани шрифта на страницата си от съображения за производителност. Тъй като те противоречат на WPO на страницата и имат технологични ограничения и странични ефекти. Че ако трябва да бъдат много оптимизирани.

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

Използването на @ font-face за зареждане на потребителски уеб шрифтове е чудесна характеристика на съвременните браузъри, за да придаде на нашите сайтове уникална естетика. Освен това вече има уеб шрифтове на икони на социални мрежи, къщи, стрелки, ... които могат да избегнат да се налага да зареждате спрайтове от изображения в мрежата. Като вектор, мащабирането няма да покаже пикселите, които преминават заедно с изображенията.

Когато използвате персонализирани шрифтове в мрежата, като го зареждате със стандартните @ font-face техники и url, това може да забави скоростта на зареждане и да попречи както на действителната, така и на възприеманата ефективност на потребителя. Има някои методи, които, прилагани внимателно, се опитват да минимизират ефекта FOIT и правилно да балансират използваемостта, производителността и стила, тоест ще загубим известна съвместимост.

На следващото изображение. Виждаме как браузър зарежда уеб страница.

След като научим, че виждаме, че имаме проблем с уеб шрифта, когато работата на WPO (Оптимизация на уеб ефективността) ни хвърля.

Браузърът изисква HTML документ
Браузърът започва да анализира HTML отговора и да изгражда DOM
Браузърът открива CSS, JS и други ресурси и обработва заявки
Браузърът изгражда CSSOM дървото, след като е получил цялото CSS съдържание и го комбинира с DOM дървото, за да изгради дървото на дисплея
Заявките за шрифтове се обработват, когато дървото на дисплея показва кои варианти на шрифта са необходими за изобразяване на посочения текст на страницата
Браузърът изпълнява оформлението и рисува съдържанието на екрана
Ако шрифтът все още не е наличен, браузърът може да не изобрази текстови пиксели

Проблемът с @ font-face.

Декларацията CSS @ font-face е стандартният метод за препращане към персонализирани шрифтове в мрежата:

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

IE незабавно изобразява текста с резервния шрифт и се връща към него, след като изтеглянето на шрифта приключи.
Firefox има визуализация на шрифта до 3 секунди, след като използва резервен шрифт и след като изтеглянето на шрифта завърши, той рендира текста още веднъж със изтегления шрифт.
Chrome и Safari правят шрифтовете спряни, докато изтеглянето на шрифта приключи. Това означава, че можем да останем празен уеб.

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

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

Рендирането на шрифтове също отнема много време в браузъра на потребителя. Ако имате стар смартфон или мобилен телефон, може да отнеме малко повече време. Ако шрифтът все още не е наличен, браузърът може да не изобрази текстови пиксели. Ефект FOIT. Когато шрифтът е наличен, браузърът ще нарисува текстовите пиксели.

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

Chrome, Safari запазва текст за изобразяване, докато изтеглянето на шрифта завърши.
Firefox ще запази изобразяването на шрифта до 3 секунди и след това ще използва алтернативен шрифт. след като изтеглянето на шрифта приключи, те рендерират текста отново със изтегления шрифт.
IE незабавно се изобразява с алтернативен шрифт, ако заявеният шрифт все още не е наличен и се изобразява отново, когато изтеглянето на шрифта завърши.

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

Някои браузъри ще изчакат предварително определен период от време (обикновено три секунди), докато шрифтът се зареди, преди да се откажат и да покажат текста, използвайки резервното семейство шрифтове. Но подобно на вярно кученце, браузърите WebKit (Safari, браузър по подразбиране за Android, Blackberry) ще чакат вечно (добре, често 30 секунди или повече), за да се върне източникът. Това означава, че вашите персонализирани шрифтове представляват потенциална точка на отказ за използваем сайт.

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

CSS заявката, която съдържа шрифтовото лице, не трябва да блокира страницата за рендиране. Вместо да препращате шрифтовете си чрез url във външна таблица със стилове, опитайте да заредите асинхронно шрифтовете и съдържанието на шрифтовете им - ще обясним как правят това по-късно в The Guardian.
Подсказките за шрифтове трябва да бъдат настроени, за да се гарантира, че текстът на свиване се вижда по време на зареждане, като се избягва проблясването на невидим текст или фойт.

Какво ще кажете за скоростта на рендиране, WPO? Винаги сме чували от гурутата на WPO, че уеб шрифтовете идват с наказание за изпълнение. Шрифтовете са допълнителен критичен ресурс на страницата, така че да, те могат да повлияят на скоростта на рендиране на нашите страници. Въпреки това, само защото страницата използва уеб шрифтове, не означава, че трябва да бъде бавна. Но тъй като никой не дава твърди песети. Повече файлове и по-голяма тежест винаги дават повече време.

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

Общият брой шрифтове и тегла на шрифта, използвани на страницата. Не се препоръчва повече от две или три.
Общият размер на байта на шрифтовете, използвани на страницата. Източникът трябва да бъде оптимизиран,
Латентност на прехвърлянето на източник на ресурси.
Времето, когато започват изтеглянията на шрифтове.

Дизайнерът на страници трябва да сведе до минимум използването му. Ако се използват повече източници, ще се отправят повече заявки и ще се получат повече байтове. Общата най-добра практика за UX е да се ограничи броят на използваните шрифтове до минимум, което също е в съответствие с нашите цели за изпълнение. Първа стъпка: използвайте уеб шрифтове, но периодично проверявайте използването на шрифта си и се опитвайте да го държите настрана. Другата част е, че уеб шрифтът трябва да бъде оптимизиран в теглото си, дизайнерът ще го направи или ще използвате оптимизирани шрифтове на Google, а от друга страна ще обясним как да подобрим зареждането на шрифта.

Уеб шрифтът се състои от поредица от глифи, т.е. от векторни фигури, които описват буква или символ. Следователно, размерът на определен файл с шрифтове се определя от две прости променливи: сложността на векторните пътища за всеки глиф и броя на глифите за определен шрифт. Например Open Sans, който е един от най-популярните уеб шрифтове, се състои от 897 глифа, включително латински, гръцки и кирилични символи. Трябва да избягвате знаците на езици, които не използвате. Дизайнерът трябва да опрости векторните форми и да компресира шрифта, за да не тежи твърде много.

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

В мрежата се използват четири формата на контейнери за шрифтове: EOT, TTF, WOFF и WOFF2. За съжаление, въпреки тези множество възможности, няма един универсален формат, който да работи във всички браузъри, както стари, така и нови: EOT работи само с IE, TTF е частично съвместим с IE, WOFF има по-голяма съвместимост, но не е наличен при някои по-стари браузърите и поддръжката на WOFF 2.0 все още се прилагат в много браузъри и се поддържат само от по-новите. Каква панорама. Зареждането на шрифт включва качване на множество файлове за гледане в повечето браузъри. Ще видим как да го коригираме с условно натоварване, откриващо браузъра на потребителя чрез javascript към

Колко време отнема на посетителя да изтегли ресурса на уеб шрифта на вашия сайт? Най-добрият начин да отговорите на този въпрос е да инструментирате вашия сайт чрез API за синхронизация на ресурси, който ни позволява да получим DNS, TCP и данни за времето за прехвърляне за всеки шрифт - като бонус, Google Fonts наскоро активира Timing Resources Ето един примерен фрагмент отчитане на закъснения на източника до Google Analytics за вашите отчети:

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

IE незабавно изобразява текста с резервния шрифт и се връща към него, след като изтеглянето на шрифта приключи.
Firefox има визуализация на шрифта до 3 секунди, след като използва резервен шрифт и след като изтеглянето на шрифта завърши, той рендира текста още веднъж със изтегления шрифт.
Chrome и Safari изобразяват шрифтовете, спряни, докато изтеглянето на шрифта приключи.

браузърът не може да инициира заявка за шрифт, докато има както DOM, така и CSSOM и не успее да разреши шрифтовете, необходими за текущата страница.

Уеб шрифтовете предлагат много предимства: подобрява четливостта, достъпността (с възможност за търсене, избор, мащабиране), брандиране и когато е направено правилно, красиви резултати. Не е въпросът дали да се използват уеб шрифтове, а как да се оптимизира тяхното използване. За тази цел, бърз действащ контролен списък:

Проверете използването на източника и винаги го поддържайте в рамките на логиката. Направете оптимизирани ресурси за шрифтове - вижте измамите на Google Web Fonts. Кривата на глифите трябва да бъде намалена.
Оптимизирайте латентността на трансфера за всеки източник.
Оптимизирайте премахването на ненужните JS преди или след уеб шрифтовете или го използвайте, за да заредите шрифта асинхронно.
Прекарайте малко време в игра с API за зареждане на шрифтови събития, за да разберете как работят уеб шрифтовете.
Това, че страницата използва шрифт, не означава, че ще го забави, ако се направи добре и умерено. Добре оптимизиран сайт може да предложи по-добро и по-бързо изживяване, например с помощта на шрифт на икона, за да се избегнат много изображения,

Google Fonts са безплатни и с отворен код, което позволява много ефективно кеширане между страниците. Можете също така да спестите честотна лента на вашия сървър. Всъщност топ 40 шрифта на Google се споделят от над 100 000 домейни. С други думи, с помощта на популярен интернет шрифт можете да гарантирате, че много потребители ще го имат като кеш в браузъра си. Например шрифтът Sans е широко използван и четлив. Колкото по-широко е приемането, толкова по-голяма е вероятността от попадения в кеша и по-добра производителност. Но какво, ако искам собствена марка за моята марка. Не се отчайвайте, има начини да подобрите натоварването си.

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

Как използваме уеб шрифтовете отговорно или като избягваме @ font-face-palm?

Победата над Flash of Invisible Text (FOIT) е избягваема с помощта на Javascript loadCSS функция.

Flash of Unstyled Text (FOUT) е начин за прогресивно рисуване на шрифта, когато го изтеглите и да го видите възможно най-скоро.

Пример за побеждаване на светкавицата на невидим текст (FOIT) с loadCSS.

Също така много интересен трик за запазване на HTTP проследяване е зареждането на източника в CSS в база 64 вместо с url.

Пример /url/to/woff.css и /url/to/ttf.css

Ако добавим откриването на браузъра, ще заредим необходимия тип файл

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

Оставяме ви javascript много близо до съвършенство

И накрая и това вече е за забележка, можем да запазим типографията не само в кеша, но и да използваме Local Storage на съвременен браузър. Пазителят и Би Би Си го използват. Това вече е параноя на WPO и SEO. Трябва да поставите уеб шрифта в Json, за да се възползвате от факта, че браузърът го зарежда преди това и да го оставите съхранен в браузъра на потребителя, за да не се налага да правите повече заявки. Това ако това е честната регистрация за оптимизиране на зареждането на патентован уеб шрифт.

Оставяме ви изпълнението на The Guardian. Техникът и дизайнерът трябва да са в клиника за психично здраве след това 🙂

Заключение Загубихме умерено страха от уеб шрифтовете.