1. Новая Главная портала Mail.Ru
Егор Дыдыкин

2. Новая Главная портала Mail.Ru

3. История
7 sec !!!
3

4. История
• 7 sec
• Осовременить
4

5. 5

6. 6

7. 7

8. 8

9. 9

10. 10

11. 11

12. 12

13. 13

14. 14

15. 15

16. 16

17. 17

18. 18

19. 19

20. 20

21. Организация CSS кода
21

22. 22

23. 23

24. Организация CSS кода
24

25. Загрузка JS
25

26. Загрузка JS
26

27. Загрузка JS
27

28. Результаты
28

29. 16ms
Загрузка HTML
Генерация HTML
534ms
29

30. 30

31. 31

32. 32

33. 33

34. 34

35. 35

36. 600
500ms
500
400
Стили
ms 300
190ms Скрипты
200
117ms Пост-загрузка
100
0
Время загрузки
36

37. Навигация
500
Левая колонка
Стили
Поиск
Новости ~650ms ~1150ms
Информеры
Скрипты
Баннер
Постзагрузка
0 200 400 600 800 1000 1200 1400 1600
ms
37

38. Время загрузки
Старая главная X 4.5+ 7
Новая главная 1.5
0 1 2 3 4 5 6 7 8
сек
38

39. 39

40. Разрешения экранов
100
80
60
%
40
20
0
128 240 320 400 576 640 768 819 900 1024 1080 1200 1440 1600
px
40

41. Разрешение Вьюпорт на открытии
90
80
70
60
% 50
40
30
20
10
0
550 600 650 700 750 800
px
41

42. Ресайз окна
12% пользователей
42

43. Media Queries
15% пользователей
IE <= 8
43

44. Разрешение На открытии Максимальный за сеанс Максимальный за сеанс (IE8-)
90
80
70
60
% 50
40
30
20
10
0
550 600 650 700 750 800
px
44

45. Разрешение На открытии Максимальный за сеанс Максимальный за сеанс (IE8-)
90
21% 43% 11%
80
70
60
% 50
765px
830px
633px
40
30
20
10
0
550 600 650 700 750 800
px
45

46. Разрешение На открытии Максимальный за сеанс Максимальный за сеанс (IE8-)
90
10% 11% 43% 11%
80
70
60
% 50
670px
576px
765px
830px
633px
40
30
20
10
0
550 600 650 700 750 800
px
46

47. Разрешение На открытии Максимальный за сеанс Максимальный за сеанс (IE8-)
90
10% 11% 29% 14% 11%
80
70
60
% 50
670px
576px
765px
830px
633px
40
30
20
10
0
550 600 650 700 750 800
px
47

48. 48

49. 49

50. 50

51. 51

52. 52

53. 53

54. 54

55. Реализация
55

56. 56

57. 57

58. 58

59. 59

60. 60

61. Портальная
навигация
•Почта
•Мой Мир
61

62. Получение
данных
Запрос к ОК
Получение
расширенных
данных
Обновление
Обновление
62

63. 63

64. 64

65. Итоги
• Скорость
65

66. Итоги
• Скорость
• Отсутствие скролла
66

67. Итоги
• Скорость
• Отсутствие скролла
• Интеграция с сервисами
67

68. Итоги
• Скорость
• Отсутствие скролла
• Интеграция с сервисами
• Стабильность
68

69. Вопросы
Егор Дыдыкин
e.dydykin@corp.mail.ru