Перейти к содержимому

Реферальная программа Мегаплана

Выбрать шаблон и создать сайт

Ваше мнение относительно оформления CSS

#1 ShowPrint

ShowPrint
  • Пользователь PRO
  • 1 701 сообщений
  • Репутация: 405
0

Отправлено 21 Апрель 2015 - 10:09

Хотелось бы узнать мнение форумчан по вот какому вопросу...

Последний тренд ПС (по крайней мере Гоши) в виде крена в сторону использования мобильных устройств вынудил заняться очередным ре-дизайном сайта. Понятно что хотелось бы сделать все по максимуму в угоду ПС, иначе незачем вообще было затеваться. Однако, как устроено все в жизни, "всем никогда не угодишь"... Решив этим ночером вопрос с подключением JS посредством их асинхронной загрузки подошло время стилевого оформления, а именно выбора варианта описания стилей. Вопросы эти возникли вследствие выдачи сервисом Гугля рекомендации "Удалите из верхней части страницы код JavaScript и CSS, блокирующий отображение" под штампом "исправьте обязательно"

Более 10 лет назад я, начиная применять стили при верстке, использовал style внутри тегов. По мере более плотного использования css они у меня сформировались в классы и "переехали" в head. При дальнейшем разрастании - в отдельный линкованный файл. По моим наблюдениям это наиболее типичный, для настоящего времени, вариант описания стилей. И всё бы было хорошо и удобно, если бы не это "исправьте обязательно"... Порывшись в нете нашел достаточно древнюю статью "Выносим CSS в пост-загрузку", вариант теоретически можно  было бы использовать, но как-то слишком уж громоздко и мудрено... Нашел еще более свежий и простой в реализации материал "HeadJS или полностью асинхронная загрузка сайта", но он опять-таки основан на использовании скрипта, который нежелательно линковать в шапке - есть у меня недоверие в мудрости Гугля, понимаю что он может просто смотреть на наличие синхронного подключения скрипта (даже одного единственного), не оценивая его размеры и пессимизировать за сам факт его присутствия.

Основой скептицизма является (имхо) отсутствие логики своевременности мобильного уклона - это было сильно раньше актуальным вопросом, на заре появления мозгофонов с интернетом низкой скорости. Тогда надо было это делать, и то не "карать", а "лоббировать" сайты с минимальной скоростью загрузки. В настоящее 4G-время с постоянно растущим WiFi покрытием вопрос скорости загрузки становится не таким острым.

Делая начальную верстку шаблона прописываю стили пока прямо в шапке и данную проверку прохожу "на ура"... Но! По мере верстки стилевой блок растет и пользоваться им становится неудобно. Понятно что его можно вынести в линкованный файл и работать с комфортом, вопрос не в этом

 

Хотелось бы услышать Ваше мнение относительно конечного варианта описания стилей на сайте: продолжать ли линковать, возвращать ли в head, или искать способы их асинхронной загрузки?

 

P.S. Сорри за долгое вступление...


 

 

  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#2 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 21 Апрель 2015 - 12:11

1) Если сайт небольшой с парой таблиц стилей и парой скриптов, я бы послал Гугла с его рекомендациями лесом.

2) Если сайт _реально_ большой, таблиц стилей много, и скриптов 2 вагона, то принимая во внимание, что проблема не только в размере загружаемого (хотя и это важно), но и в количестве файлов,

  а) сокращаем число css файлов (объединяем их в один - два) и сжимаем, убрав комментарии, пробелы, табуляторы, переносы и прочее.

  б) если стилей немного и/или скорость показа страницы в приоритете перед тем, что файлы стилей могут оказаться в кеше, (ведь в первый раз кеш у всех пуст) то можно записать стили в теге <style> прямо в HTML-коде.

  в) используем атрибут async для скриптов (HTML5)

  г) смотрим все ли скрипты используются всегда, например, если имеется несколько каруселей товаров только на главной, делаем подгрузку этих скриптов по условию, на главной – грузим скрипт, в противном случае – не грузим и т.п.


  • 0

#3 ShowPrint

ShowPrint
    Topic Starter
  • Пользователь PRO
  • 1 701 сообщений
  • Репутация: 405

Отправлено 21 Апрель 2015 - 14:41

Спасибо большое @yury, выдам еще порцию "многабукафф"...

 

1. Сайт небольшой - визитка, в настоящий момент ок.60 страниц, на момент полного заполнения семантического ядра предполагаю будет около 100, но все равно я не сторонник "посыла" Гугля, т.к. (образно) пара-тройка дополнительных позиций, это 5-6 доп.заказов в месяц, или 10-15 тыр дополнительной прибыли компании. С одной стороны немного, с другой - "курочка по зёрнышку" или "лишних денег не бывает"...

 

2. Принимая особенность того, что сайт я верстаю вручную (пусть - прошлый век, будем считать, что от этого я просто получаю удовольствие и опыт), обычно я поступаю следующим образом:

