Тэг: куфон | Блог Франка Гусенса

Хоць можна было ўставіць шрыфты на вэб-старонкі нават у цёмныя часы Інтэрнэту 2010 год быў годам, калі часткі вэб-тыпаграфікі галаваломкі сапраўды ўпаў на свае месцы , Дызайнеры, маркетолагі і асабліва "ахоўнікі брэнда" захапляюцца гэтай эвалюцыяй.

Але мала што можна знайсці пра ўплыў вэб-шрыфтоў на прадукцыйнасць. Таму што вы загружаеце дадатковыя файлы, так што павінна быць нейкі ўплыў, не? Я стварыў 4 аднолькавыя старонкі; адзін без шрыфтоў, не звязаных з браўзэрам, адзін з Cufon ( якія я ўжо ведаў, што я не любіў ), адзін з размешчанае рашэнне Google Font і адзін з лакальнымі шрыфтамі (ад fontsquirrel.com ). Гэтыя 4 старонкі былі прааналізаваны webpagetest.org (3 працуе на IE8 ад амстэрдамскага вузла). Вось вынікі:

Як і варта было чакаць і пацверджана ў часта задаюць пытанні ў Інтэрнэце , нават самы хуткі метад (размешчаны Google Fonts) павольней на 0,26 секунды, чым версія без вэб-шрыфтоў. Шрыфты, размешчаныя на мясцовым узроўні, крыху павольней, але таму, што (па прычынах, якія я не ў поўнай меры зразумеў), былі загружаны 2 шрыфтоўскія файлы, а не толькі 1 на старонцы Google Fonts. Куфан тут не варта згадваць, гэта мёртва павольна, і я думаю, што ён стаў вельмі неактуальным. Я не правяраў версію з малюнкамі замест вэб-шрыфтоў, але гэта, верагодна, дасць прыкладна такі ж вынік (5 файлаў малюнкаў, кожны з якіх складае ад 4 да 8 Кб?) І з'яўляецца непаптымальнай формай SEO і даступнасцю.

Так што 0,3 секунды, гэта не так дрэнна, не? Ці гэта? Калі вы ствараеце інтэрнэт-краму, вопыт Amazon можа быць асабліва цікавым тут; кожная 100мс затрымка каштуе ім 1% ад продажаў , Такім чынам, вы гатовыя страціць даходы на 3%, каб мець тыя прыгожыя шрыфты, якія, магчыма, наведвальнікам не магло б клапаціцца?

Мой савет; не выкарыстоўвайце вэб-шрыфты, калі вы шануеце прадукцыйнасць. І варта ўлічваць прадукцыйнасць галоўнага прыярытэту не толькі дзеля продажаў, але і таму, што прадукцыйнасць сайта неапрацаваная ўплывае на зручнасць выкарыстання і рэйтынг пошукавай сістэмы ,

Калі ваш менеджэр па брэндах настойвае на тым, каб выкарыстоўваць правільныя шрыфты, прадукцыйнасць была праклятая, паспрабуйце прынамсі прытрымлівацца гэтых асноўных перадавых практык:

• мець CSS, які вызначае вашыя шрыфты ( з шрыфтам ) як мага раней у HTML, і, напэўна, перад загрузкай любога сцэнара
• выкарыстоўваць Размешчанае шрыфт-рашэнне Google калі магчыма; гэта хутка, CSS аптымізаваны для браўзэра, які запытвае яго, і ў вас ёсць шмат бясплатных шрыфтоў
• Калі вы павінны размясціць шрыфты самастойна, пераканайцеся, што ён служыць WOFF фармат (новы стандарт) і SVG (для iPhone / iPad) побач з больш традыцыйнымі TTF («стары» стандарт) і EOT (для MSIE)
• калі вы карыстаецеся ўласнымі шрыфтамі, наладзіце вэб-сервер на кампрэс-файлы TFF, svg & eot-файлы (woff-файлы ўжо сціскаюцца) і ўсталюеце загалоўкі expire для ўсіх шрыфтоў у далейшым, каб максімальна кэшаваць (напрыклад, для Apache):

AddType font / ttf .ttf
AddType font / x-woff .woff
AddType image / svg + xml .svg
Дадатак AddType / vnd.ms-fontobject .eot
ExpiresByType font / ttf "доступ плюс 30 дзён"
ExpiresByType font / x-woff "доступ плюс 30 дзён"
Image ExpiresByType / svg + xml “доступ плюс 30 дзён”
Дадатак ExpiresByType / vnd.ms-fontobject "доступ плюс 30 дзён"
AddOutputFilterByType DEFLATE прыкладанне font / ttf / vnd.ms-fontobject image / svg + xml