12 ошибок Frontend разработчика или как оптимизировать готовы продукт
•
0 likes•1,046 views
Ошибки производительности и юзабилити больших коммерческих проектов или возможности, которые они упускают, на конкретных примерах. Обязательные компоненты успешных Home, Basket и Subscription Page.
Recommended
Recommended
More Related Content
Similar to 12 ошибок Frontend разработчика или как оптимизировать готовы продукт
Similar to 12 ошибок Frontend разработчика или как оптимизировать готовы продукт (20)
12 ошибок Frontend разработчика или как оптимизировать готовы продукт
- 1. 12 ошибок Frontend разработчика или как оптимизировать готовый продукт Yulia Pshinko
- 5. Тестирование
- 6. Usability
- 7. Скорость вебсайта - это главная часть usability
- 9. Ошибка 1: Большое количество запросов
- 10. Пример The Weather Channel • 355 requests • 17.77s • DCL 5.72s
- 12. Пример The Weather Channel • 355 requests • 17.77s • DCL 5.72s USA TODAY • 51 equest • 1.06s • DCL 677ms
- 16. Пример
- 17. Решение • Critical css Critical tool: https://github.com/addyosmani/critical
- 18. <!doctype html> <head> <style> /* inlined critical CSS */ </style> <script> loadCSS('non-critical.css'); </script> </head> <body> ...body goes here </body> </html>
- 21. Пример
- 22. 1920 x 526 pixels 112KB
- 23. Пример
- 25. Решение • Remove unnecessary bytes
- 27. Пример • https://pbs.twimg.com • https://abs.twimg.com • https://analytics.twitter.com
- 28. Решение • DNS: *.google.com, *.android.com, *.appengine.google.com
- 29. Ошибка 5: Не безопасный код
- 30. Пример
- 32. Решение • Нет кукам в явном виде
- 34. Ошибка 6: Нет предсказания действий пользователя
- 35. Пример
- 37. Решение Link and DNS prefetch <link rel="prefetch" href="http://www.example.com/"> <link rel="dns-prefetch" href="http://example.com/">
- 38. amazon.com
- 39. Ошибка 7: Не использование Prerendering
- 40. Пример
- 41. Решение • <link rel="prerender" href="/page/to/prerender">
- 42. Ошибка 8: Ненужные HTTP redirects
- 43. Пример
- 44. Решение • Исключение лишних редиректов
- 47. Ошибка 9: Не загоняйте пользователя в угол
- 49. Ошибка 10: Картинки всегда говорят больше чем 1000 слов
- 50. Пример
- 52. Решение • По максимуму использовать CSS
- 57. Ошибка 12: Не удобная навигация
- 58. Пример
- 59. Ingredients of successful pages • Congruence and context
- 61. Ingredients of successful pages • Trust and value • Congruence and context • Ease and simplicity
- 63. DEFAULT REDESIGN
- 64. CV upload clicks: +109% Recruiter clicks: +12% Jobs by sector clicks: +217% Search clicks: +4.17% Logins: +7.96%
Editor's Notes
- Всем привет. Я очень рада Вас всех видеть, я первый раз в Одессе. И как положено докладчику, пару слов обо мне. Меня зовут Юля, я люблю экстрим и красивый код.
- Работаю в Максимайзере. Я меняю страницу клиента до неузнаваемости с помошью одного скрипта.
- Термин Оптимизация происходит от латинского слова optimus - наилучший. Оптимизация - это модификация системы для повышения ее эффективности, то есть для получения наилучших результатов при соответствующих условиях. Чем "оптимизация" отличается от просто "совершенствования" или "улучшения"? Прежде всего, тем, что здесь есть измерение результатов. То есть определяем, что такое «наилучший результат», и ищем способ, для его достижения.
- Клиентами компании являются, крупнейшие веб сайты в мире, можно так сказать, и вот часть из них которая не скрывает то, что пользуется услугами оптимизаторов. Как мы видим, оптимизация сегодня очень популярна.
- Я занимаюсь JS реализацией АB и мультивариантного тестирования. И буду рассказывать об ошибках с которыми приходится встречаться в процессе работы. За год мне приходится работать с 30ю разными готовыми веб сайтами, вникать в их готовый фронт
- Usability - это термин, обозначающий удобство работы с чем-либо. В нашем случае – работы с сайтом. И сегодня я хочу рассказать какие ошибки допускают разработчики крупных коммерческих проэктов с точки зрения юзабилити.
- Скорость вебсайта - это главная часть usability. Даже самый интуитивный интерфейс, когда либо созданный разумом человека ничего не изменит, если пользователь прервет свое взаимодействие с сайтом из-за его долгой загрузки. И собственно говоря основная часть ошибок - это ошибки производительности.
- Когда браузеру нужен контент, который не закеширован, он отправляет новый запрос на сервер. Каждый запрос – это потенциально очень дорогая операция. Уменьшение количества запросов позволяет пользователю загружать данные быстрее при одновременном снижении загрузки на сервер.
- Измерения проводились в эмуляции Regular 4G (4 Mbps 20ms RTT) интернет соединения в Chrome Canary. Количество запросов до момента, когда пользователь способен видеть основную часть страницы. DOMContentLoaded событие тригирится, когда HTML документ полностью загружен и распарсен, без ожидания стилей, изображений и фрейомв для окончания загрузки. И совсем другой вент – з агрузки – должен быть использован чтобы определить полную загрузку страницы
- Измерения проводились в эмуляции Regular 4G (4 Mbps 20ms RTT) интернет соединения в Chrome Canary. Количество запросов до момента, когда пользователь способен видеть основную часть страницы. DOMContentLoaded событие тригирится, когда HTML документ полностью загружен и распарсен, без ожидания стилей, изображений и фрейомв для окончания загрузки. И совсем другой вент – з агрузки – должен быть использован чтобы определить полную загрузку страницы
- Это значит что будет необходимо установить одно соединение для получения большого файла, вместо нескольких соединений для маленьких файлов. Если скрипты и CSS файлы совсем маленькие, то можно и даже лучше их поместить в HTML и таким образом уменьшить количество соединений еще больше.Возможно кто то скажет, но ведь есть HTTP 2/0, с одним соединением с сервером и в рамках данного соединения идет обмен данными. Но все равно при большом количестве запросов, будет необходимо думать о приоритетах тех или иных запросов.
- В качестве примера я взяла два макета посекундной прорисовки контента. На первом мы видим что элементы страницы прорисовуются постепенно. Здесь главным является приоритизация и показ контента, который имеет отношение к главному действию, который пользователь хочет совершить на странице. И во втором случае пользователь увидит страницу, когда все рсе ресурсы будут загружены.
- Для того чтобы начать работать с критикал css на нашей странице, изначально мы должны разделить css на два файла. В первый мы добавляем минимальный набор css и добавляем его инлайн в наши страницы. Для второго файла, выбираем не критичный набор стилей для того чтобы его загрузить асинхронно.
- Проще говоря, Filmstrip – новая фича Chrome, которая позволяет создать серию изображений, которые отображают, то как браузер рендерит вашу страницу.
- Но даже если нас не будет волновать количество запросов, все равно размер данных передаваемых с сервера останется актуальным, поэтому на счету каждый байт. Я даже не говорю о минификации, потому что это и так ясно, хотя есть сайты которые делали всего лишь частичную минификацию js и css файлов. vkontakte игнорируют минификацию.
- Недавно прислали описание вакансии на linkedin. Десктопная версия
- Собственноо говоря это хак, который используется / не используется разработчиками для максимизирования параллельной загрузки. Использование/не использование шардинга. Это в основном означает рассредоточение вашего сервиса по максимально возможному числу различных хостов. На первый взгляд это звучит безумно, но на это есть простая причина! Первоначально HTTP разрешал использовать клиенту максимум два TCP соединения на каждый хост. Таким образом, чтобы не нарушать спецификацию продвинутые сайты просто придумывали новые имена хостов и вуаля, вы можете получить большее число соединений для вашего сайта и сократить время загрузки страницы. Со временем, это ограничение было убрано из спецификации и сегодня клиенты используют 6-8 соединений на хост, но по прежнему имеют ограничение, поэтому сайты продолжают технику увеличения числа соединений.Twitter к примеру использует несколько доменов:
- На данный момент браузеры поддерживают HTTP 2, а к примеру nginx пообещали ввести сапорт до конца года.
- Говоря о безопасном коде, мне прежде всего хочется упомянуть куки, а именно хранение кук в открытом виде (т.е. с явными названиями или нет). И есть очень замечательный пример. Есть новостной портал, который разрешает пользователю в неделю посмотреть всего две статьи. После просмотра, клиентский скрипт ставит куку с названием 'limit' и значением 'notallow'
- Если бы клиент знал сколько они потеряли подписок на журнал ....
- Это касается кук, которые могут зодержать email, имя пользователя
- Согласно опросу гугла около 19% опрошенных из US используют Private mode. Т.е. человек просто открывает статьи в режиме инкогнито и клиент теряет подписки.
- Предсказание действий пользователя. Для этого не нужно быть предсказателем, а можно всего лишь думать как оптимизатор.
- Prefetch. К примеру пользователь находится на 1м шаге подписки, и если это разные страницы можно на первом шаге подгрузить данные со второго шага и т.д. Этот концепт известен под названием ”prefetching”.
- К примеру amazon.com использует данную технологию
- Prerendering доступно только в Chrome но это не повод не использовать данную технологию. Google представил ее под названием Instant pages.
- Одним из бесполезных редиректов, которые часто используются, и веб разработчики не стремятся избегать этого – когда пользователь забывает ввести завершающий слеш в адресной строке в тех случая когда он там должен быть.
- Вообще плохо для пользователя, когда при использовании сайта пользователь оказывается загнанным в угол. Да все могут подумать, пусть UI/UX дизайнеры думают об этом но не стоит все действия пользователя на странице хранить в одном шаге истории. Пусть навигацией по кнопкам вперед и назад пользователь имеет возможность вернутся к предыдущему действию на странице. Если этого не будет пользователь может вернутся на первый шаг и дальше не совершать уже того, что он сделал
- Картинки говорят больше чем 1000 слов. Оптимизация изображений – это и искуство и наука, потому что нет ни одного точного ответа как лучше всего сжать индивидуальное изображение, и наука, потому что существует много техник разработки и алгоритмов которые могут существенно уменьшить размер изображения. И поиск оптимальной настройки для Вашего изображения обязывает внимательно провнализирвоать много параметров: формат, качество, размер в пикселях и многое другое.
- пример, есть такой замечательный и очень популярный сайт Interflora - is a flower delivery network, associated with over 58,000 affiliated flower shops in over 140 countries. И вот они приходит время А/Б тестирование. Добавить в Информацию о доставке.Это градиенты вставляются изображениями, тексты в которых используются шрифты, которые нужно импортировать на сайт, вставляются тоже изображениями. Одно изображение – это запрос. Это же время загрузки сайта, которое, не поверьте мне, очень уж важно. Поэтому нужно старатся вообще не использовать изображения.
- Ошибки должны быть понятными и четко объяснять пользователю что делать в той или иной ситуации. И как бы это странно не звучало, нужно верить в ошибки, а не писать алерты и рассчитывать на то что их нет.
- Ошибки должны быть понятными, и должны рассказывать что делать дальше.
- В общем это лучше, так как есть причина, и пользователь знает что делать
- Arrow up, down - это моменты про которые Вам не подскажет UI/UX дизайнер, а возможно и подскажет.
- Согласованность и контекст A successful landing page uses congruence and context to keep users focused and interested in whatever your page has to offer. Congruence is the concept of ensuring that each element supports your core value propositions. Context reminds visitors why they landed on the page in the first place. Matching their expectation is key. Consider the top questions users may have and try to answer these questions upfront through clear, compelling copy on the landing page. The design and user flow of your landing page should make it insanely easy for users to convert in seconds. Here are a few ways you can achieve that.
- Here’s how trust and value work: Example 1: Landing page lacking a value prop: “Register for our monthly newsletter now!” Example 2: Landing page with a strong, clear value prop: Register for our newsletter! Each month, you’ll receive: The latest product and feature updates Case studies from industry leaders Exclusive, VIP invitations to upcoming events in your city Tons of cat memes!!!