Your hero images need you: Save the day with HTTP2 image loading / Tobias Baldauf (Akamai Technologies)

•

0 likes•971 views

Images are a crucial component of all websites. They evoke emotions and prompt actions. They also form 64% of website data and have the highest correlation to page-load time. While modern image compression techniques can alleviate some of the negative impact of image loading, key web performance metrics such as the Speed Index and Time to Interact suffer due to our need for images. HTTP2 puts a powerful tool at our disposal to address these issues for image loading. Tobias Baldauf explains how to use HTTP2’s superpowers to optimize image delivery, thereby increasing the perceived performance of your page, reducing load times, and driving conversions. Tobias explores the details of HTTP2’s multiplexing in depth and demonstrates how to leverage it to address image loading. Following Tobias' unique research, you’ll learn how to take granular control of the encoding process for progressive images to improve both performance and users’ emotional response time to page visuals.

Engineering

Your Hero Images
Need You!
Save the Day with
HTTP2 Image Loading
1 / 75 — tbaldauf@akamai.com

Tobias Baldauf
@tbaldauf
tbaldauf@akamai.com
2 / 75 — tbaldauf@akamai.com

Show Images
Faster
Than Ever
5 / 75 — tbaldauf@akamai.com

Render Meaningful Content With
25%
Image Data Sent
6 / 75 — tbaldauf@akamai.com

ref. http://httparchive.org/trends.php?s=All&minlabel=Mar+15+2014&maxlabel=Mar+15+2016#bytesImg&reqImg 8 / 75 — tbaldauf@akamai.com

What Can We Do?
10 / 75 — tbaldauf@akamai.com

Get compressin'!
11 / 75 — tbaldauf@akamai.com

Compress
Aggressively
12 / 75 — tbaldauf@akamai.com

Ship Right Format
13 / 75 — tbaldauf@akamai.com

Automate Quality
14 / 75 — tbaldauf@akamai.com

