А вы знаете скорость загрузки вашего сайта с мобильных устройств? Самое время разобраться

[demimurych]

Мне вообще кажется, что оптимизация «под требования гугла» в абсолюте — это верстка всех сайтов целиком на AMP

это не так. Добиться результата 90%+ очень просто без АМП

Тот же google pagespeed рекомендует убрать все скрипты, стили и прочее в конец страницы, оставив только часть critical css в коде страницы вверху,

Это так же неправда. Pagespeed советует засунуть в первые 14 килобайт достаточно ресурсов для отображение верхней (ту что увидят первой) части страницы. Дальше вы вольны поступать как вам удобно. И это на мой взгляд правильно. Это может быть что угодно, как javascript так и css

тот же JS-код на jquery, написанный, например, в теле страницы, не выполнится до того момента, пока все библиотеки, сжатые в один файл не загрузятся, а это произойдет только в конце документа и, ожидаемо в консоли будет "$ is not a function".

Это вопрос компетентности. Эти проблемы легко разрешаются, от написания своей заглушки для $ которую помещают в первые 14 килобайт, до правильной организации работы со скриптами в целом.

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

Ресурсы что Вам предлагает pagespeed скорее рекомендация к тому КАК можно сделать. В большинстве случаев, если Вы понимаете как правильно заниматься подготовкой изображений к публикации в вебе, этот тест проходится без трудностей.

скачиванием скриптов аналитики, метрики и других, для включения в страницу со своего хоста, естественно, все это не работает как надо

Все это работает как надо, если сделано правильно.

[demimurych]

Повторюсь. Вас просят сделать так, чтобы в первые 14 килобайт вашего когда входило достаточно всего для отображения верхней части страницы. Это как html так и css и javascript. Это не значит что вся ваша страница должна поместиться в первые 14 килобайт. Это значит что критически важно чтобы контент который пользователь увидит первым вместился в этот блок и был показан как можно раньше.

Конечно может быть так, что в Вашей верхней части страницы будут элементы которым для полноценной работы нужен весь Jquery и пару плагинов к нему. И тут Вам как разработчику и Вашему дизайнеру нужно принять решение. Как быть и что делать. Что важнее — иметь страницу с максимальной скоростью загрузки для пользователя, а значит привести дизайн к описанным выше нормам. Или принести скорость загрузки в жертву сохранив задуманный функционал. Я отдаю предпочтение всегда в сторону скорости загрузки. И в большинстве случаев удается найти решение для того чтобы и волки были сыты и овцы целы.

О заглушке.
Заглушка соберет в себе все инлайн скрипты которые должны были бы выполнится при ready и будет ждать загрузки Jquery. Как только Jquery загрузится заглушка по очереди выполнит все ready скрипты которые она собрала. Это 15 строк кода.

[mihdan]

Заглушка соберет в себе все инлайн скрипты которые должны были бы выполнится при ready и будет ждать загрузки Jquery. Как только Jquery загрузится заглушка по очереди выполнит все ready скрипты которые она собрала. Это 15 строк кода

Поделитесь?

[BETEPAH]

В head

<script>(function(w,d,u){w.readyQ=[];w.bindReadyQ=[];function p(x,y){if(x=="ready"){w.bindReadyQ.push(y);}else{w.readyQ.push(x);}};var a={ready:p,bind:p};w.$=w.jQuery=function(f){if(f===d||f===u){return a}else{p(f)}}})(window,document)</script>

в body после подключения jQuery

<script>(function($,d){$.each(readyQ,function(i,f){$(f)});$.each(bindReadyQ,function(i,f){$(d).bind("ready",f)})})(jQuery,document)</script>

[Seoved]

В сервисе google pagespeed смог дожать до 100, но это главную страницу, а вот страницы второго уровня 80-95, пока не стал оптимизировать. Думаю вплотную заняться AMP. До сих пор огромное количество сайтов вообще не задумываются по этому поводу. Статистика важна. Стоит смотреть на конкурентов и увеличивать скорость. Спасибо!