Оптимизация кода (HTML, CSS, JS)

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

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

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

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

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

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

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

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

0

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

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

0

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

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

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

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

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

0

Сообщение от wolfalone Я не могу понять, зачем показывать пользователю "размазанный" контент, и как это "ускоряет" загрузку страницы? *при условии, что CSS грузится после загрузки основного HTML-кода

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

Сообщение от wolfalone Если асинхронная или отложенная загрузка CSS действительно так важна, почему авторы стандартов (HTML5) не добавили такую возможность для файлов CSS, при этом добавив её для файлов JS?

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

0

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

0

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

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

Добавлено через 6 минут
Ещё один момент, который противоречит пониманию данного вопроса гуглом, выдержики из него:

Исследуя производительность в Yahoo!, мы пришли к выводу, что помещение CSS в HEAD страницы ускоряет ее загрузку, т.к. позволяет отрендерить ее постепенно.

Размещение CSS в конце страницы не позволяет начать постепенный рендеринг многим браузерам, в числе которых Internet Explorer. Браузер не начинает рендерить страницу, чтобы не пришлось перерисовывать элементы, у которых во время загрузки изменится стиль. Firefox начинает сразу отрисовывать страницу, в процессе загрузки, возможно, перерисовывая некоторые элементы, но это является причиной появления нестилизованного контента (FOUC — Flash Of Unstyled Content).

Оригинал: http://webo.in/articles/habrah... practices/ (пункт 5).

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

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

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

Долой!

0

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

1

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

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

Миниатюры

 

0

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

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

0