X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Ваше мнение относительно оформления CSS
ShowPrint
ShowPrint
Topic Starter сообщение 21.4.2015, 11:09; Ответить: ShowPrint
Сообщение #1


Хотелось бы узнать мнение форумчан по вот какому вопросу...
Последний тренд ПС (по крайней мере Гоши) в виде крена в сторону использования мобильных устройств вынудил заняться очередным ре-дизайном сайта. Понятно что хотелось бы сделать все по максимуму в угоду ПС, иначе незачем вообще было затеваться. Однако, как устроено все в жизни, "всем никогда не угодишь"... Решив этим ночером вопрос с подключением JS посредством их асинхронной загрузки подошло время стилевого оформления, а именно выбора варианта описания стилей. Вопросы эти возникли вследствие выдачи сервисом Гугля рекомендации "Удалите из верхней части страницы код JavaScript и CSS, блокирующий отображение" под штампом "исправьте обязательно"
Более 10 лет назад я, начиная применять стили при верстке, использовал style внутри тегов. По мере более плотного использования css они у меня сформировались в классы и "переехали" в head. При дальнейшем разрастании - в отдельный линкованный файл. По моим наблюдениям это наиболее типичный, для настоящего времени, вариант описания стилей. И всё бы было хорошо и удобно, если бы не это "исправьте обязательно"... Порывшись в нете нашел достаточно древнюю статью "Выносим CSS в пост-загрузку", вариант теоретически можно  было бы использовать, но как-то слишком уж громоздко и мудрено... Нашел еще более свежий и простой в реализации материал "HeadJS или полностью асинхронная загрузка сайта", но он опять-таки основан на использовании скрипта, который нежелательно линковать в шапке - есть у меня недоверие в мудрости Гугля, понимаю что он может просто смотреть на наличие синхронного подключения скрипта (даже одного единственного), не оценивая его размеры и пессимизировать за сам факт его присутствия.
Основой скептицизма является (имхо) отсутствие логики своевременности мобильного уклона - это было сильно раньше актуальным вопросом, на заре появления мозгофонов с интернетом низкой скорости. Тогда надо было это делать, и то не "карать", а "лоббировать" сайты с минимальной скоростью загрузки. В настоящее 4G-время с постоянно растущим WiFi покрытием вопрос скорости загрузки становится не таким острым.
Делая начальную верстку шаблона прописываю стили пока прямо в шапке и данную проверку прохожу "на ура"... Но! По мере верстки стилевой блок растет и пользоваться им становится неудобно. Понятно что его можно вынести в линкованный файл и работать с комфортом, вопрос не в этом

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

P.S. Сорри за долгое вступление...
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 21.4.2015, 13:11; Ответить: yury_mw
Сообщение #2


1) Если сайт небольшой с парой таблиц стилей и парой скриптов, я бы послал Гугла с его рекомендациями лесом.
2) Если сайт _реально_ большой, таблиц стилей много, и скриптов 2 вагона, то принимая во внимание, что проблема не только в размере загружаемого (хотя и это важно), но и в количестве файлов,
  а) сокращаем число css файлов (объединяем их в один - два) и сжимаем, убрав комментарии, пробелы, табуляторы, переносы и прочее.
  б) если стилей немного и/или скорость показа страницы в приоритете перед тем, что файлы стилей могут оказаться в кеше, (ведь в первый раз кеш у всех пуст) то можно записать стили в теге <style> прямо в HTML-коде.
  в) используем атрибут async для скриптов (HTML5)
  г) смотрим все ли скрипты используются всегда, например, если имеется несколько каруселей товаров только на главной, делаем подгрузку этих скриптов по условию, на главной – грузим скрипт, в противном случае – не грузим и т.п.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ShowPrint
ShowPrint
Topic Starter сообщение 21.4.2015, 15:41; Ответить: ShowPrint
Сообщение #3


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

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 по отдельным кучкам: основные (шаблонные) отдельно, дополнительные (используемые только на некоторых страницах) отдельно, плагины отдельно (каждый в своей кучке);
б) прогнать через компрессор, сжимая и превращая в однострочный вид
в) вписать все строчки в готовый шаблон с описаниями( /*оформление сайта*/, /*лайтбокс*/, /*галерея*/ и т.д.) и сохранить этот шаблон как болванку
г) после переноса контента в новый дизайн (заполнении шаблона), просто удалять неиспользуемые стили, после чего записывать файл с нужным именем...

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

