Оптимизирайте уеб шрифтовете, когато зареждате уебсайт
Приемането на уеб шрифтове продължава да се ускорява в Интернет. 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 секунди и след това ще използва алтернативен шрифт. след като изтеглянето на шрифта приключи, те рендерират текста отново със изтегления шрифт.