Тег: cufon | Блог Франка Госсенса

Хоча можна було вставляти шрифти в веб-сторінки навіть у темний вік Інтернету 2010 рік був роком шматки головоломки веб-типографіки дійсно впали на свої місця Дизайнери, Маркетери і особливо «охоронці ідентичності брендів» захоплені цією еволюцією.

Але мало що можна знайти на вплив веб-шрифтів на продуктивність. Тому що ви завантажуєте додаткові файли, тому має бути певний вплив, чи ні? Я створив 4 однакових сторінки; один без шрифтів, що не належать до браузера, один з Cufon ( що я вже знав, що я не любив ), один з рішення для розміщення шрифтів Google і один з локальними шрифтами (від fontsquirrel.com ). Ці 4 сторінки були проаналізовані webpagetest.org (3 працює на IE8 з вузла Амстердама). Ось такі результати:

Як і слід було очікувати підтверджено у Поширених запитаннях Google Webfonts навіть найшвидший метод (розміщення шрифтів Google) - на 0,26 с повільніше, ніж версія без веб-шрифтів. Локально розміщені шрифти незначно повільніші, але це тому, що (з причин, які я не розумію повністю) 2 шрифт-файли були завантажені замість лише 1 на сторінці Google Шрифти. Cufon не варто згадувати тут, він мертвий, повільний і став досить неактуальним. Я не тестував версії із зображеннями, а не на веб-шрифти, але це, ймовірно, дало б приблизно такий самий результат (5 графічних файлів, кожен десь між 4 і 8 Кб?) І не оптимальний вид SEO і точки зору доступності.

Так 0,3 секунди, це не так вже й погано, ні? Або це? Якщо ви створюєте інтернет-магазин, досвід Amazon може бути особливо цікавим тут; кожні 100ms затримка коштує їх 1% у збуті . Чи готові ви втратити 3% прибутку лише для того, щоб мати ті гарні шрифти, про які, напевно, відвідувачі не могли піклуватися?

Моя порада; не використовуйте веб-шрифти, якщо цінуєте продуктивність. І ви повинні враховувати продуктивність як пріоритет не тільки для продажу, але й тому, що продуктивність сайту також є суворою впливає на зручність використання і рейтинг пошукової системи .

Якщо менеджер ідентифікації бренду наполягає на використанні правильних шрифтів, продуктивність буде проклята, а потім спробуйте виконати принаймні такі основні кращі практики:

• мати CSS, який визначає ваші шрифти ( з шрифтом ) якнайшвидше в HTML, і, звичайно, перед завантаженням будь-якого сценарію
• використання Рішення для шрифтів Google якщо можливо; це швидко, CSS оптимізований для браузера, який його запитує, і у вашому розпорядженні багато вільних шрифтів
• якщо вам потрібно самостійно розмістити шрифти, переконайтеся, що вони обслуговуються Формат WOFF (новий стандарт) і SVG (для iPhone / iPad) поряд з більш традиційними TTF ("старим" стандартом) і EOT (для MSIE)
• якщо ви розміщуєте власні шрифти, налаштуйте веб-сервер на стиск ttf, svg & eot-файлів (файли woff вже стиснуті) і встановіть заголовки для всіх шрифтів у далекому майбутньому, щоб забезпечити оптимальне кешування (приклад для Apache):

Шрифт AddType / ttf .ttf
AddType font / x-woff
AddType image / svg + xml .svg
Додаток AddType / vnd.ms-fontobject .eot
Шрифт ExpiresByType / ttf "доступ плюс 30 днів"
ExpiresByType font / x-woff "доступ плюс 30 днів"
ExpiresByType image / svg + xml "доступ плюс 30 днів"
Додаток ExpiresByType / vnd.ms-fontobject "доступ плюс 30 днів"
AddOutputFilterByType DEFLATE шрифт / ttf application / vnd.ms-fontobject image / svg + xml