( @ 21.4.2015, 15:11) *
сайт _реально_ большой, таблиц стилей много, и скриптов 2 вагона


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

To: Sosnovskij. Учитывая то, что я являюсь твоим "должником", сам больше "читатель", чем "писатель", не веду собственного блога - хочу подкинуть тебе идею проработки материала на данную тему. Она может быть востребована в свете Гугляшных изменений, принести и трафик, и посетителей, и подписчиков...
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
sosnovskij
sosnovskij
сообщение 21.4.2015, 18:46; Ответить: sosnovskij
Сообщение #4


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


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ShowPrint
ShowPrint
Topic Starter сообщение 21.4.2015, 19:06; Ответить: ShowPrint
Сообщение #5


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

P.S. Ну тогда забирай как идею поста, в знак благодарности  ;)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
sosnovskij
sosnovskij
сообщение 22.4.2015, 13:20; Ответить: sosnovskij
Сообщение #6


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


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ShowPrint
ShowPrint
Topic Starter сообщение 22.4.2015, 14:21; Ответить: ShowPrint
Сообщение #7


Sosnovskij, в математическом виде применительно к seo - да, нелегко. Но не все в этой жизни (к счастью) измеряется точными цифрами  ^_^
Скорость загрузки сайта это косвенное улучшение ПФ, как одно из слагаемых. Образно говоря это не "преодоление", а "устранение" препятствий. Отследить конкретную эффективность тяжело, но она реальна. 
Если человек на планшете грузит страницу сайта 3 минуты, то вряд ли у него появиться большое желание перейти по ссылке на другую страницу, а может (что еще хуже) он вообще не дождется окончания загрузки страницы. Большое количество таких отказов - "удар по печени".
Смотрел тут тему "самый-самый", зашел на сайт Джим Керри - так он у меня на стац.компе с приличным инетом, не то что не "влетал", а скорее "медленно" вползал... Вчера же смотрел упомянутые в других темах красивые лендинги, где все плавает, вращается, раскрывается - а я давно такого не помню чтоб у меня на стационарном компе картинка кусками сверху-вниз отображалась. "Потом" - да (красиво), "сначала" - фу (гадко)...
Мне кажется что ПС к скорости загрузки могут применять алгоритмы анализа устойчивости хостинга сайта, только в лайт-лайт режиме, то есть не то чтобы поощряют, скорее "не понижают". Одно из твоих любимых выражений - "не навредить"  ;)
А все преимущества скорее всего выражаются в виде ПФ. Хотя хз - не удивлюсь если Гугля в алгоритмы ранжирования добавит и скорость загрузки и наличие viewport. Яша же скорее будет оценивать улучшение ПФ...

В качестве квинтэссенции:
1) толк от скорости загрузки есть только при достойном наполнении сайта
2) эффективность скорее косвенная, аналог "накопительных бонусных карт", не в позизиях, а в ПФ

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


Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Интересует мнение знатоков/старожил SEO! по проблеме дубля сайта
4 desart 1221 16.2.2024, 18:13
автор: genjnat
Открытая тема (нет новых ответов) Разработка/доработка сайтов Wordpress, HTML/CSS/JS
Вёрстка, перенос на WP, правки
9 malamut 3337 25.1.2024, 14:36
автор: malamut
Открытая тема (нет новых ответов) СОЗДАНИЕ : / САЙтЫ / ЛЕНДЫ / БОТЫ ТГ / ВАЙТЫ / КРЕО / СОФТЫ / ДИЗАЙН [PHP, JS, HTML/CSS] и другое
5 CULA 3295 19.12.2023, 18:55
автор: CULA
Открытая тема (нет новых ответов) Веб-разработка (HTML, CSS)
1 ViktoriaFE 6438 5.5.2021, 5:22
автор: bekett
Открытая тема (нет новых ответов) Разработка адаптивных вебсайтов. HTML/CSS/WordPress(сайты-визитки, лендинги, корпоративные сайты, интернет-магазины).
0 kozak199110 1652 3.3.2021, 12:22
автор: kozak199110


 



RSS Текстовая версия Сейчас: 29.3.2024, 17:18
Дизайн