Блог

Я создаю плагин для ведения блога, который позволяет комментировать определенные страницы. На данный момент это работает так: вы включаете js скрипт на свою html-страницу, который затем запускается во время загрузки и добавляет поле для комментариев на страницу.

Все работает правильно, однако при запуске отчетов Lighthouse я все равно получаю «Удалить неиспользуемый Javascript».

Я предполагаю, что это происходит потому, что код используется не сразу, а скорее инициируется после полной загрузки страницы?

Есть идеи, как я мог бы это исправить?

«Удалить неиспользуемый JavaScript» не означает, что сценарий не используется, он говорит вам, что в этом сценарии у вас есть JavaScript, который не нужен для загрузки страницы.

То, что он призывает вас сделать, — это «разделение кода», что означает, что вы сначала предоставляете JS, необходимые для начального содержимого страницы (известного как содержимое, указанное выше), а затем отправляете любые другие JS, необходимые для постоянного использования на сайте.

Если вы посмотрите на отчет и откроете запись, вы увидите, что в ней есть значение, показывающее, какая часть базы кода изначально не нужна.

Если скрипт небольшой (менее 5 кб), что я бы предположил, если все, что он делает, — это создает поле для комментариев, просто проигнорируйте этот момент. Если он больше (и вы не можете легко сделать его меньше) — разделите его на код «инициализации» и код «использования» / остальную часть кода и подайте код «инициализации» на ранней стадии, а остальные-после загрузки всех необходимых элементов или по назначению.

Это не влияет на ваш результат напрямую и предназначено исключительно для того, чтобы указать лучшие практики и выделить потенциальные проблемы, которые замедляют работу вашего сайта.

Дополнительный

Из комментариев автор указал, что библиотека довольно большая-70 кб, из-за того, что в ней есть WYSIWYG и т. Д.

Если вы пытаетесь загрузить большую библиотеку, но также учитываете производительность, хитрость заключается в том, чтобы загрузить библиотеку либо «намеренно», либо после загрузки важных файлов.

Есть несколько способов добиться этого.

по намерению

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

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

Например, у вас может быть кнопка на странице с надписью «оставить комментарий» (или что-то подходящее), связанная с функцией, которая загружает библиотеку только после ее нажатия.

Очевидно, что компромисс здесь заключается в том, что у вас будет небольшая задержка при загрузке и инициализации библиотеки (но простого счетчика загрузки будет достаточно, так как даже библиотека объемом 70 Кб должна загружаться всего за секунду или около того даже при медленном подключении).

Вы даже можете извлечь сценарий, как только чей-то курсор мыши наведет на кнопку, эти дополнительные несколько миллисекунд могут привести к ощутимой разнице.

Отсроченный

У нас, очевидно async , есть атрибут defer и.

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

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

Таким образом, он не отнимает ценные сетевые ресурсы в то время, когда другим элементам, необходимым для загрузки страницы, требуется этот слот для пропускной способности / сетевых запросов.

Очевидно, что компромисс здесь заключается в том, что библиотека будет готова немного позже, чем основной контент «выше складки». Еще раз, простой загрузочной вертушки должно быть достаточно, чтобы решить эту проблему.