Як оптимізувати веб-шрифти в WordPress

1. Що являють собою веб-шрифти?
2. Розміщення і доставка веб-шрифтів
3. Оптимізація веб-шрифтів, що додаються через сервіси
4. Оптимізація Google Fonts
5. Використання шрифтів, розміщених на своєму сервері
6. Оптимізація самостійно завантажених шрифтів
7. Оптимізуйте веб-шрифти за допомогою CSS-інлайнінга (вбудовування)
8. Ще одна додаткова оптимізаційна методика для легких сайтів

Веб-шрифти є однією з фундаментальних основ сучасного веб-дизайну. Вони підключені на переважній більшості WordPress-сайтів. Оптимізація використання та підключення веб-шрифтів критично важлива, оскільки погано оптимізовані веб-шрифти можуть погіршити продуктивність вашого сайту. Незважаючи на цей ризик, відмовлятися від веб-шрифтів повністю не варто. Такі шрифти популярні з багатьох причин.

Дизайнери люблять веб-шрифти за ліцензії, під якими вони надаються, а також за покращений досвід взаємодії.

Веб-шрифти часто обробляються набагато швидше, ніж web safe шрифти (шрифти, які часто застосовуються для оформлення документів в мережі) на широкому спектрі пристроїв різних розмірів і дозволів.

У цій статті ми розглянемо веб-шрифти, а також вивчимо методи і інструменти, які ви можете використовувати для додавання оптимізованих веб-шрифтів до вашого WordPress-сайту.

Що являють собою веб-шрифти?

Перед тим, як ми будемо говорити про оптимізацію підключення веб-шрифтів, я хочу переконатися, що ми розуміємо термінологію. Якщо торкатися веб-сайтів, для них є два базових типу шрифтів:

• Web Safe шрифти (веб-безпечні шрифти). Це такі шрифти, які вже встановлені на пристроях. Сюди відносяться базові шрифти, такі як Arial, Times New Roman, Courier New, а також деякі універсальні сімейства шрифтів, як serif, sans-serif і monospace.
• Веб-шрифти - це такі шрифти, що не встановлені на пристроях і повинні бути спочатку завантажені призначеним для користувача браузером, і тільки потім вони вже можуть бути виведені на екран.

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

Розміщення і доставка веб-шрифтів

Якщо ви вирішили використовувати веб-шрифти, ви повинні визначитися з тим, як ви будете зберігати ресурси шрифтів. Є два варіанти розміщення веб-шрифтів:

• Розміщення на своєму сайті. Ресурси шрифту розміщуються на вашому власному сервері разом з іншими файлами сайту.
• Розміщення на сторонніх серверах. Ресурси шрифтів розміщуються на сторонніх сервісах, таких як Google Fonts або Typekit.

Використання стороннього сервісу, такого як Google Fonts, є найбільш популярним і простим методом роботи з веб-шрифтами. Однак деякі розробники не люблять покладатися на сторонні сервіси з міркувань продуктивності і безпеки, і в такому випадку розміщення ресурсів шрифтів у себе на сервері є оптимальним варіантом. Якщо у вас немає технічних навичок або достатніх серверних потужностей для передачі ресурсів шрифтів швидше, ніж це роблять Google або Adobe, найкраще використовувати вже існуючі сервіси для розміщення та доставки веб-шрифтів.

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

Оптимізація веб-шрифтів, що додаються через сервіси

Почнемо ми з цього варіанту, оскільки він є найпростішим і популярним. У той час як Typekit популярний серед професійних розробників, Google Fonts є найпоширенішим джерелом сторонніх шрифтів. Сервіс є безкоштовним, вільним у використанні; користувачам не потрібно завантажувати численні ресурси шрифтів Google Fonts, оскільки шрифти вже зберігаються в кеші браузера.

Додавання Google Fonts до WordPress-сайту є простим дією. Найшвидша реалізація - це додавання шрифтів безпосередньо до файлу header.php теми за допомогою HTML-елемента link або до файлу functions.php за допомогою wp_enqueue_script ().

Як тільки шрифти будуть додані до header.php або functions.php, ви зможете застосувати їх на сайті через довільні CSS-правила.

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

Якщо ви не хочете чіпати файли теми, ви можете скористатися WordPress-плагінами, які дозволять додати Google Fonts до вашого сайту.

Мій улюблений плагін для додавання Google Fonts до WordPress-сайту - це Easy Google Fonts . Він дозволяє легко налаштовувати стилі шрифтів для кожного текстового елемента і створювати довільні селектори для спеціальних елементів. Стилі шрифтів присвоюються до кожного елементу і безпідставного селектору через кастомайзер. Як результат, ви отримуєте лайв-превью всіх змін.

