third-party-heavy.html•11.9 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Third-Party Script Heavy Page</title>
<!-- Analytics & Tracking (Multiple competing services) -->
<!-- Problem: Multiple analytics scripts in head without async -->
<script src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
// Problem: Synchronous configuration blocking main thread
for(let i = 0; i < 1000; i++) {
gtag('event', 'page_view_detail_' + i, {
'custom_parameter': Math.random()
});
}
</script>
<!-- Problem: Facebook Pixel blocking render -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window,document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '1234567890');
fbq('track', 'PageView');
</script>
<!-- Problem: Multiple tag managers -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.ad-slot {
background: #f0f0f0;
padding: 20px;
margin: 20px 0;
min-height: 250px;
display: flex;
align-items: center;
justify-content: center;
color: #666;
}
</style>
</head>
<body>
<!-- Problem: GTM noscript iframe in visible area -->
<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<div class="container">
<h1>Third-Party Script Heavy Page</h1>
<p>This page demonstrates common third-party script performance problems.</p>
<!-- Problem: Ad scripts loaded synchronously -->
<div class="ad-slot" id="ad-header">
<script>
// Google AdSense
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="1234567890"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</div>
<!-- Problem: Social media widgets blocking main thread -->
<div id="social-widgets">
<!-- Twitter Timeline -->
<a class="twitter-timeline" data-width="300" data-height="400"
href="https://twitter.com/TwitterDev?ref_src=twsrc%5Etfw">Tweets by TwitterDev</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<!-- Facebook Page Plugin -->
<div class="fb-page" data-href="https://www.facebook.com/facebook"
data-tabs="timeline" data-width="300" data-height="400"
data-small-header="false" data-adapt-container-width="true"
data-hide-cover="false" data-show-facepile="true">
</div>
</div>
<!-- Problem: Multiple chat widgets -->
<script>
// Intercom
window.intercomSettings = {
app_id: "YOUR_APP_ID"
};
(function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){
ic('reattach_activator');ic('update',w.intercomSettings);}else{
var d=document;var i=function(){i.c(arguments);};i.q=[];i.c=function(args){
i.q.push(args);};w.Intercom=i;var l=function(){var s=d.createElement('script');
s.type='text/javascript';s.async=true;
s.src='https://widget.intercom.io/widget/YOUR_APP_ID';
var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);};
if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();
</script>
<!-- Problem: Video embeds without facade pattern -->
<div class="video-container">
<iframe width="560" height="315"
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
<!-- Problem: Multiple marketing/conversion tracking scripts -->
<script src="https://cdn.segment.com/analytics.js/v1/XXXXXXXXX/analytics.min.js"></script>
<script>
analytics.track('Page Viewed', {
title: 'Third Party Heavy',
url: window.location.href
});
</script>
<!-- Problem: Hotjar recording script -->
<script>
(function(h,o,t,j,a,r){
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
h._hjSettings={hjid:1234567,hjsv:6};
a=o.getElementsByTagName('head')[0];
r=o.createElement('script');r.async=1;
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
a.appendChild(r);
})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>
<!-- Problem: Customer support widget -->
<script>
window.$crisp=[];window.CRISP_WEBSITE_ID="XXXXXXXXX";
(function(){d=document;s=d.createElement("script");
s.src="https://client.crisp.chat/l.js";s.async=1;
d.getElementsByTagName("head")[0].appendChild(s);})();
</script>
<!-- Problem: A/B testing script blocking render -->
<script src="https://cdn.optimizely.com/js/XXXXXXXXX.js"></script>
<!-- Problem: Multiple retargeting pixels -->
<script>
// LinkedIn Insight Tag
_linkedin_partner_id = "XXXXXX";
window._linkedin_data_partner_ids = window._linkedin_data_partner_ids || [];
window._linkedin_data_partner_ids.push(_linkedin_partner_id);
(function(){var s = document.getElementsByTagName("script")[0];
var b = document.createElement("script");
b.type = "text/javascript";b.async = true;
b.src = "https://snap.licdn.com/li.lms-analytics/insight.min.js";
s.parentNode.insertBefore(b, s);})();
</script>
<!-- Problem: Review widgets -->
<script src="https://widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js"></script>
<div class="trustpilot-widget" data-locale="en-US" data-template-id="XXXXXXXXX"
data-businessunit-id="XXXXXXXXX" data-style-height="250px"
data-style-width="100%" data-theme="light">
</div>
<!-- Problem: Maps without lazy loading -->
<div id="map" style="height: 400px;"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: -34.397, lng: 150.644}
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
<!-- Problem: Multiple ad networks -->
<div class="ad-slot">
<!-- Amazon Publisher Services -->
<script>
!function(a9,a,p,s,t,A,g){if(a[a9])return;function q(c,r){a[a9]._Q.push([c,r])}
a[a9]={init:function(){q("i",arguments)},fetchBids:function(){q("f",arguments)},
setDisplayBids:function(){},targetingKeys:function(){return[]},_Q:[]};
A=p.createElement(s);A.async=!0;A.src=t;g=p.getElementsByTagName(s)[0];
g.parentNode.insertBefore(A,g)}("apstag",window,document,"script",
"//c.amazon-adsystem.com/aax2/apstag.js");
</script>
</div>
<!-- Problem: Share buttons with individual SDKs -->
<div class="share-buttons">
<div class="fb-share-button" data-href="https://example.com"
data-layout="button_count" data-size="large">
</div>
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw"
class="twitter-share-button" data-size="large" data-show-count="true">Tweet</a>
<script src="https://platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>
<script type="IN/Share" data-url="https://example.com"></script>
</div>
<!-- Problem: Email marketing scripts -->
<script src="https://js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: "XXXXXXX",
formId: "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
});
</script>
<!-- Problem: Live chat scripts loaded immediately -->
<script>
// Drift
!function() {
var t = window.driftt = window.drift = window.driftt || [];
if (!t.init) {
if (t.invoked) return void (window.console && console.error && console.error("Drift snippet included twice."));
t.invoked = !0, t.methods = ["identify", "config", "track", "reset", "debug", "show", "ping", "page", "hide", "off", "on"],
t.factory = function(e) {
return function() {
var n = Array.prototype.slice.call(arguments);
return n.unshift(e), t.push(n), t;
};
}, t.methods.forEach(function(e) {
t[e] = t.factory(e);
}), t.load = function(t) {
var e = 3e5, n = Math.ceil(new Date() / e) * e, o = document.createElement("script");
o.type = "text/javascript", o.async = !0, o.crossorigin = "anonymous", o.src = "https://js.driftt.com/include/" + n + "/" + t + ".js";
var i = document.getElementsByTagName("script")[0];
i.parentNode.insertBefore(o, i);
};
}
}();
drift.SNIPPET_VERSION = '0.3.1';
drift.load('XXXXXXXXXXX');
</script>
</div>
<!-- Problem: Scripts at the bottom still blocking -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
</body>
</html>