Hierarchical Composable Optimization of Web Pages proposes FAME, a framework that models web pages as hierarchical and composable structures. FAME defines interfaces for operators like fetch, choice, and map to optimize page elements. It separates optimization from content creation and constraints to allow independent experimentation by algorithms. The framework instruments pages to provide real-time feedback and aims to enable agile experimentation across a variety of generated digital media experiences.

1. Hierarchical Composable
Optimization of Web Pages
Ronen Barenboim# Ronny Lempel*
Edward Bortnikov* Hayim Makabee*
Nadav Golbandi* Scott Roy#
Amit Kagian* Oren Somekh*
Liran Katzir* *Y! Labs Haifa
# Y! Inc. Sunnyvale

2. Introduction
• Traditional media is designed by human editors:
– layout, content (including ads), format (rendering)
• Printed media:
– No way to receive immediate feedback
– Editions are published at fixed intervals
• Digital media:
– Instrumentation allows immediate feedback
– Not bound to the concept of editions
• Proper automation can enable
experimentation with a huge variety
of generated pages
-2-

3. FAME – Framework for Agile Media Experiences
FAME
• FAME Defines a hierarchical logical model
for describing complex self-optimizing
web-pages
• Allows fine-grained interplay between
algorithmic decisions and editorial control
-3-

4. FAME – Flexible and Composable
• FAME Allows independent plug-ins to
FAME
optimize various decisions on a page
• Orchestrates plug-ins to satisfy constraints
while performing well on a target function
• Separation-of-concerns: architecture
emphasizes decoupling and composability
of all artifacts
-4-

5. Agile Media Creation Ecosystem
Degrees
of Freedom
UE Design
Content
Constraints Optimization
-5-

6. Agile Media Creation
• Degrees-of-Freedom: What, Where, How
Define content/design alternatives UE Design
Content
(product owner)
• Constraints:
Maintain semantic consistency by applying
constraints over certain content/design combinations
(media editors)
• Optimization:
Optimize content/design selections (optimization
experts) subject to various goals (business owners)
• Composable and reusable software and configuration
-6-

7. Logical Page Description
Yahoo! Header
Today Trending
Yahoo! Sites
Main Story
Layout
#1 #2 #3 #4
Ad
Video
News
Modules
Regions
Rendering Vertical
-7-

8. Logical Page Description
<layout label=“MainPage”>
…
<region label=“TodayRegion”> Layout
<module label=“TodayModule” render=“Design7”>
<MainStory>
<image href=“../10BlackFriday.jpg”/>
Today Today
<title> … </title>
Region
<description> … </description> Main Story Arbitrary
</MainStory> Tree
<TeaserNewsItem label=“teaser1”>
Today #1 #2 #3 #4
<image href=“../thumbnail1.jpg”/>
<title> … </title> Module
</TeaserNewsItem>
…
</module>
</region>
MainStory Teaser1 Teaser4
</layout> … -8-

9. Logical Page Model
Logical Page Model
FAME
Logical Page Description
Operators
-9-

10. fetch operator (dynamic content)
Today
fetch Region
Today
Module
Result Set
News Fetcher
News Item1 News Item5
- 10 -

11. choice operator
Vertical
choice Region
Choice
Autos Travel Finance
Module Module Module
- 11 -

12. map operator
map Today
Module
News Map News
Item A Item E
Map Map
Position1 Position5
Item 1 Item 5
News News
Item 1 Item 5
- 12 -

13. constraints operator
Page Constraints
Constraint
Java Script
Today Trends
Region Region
Today Trends
Module Module
Page
Constraint Constraints Map
Java Script
Trends
Map Position1 Position10
Fetcher
News
constraints
Position1 Position5
Fetcher
- 13 -

14. Hierarchical operator composition
Today
Module
XSLT Map
Result Set
News News
Result Set
Position1Item A Position5 Item E Fetcher
Map
News Map
News
Item 11
Item Item 30
Item 30
fetch
map News News
Item 1 Item 30
- 14 -

15. Operator implementation
• Operator: interface (fetch, choice, map)
• Resolver: implementation
• A resolver can have a custom business logic or
to conduct experimentation
• Example: a choice operator experimenting with
choosing an item that maximizes CTR
• Available interface for collecting Real Time
User Feedback (RTUF): clicks, views, mouse-
hovers, etc.
- 15 -

16. End-to-End 2-Façade Architecture:
Resolver Resolver
User User
User Feedback Feedback
Request Model Model
Request Update
Page Model
Front-End Request
Model RTUF
Page Description Executor Dispatcher
+ RTUF
Instrumentation
FAME
Real Time User Feedback (RTUF)
- 16 -

17. Summary
• FAME: Framework for agile Web media experiences
– Algorithmic experimentation and optimization
• Logical page model:
– Fetch dynamic content
– Degrees of freedom
– Editorial constraints
• Open platform:
interfaces and extension points for multiple implementations
of optimization algorithms to be plugged-in
• Separation of concerns: allow players with different roles
and skill sets to work independently
– Compose and reuse artifacts
- 17 -

18. Thank You!
- 18 -