Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
12 ошибок Frontend разработчика
или как оптимизировать готовый
продукт
Yulia Pshinko
Тестирование
Usability
Скорость вебсайта - это главная
часть usability
Ошибки производительности
Ошибка 1:
Большое количество запросов
Пример
The Weather Channel
• 355 requests
• 17.77s
• DCL 5.72s
Пример
The Weather Channel
• 355 requests
• 17.77s
• DCL 5.72s
USA TODAY
• 51 equest
• 1.06s
• DCL 677ms
Решение
• комбинирование
Ошибка 2:
Неоптимизированный рендеринг
Пример
Решение
• Critical css
Critical tool: https://github.com/addyosmani/critical
<!doctype html>
<head>
<style> /* inlined critical CSS */ </style>
<script> loadCSS('non-critical.css'); </script>
</head>...
Filmstrip
http://damonbauer.me/chrome-filmstrip/
Ошибка 3:
Лишние байты
Пример
1920 x 526 pixels
112KB
Пример
Решение
• Remove unnecessary bytes
Ошибка 4:
Использование/не
использование шардинга
Пример
• https://pbs.twimg.com
• https://abs.twimg.com
• https://analytics.twitter.com
Решение
• DNS: *.google.com, *.android.com,
*.appengine.google.com
Ошибка 5:
Не безопасный код
Пример
Решение
• Нет кукам в явном виде
Private browsing
https://www.elie.net/blog/privacy/19-of-users-use-their-browser-private-mode
Ошибка 6:
Нет предсказания действий
пользователя
Пример
Решение
Link and DNS prefetch
<link rel="prefetch" href="http://www.example.com/">
<link rel="dns-prefetch" href="http://e...
amazon.com
Ошибка 7: Не использование
Prerendering
Пример
Решение
• <link rel="prerender" href="/page/to/prerender">
Ошибка 8:
Ненужные HTTP redirects
Пример
Решение
• Исключение лишних редиректов
https://chrome.google.com/webstore/detail/redirect-
path/aomidfkchockcldhbkggjokdkkebmdll/related?hl=en
Ошибки интерфейса
Ошибка 9:
Не загоняйте пользователя в
угол
Ошибка 10:
Картинки всегда говорят
больше чем 1000 слов
Пример
Решение
• По максимуму использовать CSS
Ошибка 11:
Большое количество
пользовательских ошибок
Решение
• Clear
• Mentoring
Ошибка 12: Не удобная
навигация
Пример
Ingredients of successful pages
• Congruence and context
Понятный заголовок
Ingredients of successful pages
• Trust and value
• Congruence and context
• Ease and simplicity
Homepage footer
+544% кликов
DEFAULT REDESIGN
CV upload
clicks:
+109%
Recruiter
clicks:
+12%
Jobs by sector
clicks: +217%
Search
clicks:
+4.17%
Logins:
+7.96%
12 ошибок Frontend разработчика или как оптимизировать готовы продукт
12 ошибок Frontend разработчика или как оптимизировать готовы продукт
12 ошибок Frontend разработчика или как оптимизировать готовы продукт
12 ошибок Frontend разработчика или как оптимизировать готовы продукт
12 ошибок Frontend разработчика или как оптимизировать готовы продукт
12 ошибок Frontend разработчика или как оптимизировать готовы продукт
12 ошибок Frontend разработчика или как оптимизировать готовы продукт
12 ошибок Frontend разработчика или как оптимизировать готовы продукт
12 ошибок Frontend разработчика или как оптимизировать готовы продукт
12 ошибок Frontend разработчика или как оптимизировать готовы продукт
12 ошибок Frontend разработчика или как оптимизировать готовы продукт
12 ошибок Frontend разработчика или как оптимизировать готовы продукт
Upcoming SlideShare
Loading in …5
×

12 ошибок Frontend разработчика или как оптимизировать готовы продукт

807 views

Published on

Ошибки производительности и юзабилити больших коммерческих проектов или возможности, которые они упускают, на конкретных примерах. Обязательные компоненты успешных Home, Basket и Subscription Page.

Published in: Software
  • Be the first to comment

  • Be the first to like this

12 ошибок Frontend разработчика или как оптимизировать готовы продукт

  1. 1. 12 ошибок Frontend разработчика или как оптимизировать готовый продукт Yulia Pshinko
  2. 2. Тестирование
  3. 3. Usability
  4. 4. Скорость вебсайта - это главная часть usability
  5. 5. Ошибки производительности
  6. 6. Ошибка 1: Большое количество запросов
  7. 7. Пример The Weather Channel • 355 requests • 17.77s • DCL 5.72s
  8. 8. Пример The Weather Channel • 355 requests • 17.77s • DCL 5.72s USA TODAY • 51 equest • 1.06s • DCL 677ms
  9. 9. Решение • комбинирование
  10. 10. Ошибка 2: Неоптимизированный рендеринг
  11. 11. Пример
  12. 12. Решение • Critical css Critical tool: https://github.com/addyosmani/critical
  13. 13. <!doctype html> <head> <style> /* inlined critical CSS */ </style> <script> loadCSS('non-critical.css'); </script> </head> <body> ...body goes here </body> </html>
  14. 14. Filmstrip http://damonbauer.me/chrome-filmstrip/
  15. 15. Ошибка 3: Лишние байты
  16. 16. Пример
  17. 17. 1920 x 526 pixels 112KB
  18. 18. Пример
  19. 19. Решение • Remove unnecessary bytes
  20. 20. Ошибка 4: Использование/не использование шардинга
  21. 21. Пример • https://pbs.twimg.com • https://abs.twimg.com • https://analytics.twitter.com
  22. 22. Решение • DNS: *.google.com, *.android.com, *.appengine.google.com
  23. 23. Ошибка 5: Не безопасный код
  24. 24. Пример
  25. 25. Решение • Нет кукам в явном виде
  26. 26. Private browsing https://www.elie.net/blog/privacy/19-of-users-use-their-browser-private-mode
  27. 27. Ошибка 6: Нет предсказания действий пользователя
  28. 28. Пример
  29. 29. Решение Link and DNS prefetch <link rel="prefetch" href="http://www.example.com/"> <link rel="dns-prefetch" href="http://example.com/">
  30. 30. amazon.com
  31. 31. Ошибка 7: Не использование Prerendering
  32. 32. Пример
  33. 33. Решение • <link rel="prerender" href="/page/to/prerender">
  34. 34. Ошибка 8: Ненужные HTTP redirects
  35. 35. Пример
  36. 36. Решение • Исключение лишних редиректов
  37. 37. https://chrome.google.com/webstore/detail/redirect- path/aomidfkchockcldhbkggjokdkkebmdll/related?hl=en
  38. 38. Ошибки интерфейса
  39. 39. Ошибка 9: Не загоняйте пользователя в угол
  40. 40. Ошибка 10: Картинки всегда говорят больше чем 1000 слов
  41. 41. Пример
  42. 42. Решение • По максимуму использовать CSS
  43. 43. Ошибка 11: Большое количество пользовательских ошибок
  44. 44. Решение • Clear • Mentoring
  45. 45. Ошибка 12: Не удобная навигация
  46. 46. Пример
  47. 47. Ingredients of successful pages • Congruence and context
  48. 48. Понятный заголовок
  49. 49. Ingredients of successful pages • Trust and value • Congruence and context • Ease and simplicity
  50. 50. Homepage footer +544% кликов
  51. 51. DEFAULT REDESIGN
  52. 52. CV upload clicks: +109% Recruiter clicks: +12% Jobs by sector clicks: +217% Search clicks: +4.17% Logins: +7.96%

×