Удалить из верхней части сайта JavaScript и CSS

Если Вы рассчитываете, что тут кто-то бесплатно напишет подробную инструкцию, то зря. Инструкции это трата времени. Время - деньги. Те кто этого еще не понимает, как правило, не могут предложить ничего полезного. В свое время я сталкивался с ситуацией, когда все инструкции по созданию в joomla красивой страницы 404, разбросанные по блогам типаайтишников (преимущественно, школоты и декретных мамаш), были кривыми (после их применения страница начинала отдавать код 200), но никто на это внимания не обращал. Все тупо копировали.

А с соблюдением требований Google в отношении JS и CSS все гораздо сложнее, как минимум, потому что у каждого шаблона свой набор файлов, т.е. заведомо невозможно создать инструкцию, которая подойдет для любого шаблона. Когда я решал эту задачу в joomla 1.5, оптимальным способом отключить дефолтные файлы системы, принудительно подключаемые ею при загрузке страниц, было использование функции unset. В результате получались громоздкие конструкции вида:

Но, не исключено, что в 3 версии появилось более удачное решение.

По поводу CSS скажу, что гуглу, в данном случае, не нравятся css-файлы, стили из которых не используются на странице. Переносить вниз стили уж точно не стоит, а вот не загружать ненужные файлы - ваше право. В данных рекомендациях есть очень много нюансов, например, если для каждой страницы грузить только нужные стили, то это либо долго ковырять бэкенд (нафиг никому не надо) и для каждой страницы выводить только необходимые стили, либо оставить всё как есть. Мне кажется, что лучше 1 раз загрузить и закешировать все стили, чем разбивать их на несколько файлов и постоянно грузить при сёрфинге по сайту.

Ещё как вариант грузить стили jQuery плагинов из самих плагинов посредством кода:

$('head').append('<link rel="stylesheet" type="text/css" href="/path/to/plugin/style.css">');

Так же можно и соответствующие скрипты грузить при необходимости, основной код html разгрузите:

$('head').append('<script href="/path/to/plugin/script.js"></script>');

Но всё это мелочи, хотя оптимизация ещё никому не повредила.

Обратите внимание, что гоша ругается на внешние файлы стилей и скриптов, дескать у них время жизни в кэше маленькое, а ничего, что там их же файлы аналитики болтаются с кэшем в 60 минут?

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

скрипты обернуть в onready, сделать асинхронную загрузку, css собрать в один файл, сделать min. версию, , удалить все комменты

Как-то прочитал интересную статью по предзагрузкам страниц/стилей/скриптов (правда, там в основном хром что-то могет), но может кому пригодится

http://frontender.info/html5-prefetch/

У меня все руки не доходят проверить насколько это эффективно.

Не знаю поможет ли это позициям, но если хоть на 0.2 секунды ускорит сайт - уже плюс.

Есть. Не понимаю почему никто о них не говорит. Почему тут все говорят не переносите css вниз мол поплывет страница. От части это так, но это ускорит загрузку самой html страницы. Все что от вас требуется это только написать критические стили инлайново и вставить их в head. Критические стили весят очень мало, но при загрузке страницы, ваши страница не разваливается за счет того что вы написали некоторые стили инлайново в самом html и пользователь уже может пользоватся сайтом не дожидаясь загрузки css, js и картинок.

Подробнее тут: клац

Там описано как можно быстро генерировать критические стили используя Grunt (в Gulp тоже самое). Но не обязательно делать что б в 1 экран были критические стили, это может быть просто стли для вашей колоночной разметки.

типа "заставь дурака гуглу молиться".

по хорошему: загружаем ВСЕ стили и скрипты в head, врубаем turbolinks/pjax и наслаждаемся скоростью загрузки. гугел аж кончает от наслождения (97/100), кстати...