#jquery #performance #optimization #cdn #google-pagespeed
Вопрос:
Я пытаюсь оптимизировать веб-сайт, чтобы он набрал более 90 баллов в Google page insights как на мобильных, так и на настольных компьютерах. Сейчас мой балл на рабочем столе в порядке, но на мобильном я получаю около 80, и основная причина этого, согласно тесту Google, заключается в уменьшении влияния стороннего кода Сторонний код заблокировал основной поток, для которого время загрузки jquery CDN. Он загружается через Google CDN, и я уже 3 дня пытаюсь найти решение в Интернете, но безуспешно. Я не могу defer или async это, так как это нарушает мой сайт. Может ли кто-нибудь пролить свет на то, как этого добиться? Спасибо
Комментарии:
1. Лучший способ сделать это-не использовать CDN. Это будет означать, что вам нужно будет загрузить и разместить библиотеки на своем веб-сервере. Это сделает код более не сторонним или размещенным на другом сервере, требующим другого HTTP-запроса от клиента.
2.
deferне следует ломать ваш сайт, если вы добавляетеdeferко всему. Однако хитрость в том, чтобы остановить блокировку кода в потоке, заключается в разделении кода, и это довольно сложный процесс, если вы не пробовали его раньше, так как вам нужно разделить JS, необходимые для содержимого «выше сгиба», и JS, необходимые для всего остального. Лучший совет-deferвсем JS, добавьтеrel="preload"ключевые ресурсы, а затем оставьте их и сосредоточьтесь на других улучшениях производительности. Кроме этого, не используйте jQuery, так как он массивен, а вместо этого используйте ванильные JS или микро-библиотеки (это огромное предприятие, которое я бы не рекомендовал).3. @GrahamRitchie Очень просто, мне даже не пришло в голову добавить
deferв мой основной файл js,так как он не был упомянут ни в одном из тестов скорости, которые я проводил. Но теперь, когда я думаю об этом, в этом есть большой смысл. И вдруг мой ТБТ стал зеленым, большое спасибо4. Вообще не проблема, рад, что это помогло! Да, эта
deferштука привлекает множество людей, так как не объясняет, как она изменяет порядок выполнения и нарушает какие-либо зависимости. Вы не первый (и не будете последним), кто совершил эту ошибку! 🤣 О, и держитесь подальшеasync, так как это может быть кошмаром для реализации в существующем коде! Удачи с проектом!
Ответ №1:
Итак, я пришел к решению и решил опубликовать его здесь, может быть, кто-то сочтет это полезным в будущем. Таким образом, добавление defer в сценарий действительно помогло, но одна из трех проверок скорости просмотра страниц все равно превысит 500 мс за общее время блокировки. Поэтому я скопировал код jquery и добавил его непосредственно в <script></script> теги в заголовке файла. С тех пор каждая проверка составляла 0-40 мс для мобильных устройств, 0-20 мс для настольных компьютеров.