SlideShare ist ein Scribd-Unternehmen logo
1 von 8
Example of implementation with Google ads
• Pages are complex: lots of resources from
  various domains

• A lot of what's loaded is third party content



             We need unobstrusive loading
             techniques to get better perfs.
   On TGU FR Homepage, we have 3 DFP
    (Doubleclick for Publishers) ads

Impact:
   15 HTTP requests, 78KB total
   Scripts block the page’s content from downloading
Concept
    iframe on the same origin that serves remote content

How is it possible?
   The previous heavy script is replaced with a very small
    script that only creates the iframe
   Inside this iframe, it executes the heavy time-
    consuming script that will get the ads
   It creates another friendly iframe that contains the ad
Why is a friendly iframe that
 awesome?
 Ads can be loaded in parallel with the rest of the page
 Start of loading ads can be delayed, regardless of tag
  placement (not possible with either standard method)
 Ads may be loaded using AJAX or other dynamic
  coding frameworks, without introducing compatibility
  issues due to ads using document.write() etc.
 Gives the ad access to the DOM of the page, allowing
  interstitials, expanding ads, resizing the iframe…
With his new DFP ads, Google offers the
    best current solution

 The script that creates the iframe is asynchronous
 The single request mode : 1 HTTP request for all ads
  slots
 Asynchronously refreshing ad slots
 Support for expanding ads
Friendly iframes
Friendly iframes

Weitere ähnliche Inhalte

Was ist angesagt?

Chrome Extension Development - Adam Horvath, Google Technology User Group, Sy...
Chrome Extension Development - Adam Horvath, Google Technology User Group, Sy...Chrome Extension Development - Adam Horvath, Google Technology User Group, Sy...
Chrome Extension Development - Adam Horvath, Google Technology User Group, Sy...
adamhorvath
 

Was ist angesagt? (20)

wp cli- don’t fear the command line
wp cli- don’t fear the command linewp cli- don’t fear the command line
wp cli- don’t fear the command line
 
Grav CMS
Grav CMSGrav CMS
Grav CMS
 
WordPress Multilingual: WordCamp Antwerp 2016
WordPress Multilingual: WordCamp Antwerp 2016WordPress Multilingual: WordCamp Antwerp 2016
WordPress Multilingual: WordCamp Antwerp 2016
 
Basic Wordpress Session
Basic Wordpress SessionBasic Wordpress Session
Basic Wordpress Session
 
Chrome Extension Development - Adam Horvath, Google Technology User Group, Sy...
Chrome Extension Development - Adam Horvath, Google Technology User Group, Sy...Chrome Extension Development - Adam Horvath, Google Technology User Group, Sy...
Chrome Extension Development - Adam Horvath, Google Technology User Group, Sy...
 
Les Basiques - Web Développement HTML5, CSS3, JS et PHP
Les Basiques - Web  Développement HTML5, CSS3, JS et PHPLes Basiques - Web  Développement HTML5, CSS3, JS et PHP
Les Basiques - Web Développement HTML5, CSS3, JS et PHP
 
WordCamp RVA 2011 - Performance & Tuning
WordCamp RVA 2011 - Performance & TuningWordCamp RVA 2011 - Performance & Tuning
WordCamp RVA 2011 - Performance & Tuning
 
Websites for Hackers
Websites for HackersWebsites for Hackers
Websites for Hackers
 
Template tuning for high performance
Template tuning for high performanceTemplate tuning for high performance
Template tuning for high performance
 
Introduction to Wordpress
Introduction to WordpressIntroduction to Wordpress
Introduction to Wordpress
 
Presentation1
Presentation1Presentation1
Presentation1
 
Javascript - Getting started | DevCom ISITCom
Javascript - Getting started | DevCom ISITComJavascript - Getting started | DevCom ISITCom
Javascript - Getting started | DevCom ISITCom
 
Modern Web Application Development Workflow - EclipseCon US 2014
Modern Web Application Development Workflow - EclipseCon US 2014Modern Web Application Development Workflow - EclipseCon US 2014
Modern Web Application Development Workflow - EclipseCon US 2014
 
The Power of a Video Library - WordCamp Raleigh
The  Power of a Video Library - WordCamp RaleighThe  Power of a Video Library - WordCamp Raleigh
The Power of a Video Library - WordCamp Raleigh
 
High Performance - Joomla!Days NL 2009 #jd09nl
High Performance - Joomla!Days NL 2009 #jd09nlHigh Performance - Joomla!Days NL 2009 #jd09nl
High Performance - Joomla!Days NL 2009 #jd09nl
 
Front-End Performance Optimizing
Front-End Performance OptimizingFront-End Performance Optimizing
Front-End Performance Optimizing
 
Introduction to WordPress
Introduction to WordPressIntroduction to WordPress
Introduction to WordPress
 
Building a community of Open Source intranet users
Building a community of Open Source intranet usersBuilding a community of Open Source intranet users
Building a community of Open Source intranet users
 
2011 05 word-press-not-just-for-blogging-anymore
2011 05 word-press-not-just-for-blogging-anymore2011 05 word-press-not-just-for-blogging-anymore
2011 05 word-press-not-just-for-blogging-anymore
 
