Блог ☯

суббота, 10 декабря 2016 г.

Как облегчить страницу сайта и как улучшить юзабилити сайта

На примере этого блога давайте сделаем кейс: 
Как облегчить страницу сайта, ускорить загрузку и улучшить юзабилити сайта.
Ну вот, подумали вы, очередной нуб решил что он бог и высрал гайд. Да. Так и есть. 

Мем ваш сайт грузиться медленнее чем 100% сайтов в интернете

А надо чуть быстрее, чем это

Говорят, что ссылаться на pr-cy это зашквар.
Так что тест скорости можно сделать вот тут: http://www.host-tracker.com/

Там вас бомбанут с разных айпишников и получите среднее значение. 
Хотя Русскому сайту скорость загрузки из ЮАР как-то не особо важна

Зачем нужна высокая скорость сайта

Китайские читали, коих тут ровно ноль, очень страдают

У меня в среднем вышло 1151 ms / скорость 3.84 kB/s

Проверю всё таки и на pr-cy, на всякий:

Где можно проверить скорость загрузки блога pr-cy

0.66 секунд, быстрее чем 35% проверенных сайтов
Заметьте, даже если цифра есть на картинке, я всё ровно пишу её текстом. Никто не догадается почему я так делаю, но это осталось с моей прошлой работы. Развилась у меня паранойя, что любое вставленное видео или картинка могут в какой-то момент исчезнуть если там упадёт сервер или еще что случиться. А вот дубляж текстом это двойная защита. Короче...
Как так получается, что pr-cy сказал 0.66, а вот другой сайт, как-то с ним не особо солидарен, демонстрируя 1.1? Всё таки в 2 раза разница. Ну, по айпишнику из Москвы сайт грузанулся за 0.28 сек вообще. По другому аупишнику из Москвы 0.1 сек. Украина 0.27.

Короче кто читает - тем норм.
Но надо еще быстрее, карл. // Неверный юз устаревшего мема

Что есть быстрая и хорошая загрузка сайта
А демон его знает. google.com загружается за 0.22 сек и быстрее. Примерно так. 

Оценка pr-cy оптимизации сайта google.com 78%
Вот поэтому они и не очень. 

Зачем нужна быстрая загрузка сайта



Скорость загрузки страниц сайта это часть пресловутого юзабилити (удобство использования)

Если сайт загружается быстро, это удобно пользователям - читателям. Они могут быстро гулять по нему, смотреть больше инфы. Это еще более важно для тех, кто читает с мобильников, воруя чужой вайфай с плохим сигналом. 

Так-же, все вокруг говорят, что скорость загрузки сайта - это один за факторов его ранжирования в поисковых системах, как например авторитетность. Ну а мне, нубу, нужно учитывать вообще все факторы и работать по всем фронтам. 

Теперь, взглянем на этот блог и подумаем, что еще тут можно снести к хуям. Как говориться - хороший писатель умеет вычёркивать из своего текста, а хороший дизайнер умеет сносить что-то своё, плохое и не рабочее. К хуям. 

Хотя, если вы это читаете, то я уже скорее всего всё лишнее снёс, но я наделаю скринов с примерами того, что было полюбила слепила. Так-же, даже до написания этой статьи - я уже снёс много всего и оставил только самое на мой взгляд важное. 

Я за минимализм. Люди приходят сюда читать инфу. Я не хочу их отвлекать от этого занятия и уж тем более - отвлекать их тем, что им на 100% не будет нужно. Не им, не мне. 

Думаю, что любому понятно, зачем нужна быстрая загрузка сайта. Если не понятно, то ответьте себе на другой вопрос: какая польза от медленной загрузки сайта? 

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

Так-же, есть и другой элемент - сиськи ссылки. Чем меньше у вас на сайте ссылок, тем больше вес каждой из них. Это важно если вы будите продавать ссылки, да и это просто важно.

От лишних ссылок пользы ноль.


Как облегчить страницу сайта


  • 5 Постов на главную
  • Уберите всё лишнее
  • Не дублируйте элементы
  • Мобильники, удобство
  • Только часть поста в ленту, остальное: под катом / спойлером / читать далее 
  • Пузомерки, трафик и реклама
  • Лого, бренд и картинки
  • Страницы
