Pull to refresh
  • by relevance
  • by date
  • by rating

Как собрать статистику с веб-сайта и не набить себе шишек

BadooWebsite developmentJavaScriptProgrammingClient optimization

enter image description here


Привет, Хабр! Меня зовут Слава Волков, и я фронтенд-разработчик в Badoo. Сегодня я хотел бы немного рассказать про сбор статистики с фронтенда.


Мы знаем, что аналитика позволяет оценить эффективность работы любого веб-сайта, улучшить его работу, а значит, повысить уровень продаж и усовершенствовать взаимодействие пользователей с сайтом. Проще говоря, аналитика – это способ контроля над процессами, происходящими на веб-сайте. В большинстве случаев для обычных сайтов достаточно установить Google Analytics или «Яндекс.Метрику» – их возможностей вполне достаточно.


Но как быть, когда стандартных средств мониторинга недостаточно? Или когда собираемая статистика должна быть интегрирована в вашу собственную систему аналитики для отображения полноценной картины происходящего между разными компонентами? В таком случае, скорее всего, вам придется разработать свою систему. А вот как лучше отправлять статистику с ваших веб-сайтов, какие проблемы могут при этом возникнуть и как их избежать, я расскажу в этой статье. Заинтересовались? Добро пожаловать под кат.

Читать дальше →
Total votes 53: ↑48 and ↓5 +43
Views19.3K
Comments 0

PWA, «Зловещая долина» и стабильная работа в офлайне

WEBO GroupSystem Analysis and DesignClient optimizationDevelopment of mobile applicationsDesigning and refactoring
Translation
В июле прошлого года на Altitude 2016 Алекс Рассел (Alex Russell) из Fastly рассказал, как он видит будущее мобильных приложений с учетом PWA и service worker, как обеспечить надежную работу приложения в офлайне и как обойти «зловещую долину» в мобильном интерфейсе.

Сейчас service worker — это программируемое прокси внутри браузера


«В команде мы знаем, что быстрее всегда лучше», отметил Алекс. «Это обстоятельство подтверждено десятками исследований как нашей команды, так и другими».

Такая закономерность проиллюстрирована на рисунке 1. Хорошо видно, что с увеличением времени загрузки веб-страницы:

1) сильно падает количество обращений к странице;
2) постоянно растет процент отказов.


