Оптимизация JS и CSS | Корректная загрузка ресурсов сайта
Привет! Здесь постараюсь рассказать об основных приёмах оптимизации загрузки ресурсов, которые нужно знать seo-специалисту в целях ускорения сайта. В статье я дам несколько примеров, с которыми наиболее часто сталкиваются оптимизаторы в своей работе.
Итак, воспользовавшись инструментами тестирования скорости загрузки оптимизатор определяет перечень рекомендаций. Одним из основных пунктов, наряду с оптимизацией изображений, является пункт, связанный с загрузкой ресурсов, отвечающих за отображение контента на сайте.
Несмотря на то, что наиболее сильное влияние загрузка js и css оказывает на показатели Time to Interactive и Total Blocking Time. Для целей SEO, в первую очередь, важна отрисовка первого экрана. Чтобы не останавливаться на этом, ниже даю небольшой чек-лист для оптимизации FCP:
- Используйте правильную очередность загрузки ресурсов.
- Подключайте js и css по типам страниц, чтобы время загрузки не уходило на неиспользуемые файлы.
- Откажитесь от запросов @import url("style.css").
- Стили, влияющие на FCP расположите inline внутри html-странички.
- Минимизируйте количество js кода для отрисовки первого экрана.
Рекомендации к JS и CSS по LightHouse
- Устраните ресурсы, блокирующие основной поток
Такие ресурсы - это <script> (без defer и async) и стили <link rel="stylesheet">, подключаемые в <head>. Как правило, наибольшую нагрузку вызывают скрипты, подключенные через внешний ресурс, а также js сервисов веб-аналитики.
Отсюда вытекают 2 рекомендации
1. Все ресурсы нужно хранить локально. Внешний запрос может осуществляться слишком долго.
<link href="/templatev1.css" type="text/css" rel="stylesheet">
Когда вы скопируете код и сохраните его локально. У вас появятся возможности по дополнительной оптимизации. Вы сможете:
Сокращать файлы - удалять части кода, невостребованные для вашего сайта.
Минифицировать - сжимать файлы.
Комбинировать файлы - объединять несколько небольших файлов.
2. Всем ресурсам, не связанным с отображением элементов первого экрана, нужно обеспечивать асинхронную загрузку. <script async="" src="/analytics.js"></script>
Подключение скрипта в <head> - это и есть блокировка загрузки страницы. Если вы посмотрите на свой сайт внимательно, то поймёте, что 90% всего js используется ниже первого экрана. А если это не так, то следует к этому прийти.
Располагайте скрипты в <body> и указывайте атрибуты async или defer для асинхронной загрузки:
Например, jQuery часто не нужно загружать сразу. Однако, на большинстве сайтов вы увидите, что jQuery стоит в <head> первым js ресурсом. Убрать запрос к jQuery из <head> и вызов его в <body> по необходимости будет правильным решением.
Подводя итог, скажу, что свои усилия стоит сосредоточить на устранении блокировки загрузки, т.к. второстепенные меры оптимизации являются её составными частями.
Добавлю ко всему вышесказанному, что про внешние ресурсы тоже тема не раскрыта.
Даже если изогнуться и выкачать ту же Яндекс Метрику или Google Analytics, решить вопрос с их обновлением через крон, то остается проблема подключения внешних скриптов, подключаемых в основном файле.
Например качаем себе метрику. В самом файле watch.js подключаются дополнительные файлы.
Получается нужно их тоже выкачивать? Тогда в коде основного файла нужно менять пути к скриптам, что противоречит автоматическому обновлению файлов через Cron.
Если исключить автоматическое обновление - то нужно следить за статистикой, чтобы не пропустить момент когда что-то изменится в коде и отслеживание прекратит работу.
Возможно у коллег есть решения?
Спасибо
В одном из эфиров раскрыли эту тему на 100% и дали даже скрипт для обертывания скриптов аналитики. Выкачивать не надо. Надо просто отложить в потоке на 100-300 миллисекунд и будет всё хорошо.
Смотрите
В видео длительностью в почти час, вы показываете один скрипт?
В тренингах больше контента :)
Да, понимаю, что час выдержать невозможно для поколения Z. Максимум времени есть 15 секунд или минута если уж прям совсем.))
Но да, для этого нужен час. И да, мы показываем избыточно на видео, что именно предлагаем сделать.
Есть и вопросы от зрителей, потому что это прямой эфир.
Есть и другое. тайминг помогут вам посчитать точнее, сколько мы рассказываем именно про скрипт и его логику.
И да, правильно вы написали, это именно тренинг.
Удачи, Никита.
Какое поколение Z? 🤦♂️ Я с вами на "вы" общаюсь исключительно из-за правил хорошего тона, а не из уважения к старшему поколению. Расслабьтесь, мы, примерно, ровесники.
Я написал: посмотрел видео полностью, вот прям со всеми затупами вашими, и скрипт на экране сам видел (так что эксклюзивности в ссылках под видео нет если что, я понимаю "маркетинговую составляющую, но выглядит странно). И у меня к этому всему есть вопросы. При этом закономерные и логичные.
Вы их игнорируете и говорите об абстрактном, в том числе и в ваших видео, попутно пытаясь, со своим другом, продать "супер" скрипт.
Из этого могу сделать только один вывод - все это не более чем псевдо-решение, потому что:
1) вы упорно игнорируете конкретные вопросы;
2) предлагаете посмотреть видео, в котором говорите тоже самое и купить скрипты, к которым есть вопросы;
3) прислали сайт, который приводили в пример про 53 слайдера, но там этот пример не подтвердился + я ответил про то как работает JS (про экземпляры);
То есть, вы не можете ответить по своему продукту, но его продаете. Либо вы в нем недостаточно хорошо разбираетесь, либо понимая его недостатки игнорируете неудобные вопросы.
Также, касательно:
Но да, для этого нужен час. И да, мы показываем избыточно на видео, что именно предлагаем сделать. Есть и вопросы от зрителей, потому что это прямой эфир. Есть и другое. тайминг помогут вам посчитать точнее, сколько мы рассказываем именно про скрипт и его логику.Не льстите себе, на стриме было 10 человек по всей видимости, которые задали полтора вопроса. Вы даже не провели свой конкурс на 25% мега скидку на любой пакет ускорения, потому что никто не выполнил условия вашего конкурса (я же сказал что я посмотрел все).
Если вы настаиваете на том что ваше видео супер информативно, я не поленюсь, заморочусь, и нарежу его самые "информативные" моменты. :)
Мой вам совет: меньше изображайте - больше работайте. Как показывает диалог и решения, вы не разобрались до конца в вопросе, но уже "упаковали" его в "решение".
Эх, Никита. Хорошо пишете. Пишите статьи, у вас отлично получается.
Честно - мне лень и у меня мало свободного времени. Чем отвечать на ваши "неудобные" вопросы, я лучше пойду к детям и поиграю с ними в куча-мала.)))
Вы задаёте правильные вопросы, но учить бесплатно - увольте.
Скрипты работают и это факт.
Сотня ускоренных проектов это подтверждает.
"+ я ответил про то как работает JS (про экземпляры);"
Вы ошибаетесь в своем ответе. Количество экземпляров напрямую влияет на скорость, так как инициализация - работа с дом, а она очень затратна по ресурсам.
А то что вы прислали совсем и не ошибка JS.
Это кэш в вашем браузере о несуществующих файлах js.
Кэш + ПВА. Но почему с этим проблемы лучше самостоятельно изучить.
Хорошего дня.
Спасибо, я знаю, этим и занимаюсь уже 10 лет на ряду с разработкой. Да, и не поверите, прямо сейчас пишу новый пост. Буду ждать вас в комменты.
Отвечать на вопросы и конвертировать пользователей в клиентов - ваша задача, неправда ли?
Учить? Учите своих детей, а я указываю на недостатки вашей системы, будучи full stack разработчиком с 10 летним стажем. Поэтому с обучением, до уровня на котором осуществляется дискуссия, вы опоздали, лет так на 7.
Скрипты естественно будут работать (еще бы вы скрипты нерабочие продавали, а вы с юморком!), вопрос в результате и эффективности, сопутствующих потерях. А сотня проектов это не результат. Можно сделать тысячу проектов и ни один не взлетит - просто будут очень быстро грузиться))
Ответ про экземпляры я адресовал на ваш тезис про «поток и загрузку». То что меняется дом - факт, но, например, в том же слике добавляются только элементы управления, да классы - основная структура не меняется. И как скрипт решает этот вопрос? Убираете просто слайдер? Крутое решение. Профессиональненьнко.
Что то что я прислал - кеш - спасибо, я в курсе. Схерали он у меня ломает сайт? Или вы каждому пользователю будете писать на сайте «если у вас не работает сайт - почистите кеш. Это вы мудак, а не наши разработчики» 🤣. Это вам ваш товарищ-специалист продиктовал ответ? Мол «да это кеш, пусть почистит». Так я просто серфил страницы.
Нет, когда вы ведете разработку и много версий продукта (на тестовом сервере размещен сайт и вы его обновляете), а клиент смотрит переодически - это еще нормальное объяснение. Но когда на продакшене у пользователя, который зашел на сайт и перешел по паре страниц отвалились скрипты - это странно.
Так что советую протестировать свои наработки. Несмотря на ПВА или момент.
Кстати сама технология PWA, на первый взгляд, выглядит как очередная мертворожденная технология, как в свое время пуш уведомления (простите за двойную тавтологию). Звучит как будущее, но если копнуть глубже - ничем не отличается от сохранения страниц сайта в виде файлов. Надо будет изучить поглубже, может что добавили.
Приятных выходных!