Ще один популярний варіант для додавання Google Fonts до WordPress - це плагін WP Google Fonts . Цей плагін, на жаль, не пропонує лайв-превью змін, але зате він дає набагато більше можливостей по налаштуванню стилів шрифтів і наборів символів. З цієї причини, якщо ви не дуже задоволені тим навантаженням, яке надає Easy Google Fonts на ваш сайт, ви можете перейти на WP Google Fonts і вибрати більш вузьке підмножина стилів шрифтів і наборів символів.

Оптимізація Google Fonts

Всі шрифти Google Fonts є стислими і поставляються через мережу CDN від Google, яка дозволить добитися максимально швидкої доставки. Навіть з огляду на той факт, що Google Fonts вже включає вбудовану оптимізацію, все одно є можливість прискорити доставку шрифтів.

При виборі Google Fonts не вмикайте всі доступні стилі і набори символів. Ретельно продумайте стилі і набори символів, які вам дійсно потрібні, і додайте тільки ці стилі і підмножини. Врахуйте, що вам не потрібно обов'язково включати всі варіації курсиву або напівжирного. Браузери самі скорегують ці стилі, якщо відповідний шрифт буде недоступний.

На багатьох сайтах використовується унікальний шрифт для стилізації заголовка сайту. Однак реалізація цього означає, що вам потрібно буде додати додатковий файл шрифту, який буде завантажуватися. Мінімізуйте вплив цього додаткового стилю шрифту шляхом завантаження тільки певних символів, використовуваних в вашому заголовку. Ви можете зробити це, додавши & text = з необхідними буквами в кінець Google Fonts URL.

Наприклад, якщо ви хочете вивести слово Kinsta, використовуючи Bungee Shade, ви можете зробити це за допомогою наступної посилання:

<Link href = '// fonts.googleapis.com/css?family=Bungee+Shade&text=Kinsta' rel = 'stylesheet'>

Зверніть увагу, що тут ми додали & text = Kinsta до елементу link. В результаті Google Fonts CDN буде доставляти тільки прописну букву K, а також малі літери i, n, s, t і a.

Використання шрифтів, розміщених на своєму сервері

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

Додати шрифт до WordPress вручну не так складно:

• Завантажуємо файли шрифту на свій сайт
• Додаємо правило @ font-face до style.css вашої теми для кожного завантаженого шрифту
• Застосовуємо шрифти, використовуючи довільні CSS-стилі

Однак, якщо ви хочете дещо спростити цей процес, ви можете скористатися плагіном Use Any Font , Який дозволяє завантажувати шрифти і прив'язувати їх до HTML-елементів прямо з консолі WordPress. Ви можете використовуватися безкоштовну версію плагіна для завантаження одного файлу шрифту. За $ 10 і більше ви можете відкрити можливість завантаження необмеженої кількості шрифтів.

Оптимізація самостійно завантажених шрифтів

При використанні самостійно завантажених шрифтів можна дуже легко допустити помилки, які можуть призвести до значного зниження швидкості роботи сайту. Щоб уникнути таких помилок, дотримуйтеся таких вказівок.

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

По-друге, поставляйте шрифти в чотирьох форматах: woff2, woff, ttf і eot. При додаванні цих шрифтів до вашого CSS-файлу за допомогою правила @ font-face обов'язково дотримуйтеся даного порядку. Це дозволить гарантувати, що браузери виберуть найшвидший формат, який вони можуть обробити.

По-третє, розгляньте можливість використання підмножини unicode-range, щоб обмежитися тільки тими наборами символів, які ви плануєте використовувати.

Оптимізуйте веб-шрифти за допомогою CSS-інлайнінга (вбудовування)

Якщо ви технічно підковані і готові боротися за кожну мілісекунду, ви можете прискорити завантаження сайту, скориставшись інлайнінгом.

Основна ідея цього підходу полягає в тому, щоб використовувати кодування base64 для вбудовування шрифтів в стильову таблицю CSS. Відповідно, браузер користувача зможе уникнути завантаження і обробки ресурсів шрифту.

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

Кодування ваших файлів шрифту в CSS-таблиці - досить просте завдання. localFont - простий у використанні веб-інтерфейс, який ви можете застосувати для конвертації файлів woff, woff2 і ttf в інлайн CSS. Інструмент пропонує навіть JS-скрипт, який буде перевіряти кеш браузера кожного користувача на наявність необхідного шрифту перед тим, як завантажувати цей шрифт повторно.

Ще одна додаткова оптимізаційна методика для легких сайтів

Якщо ви перейшли з самостійного розміщення файлів шрифтів до вбудовування шрифтів в CSS, наступним логічним кроком буде розглянути можливість вбудовування CSS безпосередньо в HTML-код вашого сайту. У випадку з даною стратегією ресурси наводиться у HTML-документ сайту, усуваючи необхідність у зверненнях до сервера для отримання ресурсів шрифтів. Однак ця тактика також усуває і переваги зберігання ресурсів шрифту в кеші призначеного для користувача браузера, оскільки шрифти прописуються прямо в HTML-коді сайту і підключаються з кожним завантаженням сторінки.

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

Джерело: kinsta.com