а) Изначально верстаю шаблон сайта (пустышку-тестовую страницу, без контента, плагинов и примочек). Со стилями работаю "как удобно": чтоб не метаться между файлами, как правило, внутри <style>

б) После окончания верстки шаблона переношу стили в файл style.css и линкую его отдельно, получая образно называемые "стили шаблона"

в) Перед закачкой файла style.css на сайт сжимаю его "компрессором" для уменьшения размера (он-то у меня и убирает комментарии, лишние пробелы, собирает в одну строку и т.д.). В сети их разных достаточное количество, для себя выбрал Robson CSS Compressor. Кстати, также практикую сжатие JS посредством Google Closure Compiler, даже несмотря на наличие gzip-сжатия.

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

 

Перманентно размышляя все-таки о целесообразности пусть не повиноваться, но прислушаться к Гуглю (см.п.1), нашел приемлемый для себя вариант асинхронной загрузки JS, не ограничиваясь использованием async, по двум причинам: стремления к кроссбраузерности (IE как "камень преткновения") и по причине использования document.write в самостоятельно написанных (прикладных) скриптах.

Доверстывая шаблон и понимая, что вопрос "как лучше поступить с CSS" остро встанет не сегодня, так завтра, с учетом своей "визитки" пока склоняюсь к следующему решению:

а) разобрать css по отдельным кучкам: основные (шаблонные) отдельно, дополнительные (используемые только на некоторых страницах) отдельно, плагины отдельно (каждый в своей кучке);

б) прогнать через компрессор, сжимая и превращая в однострочный вид

в) вписать все строчки в готовый шаблон с описаниями( /*оформление сайта*/, /*лайтбокс*/, /*галерея*/ и т.д.) и сохранить этот шаблон как болванку

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

 

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

 

сайт _реально_ большой, таблиц стилей много, и скриптов 2 вагона

 

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

 

To: @Sosnovskij. Учитывая то, что я являюсь твоим "должником", сам больше "читатель", чем "писатель", не веду собственного блога - хочу подкинуть тебе идею проработки материала на данную тему. Она может быть востребована в свете Гугляшных изменений, принести и трафик, и посетителей, и подписчиков...


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#4 Sosnovskij

Sosnovskij
  • Администратор
  • 3 883 сообщений
  • Репутация: 565

Отправлено 21 Апрель 2015 - 17:46

@ShowPrint, во внимании :)

P.S. Не считаю тебя своим "должником"  :)


  • 0

Не стесняйтесь ставить оценки темам :) Правила форума. Мой блог http://sosnovskij.ru/.



#5 ShowPrint

ShowPrint
    Topic Starter
  • Пользователь PRO
  • 1 701 сообщений
  • Репутация: 405

Отправлено 21 Апрель 2015 - 18:06

@Sosnovskij, записывай тему в блокнот для дальнейшей проработки, что-нибудь вроде "увеличение скорости загрузки сайта, как одно из направлений его оптимизации для мобильных устройств". Ссылки забирай в работу, я за эту ночь много блогов "перешерстил" по асинхронной загрузке, одну реализовал и проверил - работает. Непроверенную/нереализованную не пробовал, но написано доступным языком, даже для меня-ламмера, то есть можно реализовать даже начинающему блогеру. Изучая твой блог уверен, что освещено тобой все будет достойно!

 

P.S. Ну тогда забирай как идею поста, в знак благодарности  ;)


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#6 Sosnovskij

Sosnovskij
  • Администратор
  • 3 883 сообщений
  • Репутация: 565

Отправлено 22 Апрель 2015 - 12:20

@ShowPrint, нелегко будет отследить эффективность конкретно данных изменений :)


  • 0

Не стесняйтесь ставить оценки темам :) Правила форума. Мой блог http://sosnovskij.ru/.



#7 ShowPrint

ShowPrint
    Topic Starter
  • Пользователь PRO
  • 1 701 сообщений
  • Репутация: 405

Отправлено 22 Апрель 2015 - 13:21

@Sosnovskij, в математическом виде применительно к seo - да, нелегко. Но не все в этой жизни (к счастью) измеряется точными цифрами  ^_^

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

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

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

Мне кажется что ПС к скорости загрузки могут применять алгоритмы анализа устойчивости хостинга сайта, только в лайт-лайт режиме, то есть не то чтобы поощряют, скорее "не понижают". Одно из твоих любимых выражений - "не навредить"  ;)

А все преимущества скорее всего выражаются в виде ПФ. Хотя хз - не удивлюсь если Гугля в алгоритмы ранжирования добавит и скорость загрузки и наличие viewport. Яша же скорее будет оценивать улучшение ПФ...

 

В качестве квинтэссенции:

1) толк от скорости загрузки есть только при достойном наполнении сайта

2) эффективность скорее косвенная, аналог "накопительных бонусных карт", не в позизиях, а в ПФ

 

П.С. Не смотря на призрачность и косвенность эффективности, повозиться с этой темой (на мой взгляд) все-таки стоит...


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/



Оформление форума – IPBSkins.ru