Оптимизация 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> по необходимости будет правильным решением.
Подводя итог, скажу, что свои усилия стоит сосредоточить на устранении блокировки загрузки, т.к. второстепенные меры оптимизации являются её составными частями.
вы каким инструментарием пользуетесь для оценки скорости своего сайта?
Омг. ) 9 секунд на что? )
Вот вам инструмент - https://www.webpagetest.org/
Если ваш сайт набирает Speed Index при тех или иных настройках более 1000, значит он тормозит и надо что-то делать.
Интересный инструмент. Сейчас попробую. Вот только незадача))): Google для определения скорости загрузки сайта пользуется своим упоротым PageSpeed Insights, и сайты оценивает по нему. Да и Яша от него тоже далеко не отходит...)
Вот тоже прикольный инструмент https://tools.pingdom.com/
этот сайт скорость не измеряет, не пользуйтесь им, цифры покажет красивые, но это будет абсолютной неправдой.
Как раз таки измеряет. Но надо смотреть не на цифры, которые сразу показывает, а разбор ниже. Кстати это пока единственный ресурс, который показывает долю того или иного кода в %. Он помогает разобраться в потоке и сколько было затрачено на каждый ресурс.
Также с вами соглашусь, что на вкус и цвет фломастеры все разные)
Ну ладно. Просто эти ребята в поддержке пишут, что их замеры работают не корректно.) Но вы как хотите. Замеряйте.