Оптимизация 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 миллисекунд и будет всё хорошо.
Смотрите
1) Смотреть 1 час видео без таймкодов непозволительная роскошь)
2) Речь про setTimeout()? Мне казалось такие задержки еще хуже делают, разве нет - код по идее все-равно парсится?
Получается загнать в JS встраивание скрипта аналитики и пр. (а не тегом script) и отложить выполнение вместе с инициализацией?
Если речь про async и defer, то если скрипты уже в футере - толку от них не много. Читал тут: https://habr.com/ru/post/323790/#gde-raspolozhen-element-script-
Можно, правда, добавить link preload.
3) Это разве решает вопрос загрузки внешнего содержимого? Или просто парсер не загружает их потому что не компилит отложенное выполнение и, получается не видит их в сурсе?
1. Таймкоды есть, будьте внимательнее, прежде чем писать.
2. Речь про то, что мы рассказываем на видео.)
3. Мы про всю логику рассказываем на этом видео.
+ вы просто можете купить наши скрипты и пробовать их внедрять:
https://pagespeed.loading.express/scripts
1. Это если перейти на youtube) Можно сделать так: https://youtu.be/_3c0aPSkNdc?t=1482
2. Сами же говорите про потерю показов (да, в рамках рекламных баннеров, но все же) https://youtu.be/_3c0aPSkNdc?t=1567
3. фактически это никак не ускоряет сайт, так можно и заглушками пользоваться, поставив вообще статическое изображение вместо контента на первый кадр)
Описывали это решение в качестве ознакомления в данной статье:
"Описывали это решение в качестве ознакомления в данной статье:"
Ну, так скажем, описали это не вы, а я. И вы просто скопировали из моей статьи от января 2020 (https://vc.ru/services/103768-kak-nakruchivayut-100-ballov-na-google-pagespeed). И сервис фейк как вы видите находится на loading.express домене.
И нет, вы просто не так поняли как это работает.
Мы говорили про скрипты аналитики. Если вам интересно как откладывать рекламные баннеры или скрипты, то про это был отдельный эфир: https://www.youtube.com/watch?v=_lBZf2BbJAY. Там тоже есть тайм коды.
Аналитику надо откладывать и размазывать скрипты по потоку.
Но закрывать и скрывать от Lighthouse лучше не надо.
Некоторые оптимизаторы PageSpeed этим пользуются, но мы предпочитаем зарефакторить JS.
Ну вы тоже не первопроходец в данном вопросе, вот статья от февраля 2019 (на год раньше вашей). https://tinyurl.com/y3te772q
Уверен, можно найти больше, но да, мы брали за основу вашу статью и показывали как раз как НЕ НАДО делать.
Если размазывать скрипты по потоку - разве это как-то сокращает скорость загрузки фактическую (объем кода тот же)? Просто скрипты выполняются с задержкой, но все файлы внешние все-равно будут загружены, возможно вы их "спрячете" от PageSpeed (или почему тогда он их пропустит если они остаются видимыми?), но фактически они останутся.
Возможно чуть меньше нагрузка на ЦП будет единовременная. Но, блин, серьезно? JS скриптики создают супер нагрузку на проц в 2021 году?
Ладно, вы не хотите отвечать на вопросы и обмениваться мнениями и знаниями, дискутировать, я это уже понял.
Ваша задача - продать скрипты по 500 рублей.
Поэтому дальнейшего диалога, я так понимаю не получится.
Удачи в поиске клиентов.
Спасибо за содержательную беседу.
"Возможно чуть меньше нагрузка на ЦП будет единовременная. Но, блин, серьезно? JS скриптики создают супер нагрузку на проц в 2021 году?"
Это шикарный вопрос. И если вы так удивляетесь, то вы даже не представляете НАСКОЛЬКО сильная нагрузка может быть от 53 слайдеров слик на странице сайта.
При чем тут 53 слайдера на странице? Какой одаренный на голову делает страницу такой длинны и с таким количеством слайдеров?
К нам не приходят простые сайты.
53 слайдера это из вчерашнего ускоренного сайта случай.
А насчет одаренного — их 99% на рынке, сидят и "верстают" из "сверстанного" шаблона...
Сбросьте ссылочку (в ЛС если это не публичная информация), просто интересно посмотреть конфигурацию страницы при которой нужны 53 слайдера.
Да, клиенты это не публичная инфа.
Выслал в личку.