Как мы адаптировали более 150 сайтов по технологии...
TRANSCRIPT
![Page 1: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/1.jpg)
Как мы адаптировали 150 сайтов потехнологии JavaScript-adaptive
![Page 2: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/2.jpg)
Артём Цымпов
UX директор и основатель eski.mobi
Евгений Кольцов
Директор по технологиям eski.mobi
2
![Page 3: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/3.jpg)
Тезисы● С чего мы начинали.
● Все способы адаптации.
● JavaScript-adaptive.
● Опыт создания собственной библиотеки.
● История панели управления.
● Сервис оптимизации изображений.
● Чему мы научились.3
![Page 4: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/4.jpg)
2012● Мобильный трафик ~10%
● Сайт специально для мобильных?)))))
● Хорошая шутка!
4
![Page 5: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/5.jpg)
2012Первые мобильные сайты мы делали на поддомене с отдельной CMS.
Эти сайты всё ещё работают.
5
![Page 6: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/6.jpg)
2012Почему не адаптивный дизайн?
Всё просто:
● Долго.
● Дорого.
● Мало заказчиков и много конкурентов.
6
![Page 7: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/7.jpg)
2013● Появилось портфолио (5 работ).
● Понимаем, что отдельная CMS — это ад.
● Находим open source проект mobify.js.
● Пробуем технологию JavaScript-adaptive.
● Что-то получается…
7
![Page 8: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/8.jpg)
2013Первые сайты по технологии JavaScript-adaptive.
8
![Page 9: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/9.jpg)
2013● Мобильный трафик ~15%.
● Кому-то нужен мобильный сайт? Серьёзно?
9
![Page 10: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/10.jpg)
2014● Мобильный трафик ~25%.
● Стойте, у нас уже каждый четвёртый — мобильный?
● Ничего, потерпят.
10
![Page 11: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/11.jpg)
2014Первые сайты на технологии JavaScript-adaptive.
11
![Page 12: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/12.jpg)
2015● Мобильный трафик ~40%
● Яндекс и Google понижают в выдаче немобильных.
● Нужно ли адаптировать?
● Хм… Нужно подумать.
12
![Page 13: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/13.jpg)
2016● Мобильный трафик ~50%.
● Каждый второй — мобильный.
● Ну что, будем ещё думать?
13
![Page 14: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/14.jpg)
2016
14
![Page 15: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/15.jpg)
2 способа мобилизации сайта● Разный HTML
○ С отдельной CMS○ Мобильный, связанный с основным по API○ Отдельный шаблон для мобильных устройств
● Единый HTML○ Обычный адаптивный дизайн○ JavaScript-adaptive (технология eskimobi)
15
![Page 16: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/16.jpg)
2 способа мобилизации сайта● Разный HTML
○ С отдельной CMS○ Мобильный, связанный с основным по API○ Отдельный шаблон для мобильных устройств
● Единый HTML○ Обычный адаптивный дизайн○ JavaScript-adaptive (технология eskimobi)
Ни в коем случае!
16
![Page 17: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/17.jpg)
2 способа мобилизации сайта● Разный HTML
○ С отдельной CMS○ Мобильный, связанный с основным по API○ Отдельный шаблон для мобильных устройств
● Единый HTML○ Обычный адаптивный дизайн○ JavaScript-adaptive (технология eskimobi)
Подходит большим проектам: facebook,
17
![Page 18: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/18.jpg)
2 способа мобилизации сайта● Разный HTML
○ С отдельной CMS○ Мобильный, связанный с основным по API○ Отдельный шаблон для мобильных устройств
● Единый HTML○ Обычный адаптивный дизайн○ JavaScript-adaptive (технология eskimobi)
Хорошее решение
18
![Page 19: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/19.jpg)
2 способа мобилизации сайта● Разный HTML
○ С отдельной CMS○ Мобильный, связанный с основным по API○ Отдельный шаблон для мобильных устройств
● Единый HTML○ Обычный адаптивный дизайн○ JavaScript-adaptive (технология eskimobi)
Очень хорошее решение
19
![Page 20: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/20.jpg)
2 способа мобилизации сайта● Разный HTML
○ С отдельной CMS○ Мобильный, связанный с основным по API○ Отдельный шаблон для мобильных устройств
● Единый HTML○ Обычный адаптивный дизайн○ JavaScript-adaptive (технология eskimobi)
Ещё лучше?
20
![Page 21: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/21.jpg)
21
![Page 22: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/22.jpg)
22
![Page 23: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/23.jpg)
23
![Page 24: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/24.jpg)
24
![Page 25: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/25.jpg)
header
footer
navigation
main
template
slider
ads
25
![Page 26: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/26.jpg)
26
![Page 27: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/27.jpg)
27
![Page 28: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/28.jpg)
JavaScript-adaptive● Единый HTML
● Единый URL
● Контроль над DOM с помощью JS
28
![Page 29: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/29.jpg)
Mobifycapture
Версия v1
Mobify.js
jQuery
dusttemplate
LESS
https://github.com/mobify/mobifyjs 29
![Page 30: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/30.jpg)
Версия v1
Mobify.js
30
Основная библиотека, описывающая взаимодействие между модулями
![Page 31: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/31.jpg)
Mobifycapture
Версия v1
jQuery
dusttemplate
LESS
31
Модуль захвата DOM’а исходного сайта
![Page 32: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/32.jpg)
Mobifycapture
Версия v1
jQuery
dusttemplate
LESS
32
Шаблонизатор для отображения мобильных шаблонов
![Page 33: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/33.jpg)
Mobifycapture
Версия v1
jQuery
dusttemplate
LESS
33
jQuery для выборки данных для шаблонов
![Page 34: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/34.jpg)
Mobifycapture
Версия v1
jQuery
dusttemplate
LESS
34
Для стилей
![Page 35: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/35.jpg)
Версия v1 — схема работает!!!Что не нравится:
● Скорость компиляции проекта.
● Обязательное включение jQuery.
● Наличие неиспользуемых компонентов.
● Управление только через командную строку.
35
![Page 36: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/36.jpg)
Ближайшие планы● Создание панели управления сайтами.
● Оптимизация первоначальной схемы.
36
![Page 37: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/37.jpg)
Eskimobicapture
Версия v2
eski.mobi.js
jQuery
lodashtemplate
LESS
37
![Page 38: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/38.jpg)
Сравнение шаблонизаторов
Dust.js LoDash
38
![Page 39: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/39.jpg)
Версия v2: результаты● Для разработчика — ускорили сборку <100ms
● Для пользователя — ускорили загрузку сайтов
39
![Page 40: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/40.jpg)
Версия v2: проблемы● Нестабильный захват исходного HTML
● Ошибки преобразования элементов DOM
● Запрос лишних ресурсов
● Увеличение размера мобильной версии
● Не работает на Windows Phone и Firefox Mobile
40
![Page 41: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/41.jpg)
Mobifycapture
Версия v3
eski.mobi.js
lodashtemplate
LESSEskimobi resize
41
![Page 42: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/42.jpg)
Версия v3: результаты● Повыcили стабильность захвата HTML
● Решили ошибки преобразований
● Сохранение дерева DOM без запроса ресурсов
● Маленький размер мобильной версии
● Работает во всех мобильных браузерах
42
![Page 43: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/43.jpg)
Ближайшие планы● Разработка мощной панели управления
● Сервис оптимизации изображений, css и js
43
![Page 44: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/44.jpg)
Панель v1
44
![Page 45: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/45.jpg)
Панель v2
45
![Page 46: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/46.jpg)
Панель v3
46
![Page 47: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/47.jpg)
Новая проблема
47
Низкая скорость загрузки на сайтах с большим кол-вом изображений.
![Page 48: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/48.jpg)
Варианты решения● Заказчик оптимизирует изображения
● Заказчик создаёт уменьшенную копию
● Мы делаем всё сами
48
![Page 49: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/49.jpg)
Варианты решения● Заказчик оптимизирует изображения
↳ Лишняя работа, минимальный эффект
● Заказчик создаёт уменьшенную копию
● Мы делаем всё сами
49
![Page 50: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/50.jpg)
Варианты решения● Заказчик оптимизирует изображения
↳ Лишняя работа, минимальный эффект
● Заказчик создаёт уменьшенную копию
↳ Очень много лишней работы
● Мы делаем всё сами
50
![Page 51: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/51.jpg)
Варианты решения● Заказчик оптимизирует изображения
↳ Лишняя работа, минимальный эффект
● Заказчик создаёт уменьшенную копию
↳ Очень много лишней работы
● Мы делаем всё сами
↳ Идеальный вариант
51
![Page 52: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/52.jpg)
Идеальный вариантМодуль оптимизирует все изображения, которые больше, чем размер экрана устройства.
✓ Высокая скорость работы
✓ Поддержка retina
✓ Кэширование
52
![Page 53: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/53.jpg)
desktop
eskimobi resize
IMG
HTML
Eskimobiresize
IMG
mobile
mobi
mobi
m
53
![Page 54: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/54.jpg)
54
![Page 55: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/55.jpg)
55
![Page 56: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/56.jpg)
eskimobi resize
56
![Page 57: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/57.jpg)
Идеальный вариантМодуль оптимизирует все изображения, которые больше, чем размер экрана устройства.
✓ Высокая скорость работы
✓ Поддержка retina
✓ Кэширование
57
![Page 58: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/58.jpg)
Сравнение версий resize
200ms обработка img 50ms обработка img
58
![Page 59: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/59.jpg)
Resize OFF — 3.37 MB
Resize ON — 2.31 MB
Размер сайта с resize и без
59
![Page 60: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/60.jpg)
Трафик resize ~100 Гб в сутки
![Page 61: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/61.jpg)
Трафик resize ~100 Гб в сутки● Google Cloud = 380 USD/месяц
● Amazon Web Services = 268 USD/месяц
● Selectel = 13 USD/месяц
![Page 62: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/62.jpg)
Библиотека eski.mobi.js
62
![Page 63: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/63.jpg)
Библиотека eski.mobi.js
63
![Page 64: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/64.jpg)
Чему мы научились✓ Ставьте себя на место покупателя вашего продукта
✓ Используйте готовые решения
✓ Рассчитывайте нагрузку и трафик заранее
64
![Page 65: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/65.jpg)
Ставьте себя на место покупателя● Потенциальные клиенты думают иначе
● Погрузитесь в их проблемы
● Чем меньше вовлечения требует ваш продукт от заказчика, тем он будет успешнее
65
![Page 66: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/66.jpg)
Используйте готовые решения● Не пытайтесь написать собственный framework
● Ищите и изучайте готовые решения
● И правильно их комбинируйте
66
![Page 67: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/67.jpg)
Рассчитывайте нагрузку заранее● Нагрузка может увеличиться многократно внезапно
● Используйте калькулятор хостинга
67
![Page 68: Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)](https://reader031.vdocuments.mx/reader031/viewer/2022021507/586f8f801a28ab54768b75e1/html5/thumbnails/68.jpg)
Артём Цымпов
UX директор и основатель eski.mobi
Евгений Кольцов
Директор по технологиям eski.mobi
68