Рис. 1. Быстрее всегда лучше
В виде столбиковой диаграммы показана зависимость количества обращений к веб-странице за секунду от времени загрузки (этой страницы также в секундах.
В виде красного графика показана зависимость показателя отказов в процентах от того же времени загрузки в секундах веб-страницы

Читать дальше →
Total votes 17: ↑16 and ↓1 +15
Views7.6K
Comments 1

«Быстрорастворимый» фронтенд. Лекция в Яндексе

ЯндексJavaScriptClient optimizationInterfaces
Ускорить доставку элементов фронтенда на устройство пользователя можно несколькими способами. Разработчик Артём Белов из самарского офиса норвежской компании Cxense попробовал самые многообещающие: HTTP/2, Server Push, Service Worker, а также оптимизацию в процессе сборки и на стороне клиента. Итак, что же нужно сделать, чтобы сократить время отклика приложения до минимума?


Выясняется, что алгоритмы сжатия существуют уже давно. Это произошло где-то в июне — видимо, где-то над Самарой пролетал метеорит и идея проверить новые алгоритмы сжатия, Zopfli и Brotli, пришла мне и парню из соседней компании. Больше чем уверен, вы читали его статью, это Александр Субботин. Статья разошлась на Medium, и он известен, а я нет.

Читать дальше →
Total votes 71: ↑68 and ↓3 +65
Views23.5K
Comments 21

Генерация страниц сайта средствами сервис-воркеров

Mail.ru GroupWebsite developmentJavaScriptHTML
Tutorial

(С)

Из этой статьи вы узнаете, как прямо на мобильном устройстве, в браузере, создать страницу со списком закэшированных ранее материалов сайта, чтобы условный, застрявший в лифте пользователь, не скучал без интернета. По мере приближения к цели мы коснемся следующих тем:

  • кэширование страниц сайта для офлайн доступа;
  • ведение учета страниц, доступных офлайн, проброс необходимых данных;
  • мониторинг статуса сети, онлайн или офлайн;
  • общение сервис-воркера со страницами и вкладками, которые он обслуживает;
  • перехват сервис-воркером запроса на открытие адреса /offline/ и генерирование новой страницы прямо на устройстве, без запроса к серверу.

Если тема сервис-воркеров и Progressive Web Apps (PWA) для вас новая, то перед чтением этой статьи необходимо познакомиться с ними поближе.

Меня зовут Рыбин Павел, я работаю во фронтенд-разработке Медиапроектов Mail.Ru Group. Это руководство мне помогали писать грабли, набитые шишки и подводные камни, попавшиеся мне при реализации PWA для мобильной версии Авто Mail.Ru.

В тексте будут встречаться небольшие примеры кода, иллюстрирующие рассказ. Расширенную же демо-версию можно посмотреть на GitHub.
Читать дальше →
Total votes 39: ↑39 and ↓0 +39
Views16.8K
Comments 12

JS DevDay: про титан, рабочих и гибриды

2ГИСJavaScriptProgrammingConferences


Мы готовимся сделать то, что не делали вот уже два года, — 27-го апреля соберём на DevDay 150 неравнодушных к JavaScript. Научимся жить с Titanium, ускорять приложение с помощью service workers и напишем гибридное приложение на Angular.

Под катом явки, пароли и про трансляцию.
Что же там под катом?
Total votes 10: ↑10 and ↓0 +10
Views2.6K
Comments 0

JS DevDay. Запись докладов

2ГИСJavaScriptProgrammingConferences


27 апреля мы провели JavaScript DevDay — разговаривали и про мобилку, и про веб, и про гибридные приложения. Делимся записями трёх докладов.

Первый будет полезен, если вам понадобилась аргументация почему НЕ стоит использовать Аppcelerator Titanium. Второй повествует о том, как ускорить ваше веб-приложение с помощью service worker. Посмотрев третий доклад вы узнаете, как написать гибридное приложение на Angular.

Уже смотрю
Total votes 18: ↑18 and ↓0 +18
Views4.6K
Comments 0

PWA — это просто

Website developmentJavaScriptClient optimizationDevelopment of mobile applicationsDesigning and refactoring
image
Понятие Progressive Web Applications (PWA) на слуху давно, с весны 2018 года приложения этого класса поддерживаются всеми основными браузерами, однако распространенность технологий PWA несмотря на очевидные их «плюсы» пока очень низка.

Специалисты Google (в том числе и на Хабре) очень информативно и компетентно пишут о PWA, но их рекомендации полезны больше тем, кто уже знаком с предметом. Данная статья призвана показать, что Progressive Web Apps — это не сложно, и использовать эти технологии можно и нужно уже сейчас разработчикам любых сайтов.
Читать дальше →
Total votes 11: ↑9 and ↓2 +7
Views231.1K
Comments 32

PWA — это просто. Hello Joomla

Website developmentJavaScriptClient optimizationDevelopment of mobile applicationsDesigning and refactoring
Продолжаем изучение Progressive Web Applications. После теоретической первой части и простого практического примера Hello Habr второй части попробуем перевести в PWA веб сайт на CMS Joomla.

Тип серверного фреймворка не важен. Задача данной статьи — показать перевод обычного сайта в PWA как концепцию, применимую к произвольным сайтам на любых фреймворках.

Читать дальше →
Total votes 9: ↑7 and ↓2 +5
Views5.9K
Comments 3

Почитать на каникулах. Лучшие посты в нашем блоге за 2018 год

2ГИСProgrammingProduct ManagementReading room


Привет! Грядут новогодние каникулы, а с ними и некоторое количество свободного времени Собрали подборку популярых статей из нашего блога. Внутри деление → бекенд, фронтенд, команда, мобильная разработка.

Приглядитесь, даже если почитываете наш блог время от времени.
Читать дальше →
Total votes 31: ↑30 and ↓1 +29
Views9.4K
Comments 0

SSEGWSW: Server-Sent Events Gateway by Service Workers

TINKOFFJavaScriptGoogle Chrome
Sandbox
Привет!

Меня зовут Саша и я работаю архитектором в Тинькофф Бизнес.

В этой статье хочу рассказать о том, как преодолеть ограничение браузеров на количество открытых долгоживущих HTTP-соединений в рамках одного домена при помощи service worker.

Если хотите — смело пропускайте предысторию, описание проблемы, поиск решения и сразу переходите к результату.

SSEGWSW
Читать дальше →
Total votes 29: ↑29 and ↓0 +29
Views4.8K
Comments 5

Рецепты по приготовлению офлайн-приложений

Website developmentJavaScriptProgramming
Translation


Доброго времени суток, друзья!

Представляю вашему вниманию перевод замечательной статьи Джейка Арчибальда «Offline Cookbook», посвященной различным вариантам использования сервис-воркера (ServiceWorker API, далее по тексту — просто воркер) и интерфейса кэширования (Cache API).

Предполагается, что вы знакомы с основами названных технологий, потому что кода будет много, а слов мало.

Если не знакомы, то начните с MDN, а затем возвращайтесь. Вот еще неплохая статья про сервис-воркеры специально для визуалов.

Без дальнейших предисловий.
Читать дальше →
Total votes 10: ↑10 and ↓0 +10
Views4.7K
Comments 2