@wolfalone

Доброго времени суток уважаемые!

Недавно задался себе вопросом: как оптимизировать страницу, в соответствии со всеми рекомендациями Google Page Speed?

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

Основным непонятным для меня моментом является рекомендация убрать из заголовочный части сайта ссылки на CSS и JS. И если решений с JS'ом я вижу несколько, например добавить к скриптам тег асинхронной загрузки (из-за которого кстати то и дело наровит отвалиться то слайдер, то ещё что-нибудь) или просто вытащить скрипты перед </body>, то что делать CSS-файлами - я решительно не понимаю.

Следуя рекомендация гугла, я вставил в тег <style> стили для заголовочной части сайта, перенеся все остальные CSS-файлы в конец страницы... - Google - рад, валидатор - ругается матом.

Вернул обратно файлы CSS (в заголовок страницы) - валидатор - радуется, а Google опять не доволен, что файлы слишком большие...

Можно ли как-то добиться того, что бы страница и Google'у нравилась и соответствовала стандартам? Или для этого придётся отказаться от "больших файлов CSS"?

Методом "тыка" обнаружил, что Google Page Speed ругается буквально на всё, на что можно ругаться, в т.ч. на свои собственные шрифты (даже те, которые в сервисе Google Fonts отмечены "зелёным"), CSS-файлы Bootsparap'a и многое другое...

0

@Fedor92

Можно... Просто не слушайте советы гугла и не теряёте своего времени...

0

@wolfalone

Fedor92, благодарю за ответ! Это конечно оптимальный вариант, но мне не понятен всё-таки один момент (наверное в виду скудного собственного опыта)...

Момент следующий:
1. Я не могу понять, зачем показывать пользователю "размазанный" контент, и как это "ускоряет" загрузку страницы? *при условии, что CSS грузится после загрузки основного HTML-кода
2. Если асинхронная или отложенная загрузка CSS действительно так важна, почему авторы стандартов (HTML5) не добавили такую возможность для файлов CSS, при этом добавив её для файлов JS?

P.S. Всё же не могу представить себе картину, когда пользователь вместо "белой" страницы видит "разорванную" вёрстку, т.к. CSS файл оснащён "отложенной" загрузкой... Если всё действительно настолько плохо (CSS'ы занимают сотники и тысячи килобайт) - по моему, разумнее было бы сделать какую-нибудь заставку, типа "Подождите, идёт загрузка тонн дерьма в Ваш телефон...", чем так уродовать код и стандарты...

Добавлено через 13 минут
Ещё более не ясным для меня остаётся вот что:
Если CSS вынесен в отдельный файл, сколько бы кода там не было, - он может кэшироваться браузером. При этом, если мы будем вставлять один и тот же код CSS в тело страницы, - это значительно увеличит объём каждой отдельной страницы... о какой при этом оптимизации загрузки вообще может идти речь?

Другой исход: предположим у нас есть слайдер... Скрипты грузятся либо в конце, либо асинхронно...
Результат 1: мы видим "разорванный" слайдер размотанный по странице, т.к. JS-код, который делает из этого набора картинок слайдер - ещё не подгрузился...
Результат 2: Мы скрываем блок со слайдером (с картинками) до полной загрузки и инициализации слайдера... и тут пользователь, с медленным интернет-соединением, заходит на наш сайт, читает "разорванный" и "размазанный по экрану" контент, который больше напоминает нечто непристойное, нежели грамотно спроектированный сайт и... (барабанная дробь) тут наконец-то, внезапно подгрузился слайдер! Который к слову сказать, сдвинул весь остальной контент и занял достойное место в половину экрана. При этом, пользователь возможно уже потянул свои ручонки нажать на какую-то ссылку, вместо которой вылез этот самый злосчастный слайдер (сдвинув блок ссылок выше или ниже) и пользователь угодил прямо по нему... попав при этом совсем не туда, куда собирался... (не на ту страницу)

0

@Fedor92

Мне кажется всё логично... Сначала формируется начальный макет сайта, то есть его "скелет"(осуществляется разметка страницы и определяется расположение блоков)... На следующем этапе к html("скелету страницы и блокам") применяются стили и оформление... Это как старение человека детство, отрочество, старость(допустим)... Не может же человек пропустить жизненный этап: сразу из младенца превратиться в старика... Так и в загрузке сайта всё последовательно...

Собственно, а какой в этом смысл? Что такое по сути css-файл - это текстовый файл не содержащего ни управляющих команд ни запросов, который подгружается в порядке своей очереди... Кто заинтересован в том, чтобы Вы сразу увидели перед собой красивый сайт? Да никто... Выкупайте трафик в районе 25Мб и все проблемы уйдут... ИМХО начальный вид сайтов меньше всего волнует W3C - консорциум... Нет трафика ставьте заглушки - сейчас много есть интересных, если любите эстетизм... Совсем недавно видел одно "произведение искусства", пока сайт подгружается на главной странице висит оповещение "Загрузка сайта " с счётчиком... Только сам опробовать не успел, но думаю ещё успею...

0

@vovandr

Недавно кстати по гуглу лэндинг оптимизировал smilevending.ru делается все просто и там все описано как

0

@wolfalone

Я почитал описания... Дело в том, что, если делать "как там написано" - валидатор ругается благим матом... А вариант "Засунуть все CSS прямо в страницу" - расходится с моим личным понятием о здравом смысле... Отсуда собственно и вопросы.

Добавлено через 6 минут
Ещё один момент, который противоречит пониманию данного вопроса гуглом, выдержики из него:
Оригинал: http://webo.in/articles/habrah... practices/ (пункт 5).

Я конечно не умаляю достоинств гугла... Но что-то всё-таки тут странно, как минимум. Не может быть, что бы разработчиком стандартов HTML5/CSS и пр. подобных было глубоко фиолетово на то, как там что у пользователя загружается...

Логичный вывод, я так понимаю один:
"Следуй рекомендациям всех и сразу, пихай все CSS в каждую страницу! Тем самым сокращая количество запросов к серверу HTTP" (и увеличивая попутно объём каждой страницы на N-килобайт).

Добавлено через 1 минуту
P.S.

Долой!

0

@vovandr

В head помещaть надо не все стили. Есть такое понятие как critical path. В двух словах это те стили, которые необходимы для визуального представления страницы в момент ее загрузки...чтобы не делать запрос на сервер, часть стилей помещается в head. А остальные подгружаются уже потом. Таким образом пользователю стилизованная страница показывается намного быстрее. Вообще читайте на google, а не сайтик там какой-то.

1

@wolfalone

Вот так выглядит процедура следования рекомендациям от Google... Именно по этой причине меня мучает вопрос: можно ли как-то сохранить валидность кода, и при этом, соблюдать рекомендации Google'a?

Яндекс например, подключает в шапке какой-то CSS-скрипт, и гугл его "ест" нормально. При этом, мой 5-7Кб CSS-файл (подключенный в шапке) - ему очень не нравится...

Миниатюры

 

0

@vovandr

Лично я использовал валидатор, когда только начинал версткой заниматься, давно это было. Сейчас же мне важно чтобы сайт быстро грузился и хорошо выглядел в браузерах по тз. Попробуйте перекинуть линк перед закрывающим тегом body, не уверен конечно, что поможет. А еще лучше, гоняйтесь не за валидатором, а за скоростью. Еще раз повторю, что не все стили наверх надо выносить.

0