Что делать, когда у вас 100 партнеров / Иван Потапов (Lamoda)

Что делать, когда у вас
100 партнеров?
Как в Lamoda устроен фронтенд
системы аналитики
Иван Потапов

миллионов уникальных
пользователей в месяц
11
2

различных сторонних
скриптов
11 100
3

различных сторонних
скриптов
запросов к
партнерским сервисам
на каждой странице
11 100 70
4

7
Проблемы
• Бардак в коде

8
Проблемы
• Низкая скорость загрузки страниц

• Низкая скорость загрузки страниц
• Каждое добавление нового скрипта – риск сломать все
9
Проблемы

Сторонний код
• Когда загружаем и исполняем?
10

• Что загружаем?
11

• Как навести в этом всем порядок?
12

• Как навести в этом всем порядок?
• Как интегрировать с кодом сайта?
13

Пример: google analytics
Adding analytics.js to Your Site http://bit.ly/1IwFjPf
14

“The code should be added near the top of
the <head> tag and before any other script or CSS tags …”
15

“The code should be added near the top of
the <head> tag and before any other script or CSS tags …”
16

Defer vs async
<script>
HTML parsing
HTML parsing paused
Script download Script execution
async vs defer attributes http://bit.ly/2rhhZnx
17

Prefer DEFER Over ASYNC by Steve Souders
http://bit.ly/2pMZ6Zz
20
Defer vs async

1.9s window.onload
window.onload
<script defer>
23

Чего добились
• Уменьшили время загрузки страницы
24

• Вначале загружается и исполняется только наш js-код
25

• Вначале загружается и исполняется только наш js-код
• Сторонний код загружается и исполняется, когда пользователь
уже может взаимодействовать со страницей
26

Что загружаем ?
27

Требования к партнерам
• Согласовываем какие данные могут собираться и куда отправляться
28

• Content Security Policy
29

Content-Security-Policy: default-src 'self';
script-src: *.datajet.io;
script-src 'unsafe-inline’ https:;
report-uri: https://lamoda.ru/err/;
30
Content-Security-Policy-Report-Only: ...

31

32

33

34

35

36
{
"csp-report": {
"document-uri": "https://lamoda.ru/",
"referrer": "",
"blocked-uri": "https://st.lmcdn.ru/script.js",
"violated-directive": "default-src 'self'",
"original-policy": "default-src 'self'; report-uri /err/",
"disposition": "report"
}
}

• Размер кода < 60kb и время ответа партнерских сервисов < 1s
37

• Service worker
38

• Service worker
• программируемый сетевой прокси
39

• Service worker
• https only
40

• Service worker
• https only
• fetch API
41

42
• Service worker
• Согласовываем имена в коде

Как навести в этом всем порядок?
43

Сервисы для организации скриптов
44

• Тег – фрагмент стороннего js-кода
45

• Контейнер – загрузчик тегов
46

• Контейнер – загрузчик тегов
• Правило – условие, при котором исполняется тег
47

dataLayer – уровень данных
48

dataLayer = [];
49

dataLayer = [];
dataLayer.push({
event: 'event',
data: 5
});
50

• Обновление кода без релиза сайта
51

• Предпросмотр изменений
52

• Предпросмотр изменений
• Поддерживать могут не только разработчики
53

Как интегрировать с кодом сайта?
54

API
product = {
brand: {
id: 471,
name: "Lacoste",
url: '/b/471/brand-lacoste/'
},
color: 'зеленый',
...
55

События
LMDA.Events.trigger(LMDA.Events.CART_ADD);
57

События
58

События
dataLayer.push({
event: 'event',
data: 5
});
59

Выводы
• С осторожностью относитесь к чужому коду
60

Выводы
• Сторонние сервисы избавляют от велосипедов
61

Выводы
• Сторонние сервисы избавляют от велосипедов
• Перфоманс – большая тема, но очевидные решения – самые
действенные
62

63
Вопросы?
ivan.potapov@lamoda.ru
unclepotap
Младший руководитель
группы десктопных
интерфейсов
tech.lamoda.ru

Что делать, когда у вас 100 партнеров / Иван Потапов (Lamoda)

Recommended

Recommended

More Related Content

What's hot

What's hot (10)

Similar to Что делать, когда у вас 100 партнеров / Иван Потапов (Lamoda)

Similar to Что делать, когда у вас 100 партнеров / Иван Потапов (Lamoda) (20)

More from Ontico

More from Ontico (20)

Что делать, когда у вас 100 партнеров / Иван Потапов (Lamoda)

Editor's Notes