Доклад о влиянии скорости загрузки страниц на конверсию интернет-магазина. Информация об исследовании основных факторов, влияющих на время отображения страниц. Советы по ускорению сайтов.
Доклад о насущей и затертой до дыр теме кеширования не только сайтов на WordPress, но и сайтов в целом: от перегрузки js-скриптов и CSS в CDN до установки и настройки Varnish Cache
Веб-разработка без наркотиков с помощью PostgreSQL, Nginx и c2h5oh / Миша Кир...Ontico
Разговор в докладе пойдёт о веб-программировании.
При изготовлении веб-проектов то и дело пользуются широко распространёнными фреймворками на базе языков программирования — PHP, Python, Perl, Ruby, Go, Rust, Java и т.п.
Я предлагаю отказаться от употребления оных и использовать для разработки веб-приложений только c2h5oh — расширение для высокопроизводительного сервера nginx. Данное расширение позволяет эффективно использовать PostgreSQL в качестве сервера веб-приложений.
Хочу поделиться со слушателями своим личным опытом разработки с использованием подобной связки. Планирую рассказать о плюсах и минусах такого подхода.
Доклад о влиянии скорости загрузки страниц на конверсию интернет-магазина. Информация об исследовании основных факторов, влияющих на время отображения страниц. Советы по ускорению сайтов.
Доклад о насущей и затертой до дыр теме кеширования не только сайтов на WordPress, но и сайтов в целом: от перегрузки js-скриптов и CSS в CDN до установки и настройки Varnish Cache
Веб-разработка без наркотиков с помощью PostgreSQL, Nginx и c2h5oh / Миша Кир...Ontico
Разговор в докладе пойдёт о веб-программировании.
При изготовлении веб-проектов то и дело пользуются широко распространёнными фреймворками на базе языков программирования — PHP, Python, Perl, Ruby, Go, Rust, Java и т.п.
Я предлагаю отказаться от употребления оных и использовать для разработки веб-приложений только c2h5oh — расширение для высокопроизводительного сервера nginx. Данное расширение позволяет эффективно использовать PostgreSQL в качестве сервера веб-приложений.
Хочу поделиться со слушателями своим личным опытом разработки с использованием подобной связки. Планирую рассказать о плюсах и минусах такого подхода.
Погружение в виртуальную память и большие страницы / Константин Новаковский (...Ontico
РИТ++ 2017, HighLoad Junior
Зал Сингапур, 5 июня, 12:00
Тезисы:
http://junior.highload.ru/2017/abstracts/2688.html
Современные приложения часто используют большое количество памяти, ещё чаще разработчики не задумываются, как именно приложение работает с памятью, и откуда она берётся. Просим ядро дать кусок памяти и начинаем с ним что-то делать... Но что за память нам выделяет ядро операционной системы? Память на самом деле виртуальная и делится на единицы, называемые страницами. Страницы бывают маленькими, бывают большими и очень большими.
...
Tempesta FW: challenges, internals, use cases / Александр Крижановский (Tempe...Ontico
Tempesta FW — это Open Source гибрид Web-акселератора и файервола, специально разработанный для высокопроизводительной доставки контента вне зависимости от DDoS или наплыва посетителей.
В докладе будет рассказано про задачи, которые ставились при разработке проекта и пути их решения. Рассмотрим проблемы современных операционных систем в приложении к Web-стеку (система фильтрации, Web-сервер, application слой, БД), и как они решаются в Tempesta — некоторые уже решены, некоторые еще в процессе работы.
И самое главное — у нас появился рабочий прототип, и я расскажу про типовые примеры инсталляции, фичи и конфигурацию, а также покажу бенчмарки.
Денис Колошко, Пример нагруженной системы на базе продуктов Microsoft, Amazon...Tanya Denisyuk
Будет показан пример архитектуры популярной социальной сети в Англии, переработанной на новом стеке, чтобы решить проблемы производительности, отказоустойчивости и горизонтального масштабирования. Новый стек базируется на технологиях: .NET, SignalR, Couchbase, RabbitMQ, ElasticSearch, Amazon Services (CloudFront, S3, EC2, Route 53, Balancer), Windows, Linux. Цель: показать одну из моделей архитектуры нагруженных веб-систем, практики и возможные подводные камни при разработке высоконагруженных Интернет систем.
Настройка и оптимизация высоконагруженных J2EE веб-приложений / Шамим Ахмед (...Ontico
Оптимизация любого веб-приложения — это нетривиальная задача, для решения которой требуется проводить мониторинг загрузки системных ресурсов, выполнять микро-вэнчмаркинг, экспериментировать с настройками, проводить нагрузочное тестирование и т.д.
В текущем году нашей команде довелось поучаствовать в нескольких проектах, в которых перед нами стояла задача оптимизации J2EE веб-приложений. Один из них — портал для ОАО «Сбербанк России» (www.sberbank.ru).
Основной сайт Сбербанка реализован на основе портального движка BackBase и является J2EE-приложением. При проведении оптимизации его работы нам пришлось изучить и собрать много информации и документов, которые связаны с настройкой и оптимизацией высоконагруженных веб-приложений.
В ходе реализации проектов я заметил, что не существует сводного документа с инструкциями по оптимизации работы приложения, поэтому решил поделиться нашим опытом. Этот доклад может послужить в качестве дорожной карты (Road Map) для настройки и оптимизации J2EE веб-приложений.
В докладе будут рассмотрены следующие аспекты:
1) Общие подходы и методология оптимизации веб-приложения.
2) Оптимизация настроек веб-сервера.
3) Оптимизация кода приложения на стороне клиента.
4) Оптимизация на стороне middleware, в том числе на сервере приложений.
5) Оптимизация на уровне Базы Данных.
Поддержка высоконагруженного проекта: мониторинг, резервирование, обслуживани...Ontico
1. Мониторинг высоконагруженного проекта.
1.1. Специфика мониторинга высоконагруженного проекта: гранулярность мониторинга, надежность системы мониторинга, система оповещений.
1.2. Мониторинг и контроль распределенных систем.
1.3. Специфика организации оповещений в высоконагруженном проекте. Превентивный мониторинг.
2. Резервирование и резервное копирование в высоконагруженном проекте.
2.1. Резервирование и резервное копирование - разные вещи.
2.2. Резервирование: на уровне сервера, дата-центра, географически распределенных площадок.
2.1. Организация резервного копирования. Сохранность часто обновляемых данных.
3. Обслуживание высоконагруженного проекта.
3.1. Организация поддержки высоконагруженного проекта: опыт, специфика работы.
3.2. Организация дежурств, эскалация оповещений.
3.3. Аварии в высоконагруженных проектах: примеры из жизни.
Реалтайм статистика скорости работы нативных и веб-приложений у реальных поль...Ontico
Расскажу, как сделана статистика и аналитика скорости работы (UX) приложений badoo (web, mobile-web, ios, android, windows).
Общие концепции и примеры, что и как измерять.
Как собирать данные со 100% пользователей проекта и выдержать нагрузку.
Как из open-source решений собрать систему сбора и визуализации статистики для своего проекта.
Андрей Федоренчик- «Высоконагруженная система с аналитикой на InfoBright»Tanya Denisyuk
Наша рекламная сеть прошла путь от 1М до 150M показов в сутки. На этом пути пришлось столкнуться с проблемами при логировании и анализе больших объемов данных. В итоге отказались от использования NonSQL базы данных и выбрали column-based InfoBright. В своем докладе я расскажу, как мы накапливаем, храним, обрабатываем и анализируем сотни гигабайт информации в день c использованием InfoBright.
01 - Web-технологии. Архитектура Web приложенийRoman Brovko
1. Понятие URL и документа
2. Виды документов: HTML, CSS, JS, JSON.
3. Абсолютные и относительные URL
4. Правила разрешения URL-ов
5. Гиперссылки
6. Клиент-серверная архитектура
Погружение в виртуальную память и большие страницы / Константин Новаковский (...Ontico
РИТ++ 2017, HighLoad Junior
Зал Сингапур, 5 июня, 12:00
Тезисы:
http://junior.highload.ru/2017/abstracts/2688.html
Современные приложения часто используют большое количество памяти, ещё чаще разработчики не задумываются, как именно приложение работает с памятью, и откуда она берётся. Просим ядро дать кусок памяти и начинаем с ним что-то делать... Но что за память нам выделяет ядро операционной системы? Память на самом деле виртуальная и делится на единицы, называемые страницами. Страницы бывают маленькими, бывают большими и очень большими.
...
Tempesta FW: challenges, internals, use cases / Александр Крижановский (Tempe...Ontico
Tempesta FW — это Open Source гибрид Web-акселератора и файервола, специально разработанный для высокопроизводительной доставки контента вне зависимости от DDoS или наплыва посетителей.
В докладе будет рассказано про задачи, которые ставились при разработке проекта и пути их решения. Рассмотрим проблемы современных операционных систем в приложении к Web-стеку (система фильтрации, Web-сервер, application слой, БД), и как они решаются в Tempesta — некоторые уже решены, некоторые еще в процессе работы.
И самое главное — у нас появился рабочий прототип, и я расскажу про типовые примеры инсталляции, фичи и конфигурацию, а также покажу бенчмарки.
Денис Колошко, Пример нагруженной системы на базе продуктов Microsoft, Amazon...Tanya Denisyuk
Будет показан пример архитектуры популярной социальной сети в Англии, переработанной на новом стеке, чтобы решить проблемы производительности, отказоустойчивости и горизонтального масштабирования. Новый стек базируется на технологиях: .NET, SignalR, Couchbase, RabbitMQ, ElasticSearch, Amazon Services (CloudFront, S3, EC2, Route 53, Balancer), Windows, Linux. Цель: показать одну из моделей архитектуры нагруженных веб-систем, практики и возможные подводные камни при разработке высоконагруженных Интернет систем.
Настройка и оптимизация высоконагруженных J2EE веб-приложений / Шамим Ахмед (...Ontico
Оптимизация любого веб-приложения — это нетривиальная задача, для решения которой требуется проводить мониторинг загрузки системных ресурсов, выполнять микро-вэнчмаркинг, экспериментировать с настройками, проводить нагрузочное тестирование и т.д.
В текущем году нашей команде довелось поучаствовать в нескольких проектах, в которых перед нами стояла задача оптимизации J2EE веб-приложений. Один из них — портал для ОАО «Сбербанк России» (www.sberbank.ru).
Основной сайт Сбербанка реализован на основе портального движка BackBase и является J2EE-приложением. При проведении оптимизации его работы нам пришлось изучить и собрать много информации и документов, которые связаны с настройкой и оптимизацией высоконагруженных веб-приложений.
В ходе реализации проектов я заметил, что не существует сводного документа с инструкциями по оптимизации работы приложения, поэтому решил поделиться нашим опытом. Этот доклад может послужить в качестве дорожной карты (Road Map) для настройки и оптимизации J2EE веб-приложений.
В докладе будут рассмотрены следующие аспекты:
1) Общие подходы и методология оптимизации веб-приложения.
2) Оптимизация настроек веб-сервера.
3) Оптимизация кода приложения на стороне клиента.
4) Оптимизация на стороне middleware, в том числе на сервере приложений.
5) Оптимизация на уровне Базы Данных.
Поддержка высоконагруженного проекта: мониторинг, резервирование, обслуживани...Ontico
1. Мониторинг высоконагруженного проекта.
1.1. Специфика мониторинга высоконагруженного проекта: гранулярность мониторинга, надежность системы мониторинга, система оповещений.
1.2. Мониторинг и контроль распределенных систем.
1.3. Специфика организации оповещений в высоконагруженном проекте. Превентивный мониторинг.
2. Резервирование и резервное копирование в высоконагруженном проекте.
2.1. Резервирование и резервное копирование - разные вещи.
2.2. Резервирование: на уровне сервера, дата-центра, географически распределенных площадок.
2.1. Организация резервного копирования. Сохранность часто обновляемых данных.
3. Обслуживание высоконагруженного проекта.
3.1. Организация поддержки высоконагруженного проекта: опыт, специфика работы.
3.2. Организация дежурств, эскалация оповещений.
3.3. Аварии в высоконагруженных проектах: примеры из жизни.
Реалтайм статистика скорости работы нативных и веб-приложений у реальных поль...Ontico
Расскажу, как сделана статистика и аналитика скорости работы (UX) приложений badoo (web, mobile-web, ios, android, windows).
Общие концепции и примеры, что и как измерять.
Как собирать данные со 100% пользователей проекта и выдержать нагрузку.
Как из open-source решений собрать систему сбора и визуализации статистики для своего проекта.
Андрей Федоренчик- «Высоконагруженная система с аналитикой на InfoBright»Tanya Denisyuk
Наша рекламная сеть прошла путь от 1М до 150M показов в сутки. На этом пути пришлось столкнуться с проблемами при логировании и анализе больших объемов данных. В итоге отказались от использования NonSQL базы данных и выбрали column-based InfoBright. В своем докладе я расскажу, как мы накапливаем, храним, обрабатываем и анализируем сотни гигабайт информации в день c использованием InfoBright.
01 - Web-технологии. Архитектура Web приложенийRoman Brovko
1. Понятие URL и документа
2. Виды документов: HTML, CSS, JS, JSON.
3. Абсолютные и относительные URL
4. Правила разрешения URL-ов
5. Гиперссылки
6. Клиент-серверная архитектура
Nginx is a free, open-source, high-performance HTTP server and reverse proxy, as well as an IMAP/POP3 proxy server. Igor Sysoev started working on developing Nginx in 2002 and released it to the public in 2004. Since then Nginx is hosting nearly 12.18% (22.2M) of active sites across all domains and is known for its high performance, stability, rich feature set, simple configuration, and low resource consumption. This report will give you a full overview of the Nginx and explain why this server is so popular.
Чеклист по клиентской оптимизации / Николай Лавлинский (Метод Лаб)Ontico
РИТ++ 2017, HighLoad Junior
Зал Сингапур, 6 июня, 10:00
Тезисы:
http://junior.highload.ru/2017/abstracts/2475.html
Когда проект растёт, возникает множество проблем с масштабируемостью сервиса: БД, сервера приложений, хранилище. Однако, не менее важной становится клиентская часть веб-приложения.
Во-первых, грамотная клиентская оптимизация позволяет повысить скорость работы сервиса для пользователей и, следовательно, увеличить их лояльность, которая конвертируется в деньги.
...
Битва за миллисекунды: практика ускорения веб сайтовindex.art
Как сделать сайт отзывчивее для пользователей, как ускорить появление контента на сайте чтобы пользователь не уходил с сайта, так и не дождавшись его появления.
Евгений Батовский, Николай Птущук "Современный станок верстальщика"Yandex
Рассказ о том, что представляет собой наш «станок» верстальщика сегодня. Рассказывается с примерами, какие браузеры поддерживаем, как производим кроссбраузерное тестирование и какие инструменты используем, готовя проект к выходу в свет.
В лекции мы попробуем взглянуть на страницу глазами пользователей и понять, что можно сделать для ускорения ее загрузки. Рассмотрим основные оптимизации на стороне браузера, познакомимся с инструментами для измерения времени отображения.
Перепись приложения. Нативного. На JS. Done. | Odessa Frontend Meetup #10OdessaFrontend
KeepSolid Sign — приложение для подписи документов под все популярные платформы. Его ядро написано на C++ и однажды поступила задача сделать веб-версию. Тимофей Лавренюк рассказывает о том, через что получилось пройти, чтобы в итоге сделать веб-приложение не хуже нативного.
Все знакомы с различными способами ускорения загрузки страницы. Эта тема уже давно исследована. Но в обычной ситуации при выпуске новой версии сайта у пользователя сбрасывается кеш, и ему приходится заново загружать все статические ресурсы, что увеличивает время загрузки страницы. Как сделать так, чтобы пользователь скачивал только действительно изменившиеся ресурсы? В докладе речь идет о простом, но мощном опенсорсном инструменте borschik (https://github.com/veged/borschik), который поможет ускорить загрузку в условиях постоянных релизов.
Алексей Андросов "Тотальная заморозка = быстрая загрузка"Yandex
Все знакомы с различными способами ускорения загрузки страницы. Эта тема уже давно исследована. Но перед каждым проектом встает вопрос: а как жить в условиях постоянных релизов, когда пользователям приходится часто скачивать обновленный код? Как уменьшить объем загрузки или оптимизировать процесс, чтобы частые релизы не сильно увеличивали время загрузки? В докладе пойдет речь о том, как можно грузить файлы по хэшу от контента, а не по урлу с версией, какие инструменты для этого есть и как измерять эффективность этих способов.
Михаил Корепанов "Инкрементальные обновления на клиенте. Ловкость рук и никак...Yandex
С развитием веб-технологий сайты стали уже не просто информационными ресурсами, а полноценными приложениями. Такие приложения используют большое количество статических ресурсов, общий объем которых часто превышает 1 МБ. При условии частых обновлений встает вопрос: "Как наиболее эффективно загружать ресурсы при выходе новых версий?". В докладе будет рассказано про существующие техники обновления, которые позволяют загружать не целиком новые ресурсы, а только «разницу» между новой и старой версией.
Understanding bytecode and what bytecode is likely to be generated by a Java compiler helps the Java programmer in the same way that knowledge of assembler helps the C or C++ programmer. Java bytecode is the form of instructions that Java virtual machine executes. This knowledge is crucial when debugging and doing performance and memory usage tuning. The presenter will share his knowledge on what bytecode means for your platform and how to create compiler while using some awesome tools.
2. Что можно оптимизировать?
Время загрузки Скорость работы
страницы интерфейсов
Уменьшение размера Взаимодействия с DOM
данных JS сценарии
Уменьшение числа ...
запросов
...
Стр 2 из 376
8. Оптимизация изображений
JPEG:
- формат с потерей качества
- уменьшаем цвета
- чистим мусор (шум)
- В Photoshop сохраняем в качестве от 51 до 95
Прогрессивный <img> JPEG (Firefox, Chrome, Opera, IE9+)
10. Оптимизация изображений
Такие разные PNG:
1. PNG-24
- доступна вся цветовая палитра
- возможен любой уровень прозрачности
2. PNG-8
- палитра 256 цветов
- прозрачность или 0% или 100%
3. PNG-8 с альфа-прозрачностью
- палитра 256 цветов
- возможен любой уровень прозрачности
14. Оптимизация CSS
1. Все внешние таблицы стилей в head (в идеале 1 css)
2. Минимизация css (CSSMin, Minify, YUI-compressor, CSS Minifier,
CSS Tidy)
3. Gzip cжатие css ( ~ 70-80% )
15. Оптимизация JavaScript
1. Все внешние js скрипты перед </body>, а лучше в постзагрузку
(в идеале 1 js файл)
2. Минимизация js (JSMin, JavaScript Minifier, Dojo ShrinkSafe aka
Rhino, YUI Compressor, Closure Compiler)
3. Gzip cжатие JavaScript ( ~ 60-70% )
Время загрузки = Время скачивания + Время исполнения
16. Оптимизация JavaScript
Если включен gzip лучше не использовать Dean Edwards Packer
SIZE (KB) GZIP(KB)
jq.uncompressed.js 277.9 92.6
jq.compressed.js 92.6 32.7
jq.closure-compiler-whitespace.js 142.2 41.0
jq.closure-compiler-simple.js 93.5 33.7
jq.packer.js 75.5 36.3
18. Кэширование
При первом посещении сайта ресурсы еще не в кэше
Небольшой размер кэша у мобильных браузеров:
- iOS Safari не имеет дискового кэша
- у Android кэш ограничен 20Мб
Фоновая предзагрузка в кэш
19. Кэширование
Простое кэширование:
Etag: "d8432-1851f-4d83418c05700" (Server->Browser)
If-None-Match: "d8432-1851f-4d83418c05700" (Browser->Server)
Last-Modified: Mon, 18 Mar 2013 14:49:32 GMT (Server->Browser)
If-Modified-Since: Mon, 18 Mar 2013 14:49:32 GMT (Browser->Server)
Ответ: 200 OK или 304 Not Modified
30. Организация загрузки
Этап 1: Основная загрузка (html, css, images, js)
1. доставка контента и оформления
2. загрузка только необходимого функционала
- порядок загрузки элементов
Этап 2: Постзагрузка / Загрузка по запросу
1. дополнительный функционал, доп. изображения
2. сторонние виджеты
3. кэширование дополнительных ресурсов