Первое что я сделал и уже давно, это включил показ только 5 постов на главной
Дальше, нужно нажать и перейти на следующую страницу. Главная тут - это как-бы лента. 

Ушербный дизайн


Как я самокритичен xD

Это не супер удобно пользователям, что нужно туда нажимать, однако, если делать больше постов на страницу, будет еще хуже. И то, что я там написал "а вот это - нахуй". Почему?

Ну потому что вот, уже ж висит. Захотят - поделятся. Как добавить такое

Как добавить кнопки шарить в блог

И вообще, не будет делиться вашими высерами никто. Забудьте. 

Где я написал "что?" и где синяя панда - типа автор. Опять-же - нахуй. 
Ибо уже есть автор: "posted by Econ Dude".

Первое правило - не надо ничего дублировать


Бритва Оккама (хотя, на самом деле - это не верное толкование смысла).

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

Кстати, проверьте как сайт читается с планшетов и мобильников. Заебись? 
Сами зайдите на ваш сайт с мобильника и почитайте, а не смотрите картинку. 

Юзабилити для мобильных устройств

Когда мы говорим про читаемость с мобильников, нужен шрифт 13-14, как минимум. 
И нужно не забывать делать отступления побольше, между абзацами. 

Дальше, в какой-то момент я понял, что можно делать такую штуку как "читать далее"




Тогда в ленте не будут показывать весь пост, а будут показывать лишь его часть. 

Таким образом люди смогут решать что читать полностью, а что нет. Листать будет проще и удобнее. Да и вообще, когда люди жмут на читать далее, это трафик на конкретную статью.

Кстати, не перебарщивайте с жирным шрифтом. я частенько перебарщиваю. Это прокачает читабельность и поможет улучшить юзабилити сайта. По работе я привык писать простыни текста. Зная, что босс их не читает, я всегда подчёркивал важные тезисы жирным, что-бы людям было легче читать по диагонали. Я подчеркиваю жирным важные тезисы, а не ключевые слова. (Хотя и ключевые слова тоже, иногда). 

Таким образом, добавив jump break, вы не только сделайте ваш блог или что там у вас, удобнее, а так-же - это сильно облегчит главную. 

Пример как сделать спойлер в блогере


Давайте нырять глубже. 

Рассмотрим вот этот "замечательный" виджет - хуиджет. 

Картинка виджета в блоггере

Вроде прикольно. Какие-то тёлочки (ни одной не знаю, и понятия не имею кто, как и зачем меня добавил. Плюс, там вообще все из какой-то Колумбии и прочих чудесных стран). 

Однако, вы-же понимаете что всё это, каждая их ава - это ссылки. 
А что вы уже поняли про ссылки? 

Слава великому Одину, блоггер позволяет настраивать этот виджет, а то бы я его вообще снёс.

Как добавить виджет в блогере

Вот так, с лёгкой руки, -12 ссылок на главной. Мне так-то визуально это нравиться, само по себе, плюс ленту в гугл+ читать мою тоже удобно, да и нужно-же показать что таки 31 человек-то уже добавил, читают. Но зачем показывать 20 человек картинками, когда можно показывать 8? Да и даже 4

Мелкий момент. Надпись там была (как и все названия виджетов) - секта. А нахер, собственно говоря, там эта надпись? Ну да, приколюха вроде. Типа - вступай в секту. Тут я убирать не буду, но вот например так:

плохой дизайн

Говоря над формой поиска что это, мол, поиск

Делать не надо. Ибо, я думаю, любому понятно что это поиск и так. Если какому-то идиоту не понятно без пояснений, то зачем вам такие посетители сайта? Хотя, может быть вы что-то как раз таргетированое на идиотов продаёте. Тогда да. Делайте убогий дизайн какой-то. 

Может даже в плюс пойдёт. 

Дальше я уже если честно и не знаю. Я уже всё что можно у себя снёс лишнего. 

То, что осталось, жалко. Или вот например - есть архив постов. Его можно было развернуть и там было-бы +50 ссылок. Это-же жесть. Пусть будет (удобно если кто тут первый раз и хочет что-то старое почитать), но будет в минимальном исполнении. 

