Missed the action at this year's Chrome Dev Summit? Catch up with our playlist on YouTube. Watch now.

Правила и рекомендации PageSpeed

Правила PageSpeed Insights: на что обращать внимание при оптимизации процесса визуализации и почему.

Устраните файлы JavaScript и CSS, задерживающие загрузку

Чтобы браузер мог быстро вывести страницу на экран, минимизируйте число первоочередных ресурсов и байтов, а также сократите продолжительность обработки. Если возможно, удалите некоторые ресурсы.

Оптимизируйте JavaScript

Вашему скрипту не присвоен параметр async? Вы не пользуетесь специальным снипетом JavaScript? Значит, ваш код замедляет загрузку страницы. Обнаружив скрипт, браузер начинает формировать модель CSSOM. Создание модели DOM приостанавливается, и возникает задержка.

Отдавайте предпочтение асинхронным скриптам

Асинхронные скрипты не блокируют работу анализатора, поскольку не требуют от браузера создания модели CSSOM. Кроме того, если скрипт можно сделать асинхронным, значит, он не играет роли для первоочередной визуализации. Попробуйте загрузить его после визуализации.

Отложите анализ JavaScript

Если первоочередная визуализация возможна без скрипта, отложите его запуск. Так вы уменьшите нагрузку, с которой должен справиться браузер для вывода страницы на экран.

Избегайте долговыполняемого кода JavaScript

Поскольку такой код задерживает создание DOM и CSSOM, а также визуализацию страницы, выполнение всех скриптов, не критичных для первоочередной визуализации, нужно отложить. Если долговыполняемый код все-таки необходим, разделите его на несколько этапов, чтобы между их обработкой браузер мог продолжить визуализацию.

Оптимизируйте обработку CSS

С помощью CSS браузер строит модель визуализации. Кроме того, модель CSSOM необходима для выполнения JavaScript, поэтому скрипт блокирует анализатор и ждет завершения обработки CSS. Чтобы не задерживать загрузку, присвойте второстепенным CSS-файлам (которые нужны для печати, вывода страницы на большой экран и т. п.) соответствующий параметр media. Минимизируйте количество первоочередных CSS-файлов и время их загрузки.

Размещайте CSS в начале HTML-документа

Все CSS-файлы необходимо размещать как можно выше в HTML-документе, чтобы браузер мог быстрее обнаружить тег и скачать файлы.

Избегайте правила @import

Избегайте правила @import, которое позволяет копировать стили из других CSS-файлов. Оно увеличивает число соединений с сервером, поскольку файл, на который вы ссылаетесь, тоже нужно скачать и проанализировать.

Встраивайте CSS в HTML-разметку

Иногда процесс визуализации можно оптимизировать, поместив код CSS в HTML-документ. Таким образом вы можете сократить число соединений с сервером и даже свести процесс визуализации к обработке одного файла - HTML-документа.