What is the Responsibility of Plugin Developers?
What is the Responsibility of Plugin Developers?What is the Responsibility of Plugin Developers?
What is the Responsibility of Plugin Developers?
 

Ähnlich wie Friendly iframes

0116v1_GL_Retargeting_Glossary
0116v1_GL_Retargeting_Glossary0116v1_GL_Retargeting_Glossary
0116v1_GL_Retargeting_Glossary
Holly Sanger
 
Dynamic websites lec5
Dynamic websites lec5Dynamic websites lec5
Dynamic websites lec5
Belal Arfa
 
Docs Python Org Howto Webservers Html
Docs Python Org Howto Webservers HtmlDocs Python Org Howto Webservers Html
Docs Python Org Howto Webservers Html
AkramWaseem
 
Internet programming lecture 1
Internet programming lecture 1Internet programming lecture 1
Internet programming lecture 1
Mohammed Hussein
 
Google chrome extension
Google chrome extensionGoogle chrome extension
Google chrome extension
Johnny Kingdom
 

Ähnlich wie Friendly iframes (20)

Google Adsense
Google AdsenseGoogle Adsense
Google Adsense
 
Display Ads Performance with Sugar
Display Ads Performance with SugarDisplay Ads Performance with Sugar
Display Ads Performance with Sugar
 
0116v1_GL_Retargeting_Glossary
0116v1_GL_Retargeting_Glossary0116v1_GL_Retargeting_Glossary
0116v1_GL_Retargeting_Glossary
 
The Same-Origin Policy
The Same-Origin PolicyThe Same-Origin Policy
The Same-Origin Policy
 
Cdn optimizely and how latency affects load speed
Cdn optimizely and how latency affects load speedCdn optimizely and how latency affects load speed
Cdn optimizely and how latency affects load speed
 
Boosting your conversion rate through web performance improvements
Boosting your conversion rate through web performance improvementsBoosting your conversion rate through web performance improvements
Boosting your conversion rate through web performance improvements
 
Week13
Week13Week13
Week13
 
Week13
Week13Week13
Week13
 
X realtime xmp-ptut-pdf
X realtime xmp-ptut-pdfX realtime xmp-ptut-pdf
X realtime xmp-ptut-pdf
 
Dynamic websites lec5
Dynamic websites lec5Dynamic websites lec5
Dynamic websites lec5
 
Bruce Lawson Opera Indonesia
Bruce Lawson Opera IndonesiaBruce Lawson Opera Indonesia
Bruce Lawson Opera Indonesia
 
SEO tips 2013
SEO tips 2013SEO tips 2013
SEO tips 2013
 
Docs Python Org Howto Webservers Html
Docs Python Org Howto Webservers HtmlDocs Python Org Howto Webservers Html
Docs Python Org Howto Webservers Html
 
AEM & Single Page Applications (SPAs) 101
AEM & Single Page Applications (SPAs) 101AEM & Single Page Applications (SPAs) 101
AEM & Single Page Applications (SPAs) 101
 
Static dynamic and active web pages
Static dynamic and active web pagesStatic dynamic and active web pages
Static dynamic and active web pages
 
High Performance Web Sites, With Ads: Don't let third parties make you slow
High Performance Web Sites, With Ads: Don't let third parties make you slowHigh Performance Web Sites, With Ads: Don't let third parties make you slow
High Performance Web Sites, With Ads: Don't let third parties make you slow
 
Internet programming lecture 1
Internet programming lecture 1Internet programming lecture 1
Internet programming lecture 1
 
Get AMP’ed for AMP!
Get AMP’ed for AMP!Get AMP’ed for AMP!
Get AMP’ed for AMP!
 
Google chrome extension
Google chrome extensionGoogle chrome extension
Google chrome extension
 
Front-End Performance Checklist 2020
Front-End Performance Checklist 2020Front-End Performance Checklist 2020
Front-End Performance Checklist 2020
 

Kürzlich hochgeladen

Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 

Kürzlich hochgeladen (20)

EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 

Friendly iframes

  • 1. Example of implementation with Google ads
  • 2. • Pages are complex: lots of resources from various domains • A lot of what's loaded is third party content We need unobstrusive loading techniques to get better perfs.
  • 3. On TGU FR Homepage, we have 3 DFP (Doubleclick for Publishers) ads Impact:  15 HTTP requests, 78KB total  Scripts block the page’s content from downloading
  • 4. Concept iframe on the same origin that serves remote content How is it possible?  The previous heavy script is replaced with a very small script that only creates the iframe  Inside this iframe, it executes the heavy time- consuming script that will get the ads  It creates another friendly iframe that contains the ad
  • 5. Why is a friendly iframe that awesome?  Ads can be loaded in parallel with the rest of the page  Start of loading ads can be delayed, regardless of tag placement (not possible with either standard method)  Ads may be loaded using AJAX or other dynamic coding frameworks, without introducing compatibility issues due to ads using document.write() etc.  Gives the ad access to the DOM of the page, allowing interstitials, expanding ads, resizing the iframe…
  • 6. With his new DFP ads, Google offers the best current solution  The script that creates the iframe is asynchronous  The single request mode : 1 HTTP request for all ads slots  Asynchronously refreshing ad slots  Support for expanding ads