Лучшее за неделю у меня 10 статей и на самом верху, так-как я думаю, что на инфо сайте типа моего, эта штука - важнейшая. Видно что сайт активен, видно что еще можно почитать и что читают другие. Мне и для себя туда интересно смотреть. Можно конечно сделать топ 5 там, но я хочу людям дать больше выбора. 

Пузомерки, трафик и реклама

Говорю я про эти вещи

повышаем юзабилити


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

По сути дела рекламу мне вообще нет смысла сюда вешать. Но я повесил 2 блока сейчас, набок и вниз. Я думаю, они вообще не отвлекают. А мне интересно посмотреть цену за показы / клики, шанс клика и т.п. Вешать наверх сайта и в видные места (между постами и т.п.) я еще очень долго не буду, если буду вообще. Доходы там, даже у гигантских сайтов, небольшие. 
В моём стиле, в плане монетизации, мне было-бы куда круче брать деньги за упоминания в статье, заказные статьи и т.п. Но над этим я буду думать только с 250-500 хостов в день, что будет еще очень не скоро. 
Для танкистов: если вы получаете $1 в месяц загадив ваш сайт рекламой и повесив её во все места, подумайте еще раз. Убрав рекламу вы можете монетизировать всё это как-то более интересно, да и вообще, может так получиться что 1 баннер будет круче чем 5

Просто потому, что на сайте с одним баннером людям приятнее сидеть. 

Многие начинающие, как я вижу, паряться за монетизацию. 
Мол: "хочу начать зарабатывать в интернете как можно быстрее! Пусть $1 в месяц, но хочу быстрее!" 

Так вот, делайте что хотите, но просто подумайте: что вам этот 1 бакс когда без баннеров, через 6-12 месяцев, вы сможете получать с сайта в 10-100+ раз больше? И без баннеров у вас будет чуть быстрее рост. 

Особенно меня бесят сайты где что-то всплывает (даже со всеми блоками и даже когда всплывает: "подпишись на рассылку") и что-то агрессивно тебя просят сделать. Раньше это всё бесило. Потом я понял, что люди просто рубят с трафика деньги как могут и как умеют. 

В подобных случаях люди, скорее всего, купили этот сайт с трафом и монетизирует его. 
It's just business, nothing personal. Это нужно как минимум понимать. 
Но это не отменяет факта, что на таких сайтах долго сидеть невозможно. 
Немного не в тему, но я думаю кого-то тоже интересует вопрос - давать ли внешние ссылки. Это такой себе конандрум (нихуя я слово зарядил, 900 результатов в выдаче. Чо, правда не знаете?). Так вот, с точки зрения seo вроде как давать такие ссылки не надо. А вот с человеческой точки зрения, я думаю, почему нет? Когда пишется научная работа, что по факту и есть собрание работ других реально умных и толковых людей в одну кучу, дать миллион внешних ссылок - это круто. Пусть по сео это и в минус, но если человек от вас узнал что-то хорошее, пусть и где-то вне вашего сайта, то он к вам потом еще раз придёт. Разве нет? (нет)


Касаетельно пузомерок


У меня стоит несколько только потому, что это требование тех сервисов что-бы я это поставил, дабы они дали беклинки. Как базовые действия для тиц 10 это надо.

Рамблер вот только что-то глючит, подонок. Однако, в рейтинге я есть.

Повышение тиц сайта
СМИ, а как-же... Вот что бывает, когда вы пишите на 100 тем сразу

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

Лого, бренд и картинки


Можно сделать вот так:

Как сделать блог


А можно сделать вот так:

Как сделать логотип блога

Проблема в блоггере в том, что и то, и другое вместе, если вы криворук, выходит вот так:

Картинка бага

Хуйня какая-то 

Но можно чуток заморочиться и сделать более или менее

Кейс - дизайн блога


Просто с лого, когда ссылаются на блог, там в ссылке картинка будет. Визуально прикольно. 

Еще хочу сказать, что если вы лого кинете вместе заголовка и описания, то вы seo себе изгадите. Без H1 это только если вы Навальный можно

Теперь, визуальный момент. Мне уже не один человек сказал что эти мои дцп-шные разноцветные квадраты лого - это херня. Да и когда я с ними делал баннер, выяснилось что кликабельность у лого 0.017% (CTR). Кстати, отличный способ протестировать вашу картинку на поцана - сделайте баннер с ней и посмотрите потом CTR :))) 

