Как правильно подключить стили и скрипты, чтоб они не загружали страницу?

Question

[JoyDumply]

Как правильно подключить стили и скрипты, чтоб они не загружали страницу?

PageSpeed выдаёт рекомендацию

Некоторые ресурсы препятствуют загрузке контента страницы. Рекомендуем настроить загрузку необходимых ресурсов JS/CSS в первую очередь и отложить загрузку остальных ресурсов.

Answer 1

[Immortal_pony]

В head положить только минимальный css, необходимый для корректного отображения каркаса страницы.
Перед закрывающим body подключить все необходимые стили и скрипты для первичной загрузки видимой части страницы.
Все остальное загружать/подключать асинхронно с помощью JS.
Если суммарный размер стилей и скриптов небольшой, то последним пунктом можно пренебречь и все необходимое закинуть перед закрывающим body.

Comments

[JoyDumply]

На Wordpress это реализовать приблизительно так?

wp_enqueue_style('my_style',get_stylesheet_directory_uri().'/custom/css/main.min.css' , ' ' , ' ' , true);

[Immortal_pony]

JoyDumply, в случае со стилями не совсем так. Вам необходимо сделать подключение в хуке get_footer.
Примерно так:

add_action("get_footer", function() { 
    wp_enqueue_style('my_style',get_stylesheet_directory_uri().'/custom/css/main.min.css');
});