Встановіть атрибут rel=preload для значків шрифтів, щоб покращити показники Google PageSpeed

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

Швидкість сайту є підтвердженим фактором ранжирування, і тому, щоб збільшити наш органічний трафік, ми повинні досягти якнайшвидшої роботи веб-сторінок. Як випливає з рекомендацій Google, показник Time To First Byte (TTFB) повинен бути менше 100 мс.

Ось для чого призначена статистика PageSpeed. Я не фанат цього інструменту з ряду причин (я віддаю перевагу GTMetrix, Pingdom і Веб-сторінок). Однак давайте подивимося правді в обличчя: якщо ви хочете покращити показники рейтингу в Google, вам доведеться досягти високого рейтингу PageSpeed, особливо для мобільних пристроїв. Неможливо якось ігнорувати цей тест. Ми повинні дотримуватися інструменту Google для цілей SEO, навіть якщо показники та показники не мають сенсу.

Пропозиція запитів попередньої завантаження ключа

Пропозиція перед завантаженням ключових запитів PageSpeed Insights – це один з показників, який не має особливого сенсу для мене особисто. Інструмент аналізує ланцюжок ваших критичних запитів і позначає кожен файл, який називається з іншого файлу, і тим самим (відповідно до Google) збільшує час останнього завантаження сторінки. Найчастіше це речення асоціюється з файлами шрифтів, які називаються в таблицях стилів.

Офіційна документація Google рекомендує наступне виправлення:

Оголосіть всі попередньо завантажені посилання у вашому HTML-коді, щоб браузер якомога швидше завантажив ключові ресурси.

Це означає, що вам потрібно додати атрибут rel=’preload’ до всіх посилань на ресурси в головній області вашого HTML-коду.

<link rel="preload" href="styles.css" as="style">
<link rel="preload" href="ui.js" as="script">

Особисто я не бачу великої користі в збільшенні розміру HTML шляхом копіювання того, що вже було зроблено в таблиці стилів, однак, як я вже сказав, ми повинні діяти відповідно до команд Google.

Проблеми зі шрифтами піктограм

Не завжди легко зробити попереднє навантаження на файли, особливо якщо ви використовуєте CMS типу WordPress, тому що в ньому ви ризикуєте зламати ваші моделі.

На щастя, для більшості шрифтів ви можете скористатися правилом font-display:swap CSS як обхідний шлях. Однак, це не працює для значків шрифтів.

Якщо ви використовуєте бібліотеки шрифтів піктограм на своєму сайті, такі як icomoon або Font Awesome, правило підкачки не працюватиме. Це пов’язано з тим, що іконки не можна замінити резервним текстом, і вони повинні відображатися з самого початку. Навіть якщо резервний текст для шрифту значка оброблено, ніхто не знає, що ви в кінцевому підсумку побачите.

Багато тем і плагінів WP використовують ці шрифти значків, і якщо ви не хочете бачити пропозицію “Запити на ключі перед завантаженням” в Insights весь час, ви можете зробити наступне:

  • Повністю позбутися від іконок (не рекомендується, особливо для плагінів).
  • Перетворюйте іконки в SVG (дуже виснажливий, ризикований і дратівливий процес).
  • Дотримуйтеся правил Google і зробіть попереднє завантаження бібліотеки піктограм у заголовку HTML.

рішення

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

Найпростіший і швидкий спосіб виконати попереднє завантаження шрифтів піктограм на стороні сервера – через htaccess (якщо ваш сервер – Apache або LSWS) або через модуль nginx.

Для серверів Apache

Ми будемо використовувати правило LinkHeader htaccess для досягнення бажаного результату, обов’язково додайте атрибут rel=preload, рекомендований Google. Щоб уникнути попереджень браузера, ми також додамо атрибут crossorigin.

Вам знадобляться:

  • Шрифти: Ви можете легко взяти посилання зі сторінки PageSpeed. Просто натисніть правою кнопкою миші по URL шрифту і виберіть “Копіювати адресу посилання”.
  • Доступ до файлу htaccess: Ви можете використовувати ПЛАГІН FTP або Yoast SEO (Інструменти – Редактор файлів).

Відкрийте htaccess і вставте в нижній частині такий код:

Header add Link "</wp-content/themes/Avada/includes/lib/assets/fonts/icomoon/icomoon.woff>; rel=preload; as=font; crossorigin"

Обов’язково замініть свій шрифт “/wp-content/themes/Avada/includes/lib/assets/fonts/icomoon/icomoon.woff”. Вставляючи посилання на шрифт, видаліть першу частину URL-адреси (в WP це частина перед “/wp-content”).

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

Мій підсумок:

Header add Link "</wp-content/themes/Avada/includes/lib/assets/fonts/icomoon/icomoon.woff>; rel=preload; as=font; crossorigin"
Header add Link "</wp-content/themes/Avada/includes/lib/assets/fonts/fontawesome/webfonts/fa-solid-900.woff2>; rel=preload; as=font; crossorigin"

Для серверів Nginx

Для серверів nginx ви можете скористатися модулем ngx_http_headers_module.

add_header Link "</wp-content/themes/Avada/includes/lib/assets/fonts/icomoon/icomoon.woff>; rel=preload; as=font; crossorigin";

готовий! Не забудьте очистити кеш на стороні користувача і не забудьтеА потім перезапустіть PageSpeed. Пропозиція “Запити попередньої завантаження ключів” повинна бути відсутня.

Зробити попереднє завантаження через безкоштовний плагін Pre * Партія ресурс підказки

В Інтернеті є поради про те, як зробити попереднє завантаження шрифтів через платний плагін WP Rocket. Однак, якщо ви не хочете платити за фантазійний комбайн, щоб зробити просту річ, ви можете піти безкоштовним способом і встановити плагін. Підказки щодо ресурсів партії перед*.

Встановіть URL у відповідне поле, а потім поставте галочку поруч з Preload, навпроти Crossorigin, в поле as встановлюємо “Font”, в полі типу – “font/woff2” (якщо у вас таке розширення шрифту).

Натисніть кнопку Вставити підказку ресурсу. готовий!

джерело: marsigliadigital.com

Прокоментувати

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *