Иногда ли Lighthouse пропускает ссылки предварительной загрузки, если также присутствует ссылка без предварительной загрузки?

Question

Иногда ли Lighthouse пропускает ссылки предварительной загрузки, если также присутствует ссылка без предварительной загрузки?

Я добавил preload ссылки на свой сайт для двух CSS-файлов, и это, безусловно, была самая большая возможность улучшения, указанная в аудите Lighthouse.

Я добавил ссылки preload и запустил новый аудит Lighthouse, и он по-прежнему показывает то же сообщение, что и раньше (скриншот ниже).

Ссылки без предварительной загрузки для тех же двух файлов все еще существуют, может ли это быть причиной этой проблемы? Вот первые 4 строки в <head> раздел:

<head>
    <link type="text/css" rel="preload" href="/gsight2/css/invite.css?v1" as="style">
    <link type="text/css" rel="preload" href="/gsight2/css/client-styles.css?v4" as="style">
    <link type="text/css" rel="stylesheet" href="/gsight2/css/invite.css?v1">
    <link type="text/css" rel="stylesheet" href="/gsight2/css/client-styles.css?v4">

Еще одна потенциальная проблема здесь (которую, я признаю, я только сейчас заметил) заключается в том, что все четыре из этих <link> элементов выше, по-видимому, загружены с помощью JavaScript. Я говорю это, потому что, когда я перезагружаю страницу и просматриваю HTML, сначала появляются другие элементы в разделе <head>, а через некоторое время появляются эти четыре элемента <link>. Это особенно заметно, когда я делаю то же самое и имитирую более медленное соединение.

В таком случае я не совсем понимаю значение предварительная загрузка этого CSS вообще, так как он не нужен при первоначальном отображении страницы.

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

Любые советы здесь приветствуются, заранее спасибо.

2

css lighthouse core-web-vitals

Author: Jake 1986, 2021-06-23

Source

1 answers

score 3 · Accepted Answer

Вы должны жестко закодировать эти ссылки предварительной загрузки в статическом HTML <head> (или заголовках HTTP), которые поступают с сервера, в отличие от динамического добавления их позже с помощью JavaScript. Таким образом, браузер может обнаруживать URL-адреса таблиц стилей и предварительно загружать их как можно раньше, что дает вам и вашим пользователям преимущество в производительности.

Для получения дополнительной информации см. https://web.dev/preload-critical-assets/