Script evaluation что это
12 советов по улучшению производительности JavaScript-приложений
Производительность — это один из важнейших вопросов, встающих перед разработчиками веб-страниц или веб-приложений. Никто не будет рад «падающему» от чрезмерной нагрузки приложению, или странице, которая загружается целую вечность. Пользователи веб-сайтов не готовы слишком долго ждать их загрузки или приведения их страниц в рабочее состояние. Согласно данным Kissmetrics, 47% посетителей ожидают, что веб-сайт загрузится менее чем за 2 секунды. 40% посетителей покинут сайт в том случае, если его загрузка займёт более 3 секунд.
Автор материала, перевод которого мы сегодня публикуем, говорит, что, если учитывать вышеприведённые цифры, становится ясно, что производительность — это то, о чём всегда стоит помнить веб-разработчикам. Здесь будут приведены 12 рекомендаций по улучшению производительности JS-проектов.
1. Пользуйтесь кэширующими механизмами браузеров
Существует два основных способа кэширования данных средствами браузеров. Первый — использование JavaScript-API Cache, работа с которым осуществляется с помощью сервис-воркеров. Второй — это обычный HTTP-кэш.
Скрипты часто используются для организации доступа к определённым объектам. Если хранить ссылку на объект, к которому часто требуется доступ, в переменной, а также если использовать эту переменную в повторяющихся операциях, при выполнении которых требуется доступ к объекту, можно добиться улучшения производительности кода.
2. Оптимизируйте код в расчёте на те среды, в которых он будет выполняться
Для того чтобы адекватно оценивать улучшения, вносимые в программу, рекомендуется сформировать набор сред, в которых можно провести измерения.
На практике вам не удастся выполнять исследования производительности кода, например, во всех существующих версиях JS-движков, равно как и оптимизировать код в расчёте на все среды, в которых он может выполняться. Но надо отметить, что тестирование кода в какой-то одной среде — тоже не лучшая практика. Такой подход может дать искажённые результаты. Поэтому важно сформировать набор сред, в которых, вероятнее всего, будет выполняться код, и тестировать проекты в этих средах.
3. Избавляйтесь от неиспользуемого JS-кода
Благодаря удалению из проекта неиспользуемого кода улучшится не только время загрузки скриптов браузерами, но и время, необходимое браузерам на то, чтобы проанализировать и скомпилировать код. Для того чтобы избавиться от неиспользуемого кода стоит обратить внимание на особенности работы проекта. Так, если вы обнаружили некий функционал, с которым не работают пользователи — рассмотрите возможность убрать его из проекта, а заодно — и связанный с ним JS-код. В результате сайт будет загружаться быстрее, он будет быстрее подготавливаться к работе в браузере. Это благотворно скажется на тех впечатлениях, которые работа с сайтом вызовет у пользователей. Анализируя проект, учитывайте, что, например, некая библиотека, включённая в его состав, может быть включена в него по ошибке. Она вполне может реально в нём не использоваться. От неё стоит избавиться. То же самое касается использования неких зависимостей, которые реализуют то, что уже реализовано в современных браузерах. Как результат, переход на стандартные возможности браузеров, дублируемые этой зависимостью, поможет избавиться от ненужного кода.
4. Экономно расходуйте память
Стоит стремиться к тому, чтобы веб-проекты использовали бы лишь ту память, без которой они абсолютно не в состоянии обойтись. Дело в том, что разработчику нельзя заранее узнать о том, сколько памяти может быть доступно его приложению на некоем устройстве. Если приложение неоправданно использует большие объёмы памяти — это создаёт повышенную нагрузку на механизмы управления памятью браузерного JS-движка. В частности, это касается сборщика мусора. Частые вызовы сборщика мусора приводят к замедлению работы программ. Это негативно влияет на удобство работы с проектом.
5. Используйте механизмы отложенной загрузки для второстепенных скриптов
Пользователи хотят, чтобы веб-страницы загружались бы как можно быстрее. Но вряд ли для начального отображения страницы нужен абсолютно весь JS-код проекта. Если пользователю, чтобы задействовать некий код, нужно выполнить какое-то действие (например, щёлкнуть по некоему элементу или перейти на какую-нибудь вкладку в приложении), то загрузку этого кода можно отложить, выполнив её после первоначальной загрузки страницы и самых важных ресурсов.
При таком подходе можно избежать загрузки и компилирования браузером большого объёма JS-кода в самом начале работы, то есть — избежать замедления вывода страницы, вызванного необходимостью выполнения этих операций. После того, как завершится загрузка всего самого важного, можно начать загружать дополнительный код. В результате, когда этот код понадобится пользователю, он уже будет ему доступен. В соответствии с моделью RAIL Google рекомендует выполнять сеансы отложенной загрузки скриптов длительностью порядка 50 мс. При таком подходе операции по загрузке кода не повлияют на взаимодействие пользователя со страницей.
6. Избегайте утечек памяти
Если в вашем приложении случилась утечка памяти, то это выразится в том, что загруженная страница будет запрашивать у браузера всё больше и больше памяти. В результате потребление памяти этой страницей может достичь такого уровня, что это плохо повлияет на производительность всей системы. Вероятно, вы и сами сталкивались с подобной проблемой (и вам это, наверняка, не понравилось). Вполне возможно, что страница, на которой имелась утечка памяти, содержала некое средство просмотра изображений — вроде слайдера или «карусели».
В инструментах разработчика Chrome можно проанализировать сайт на предмет утечек памяти. Делается это путём исследования показателей средствами вкладки Performance. Обычно утечки памяти исходят из-за фрагментов DOM, удалённых со страницы, но привязанным к каким-то переменным. Это не позволяет сборщику мусора очистить память, занимаемую данными ненужными фрагментами DOM.
7. Если вам нужно выполнить некие тяжёлые вычисления — используйте веб-воркеры
Из материалов ресурса MDN можно узнать о том, что веб-воркеры позволяют запускать код в фоновом потоке, отделённом от главного потока веб-приложения. Преимущество такого подхода заключается в том, что тяжёлые вычисления могут быть выполнены в отдельном потоке. Это позволяет главному потоку (обычно ответственному за обеспечение работы пользовательского интерфейса) выполняться без блокировок и замедлений.
Веб-воркеры позволяют выполнять вычисления, интенсивно использующие процессор, и при этом не блокировать поток пользовательского интерфейса. Эта технология позволяет создавать новые потоки и давать им задания, что благотворно сказывается на производительности приложения. При таком подходе задачи, на выполнение которых требуется много времени, не блокируют выполнение других задач. При выполнении подобных задач в главном потоке выполнение других задач блокируется.
8. Если вы обращаетесь к элементу DOM несколько раз — сохраните ссылку на него в переменной
9. Стремитесь объявлять переменные в той же области видимости, в которой они будут использоваться
JavaScript, при попытке доступа к переменной, сначала ищет её в локальной области видимости. Если её там не оказывается — поиск продолжается в областях видимости, в которую вложена локальная область видимости. Так происходит до тех пор, пока проверке не подвергнутся глобальные переменные. Сохранение переменных в локальных областях видимости ускоряет доступ к ним.
10. Старайтесь не использовать глобальные переменные
Глобальные переменные существуют в течение всего времени работы скрипта. Локальные же переменные уничтожаются при уничтожении локальной области видимости. Поэтому глобальными переменными стоит пользоваться лишь тогда, когда это действительно необходимо.
11. Применяйте в JavaScript оптимизации кода, которые вы применяли бы и к программам, написанным на других языках
12. Используйте инструменты для исследования производительности приложений
Для исследования различных аспектов веб-проектов можно порекомендовать инструмент Lighthouse. Он выставляет приложению оценки по следующим показателям: Performance, Progressive Web App, Accessibility, Best Practices, SEO. Lighthouse не только выставляет оценки, но и даёт рекомендации по улучшению проекта. Ещё одно средство для анализа производительности, Google PageSpeed, создано для того, чтобы помочь разработчикам исследовать свои сайты и увидеть направления их возможного улучшения.
И Lighthouse, и PageSpeed — инструменты не идеальные, но их использование помогает увидеть проблемы, которые, на первый взгляд, могут оказаться незаметными.
В меню Chrome можно найти команду, открывающую диспетчер задач. Там выводятся сведения о системных ресурсах, используемых открытыми вкладками браузера. Более подробные сведения о том, что происходит на странице, можно получить, открыв вкладку Performance инструментов разработчика Chrome (подобные инструменты есть и в других браузерах). Эта вкладка позволяет анализировать множество показателей, касающихся производительности сайта.
Вкладка Performance в инструментах разработчика Chrome
В ходе сбора сведений о производительности страниц средствами Chrome можно настраивать доступные страницам процессорные и сетевые ресурсы, что позволяет выявлять и исправлять проблемы.
Анализ производительности страницы в Chrome
Для того чтобы глубже проанализировать веб-сайт — можно воспользоваться API Navigation Timing. Оно позволяет выполнять измерения различных показателей прямо в коде приложения.
Если вы разрабатываете на JavaScript серверные проекты с использованием Node.js, то вам, для глубокого анализа своих приложений, можно воспользоваться платформой NodeSource. Измерения, проводимые средствами этой платформы, оказывают незначительное воздействие на проект. В среде Node.js, как и в браузере, может возникать множество проблем — вроде тех же утечек памяти. Анализ проектов, основанных на Node.js, помогает выявлять и устранять проблемы с их производительностью.
Итоги
Важно поддерживать баланс между оптимизацией кода и его читабельностью. Код интерпретируется компьютером, но поддерживать его приходится людям. Поэтому код должен быть понятным не только компьютеру, но и человеку.
Кроме того, полезно помнить о том, что производительность стоит принимать в расчёт всегда, но она не должна быть важнее обеспечения безошибочной работы кода и реализации нужных пользователям возможностей приложений.
Уважаемые читатели! Как вы оптимизируете свои JS-проекты?
Как ускорить загрузку: оптимизируем код верхней части страницы
В статье:
Скорость загрузки сайта важна для удержания пользователей на ресурсе и для ранжирования в поисковиках. На скорость загрузки влияет и скорость интернета, и географическое положение, но веб-мастеры могут повлиять только на то, что связано с их ресурсом. Быстрее загружаются легкие страницы, а уменьшить вес сайта можно с помощью оптимизации кода, стилей и других элементов.
Когда пользователь переходит по ссылке, он оценивает сайт по тому, что видит в первые несколько секунд. Сперва загружается верхняя часть страницы, поэтому важно оптимизировать ее так, чтобы пользователь мог увидеть контент как можно быстрее. Так пользователь поймет, что остальной контент тоже скоро подгрузится, и сможет начать изучать страницу.
Узнать примерную скорость загрузки можно с помощью инструмента PageSpeed Insights от Google. Он оценивает скорость сайта и выводит советы по улучшению показателя.
Фрагменты проверки инструментом PageSpeed Insights
Для оценки Google определил девять правил, инструмент считает количество баллов по соответствиям.
Правила PageSpeed Insights:
Бесплатный инструмент «Проверка скорости сайта» от PR-CY.RU использует такие же правила для анализа скорости и учитывает показатель Google Core Vitals, который поисковик обещает ввести в 2021 году.
Фрагмент проверки
Инструмент оценивает загрузку на десктопе и мобильной версии, дает советы и пояснения по каждому пункту.
Если вам или вашему клиенту важна скорость загрузки сайта, учитывайте рекомендации инструмента и уделяйте внимание оптимизации верхней части страницы.
Как оптимизировать код верхней части страницы:
Ускорить загрузку части страницы, которая первой появляется при переходе на сайт, поможет оптимизация. Для этого можно как минимум удалить лишние символы и скрипты из верхней части кода, сжать код алгоритмами, настроить загрузку из кэша.
Удалить код JavaScript и CSS из верхней части страницы
В верхней части кода HTML-страницы используйте только контент, нужный для загрузки первого экрана, остальной перенесите вниз. Скрипты JS и CSS влияют на отклик страницы, но не нужны в той части, которая загружается первой. Они тормозят браузер, и получается, что пользователь не видит часть страницы, на которую они влияют, но уже ждет ее загрузку.
Исходный HTML-код страницы:
Файл стилей small.css будет подгружаться после загрузки первой страницы.
Использовать асинхронную загрузку Javascript и CSS
Браузер загружает код HTML построчно, но загрузка множества файлов Javascript может тормозить весь процесс. Для некоторых пользователей с медленным интернетом тормозить могут и файлы стилей. Чтобы браузер не останавливался на загрузке этих файлов, а продолжал подгружать остальной код, настраивают асинхронную загрузку Javascript и CSS.
Асинхронная загрузка позволит браузеру продолжать загружать основной код HTML и другие нужные ресурсы независимо от загрузки сторонних элементов.
Настроить асинхронную загрузку Javascript
Если на сайте есть видео со сторонних сервисов или другие внешние элементы, браузеру придется ждать загрузки всех элементов Javascript. Недоступное видео или другие проблемы с контентом могут вообще заблокировать загрузку сайта. Чтобы этого не произошло, используют Friendly iFrame или асинхронную загрузку.
Создайте пустой div блок в том месте, где нужно отобразить элемент:
Перейдите в конец страницы и вставьте скрипт для асинхронной загрузки перед :
Скрипт работает во всех современных браузерах.
Настроить асинхронную загрузку CSS
Быстрее показать страницу пользователю с медленным интернетом поможет асинхронная загрузка CSS. Рекомендуют применять ее только к вспомогательным CSS, иначе страница появится сначала вообще без стилей, а потом будет перерисовываться.
Настроить асинхронную загрузку CSS можно несколькими способами, к примеру, через «rel=preload»:
В некоторых версиях браузеров, к примеру, в Firefox 57, «preload» по умолчанию отключен, поэтому событие «onload» не сработает. Учитывайте это и догружайте данные скриптом:
Скрипт cssrelpreload.js by loadCSS на GitHub включает поддержку rel=preload для файлов CSS файлов. Он сработает, если в браузере нет родной поддержки «preload».
Настроить асинхронную загрузку с jQuery
Для своей работы веб-мастера используют библиотеки скриптов. По данным графика популярности библиотек в вакансиях, в 2017 году библиотека jQuery была на пике популярности. Ее использование выросло и в 2018, хоть в вакансиях стал чаще появляться React.
График популярности библиотек в вакансиях: слева 2017, справа 2018
Библиотека скриптов jQuery содержит набор готовых функций Javascript, которые помогают писать код.
Для работы подключите версию библиотеки, которая у вас поддерживается.
Настроить асинхронную загрузку Javascript с jQuery
Для настройки асинхронной загрузки Javascript с jQuery нужно добавить свойство «async»:
Это отключит последовательную загрузку, поэтому добавьте событие «onload»:
Функция «init» будет вызвана после загрузки jQuery.
Настроить асинхронную загрузку CSS с jQuery
jQuery подходит и для асинхронной загрузки CSS. Для того используйте код:
Он должен загружаться после остальных элементов страницы и jQuery. К примеру, использование с методом «ready»:
Ускорить получение первых байтов (TTFB)
TTFB (Time To First Byte) — это время, которое прошло с момента отправки запроса клиентом до получения им первого байта. Чем меньше показатель, тем быстрее браузер начинает загружать страницу.
Яндекс и Google не используют показатель TTFB в ранжировании, но если это время больше 200 мс, нужно заняться оптимизацией, чтобы пользователь не ждал начала загрузки.
Чем больше запросов выполняет браузер, тем дольше может быть загрузка. Проверить, сколько HTTP-запросов генерирует страница, можно на панели разработчика браузера. В Google Chrome и Mozilla Firefox для этого нужно вызвать на странице команду «Посмотреть код» (Ctrl + Shift + I), найти вкладку Network, перезагрузить страницу и отфильтровать по типу HTML (Doc). Появится список запросов со статусами ответов и временем загрузки.
Список запросов со статусами на главной странице Яндекс
Также данные о TTFB есть в Pagespeed и в Google Analytics: перейдите в «Поведение» — «Скорость загрузки сайта» — «Обзор», в блоке «Среднее время ответа сервера» увидите TTFB в секундах.
Если проходит слишком много времени до загрузки верхней части страницы, проверьте гипотезы:
Объединить CSS в один файл, объединить JavaScript
На каждый отдельный файл нужен отдельный HTTP запрос. Некоторым разработчикам удобнее хранить разные стили CSS или коды JavaScript в разных файлах, но если стилей много, браузеру придется делать много запросов, что тормозит загрузку. Для оптимизации кода рекомендуют объединять все стили CSS в один файл.
Файлы JavaScript тоже нужно объединять, чтобы уменьшить количество HTTP запросов при загрузке страницы. Способ объединения такой же, как в случае CSS-файлов.
Объединяем файлы JavaScript:
Использовать алгоритмы сжатия
Меньше объем файла — быстрее загрузка. Алгоритмы сжатия данных хоть и нагружают сервер для выполнения архивирования, но уменьшают объем данных. За счет этого браузер принимает более легкие файлы и справляется с ними быстрее.
Сейчас популярны алгоритмы gzip или brotli. Сервер сжимает данные перед отправкой тем способом, который браузер может декодировать, и отправляет ему архивы. Лучше использовать оба алгоритма: большинство браузеров поддерживаеет только gzip, но в ряде случаев сработает brotli, который тратит чуть больше ресурсов, но сжимает данные сильнее.
Можно найти плагины для CMS или включить сжатие вручную. Подробно о подключении алгоритмов сжатия для разных серверов в статье «Как уменьшить вес сайта и ускорить загрузку страниц: использовать сжатие gzip или brotli».
Минифицировать файлы CSS и JavaScript
Данные делают легче не только с помощью алгоритмов сжатия. Еще CSS, Javascript и HTML можно минифицировать — сократить методом удаления лишних символов, которые не влияют на работу кода, но занимают место. Удаляют пробелы, комментарии, переносы строк и табуляцию, в файлах стилей сокращают названия цветов.
После минификации файл будет сложнее читать, но зато он будет меньше весить и быстрее загружаться. Обычно сокращенную версию сохраняют отдельно с расширением «.min».
Минификация CSS
Минифицировать файлы CSS и JavaScript
Коды JavaScript тоже можно сократить — удалить лишние символы и сократить переменные. Чтобы не делать это вручную, для минификации есть автоматические сервисы — загружаешь в него код и скачиваешь версию в сокращении.
Подробнее о сервисах и особенностях минификации в статье «Как уменьшить вес сайта и ускорить загрузку страниц: использовать минификацию HTML, CSS и JS»
Использовать кэш браузера
Когда пользователь заходит на сайт в первый раз, его браузер загружает всю графику, все элементы JavaScript и CSS-файлы. Последующие загрузки страницы будут быстрее, если настроить кэширование в браузере пользователя. Тогда браузер сохранит файлы, и ему не придется загружать их с сервера повторно.
Кэшировать рекомендуют элементы, которые редко изменяются. Настройте подходящий период хранения данных в кэше, чтобы пользователь всегда видел актуальную версию страницы.
Для сервера Nginx в файле конфигурации настройте модуль Expires: перечислите форматы файлов для кэширования через с прямой слэш «|», укажите время хранения в секундах.
О других способах настройки кэширования есть в статье «Как использовать кэш браузера для ускорения: кэширование для Nginx и Apache, метод Cache-Control и кэширование по времени».
Загружать данные с помощью CDN
Еще один способ сократить время загрузки данных — использовать популярные CDN. CDN (Content Delivery Network) — это сетевая структура серверов в разных географических точках, которые хранят контент и быстро отдают его клиенту. CDN нужны, чтобы сайт открывался с одинаково быстрой скоростью для пользователей из разных географических точек. Они сокращают время загрузки, ускоряют рендеринг, защищают от DDoS, скраперов и ботов.
Система по времени отклика или количеству промежуточных хопов выбирает ближайший сервер, который отдаст контент конкретному пользователю — чем быстрее, тем лучше. Браузер сохранит в кэше файлы из библиотеки, поэтому загружать их повторно в следующих посещениях не понадобится.
Разработчики выбирают CDN в зависимости от потребностей бизнеса и бюджета. Hhostings.info собрали двадцать CDN с лучшими отзывами и составили топ CDN 2019.
Пользователь переходит на сайт и ожидает увидеть загрузку контента. Если на сайте ничего не появится, ждать он не будет, поэтому рекомендуем ускорить загрузку части страницы, которая появляется первой. Тогда пользователь сможет изучать контент, пока остальные элементы подгружаются.
Минимизация работы в основном потоке
Зачем нужно ускорить загрузку сайта — не всегда понятно даже веб-дизайнерам, создавшим красивую страницу, но совершенно не оптимизированную. Картинка и контент играют важную роль в продвижении. Но, для начал — их нужно увидеть. А чем дольше страница грузится, тем меньше шансов, что у пользователя хватит терпения дождаться возможности с ней взаимодействовать и оценить контент.
При ранжировании сайтов, вне зависимости от платного или бесплатного метода продвижения, поисковые системы на первое место ставят именно скорость загрузки. Google делает свои выводы на основании собственного инструмента PageSpeed Insights. Его результат определяется в оценке, а также аудитах, влияющих на скорость загрузки.
Если данные аудиты не исправить — сайт не окажется в «зелёной зоне», а следовательно — не будет для поисковой системы надёжным. Не надёжные сайты, по мнению Google, не стоит рекомендовать пользователям. По такому же алгоритму работает и Яндекс. Но, просто исправить ошибки обнаруженные PageSpeed Insights не достаточно. Более того, делать это слепо — совершенно не стоит. Так можно причинить собственному сайту ещё больше вреда.
Как работаем мы и что рекомендуем делать. Наша команда, получив сайт для оптимизации, проводит его тестирование с помощью целого ряда инструментов. Часть из них дублируют отдельные пункты, другие — изучают только конкретные показатели. Получив информацию из нескольких источников, наши специалисты сопоставляют её, детально изучают и выявляют слабые места. Затем, разрабатывается модель оптимизации, которая включает в себя отдельные шаги. В процессе работы проводится тестирование каждого этапа. После этого, мы отдаём сайт, который работает максимально быстро и корректно. Его индексация поисковыми системами, а следовательно и конверсия, существенно увеличивается. Заказчик получает полноценный инструмент маркетинга. Приблизительно похожую схему мы применяем и в процессе создания сайта с одной оговоркой — он уже пишется максимально оптимизированным.
Но, вернёмся к «нашим баранам», точнее — наиболее популярному сервису тестирования скорости PageSpeed Insights. После того, как он покажет оценку в процентах, где 100% – максимальный показатель к которому нужно стремиться, в нём отобразиться список успешных аудитов. По большому счёту — это рекомендации разработчиков Google, что нужно исправить на сайте. Среди них, зачастую, значится такой: «Минимизация работы в основном потоке».
Что такое основной поток и зачем работу в нём нужно минимизировать
Основной поток — это тот, который загружает и отображает страницу. А вот как это происходит и какими инструментами, зависит непосредственно от того, что на странице находится. JavaScript, CSS, изображения, шрифты, стили и прочие элементы влияют на работу. По умолчанию основной поток процесса визуализации обычно обрабатывает большую часть кода: он анализирует HTML и создает DOM, анализирует CSS и применяет указанные стили, а также анализирует, оценивает и выполняет JavaScript. Основной поток также обрабатывает пользовательские события. Таким образом, всякий раз, когда основной поток занят чем-то другим, страница может не реагировать на взаимодействие с пользователем.
Следовательно, чем больше нагрузить основной поток, тем дольше будет происходить загрузка и отображение страницы. А это как раз то, чего нужно избегать всеми возможными способами. Поэтому, работу в основном потоке требуется оптимизировать.
Как уменьшить нагрузку на основной поток
В процессе аудита работы основного потока, Lighthouse отмечает все страницы, загрузка которых длилась более 4 секунд. Они будут выведены в таблице с названием категории и точным временем длительности процесса до миллисекунды. И над ними точно необходимо хорошо поработать.
На работу основного поток влияет множество факторов и действий, которые требуется осуществить, чтобы пользователь получил возможность полноценно взаимодействовать с сайтом. Однако, самыми большими потребителями, на практике, являются JavaScript и CSS.
Как оптимизировать JavaScript
JavaScript является динамическим языком и он способен менять любые характеристики страниц. Именно с его помощью и происходит взаимодействие с пользователем, ведь он отвечает на их действия. Что необходимо знать о JavaScript и его специфике:
Первое, что нужно сделать — добавить в тег скрипта «async» этот ключ ставится непосредственно в HTML и сигнализирует браузеру, что JavaScript нужно выполнить позже, чем непосредственно загрузку DOM. Процессы будут происходить асинхронно и страница загрузится быстрее.
Действуют в данном случае и стандартные советы Google-разработчиков. Среди них — сократить коды, удалить неиспользуемые, использовать кэширование. Все они работают, но особенно к удалению кодов нужно подойти максимально ответственно. То, что они не используются на данной странице — вовсе не значит, что не требуются на других.
Как оптимизировать CSS
В процессе оптимизации обязательно нужно разделить main.css, сделав из него два файла. В первом из них будут стили, которые требуются сразу же после открытия страницы. Это, так сказать — обложка. В него нужно поместить логотип, заглавие и т.д. Во второй отправится всё остальное.
Ключевое слово «async», которое обеспечивает асинхронную загрузку в JavaScript, здесь не работает. Его аналогом является более сложный ключ. Поэтому, в теге link будет располагаться скрипт следующего содержания:
Именно он и обеспечит загрузку файлов CSS только после полной загрузки дерева DOM.
Это главные, но далеко не все ресурсы, которые влияют на работу основного потока. Помимо них, необходимо оптимизировать шрифты, изображения, GIF и задать им правильный, современный формат. В результате, используя целый набор инструментов, работа в основном потоке станет эффективной.