Но я уже так привязался к этим квадратам, они идут почти с самых истоков. 
Я-же даже делал видео как я и их рисую. Охуительный контент я раньше делал. 



Там первые шутки про Рамзана, первые попытки Пиксель Арта

Да и не в один десяток видео их встроил уже. Реал жалко. 
Но в принципе - можно и избавиться, мне тут как раз могут скоро подогнать новое лого. 

Читал что многие бизнесмены при создании своего бизнеса сильно много думают про логотип, название и всё такое. Платят за дизайн логотипа. Думают, что крутое лого и супер название - это залог успешного бизнеса. А я думаю что - поебать на это. 

Пример картинка


Если эплу, откровенно говоря поебать на лого и на название (Яблоко блять), то почему вы думайте что секрет успеха это лого и название? 

Секрет успеха это продукт / контент, сервис, пиар, команда и цена. А не лого и название. 

Вот сижу тоже, думаю. Econ Dude - херовенькое на самом деле название, однако перед тем как его делать, я (ну хоть на это мозгов хватило) загуглил и не нашёл никого крупного и крутого, кто это юзает. Ну а что еще надо? Сейчас я, постепенно, постепенно, заполняю топ выдачи  по "econ dude" и "экон дуд" своими высерами.  

Бренд - это что-бы вас легко нашли и что-бы вы легко запоминались. Если вы не будете как super cell (про выбор названия при создании игры я писал тут: Как продвигать свою игру в Google Play без бюджета) и не эппл, кто теперь даже трафик у нормального запроса про яблоко ворует, то вам не нужно так уж сильно заморачиваться с названием сайта и лого. Заморачивайтесь с продуктом и его ценой. 

Ну что, всё вроде?

Последний момент, хотя он и очень важный. 


Страницы


Пример шапки сайта

Вот эти ребята

Они видны везде, они важны. Поэтому над ними надо медитировать отдельно и долго. 

В принципе, сейчас они отражают всю шизофрению моего блога. Но мне кажется, они позволяют людям легко попасть и выбрать ту тематику, которая им интересна. "Графика на заказ" эти типа как реклама так-как мы с одним человеком сотрудничаем
Он - соавтор некоторых статей про графику, дизайн и рисование. Можем так-же попробовать мутить и с вами, тоже выделю вам страницу (там пишите что хотите, давайте ссылки на себя), если вы готовы наваять сюда 10 статей про seo. Лучше всего - серию статей. Лучше всего - реальный кейс по раскрутке этого блога. Если интересно - пишите мне в ВК
Короче, в шапку - самое важное и самое полезное для пользователей. У меня была еще политика и экономика, отдельно сборник всех статей по этим темам. Но я это снёс, так-как понял что годных статей достаточно. На страничке с рисунками у меня дрочат. 
Шучу. Или не шучу. 

Юзабилити улучшить изменяя шапку можно и еще как, но тут сложно что-то советовать, нужно брать конкретный сайт и думать. Можете посмотреть как это сделано у топов в вашем сегменте. Вообще, смотреть на топов полезно в любом деле. 

При чём, касательно дизайна, заметно 2 херни. Любо это инфо сайт, либо это продающий сайт. Они очень разные по структуре. 

Допустим, вот эти ребята

topodin.com


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

Для их тематики
Для вашей может быть и будет не заебись, тут надо смотреть конкретный кейс случай. 

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

Хотя, я бы купил консультацию по сео у какого-нибудь постоянно матерящегося и пишущего с ошибками чувака, а не там. Серьёзно.
Дорвей Арбайтена Детектед
Ладно, пойду еще игру лучше сделаю, надо с этим всем сео завязывать. 
Сделаю видео в стиле - "как сделать игру за 5 минут", с ответом - никак. Уже ж делал такое


ps Так как все эти изменения в дизайн я уже внёс, мы может еще раз провести тест на скорость. Было 1151 ms / скорость 3.84 kB/s, стало 83 ms / 7.1 kB/s. Лол? 
Хотя тут другое время, Китай и прочие вроде как не зашли. 

Попробуем pr-cy: было 0.66 (33%), стало... Короче, они не хотят обновлять инфу. 

Думаю, вы уже устали это всё читать и еще одну статью не осилите. 
Но на всякий случай:
Учусь осушать воду. Вода в статье и тексте