Still a Heavy Load :(
15 / 75 — tbaldauf@akamai.com

We need a new form of
Aggressive Delivery!
16 / 75 — tbaldauf@akamai.com

Enter HTTP2
17 / 75 — tbaldauf@akamai.com

Thanks to Clay Smith (https://twitter.com/smithclay) for this beauty! 18 / 75 — tbaldauf@akamai.com

kudos to my team mate Lukasz Czerpak, @lukaszczerpak 19 / 75 — tbaldauf@akamai.com

kudos to my team mate Lukasz Czerpak, @lukaszczerpak 20 / 75 — tbaldauf@akamai.com

H2 Constraints
22 / 75 — tbaldauf@akamai.com

Ingredient #1
H2 Multiplexing
23 / 75 — tbaldauf@akamai.com

Progressive JPEGs
24 / 75 — tbaldauf@akamai.com

Sequential JPEG Progressive JPEG
Images taken from http://www.pixelstech.net/article/1374757887-Use-progressive-JPEG-to-improve-user-experience 25 / 75 — tbaldauf@akamai.com

Scan Layers
26 / 75 — tbaldauf@akamai.com

Default Scan Layers
Thanks to Frédéric Kayser for creating 'jsk': http://encode.ru/threads/1800-JSK-JPEG-Scan-Killer-progressive-JPEG-explained-in-slowmo 27 / 75 — tbaldauf@akamai.com

Org Cb
Y Cr
28 / 75 — tbaldauf@akamai.com

Can We Go ...
Even Faster?
32 / 75 — tbaldauf@akamai.com

Ingredient #2
Progressive JPEGs
40 / 75 — tbaldauf@akamai.com

How
FAST
Is this Mixture?
41 / 75 — tbaldauf@akamai.com

What defines
FAST?
42 / 75 — tbaldauf@akamai.com

Speed Index
43 / 75 — tbaldauf@akamai.com

ref. Pat Meenan, http://www.slideshare.net/patrickmeenan/measuring-the-visual-experience-of-website-performance 44 / 75 — tbaldauf@akamai.com

ref. Pat Meenan, http://www.slideshare.net/patrickmeenan/measuring-the-visual-experience-of-website-performance 45 / 75 — tbaldauf@akamai.com

ref. Pat Meenan, http://www.slideshare.net/patrickmeenan/measuring-the-visual-experience-of-website-performance 46 / 75 — tbaldauf@akamai.com

Site A displays
7.4x faster
than Site B
more info at https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index 47 / 75 — tbaldauf@akamai.com

Baseline Sequentialvs.
Progressive JPEGs
on HTTP1.1
48 / 75 — tbaldauf@akamai.com

Progressive JPEGsvs.
Optimized pJPEGs
on HTTP1.1
52 / 75 — tbaldauf@akamai.com

Baseline Sequential
vs.
Progressive JPEGs
on HTTP2
56 / 75 — tbaldauf@akamai.com

Progressive JPEGs
vs.
Optimized Progressive JPEGs
on HTTP2
60 / 75 — tbaldauf@akamai.com

Optimized pJPEGs on HTTP2 yield a
6% Speed Index Gain
63 / 75 — tbaldauf@akamai.com

What about
HTTP2 Server Push?
64 / 75 — tbaldauf@akamai.com

// Prioritize a progressive JPEG's metadata and scan levels
// with minimal 'calm' => maximum priority
<img src="img/jpeg_opJPEG/tba/00001.jpg?bil=0!0">
// Create a cumulative cascade of 'calm'
// for a progressive JPEG's metadata and scan levels
// Each new value is added to the sum, lowering priority per scan layer
<img src="img/jpeg_opJPEG/tba/00001.jpg?bil=0!100,50,20">
65 / 75 — tbaldauf@akamai.com

Progressive Images
+
HTTP2
=
Win
71 / 75 — tbaldauf@akamai.com

Scan Layer Manipulation
=
Better Speed Index
72 / 75 — tbaldauf@akamai.com

HTTP2 Server Push
+
Optimized Scan Layers
=
Awesomesauce
73 / 75 — tbaldauf@akamai.com

Tobias Baldauf
@tbaldauf
tbaldauf@akamai.com
75 / 75 — tbaldauf@akamai.com

AEM Maxed = Agile + Automation. Time Warner Cable and iCiDIGITAL reveal how a stellar agile development team delivers an award-winning website using Adobe Experience Manager. Highlights include team interactions, scaling the team, collaborative moments, testing automation, and continuous integration. Also, they will share previews of a few open source attractions that will accelerate your Adobe Experience Manager delivery.

LKCE15 - The Magic Carpet Ride: A business perspective on DevOps

Em Campbell-Pretty

Having problems convincing your stakeholders to try DevOps? Confused about how DevOps can work at scale? Or even just wondering where to start with DevOps? Don’t worry you aren’t the only one! Imagine being the business owner of an application that was the complete antithesis of Continuous Delivery i.e. no delivery ever! Ok, that might be a slight exaggeration. Let’s just say the realisation of benefits from projects developed on this application were few and far between. You are presented with Agile - a silver bullet - and you wait, and you wait and you wait, but the magic doesn’t happen. Eventually someone starts a conversation about “agile technical practises”, finally you know the spell to cast to make the magic carpet fly, or so you would think….. If you want to hear the rest of the story you will just have to attend this session. Set in the context of an Enterprise Data Warehouse, this session will tell the story of how a scaled agile adoption created the case for change and subsequent implementation of DevOps practices. This tale from the trenches will provide insights into both the mistakes made along the way and the ideas that made all the difference, in completely transforming the delivery capability of the organisation. Presented at Lean Kanban Central Europe in Munich, November 2015.

How a Business Executive Led the Implementation of Agile, Lean & CI/CD

Em Campbell-Pretty

Presentation from Enterprise DevoOps Summit in San Francisco - October 2014 Set in the context of an Enterprise Data Warehouse, this session will tell the story of how a scaled agile adoption created the case for change and subsequent implementation of CI/CD. This tale from the trenches will provide insights into both the mistakes made along the way and the ideas that made all the difference, in completely transforming the delivery capability of the organisation.

Adopting the Scaled Agile Framework: The Theory and the Practice - Dallas ALN...

Em Campbell-Pretty

Tips & tricks for building your product quicker

Christopher Maneu

This document provides tips for building products faster, including rethinking the product to simplify user experiences, measuring metrics early, using existing APIs and services, removing or reducing UI, considering alternative database options, automating processes, and preparing for iterative improvements. The tips are aimed at helping startups shorten feedback loops and get products to users more quickly through technical shortcuts and lean development practices.

Top 10 things a fresh programmer should know - Dao Ngoc Khanh

DevDay Da Nang

AMP and WordPress

billerickson

Optimizely Developer Showcase

Optimizely

Adrian Gregory, Success Growth Team Lead at Optimizely Peter Hastie, Front-end Developer at Bleacher Report Chris Moen, Lead Web Developer at CityPASS The Developer Showcase highlights useful tips and tricks directly from developers using Optimizely. The session is moderated by Adrian Gregory, Success Growth Team Lead at Optimizely, and features Peter Hastie, Front--end Developer at Bleacher Report, and Chris Moen, Lead Web Developer at CityPASS, sharing how they've used advanced features in the editor and the Optimizely API to run more dynamic tests and improve performance on their site. The covered features include: -Testing content that appears after page-load -Getting the most of your goals with custom events -Testing an entire new page layout without redirects -Getting the most of the Global CSS & Global JS -Implementing code for efficient targeting, tracking, and segmenting

in this presentation you can get details about the new learning concept develop by CADD Mastre, Now you can start your learning at your home without internet, just have a look of ppt how it is, To know about courses and fees please visit on below links AUTOCAD MECHANICAL http://www.caddmastre.com/autocad-mechanical-tutorial.html AUTOCAD CIVIL http://www.caddmastre.com/autocad-civil-tutorial.html AUTOCAD ELECTRICAL http://www.caddmastre.com/autocad-electrical-tutorial.html AUTOCAD ARCHITECTURE http://www.caddmastre.com/autocad-interior-tutorial.html ANSYS http://www.caddmastre.com/ansys-tutorial.html PRIMAVERA http://www.caddmastre.com/primavera-tutorial.html REVIT ARCHITECTURE http://www.caddmastre.com/revit-architecture-tutorial.html SOLIDWORKS http://www.caddmastre.com/solidworks-tutorial.html

[DevDay 2016] Secret tools for a Scrum Team - Speaker: Sebastian Sussman – CI...

DevDay Da Nang

The Scrum framework only provides the structure and how a team should work. Is adapting Scrum enough for a team to succeed? There are situations when things just don’t sound logical and disagreement to requirements arise outside the meeting room. In this session, we will learn some examples of tools, which can help us to avoid misunderstandings and disable the 20/80 syndrome in meetings. ——— Speaker: Sebastian Sussman – CIO at Axon Active Vietnam

WP-CLI: WordCamp NYC 2015

Terell Moore

Increasing Traffic Through Optimization : The Importance of Site Speed

Terell Moore

Know This, Work Here

Dale Cruse

The document provides information on various skills and tools that are useful for working remotely, including Microsoft Office, time tracking, cloud storage, project management, analytics, email etiquette, presentations, responsive web design, analyzing websites, and search engine optimization. Links are provided for further resources on time tracking, cloud storage, project management, analytics, presentations, responsive web design, analyzing websites, and search engine optimization.

ScrumBan Evolution - What is you next step?

Sebastian Radics

Accelerated Mobile Pages (AMP) & How it will Impact your Business

Harshavardhan MP

9 Productive Tips to Work Faster

Shore Labs

[DevDay 2016] The toolkit for an amazing product - Speaker: Sebastian Sussman...

DevDay Da Nang

We all focus on the code while working with software. Everyday we produce a lot of lines, but what is necessary to build an amazing product? Is developing and completing the requirements enough? How can we deliver the product on time? How do we build a productive and motivated team? This session will provide some tools that can help the development team to build an amazing and successful product and to keep up with the deadline. ——— Speaker: Sebastian Sussman – CIO at Axon Active Vietnam

Ryan king wp-plugin-presentation

Ryan King

The document summarizes Ryan King's recent favorite WordPress plugins in 5 sentences or less each. It lists 5 plugins that meet criteria like being well designed, highly rated, and maintained. The plugins recommended are WP Nested Pages for nested pages, Ninja Forms for forms, Enable Media Replace for replacing media, BackWPup for backups, and WP Core to improve WordPress core. It also provides alternatives and tips for finding and testing plugins.

Performance-driven websites with AMP - NeosCon May 2019

Benni Mack

Kanban Methodology

Sudhanva Ramesh

Kanban is a lean methodology for managing workflow. It uses visual signals like cards to limit work-in-progress and optimize flow. Software teams can implement Kanban virtually with boards and cards to visualize work, standardize workflows, and identify blockers. Key benefits include planning flexibility, shortened cycle times from overlapping skills, fewer bottlenecks from limiting work-in-progress, and support for continuous delivery of value. Teams use metrics like control charts and cumulative flow diagrams to continually improve efficiency.

10 Tips for Configuring Your Builds with Bamboo Specs

Atlassian

Bamboo 6 lets every team manage their plans through code. But it's only the start of a journey. At Atlassian, we now configure the vast majority of our builds and deployments with code. Whether you're a new starter or already a user of Bamboo Specs, you're (or will be) facing questions such as "How do I test my Spec before update?", "Can I safely modify this reused Spec component?", or "How do I make Specs more accessible to non-Java teams?". Join Przemek Bruski, the architect of Bamboo to hear how our teams solved these - and more - problems. Apart from practical tips, we'll also talk about jump-starting your Specs with our exporter, latest additions to the Specs feature, and support for Bitbucket Cloud Pipelines configuration files.

ScrumBan [R]Evolution - Are #NoEstimate and #NoSprints your next steps

Sebastian Radics

The document discusses Scrumban, which combines elements of Scrum and Kanban. It outlines 5 guiding questions about value, flow, quality, joy, and continuous improvement. It then describes 5 steps of evolution away from sprints and toward continuous flow. This includes slicing stories properly based on size and forecasting using throughput. It recommends focusing on predictability and fitness for purpose over estimates. Various metrics for measuring flow and progress are presented, like cumulative flow diagrams and scatterplots. Finally, recommended resources on Scrumban and related topics are listed.

Creating change from within - DevReach 2012

Dror Helper

This document discusses how an Agile developer introduced improvements to his team's practices. It describes how he started by analyzing their test code and fixing 40% of the tests. He then set up a continuous integration server to run tests on each commit. He educated the team through various communication methods like code reviews and pair programming. Some immediate improvements included using MSTest and writing tests before fixing bugs. The developer emphasizes that change happens gradually through small incremental steps and passion is needed to convince others.

Hack your process

damovisa

A successful process is not one size fits all; every team and project is different. Scrum may be an awesome framework for managing your development process, but it should only be a starting point. In this session, we’ll look at when and how to inspect and adapt your own process to increase the effectiveness of your team. We’ll look at examples of projects that have deviated from the norm, the reasons for change, and why they succeeded or failed. Finally, we’ll look at how you can apply these learnings to your own team process. Learn how to excommunicate yourself from the cargo-cult and starting making your process work for you.

Kanban stand-up meetings

Miroslav Bajtoš

Kanban is a lean methodology for managing workflow. Its core practices include visualizing workflow using a kanban board with columns for different states, limiting work-in-progress to avoid bottlenecks, making policies explicit, and implementing feedback loops to continuously improve. Kanban focuses on managing flow rather than fixed processes, and emphasizes finishing work rather than starting new work. Kanban stand-ups differ from Scrum in that the focus is on identifying impediments rather than commitments.

How to submit your web quest to taskstream

Danny Ri

Getting More Out of WordPress with Plugins

Sennza Design

Plugins allow WordPress users to customize and expand their site's functionality. Popular plugins include Akismet for spam protection, Jetpack for enhanced commenting features, mobile plugins for responsive designs, forms plugins like Contact Form 7 for contact pages, SEO plugins, photo galleries like NextGEN, backups with VaultPress, e-commerce with WP-eCommerce, and forums with bbPress. Plugins can add functionality but users should check for compatibility and seek help from authors when needed.

The Small Things That Add Up: How to Find What Design Factors Influence Conve...

Tammy Everts

This document discusses how small design factors can influence conversion rates on websites. It provides examples of how websites like Walmart, Staples, and Intuit improved their conversion rates by 1-14% by reducing load times by 1-2 seconds. The document also discusses an experiment by Fanatics where reducing median page load times by 2 seconds nearly doubled mobile conversions. It identifies issues like inefficient images, blocking page loads, and unoptimized CSS/JavaScript that can impact performance. The key takeaways are that user expectations change, performance issues are unpredictable, you need to measure factors, optimizations can create new problems, and small improvements can make a big difference.

Порядок для скорости. Система структурирования фронтендовой части веб-приложе...

Ontico

Расскажем о системе структурирования и версионности фронтендовой части веб-приложений: • как вести учет поколений и версий дизайна; • как проводить анализ консистентности фронтенда; • как построить автоматическую систему документации по элементам; • насколько такой подход влияет на общую скорость разработки. Система структурирования фронтенда в Superjob - это более 200 элементов и 2000 представлений.

Как сделать ваш JavaScript быстрее / Роман Дворнов (Авито)

Ontico

JavaScript, который мы пишем, не всегда исполняется, как мы думаем. Виртуальные машины, исполняющие его, делают многое, чтобы он работал быстрее. Но они не всесильны, и чтобы сделать код действительно быстрым, нужно знать их особенности и как все работает под капотом. Поговорим об этих особенностях, что может служить причиной потери производительности, как это диагностировать и как делать код действительно быстрым. Доклад базируется на опыте, полученном в ходе работы над такими проектами как basis.js (весьма быстрый фреймворк для SPA), CSSO (минификатор CSS, который из медленного стал один из самых быстрых), CSSTree (самый быстрый детальный CSS парсер) и других.

What's hot

Gwvps presentation 2020 by CADD Mastre

CADD MASTRE

[DevDay 2016] Secret tools for a Scrum Team - Speaker: Sebastian Sussman – CI...

DevDay Da Nang

WP-CLI: WordCamp NYC 2015

Terell Moore

Increasing Traffic Through Optimization : The Importance of Site Speed

Terell Moore

Know This, Work Here

Dale Cruse

ScrumBan Evolution - What is you next step?

Sebastian Radics

Accelerated Mobile Pages (AMP) & How it will Impact your Business

Harshavardhan MP

9 Productive Tips to Work Faster

Shore Labs

[DevDay 2016] The toolkit for an amazing product - Speaker: Sebastian Sussman...

DevDay Da Nang

Ryan king wp-plugin-presentation

Ryan King

Performance-driven websites with AMP - NeosCon May 2019

Benni Mack

Kanban Methodology

Sudhanva Ramesh

10 Tips for Configuring Your Builds with Bamboo Specs

Atlassian

ScrumBan [R]Evolution - Are #NoEstimate and #NoSprints your next steps

Sebastian Radics

Creating change from within - DevReach 2012

Dror Helper

Hack your process

damovisa

Kanban stand-up meetings

Miroslav Bajtoš

How to submit your web quest to taskstream

Danny Ri

Getting More Out of WordPress with Plugins

Sennza Design

The Small Things That Add Up: How to Find What Design Factors Influence Conve...

Tammy Everts

What's hot (20)

Gwvps presentation 2020 by CADD Mastre

[DevDay 2016] Secret tools for a Scrum Team - Speaker: Sebastian Sussman – CI...

WP-CLI: WordCamp NYC 2015

Increasing Traffic Through Optimization : The Importance of Site Speed

Know This, Work Here

ScrumBan Evolution - What is you next step?

Accelerated Mobile Pages (AMP) & How it will Impact your Business

9 Productive Tips to Work Faster

[DevDay 2016] The toolkit for an amazing product - Speaker: Sebastian Sussman...

Ryan king wp-plugin-presentation

Performance-driven websites with AMP - NeosCon May 2019

Kanban Methodology

10 Tips for Configuring Your Builds with Bamboo Specs

ScrumBan [R]Evolution - Are #NoEstimate and #NoSprints your next steps

Creating change from within - DevReach 2012

Hack your process

Kanban stand-up meetings

How to submit your web quest to taskstream

Getting More Out of WordPress with Plugins

The Small Things That Add Up: How to Find What Design Factors Influence Conve...

Viewers also liked

Порядок для скорости. Система структурирования фронтендовой части веб-приложе...

Ontico

Как сделать ваш JavaScript быстрее / Роман Дворнов (Авито)

Ontico

Промышленное ускорение сайтов / Николай Мациевский (Айри.рф)

Ontico

Идея: обеспечить реально высокую скорость загрузки нагруженного сайта (от 100 тысяч посетителей в день) для всех пользователей, ничего не сломав и уложившись в бюджет. Введение. Подходы к оптимизации фронтенда: * Классический: делаем по GPSI или WPT. * Самостоятельный: прикрутили PageSpeed и CDN. * Промышленный: PDSA (попробовали, измерили, внедрили, подсчитали). * Кейс: открытие новостного сайта за 1 секунду на любом устройстве. Часть 1. Мониторинг клиентской производительности * Google Analytics / Яндекс.Метрика / Битрикс. * New Relic / mPulse / Айри / Navigation Timing API. * Resource Timing API / User Timing Api: собственные метрики. * Кейс: как понять из метрик сайта, что и где тормозит. Часть 2. Внедрение ускорения * Как выбрать KPI скорости сайта. * Базовые правила: как автоматизировать, внедрить, раскатать. * "Бюджет" на ускорение страницы: как распределить. * Поточное и отложенное ускорение: как выбрать. * Некоторые типичные ошибки "оптимизации". * Кейс: нестандартные подходы к оптимизации производительности. Часть 3. Узкое профилирование * Тестируем CDN: что смотрим, как измеряем. * Тестируем мобильные устройства: тормозит CPU или GPRS ? * Тестируем асинхронную загрузку: подводные камни. * Кейс: сколько "стоит" ошибка в клиентской производительности. Заключение. Промышленное внедрение * Кейс: "швейцарский нож" для оптимизации изображений. * Кейс: когда реально работает отложенная загрузка. * Кейс: HTTP/2. Реальные данные. * Кейс: как ускорить 2000 ресурсов в секунду?

Отрисовать за 16 мс / Глеб Михеев (Beta Digital Production)

Ontico

Здесь мы поговорим о производительности в браузере, а особенно об производительных анимациях и внутреннем устройстве браузера. Основные тезисы выступления: - Что такое лаги, и почему они происходят. - Как браузер отрисовывает сайт. - Что такое Vsync, и почему наша цель ~60fps. - Как сделать анимацию плавной. - Как браузер "ускоряется" при помощи GPU. - Как браузеру помочь "правильно" ускориться. - Основные ошибки при анимации (антипаттерны производительной анимации). - CSS анимации vs JS анимации. - Инструментарий для высокопроизводительных анимаций. - Анимация на мобильных устройствах. - Блокировка интерфейса, откуда берется и как избежать. - Психология пользователя: -- Мертвый интерфейс (почему критически важно, чтобы интерфейс реагировал). -- Излишне быстрая реакция интерфейса. -- Фиксация изменений (кейс от 37signals). -- Почему индикаторы прогресса важны. -- Нативный индикатор против собственного (кейс от facebook).

Автоматизация тестирования клиентской производительности / Николай Лавлинский...

Ontico

Клиентская производительность – бесконечный процесс. Разрабатываются новые фичи, меняется дизайн, технологии, браузеры – контролировать скорость нужно постоянно. В этих условиях требуется автоматизированный процесс тестирования скорости клиентской части приложения. При этом тестировать нужно в настоящих браузерах, в максимально похожем на реальность окружении. В этом докладе будем говорить о том, как совместить все эти требования и не потратить много месяцев на построение собственного "велосипеда". Предлагается рабочее решение задачи с использованием open source решения WebPagetest Private Instance. Рассмотрим основные достоинства и проблемы решения, а также способы использования этого инструмента.

Continuous Integration на стероидах / Александр Акбашев (HERE)

Ontico

Доклад об одном из самых больших монолитных инстансов Jenkins в мире: один мастер переваривает больше 100 тысяч билдов в день и управляет в пике ~2500 executor'ов. В докладе будут подняты следующие вопросы: * Как развернуть CI в облаке? * Как с помощью memcache экономить на железе для CI? * Тормозит ли Jenkins сам по себе? * Лайфхаки по использованию разных плагинов. * Нужно ли мониторить GC у Jenkins? * Какие плагины делают жизнь лучше, а какие - сильно хуже? * Как сделать мониторинг Jenkins'a ~из скотча и линейки~ с FluentD + InfluxDB + Grafana. И наверняка что-то еще...

Применяем стандарты кодирования NASA к JavaScript / Денис Радин (Liberty Global)

Ontico

Jet Propulsion Laboratory – научная организация, производящая большое количество исследований и разрабатывающая ПО для большинства беспилотных программ NASA в области исследования дальнего космоса. В портфолио JPL такие проекты как марсоход Curiosity и зонд Voyager, покинувший солнечную систему после 25 лет полета и до сих пор поставляющий научную информацию. Высокий уровень автоматизации миссий и продолжительность явились основанием для беспримерных требований к качеству ПО, следствием которых стали недавно опубликованные рекомендации по написанию кода для проектов JPL. Так как требования к веб-приложениям постоянно растут, а задачи, доверяемые им, становятся все более критическими, давайте применим стандарты кодирования NASA/JPL к JavaScript для повышения надежности, производительности и во имя лучшего мира.

Семантическое ядро рунета - высоконагруженная сontent-based рекомендательная ...

Ontico

В докладе мы поделимся опытом создания content-based рекомендательной системы для электронной коммерции, работающей на семантическом ядре рунета (десятки миллионов профилей). Расскажем, как организовали централизованный сбор и обработку информации о посещении пользователями более 100 000 сайтов различной направленности на основе Amazon Kinesis. Поделимся опытом многопоточной онлайн-индексации потоков данных в Lucene. Продемонстрируем используемые базовые алгоритмы ранжирования и формирования персональных рекомендаций для посетителей более 20 000 интернет-магазинов. Поговорим о плюсах и минусах лямбда-архитектур и обоснуем выбранное нами архитектурное решение. Отдельно остановимся на тонкостях технической реализации многопоточных алгоритмов и особенностях обеспечения реального времени - поступившая информация о действиях посетителя практически мгновенно учитывается рекомендательным движком, обеспечивая максимальную конверсию.

AWS и GCP: трудная жизнь в облаках / Максим Пугачев (IPONWEB)

Ontico

Разница между “несколько серверов в облаках” и “вся инфраструктура в облаках“ огромна. С одной стороны, мы перекладываем миллион забот на гигантские плечи Amazon и Google. С другой стороны, к сожалению, обретаем много новых и порой необычных проблем. Как жить в облаках двух самых популярных провайдеров? Что это за проблемы и как их решать? В чем особенности облаков, если вы живете в мире highload? Как выжимать максимум из того, что предоставляют провайдеры? Я попытаюсь рассказать о наиболее важных, на мой взгляд, особенностях: - Почему не стоит полагаться на заявленные характеристики виртуальных машин. - Почему нет разницы между загрузкой CPU в 85% и 100%. - Всевозможные аномалии и неожиданные "спайки" в метриках. - "Облачные" диски и их особенности.

Особенности архитектуры распределённого хранилища в Dropbox / Слава Бахмутов ...

Ontico

Так как я работаю в позиции SRE (site reliability engineer), то более подробно затрону вопросы того, как мы добились годового durability 99.9999999999% и доступности более 99.99%: - Изоляция -- Физическая --- Хранение данных в разных стойках, датацентрах, с разными версиями оборудования и вендорами. --- Бэкапы вне основной инфраструктуры. -- Логическая --- Слабая связанность компонентов. --- Не давать падению одного мастера (в зукипере или базе) утащить за собой всю зону. -- Операционная --- Процесс релиза. --- Инструменты деплоя, сборки, хелзчекинга и т.д. --- Контроль доступа. - Защита данных -- Восстановление --- Восстановление после опасных операций (удаление). -- Охрана данных и валидация операций ----в том числе от операторов. - Контроль -- Все совершают ошибки, нужно уметь детектировать их. -- Метрики, SRE, OnCall. -- Различные системы детектирование проблем, не связанные между собой, на каждом уровне систем (хост, кластер, ячейка, дата центр, внешние). -- Тестирование --- Disaster recovery testing. - Автоматизация -- Быстрое восстановление. -- Быстрая реакция на события (нет времени реагировать вручную). -- (introduce autoremedeation systems).

5 способов деплоя PHP-кода в условиях хайлоада / Юрий Насретдинов (Badoo)

Ontico

В дата-центрах нашей компании несколько тысяч серверов, и примерно на половине из них нужно выкладывать PHP-код 2 раза в день. Помимо раскладки на production также не стоит забывать о том, что код нужен на стейджинге, и в стейджинг-кластер у нас входит около 50 машин, код на которых обновляется раз в несколько минут. Также есть «хотфиксы» — небольшие (1-5) наборы файлов, которые выкладываются во внеочередном порядке на все или на выделенную часть серверов, чтобы устранить существующие проблемы на продакшне, не дожидаясь полной выкладки. В этом докладе я расскажу о том, как мы деплоились в течение 10 лет, о том, какую новую систему для деплоя PHP-кода мы разработали и внедрили в production, а также проведу обзор решений для масштабного деплоя кода на PHP и анализ их производительности. План доклада: — Наша старая система деплоя, достоинства и недостатки. — Существующие решения: * "svn up" / "git pull". * rsync. * phar, hhbc (HHVM-specific), "loop". * rsync + 2 директории + realpath_root (Rasmus-style). — Требования для новой системы деплоя. * быстрый деплой на стейджинг (5-10 секунд на 50 серверов). * возможность атомарно патчить несколько файлов и быстро их выкладывать (10 секунд на весь кластер). * совместимость с docker. * поддержка «долгоиграющих» CLI-скриптов (несколько часов). * низкое потребление ресурсов на принимающей стороне. * отсутствие необходимости сбрасывать opcache. * высокая скорость деплоя на продакшн (1-2 минуты на 1500 серверов). — MDK — multiversion deployment kit. — Анализ применимости и производительности способов деплоя. — Выводы.

MySQL® и MongoDB® - когда что лучше использовать? / Петр Зайцев (Percona)

Ontico

Сегодня много дискуссий о том, что лучше - MySQL или PostgreSQL? Однако перед тем, как выбирать именно реляционную базу данных для своего проекта, стоит понять, является ли реляционная база данных наилучшим решением для него. В рамках этого доклада мы сравним наиболее популярную реляционную базу данных с открытым кодом с наиболее популярным хранилищем документов с открытым кодом. Мы определим, в каких случаях эффективнее всего работает MySQL, а в каких - MongoDB. Мы также рассмотрим ситуации, в которых ни одна из этих баз данных не будет лучшим решением и в которых целесообразно остановить свой выбор на других технологиях.

A/Б-тестирование: от сегментирования до профита / Кирилл Котов (Superjob)

Ontico

Расскажем об архитектуре системы А/Б тестирования в нагруженном проекте: • как сегментировать пользователей и собирать метрики на разных платформах; • где хранить и как анализировать бизнес-показатели, статистическую значимость и практики проведения тестирования; • как и зачем внедрять тесты в процессы принятия решений и развития продукта. A/B тесты в Superjob это: • более миллиона пользователей ежедневно; • десятки тестов “на бою”; • несколько платформ: десктопная и мобильные версии сайта, почтовые рассылки; • единая система хранения на основе аналитической БД HP Vertica; • показатели и бизнес-метрики в реальном времени.

Практика совместного использования Lua и C в opensource спам-фильтре Rspamd /...

Ontico

В данном докладе я расскажу о том, как Lua помогает расширять функционал Rspamd, позволяя людям без особых знаний С писать эффективные правила фильтрации спама. Также будут рассмотрены особенности внедрения Lua в C код и основные приемы, применяемые при написании API для Lua приложений. Отдельное внимание будет уделено документации к Lua API, которая является одним из необходимых компонентов для opensource приложения. Кроме этого, отдельная часть доклада посвящена анализу производительности Lua: использованию LuaJIT, сравнению вызовов C функций через FFI с традиционным вызовом, оптимизации строковых операций и таблиц в Lua. В заключение будут рассмотрены некоторые открытые вопросы: будущее языка, наличие нескольких диалектов, статический анализ Lua стека, а также вопросы безопасности при JIT компиляции.

RTB в телевизоре и на улицах / Михаил Мельников (IPONWEB)

Ontico

- Use cases: спутниковое TV; десятки тысяч мониторов в клиниках; медиапланирование в телевизионных сетях с десятком поставщиков данных о зрителях. - Еще кратко о том, почему появилось RTB, почему появились коннекторы между SSP и DSP (хорошо знаю про case 3 млн. транзакций в секунду), почему появились SSP и DSP "в одном флаконе". - Основы планирования показов на TV в разных странах. - Специфика TV по сравнению с Digital (модерация креативов, аудитория одного показа, вероятности показа, отсутствие cookies, большие задержки и ненадежные каналы, разнообразие форматов, разметка аудитории). - Вызовы, которые стоят перед "традиционными" медиа (TV, DOOH - Digital out of home). - Run-time технологии и offline сигналы - проблемы и решения. - Интеграция и использование существующих подходов и технологий. - Масштабирование и горизонты развития.

Измеряем энергопотребление с помощью Arduino / Алексей Лавренюк (Яндекс)

Ontico

Anti-fraud solutions in RTB / Вадим Антонюк (IPONWEB)

Ontico

Во вступлении мы рассмотрим, какие виды фрода существуют в RTB (bots, ad stacking, spoof sites). Далее поговорим о том, что из вышеперечисленного мы умеем ловить алгоритмически, и дадим общее описание подхода к кластеризации бид-реквестов на "хорошие" (люди) и "плохие" (боты) с использованием методов machine learning. Обсудим, какой из способов обучения лучше подходит для данной задачи, по каким ключевым признакам кластеризуем, каким методом. В технической части обсудим область параметров, при которых решалась задача, а именно: размер learning sample 200 млрд. строк бид запросов, при реализации на Hadoop расчет велся в GCE на 140 машинах класса n1-highmem-8 и занимал 22 расчетных часа. Реализация достаточно ресурсозатратная как с точки зрения времени, так и денег, поэтому встал запрос на вычислительную оптимизацию. В оптимизационной части мы обсудим, как при переходе на Spark framework уже на первой фазе получилось достигнуть выигрыша в производительности в 3 раза по сравнению с Hadoop framework и это далеко не предел. Сейчас проект перехода в активной фазе и к моменту доклада мы ожидаем довести этот показатель до ~10 раз.

Практическое применение WebWorkers / Алексей Фомкин (Data Monsters)

Ontico

WebWorkers имеют глобальное покрытие в 91% по данным http://caniuse.com. Тем не менее, не всякое современное веб-приложение использует их. В своем докладе я постараюсь передать двухлетний опыт использования WebWorkers в нашей команде для написания веб-приложений с функциональностью, которая требует выполнения тяжелых вычислений, таких как преобразование бинарых файлов из одного формата в другой и шифрование. Расскажу про эксперименты по переносу в воркер расчета diff'ов в React-подобной системе рендеринга и покажу наивную реализацию модели акторов на основе воркеров. Также постараюсь подготовить слушателей к новым проблемам, которые могут возникнуть при использовании веб-воркеров.

Хочу знать, сколько уникальных посетителей было на моём сайте за произвольный...

Ontico

Что нужно хранить для того, чтобы была возможность ответить на этот вопрос? Для точного ответа нужно через равные интервалы времени сохранять множество посетителей сайта (пусть это для простоты будут IP-адреса), которых мы за прошедший интервал увидели. Понятное дело, что такой объём информации хранить нереально, а даже, если получится, придётся объединять большое количество множеств и считать элементы в том множестве, которое получилось в итоге. Это очень долго. Не спасает ситуацию даже переход от точных алгоритмов к приблизительным: гарантировать точность либо не получится, либо придётся использовать объём памяти и вычислительные ресурсы, сопоставимые с точным алгоритмом. В 80-х годах появились первые вероятностные алгоритмы для приблизительной оценки количества элементов в множестве. При большом количестве уникальных элементов эти алгоритмы дают приблизительную оценку, которая отличается от истинного значения в (1±e), e<1>0.5. То есть они могут вернуть оценку, которая сильно отличается от истинного значения с некоторой вероятностью (1-p). Чем больше требуется точность, и чем меньше нужна вероятность ошибки, тем больше ресурсов требуют алгоритмы. Сохраняя внутреннее состояние одного из таких алгоритмов через равные промежутки времени в базе данных, мы можем оценить приблизительное количество уникальных посетителей не только за произвольный интервал времени, но и за произвольное объединение любых интервалов времени, например, мы можем посчитать общее количество уникальных IP, которых мы наблюдали в промежутке времени с 17:00 до 18:00 в течение последней недели. В 2000-ные в научном сообществе велась активная работа по достижению теоретически оптимальных характеристик (т.е. потребление памяти, сложность добавления нового элемента, сложность запроса) вероятностных приблизительных алгоритмов для оценки кардинальности (количества элементов в множестве), разрабатывался необходимый инструментарий. Первый такой алгоритм был предложен в 2010 году. О нём-то мы и поговорим.

Побеждаем мейнфрейм / Андрей Николаенко (IBS)

Ontico

Мейнфреймы жутко мифологизированы, встречаются самые невероятные представления о них даже в среде технически грамотных специалистов: кто-то представляет их сверхмощными машинами, лишь малость уступающими в Линпаке «Ломоносову», а кто-то — неповоротливым пережитком 1960-х, пригодным разве что для музея или Вторцветмета. В первой части доклад нацелен на преодоление этой информационной лакуны, в ней планируется кратко рассказать об устройстве современных мейнфреймов, их показателях производительности, о задачах, которые на них решаются в 2010-е годы. Главные аналитики мировых IT Gartner когда-то спрогнозировали, что последний мейнфрейм будет потушен в 1993 году. Но мейнфреймы выжили, они развивались, их рынок на больших отрезках постепенно падает, но при этом спорадически растёт, только во II квартале 2016 года он вырос на двузначные цифры в процентах. Что же заставляет заказчиков всё-таки покупать новые мейнфреймы, и в каких случаях от них наконец-то отказываются? Вторая часть доклада будет посвящена разбору случаев успешного и неуспешного перехода с мейнфреймов на x86-машины.

Viewers also liked (20)