Popüler üçüncü taraf yerleştirmelerini verimli bir şekilde yükleme tekniklerine genel bakış.
Birçok site, web sayfasının bazı bölümlerini başka bir içerik sağlayıcıya devrederek ilgi çekici bir kullanıcı deneyimi oluşturmak için üçüncü taraf yerleştirmelerini kullanır. Üçüncü taraf içerik yerleştirmelerinin en yaygın örnekleri arasında video oynatıcılar, sosyal medya feed'leri, haritalar ve reklamlar yer alır.
Üçüncü taraf içeriği, bir sayfanın performansını birçok şekilde etkileyebilir. Oluşturmayı engelleyebilir, ağ ve bant genişliği için diğer kritik kaynaklarla rekabet edebilir veya Core Web Vitals metriklerini etkileyebilir. Üçüncü taraf yerleşik öğeler de yüklendikçe düzen kaymalarına neden olabilir. Bu makalede, üçüncü taraf yerleştirmelerini yüklerken kullanabileceğiniz performansla ilgili en iyi uygulamalar, verimli yükleme teknikleri ve popüler yerleştirmelerde düzen kaymalarını azaltmaya yardımcı olan Düzen Kayması Sonlandırıcı aracı ele alınmaktadır.
Yerleştirme nedir?
Üçüncü taraf yerleştirme, sitenizde gösterilen ve şu özelliklere sahip olan tüm içeriklerdir:
- Sizin tarafınızdan oluşturulmamış
- Üçüncü taraf sunucularından sunulanlar

Yerleştirmeler genellikle aşağıdaki alanlarda kullanılır:
- Spor, haber, eğlence ve moda ile ilgili web siteleri, metin içeriklerini zenginleştirmek için videolardan yararlanır.
- Etkin Twitter veya sosyal medya hesapları olan kuruluşlar, daha fazla kullanıcıyla etkileşim kurmak ve onlara ulaşmak için bu hesaplardaki feed'leri web sayfalarına yerleştirir.
- Restoran, park ve etkinlik mekanı sayfalarına genellikle haritalar yerleştirilir.
Üçüncü taraf yerleştirmeleri genellikle sayfadaki <iframe> öğelerine yüklenir. Üçüncü taraf sağlayıcılar, genellikle işaretleme, komut dosyaları ve stil sayfalarından oluşan bir sayfayı getiren bir <iframe> içeren HTML snippet'leri sunar. Bazı sağlayıcılar, diğer içerikleri çekmek için dinamik olarak bir <iframe> ekleyen bir komut dosyası snippet'i de kullanır. Bu durum, üçüncü taraf yerleştirmelerini ağırlaştırabilir ve birinci taraf içeriğini geciktirerek sayfanın performansını etkileyebilir.
Üçüncü taraf yerleştirmelerinin performans üzerindeki etkisi
Birçok popüler yerleştirme, 100 KB'tan fazla JavaScript içerir ve bazen 2 MB'a kadar çıkabilir. Yüklenmeleri daha uzun sürer ve yürütülürken ana ileti dizisini meşgul ederler. Lighthouse ve Chrome Geliştirici Araçları gibi performans izleme araçları, üçüncü taraf yerleştirmelerinin performans üzerindeki etkisini ölçmeye yardımcı olur.
"Üçüncü taraf kodun etkisini azaltın" Lighthouse denetimi, bir sayfanın kullandığı üçüncü taraf sağlayıcıların listesini boyut ve ana iş parçacığı engelleme süresiyle birlikte gösterir. Denetim, Chrome Geliştirici Araçları'ndaki Lighthouse sekmesinde kullanılabilir.
Yerleştirme kaynak kodu değişebileceğinden, yerleştirmelerinizin ve üçüncü taraf kodunuzun performans etkisini düzenli olarak denetlemek iyi bir uygulamadır. Bu fırsatı kullanarak gereksiz kodları kaldırabilirsiniz.

Yüklemeyle ilgili en iyi uygulamalar
Üçüncü taraf yerleştirmeleri performansı olumsuz etkileyebilir ancak önemli işlevler de sunar. Üçüncü taraf yerleştirmelerini verimli bir şekilde kullanmak ve performans üzerindeki etkilerini azaltmak için aşağıdaki yönergeleri uygulayın.
Komut dosyası sırası
İyi tasarlanmış bir sayfada, temel birinci taraf içeriği sayfanın odak noktası olurken üçüncü taraf yerleştirmeleri yan çubuklarda yer alır veya birinci taraf içeriğinden sonra görünür.
En iyi kullanıcı deneyimi için ana içerik, diğer destekleyici içeriklerden önce ve hızlı bir şekilde yüklenmelidir. Örneğin, bir haber sayfasındaki haber metni, Twitter özet akışı veya reklam yerleştirmelerinden önce yüklenmelidir.
Üçüncü taraf yerleştirmeleriyle ilgili istekler, birinci taraf içeriğinin yüklenmesini engelleyebilir. Bu nedenle, üçüncü taraf komut dosyası etiketinin konumu önemlidir. Komut dosyaları yürütülürken DOM oluşturma işlemi duraklatıldığından komut dosyaları yükleme sırasını etkileyebilir. Üçüncü taraf komut dosyası etiketlerini, temel birinci taraf etiketlerinden sonra yerleştirin ve bunları eşzamansız olarak yüklemek için async veya defer özelliklerini kullanın.
<head>
<title>Order of Things</title>
<link rel="stylesheet" media="screen" href="/assets/application.css">
<script src="index.js"></script>
<script src="https://example.com/3p-library.js" async></script>
</head>
Geç yükleme
Üçüncü taraf içeriği genellikle birincil içerikten sonra geldiği için sayfa yüklendiğinde görüntü alanında görünmeyebilir. Bu durumda, kullanıcının sayfanın ilgili bölümüne kaydırmasına kadar üçüncü taraf kaynaklarının indirilmesi ertelenebilir. Bu, yalnızca ilk sayfa yüklemesini optimize etmeye yardımcı olmakla kalmaz, aynı zamanda sabit veri planları ve yavaş ağ bağlantıları olan kullanıcılar için indirme maliyetlerini de azaltır.
İçeriğin yüklenmesini gerçekten gerekene kadar geciktirmeye tembel yükleme adı verilir. Gereksinimlere ve yerleştirme türüne bağlı olarak farklı geç yükleme teknikleri kullanabilirsiniz.
<iframe> için tarayıcıda geç yükleme
<iframe> öğeleri aracılığıyla yüklenen üçüncü taraf yerleştirmeleri için, kullanıcılar ekran dışı iframe'lere yakın bir yere kaydırana kadar yüklemeyi ertelemek üzere tarayıcı düzeyinde geç yükleme kullanabilirsiniz. <iframe> için yükleme özelliği, tüm modern tarayıcılarda kullanılabilir.
<iframe src="https://example.com"
loading="lazy"
width="600"
height="400">
</iframe>
Yükleme özelliği aşağıdaki değerleri destekler:
lazy: Tarayıcının iframe'i yüklemeyi ertelemesi gerektiğini belirtir. Tarayıcı, görüntü alanına yaklaştığında iframe'i yükler. iFrame, geç yükleme için uygunsa kullanın.eager: iframe'i hemen yükler. iFrame, geç yükleme için uygun bir aday değilse kullanın.loadingözelliği belirtilmediyse Lite mod hariç varsayılan davranış budur.auto: Tarayıcı, bu çerçevenin geç yüklenip yüklenmeyeceğini belirler.
loading özelliğini desteklemeyen tarayıcılar bu özelliği yok sayar. Bu nedenle, tarayıcı düzeyinde geç yüklemeyi progresif geliştirme olarak uygulayabilirsiniz. Özelliği destekleyen tarayıcılar, distance-from-viewport eşiği (iFrame'in yüklenmeye başladığı mesafe) için farklı uygulamalara sahip olabilir.
Aşağıda, farklı türlerdeki yerleştirmeler için iFrame'leri geç yükleyebileceğiniz bazı yöntemler verilmiştir.
- YouTube videoları: YouTube video oynatıcı iframe'ini geç yüklemek için YouTube'un sağladığı yerleştirme koduna
loadingözelliğini ekleyin. YouTube yerleştirmesini geç yüklemek, ilk sayfa yüklemesinde yaklaşık 500 KB tasarruf sağlayabilir.
<iframe src="https://www.youtube.com/embed/aKydtOXW8mI"
width="560" height="315"
loading="lazy"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
- Google Haritalar: Google Haritalar iframe'ini geç yüklemek için Google Maps Embed API tarafından oluşturulan iframe yerleştirme koduna
loadingözelliğini ekleyin. Aşağıda, Google Cloud API anahtarı için yer tutucu içeren bir kod örneği verilmiştir.
<iframe src="https://www.google.com/maps/embed/v1/place?key=API_KEY&q=PLACE_ID"
width="600" height="450"
style="border:0;"
allowfullscreen=""
loading="lazy">
</iframe>
lazysizes kitaplığı
Tarayıcılar, bir iFrame'in ne zaman yükleneceğine karar vermek için etkili bağlantı türü ve Lite modu gibi sinyallerin yanı sıra yerleştirilmiş öğenin görünüm alanına olan uzaklığını da kullandığından tarayıcı tembel yükleme işlemi tutarsız olabilir. Mesafe eşikleri üzerinde daha iyi kontrol sahibi olmanız gerekiyorsa veya tarayıcılarda tutarlı bir geç yükleme deneyimi sunmak istiyorsanız lazysizes kitaplığını kullanabilirsiniz.
lazysizes, hem resimler hem de iframe'ler için hızlı ve SEO dostu bir geç yükleyicidir. Bileşeni indirdikten sonra, YouTube yerleştirmesi için bir iFrame ile aşağıdaki şekilde kullanılabilir.
<script src="lazysizes.min.js" async></script>
<iframe data-src="https://www.youtube.com/embed/aKydtOXW8mI"
width="560" height="315"
class="lazyload"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
Benzer şekilde, lazysizes diğer üçüncü taraf yerleştirmeleri için iFrame'lerle birlikte kullanılabilir.
Lazysizes'ın bir öğenin görünür hale geldiğini algılamak için Intersection Observer API'sini kullandığını unutmayın.
Facebook'ta data-lazy kullanma
Facebook, yerleştirilebilen farklı türlerde sosyal eklentiler sunar. Gönderiler, yorumlar, videolar ve en popüler Beğen düğmesi buna dahildir. Tüm eklentilerde data-lazy ayarı bulunur. true olarak ayarladığınızda, eklentinin loading="lazy" iframe özelliğini ayarlayarak tarayıcının geç yükleme mekanizmasını kullanması sağlanır.
Instagram feed'lerini geç yükleme
Instagram, yerleştirme kapsamında bir işaretleme bloğu ve bir komut dosyası sağlar. Komut dosyası, sayfaya bir <iframe> yerleştirir. Bu <iframe> öğesinin geç yüklenmesi, yerleştirme sıkıştırılmış olarak 100 KB'tan büyük olabileceğinden performansı artırabilir. WPZoom ve Elfsight gibi WordPress siteleri için birçok Instagram eklentisi, geç yükleme seçeneği sunar.
Yerleştirmeleri cephelerle değiştirme
Etkileşimli yerleştirmeler sayfaya değer katsa da birçok kullanıcı bunlarla etkileşim kurmayabilir. Örneğin, bir restoran sayfasına göz atan her kullanıcı harita yerleştirmesini tıklamaz, genişletmez, kaydırmaz ve haritada gezinmez. Benzer şekilde, telekom hizmeti sağlayıcılarının sayfasına gelen her kullanıcı chatbot ile etkileşimde bulunmaz. Bu gibi durumlarda, yerleştirme yerine bir hafif bileşen göstererek yerleştirmenin yüklenmesini veya geç yüklenmesini tamamen önleyebilirsiniz.
Hafif bileşen, yerleştirilmiş gerçek üçüncü taraf öğesine benzeyen ancak işlevsel olmayan ve bu nedenle sayfa yükleme süresini çok daha az etkileyen statik bir öğedir. Bu tür yerleştirmeleri kullanıcıya değer sunmaya devam ederken en iyi şekilde yüklemek için kullanabileceğiniz birkaç stratejiyi aşağıda bulabilirsiniz.
Statik görüntüleri cephe olarak kullanma
Haritanın etkileşimli olmasının gerekmediği durumlarda, harita yerleştirmeleri yerine statik resimler kullanılabilir. Haritada ilgilendiğiniz alanı yakınlaştırabilir, bir resim yakalayabilir ve bunu etkileşimli harita yerleştirme yerine kullanabilirsiniz. Yerleştirilmiş iframe öğesinin ekran görüntüsünü almak için Geliştirici Araçları'nın Düğüm ekran görüntüsü al özelliğini de kullanabilirsiniz.

Geliştirici Araçları, resmi png olarak yakalar ancak daha iyi performans için WebP biçimine dönüştürmeyi de düşünebilirsiniz.
Cephe olarak dinamik resimler kullanma
Bu teknik, çalışma zamanında etkileşimli bir yerleştirmeye karşılık gelen resimler oluşturmanıza olanak tanır. Aşağıda, sayfalarınızdaki yerleştirmelerin statik sürümlerini oluşturmanıza olanak tanıyan bazı araçlar verilmiştir.
Maps Static API: Google Maps Static API hizmeti, standart bir HTTP isteğinde yer alan URL parametrelerine göre bir harita oluşturur ve haritayı web sayfanızda gösterebileceğiniz bir resim olarak döndürür. URL, Google Maps API anahtarını içermeli ve sayfadaki
<img>etiketinesrcözelliği olarak yerleştirilmelidir.Statik harita oluşturucu aracı, URL için gereken parametreleri yapılandırmanıza yardımcı olur ve görüntü öğesinin kodunu anlık olarak verir.
Aşağıdaki snippet'te, kaynağı Maps Static API URL'si olarak ayarlanmış bir resmin kodu gösterilmektedir. Resmin tıklanmasıyla gerçek haritaya erişilmesini sağlayan bir bağlantı etiketine dahil edilmiştir. (Not: API anahtarı özelliği URL'ye dahil edilmez)
<a href="https://www.google.com/maps/place/Albany,+NY/"> <img src="https://maps.googleapis.com/maps/api/staticmap?center=Albany,+NY&zoom=13&scale=1&size=600x300&maptype=roadmap&format=png&visual_refresh=true" alt="Google Map of Albany, NY"> </a>Twitter ekran görüntüleri: Harita ekran görüntülerine benzer şekilde, bu konsept sayesinde canlı akış yerine dinamik olarak bir Twitter ekran görüntüsü yerleştirebilirsiniz. Tweetpik, tweetlerin ekran görüntüsünü almak için kullanılabilecek araçlardan biridir. Tweetpik API, tweet'in URL'sini kabul eder ve içeriğini içeren bir resim döndürür. API, resmin arka planını, renklerini, kenarlıklarını ve boyutlarını özelleştirmek için parametreleri de kabul eder.
Cepheleri geliştirmek için tıklayarak yükleme özelliğini kullanma
Yüklemek için tıklama konseptinde geç yükleme ve cepheler birleştirilir. Sayfa başlangıçta hafif bileşenle yüklenir. Kullanıcı, statik yer tutucuyla etkileşime geçip yer tutucuyu tıkladığında üçüncü taraf yerleştirme yüklenir. Bu, etkileşim üzerine içe aktarma modeli olarak da bilinir ve aşağıdaki adımlar kullanılarak uygulanabilir.
- Sayfa yüklendiğinde: Sayfada hafif bileşen veya statik öğe bulunur.
- Fareyle üzerine gelindiğinde: Facade, üçüncü taraf yerleştirme sağlayıcısına önceden bağlanır.
- Tıklama üzerine: Hafif bileşen, üçüncü taraf ürünüyle değiştirilir.
Cepheler; video oynatıcılar, sohbet widget'ları, kimlik doğrulama hizmetleri ve sosyal medya widget'ları için üçüncü taraf yerleştirmeleriyle birlikte kullanılabilir. Yalnızca oynat düğmesi içeren resimlerden oluşan YouTube video yerleştirmeleri, sıkça karşılaştığımız sahte içeriklerdir. Asıl video yalnızca resmi tıkladığınızda yüklenir.
Etkileşimde içe aktarma kalıbını kullanarak özel bir tıklayarak yükleme hafif bileşeni oluşturabilir veya farklı türlerdeki yerleştirmeler için kullanılabilen aşağıdaki açık kaynaklı hafif bileşenlerden birini kullanabilirsiniz.
YouTube hafif bileşeni
Lite-youtube-embed, YouTube oynatıcısının gerçek oynatıcıya benzeyen ancak 224 kat daha hızlı olan, önerilen bir hafif bileşenidir. Komut dosyası ve stil sayfası indirilip HTML veya JavaScript'te
<lite-youtube>etiketi kullanılarak kullanılabilir. YouTube tarafından desteklenen özel oynatıcı parametreleri,paramsözelliği aracılığıyla eklenebilir.<lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>Aşağıda, lite-youtube-embed ile gerçek yerleştirme arasındaki karşılaştırma verilmiştir.
Lite-YouTube yerleştirme
YouTube yerleştirme YouTube ve Vimeo oynatıcılar için kullanılabilen diğer benzer cepheler lite-youtube, lite-vimeo-embed ve lite-vimeo'dur.
Sohbet widget'ı cephesi
React canlı sohbet yükleyicisi, yerleştirme yerine yerleştirilmiş sohbet gibi görünen bir düğme yükler. Intercom, Help Scout ve Messenger gibi çeşitli sohbet sağlayıcı platformlarla kullanılabilir. Benzer widget, sohbet widget'ından çok daha hafiftir ve daha hızlı yüklenir. Kullanıcı fareyle düğmenin üzerine geldiğinde veya düğmeyi tıkladığında ya da sayfa uzun süre boşta kaldığında gerçek sohbet widget'ı ile değiştirilebilir. Postmark başarılı örneğinde,
react-live-chat-loader'ın nasıl uygulandığı ve elde edilen performans iyileştirmeleri açıklanmaktadır.
Yerleştirmeleri kaldırma veya bağlantılarla değiştirme
Bazı üçüncü taraf yerleştirmelerinin yükleme performansının düşük olmasına neden olduğunu fark ederseniz ve daha önce açıklanan tekniklerden herhangi birini kullanmak mümkün değilse yapabileceğiniz en basit şey yerleştirmeyi tamamen kaldırmaktır. Kullanıcılarınızın yerleştirilmiş içeriklere erişmeye devam etmesini istiyorsanız target="_blank" simgesiyle birlikte içeriğin bağlantısını sağlayabilirsiniz. Böylece kullanıcılar bağlantıyı tıklayıp başka bir sekmede görüntüleyebilir.
Düzen kararlılığı
Yerleştirilmiş içeriğin dinamik olarak yüklenmesi, sayfanın yükleme performansını artırabilir ancak bazen sayfa içeriğinin beklenmedik şekilde hareket etmesine neden olabilir. Bu duruma düzen kayması denir.
Görsel kararlılık, sorunsuz bir kullanıcı deneyimi için önemli olduğundan Cumulative Layout Shift (CLS), bu kaymaların ne sıklıkta gerçekleştiğini ve ne kadar rahatsız edici olduğunu ölçer.
Sayfa yüklenirken daha sonra dinamik olarak yüklenecek öğeler için yer ayırarak düzen kaymaları önlenebilir. Tarayıcı, öğelerin genişliğini ve yüksekliğini biliyorsa ayrılacak alanı belirleyebilir. Bunu, iFrame'lerin width ve height özelliklerini belirterek veya üçüncü taraf yerleştirmenin yükleneceği statik öğeler için sabit bir boyut ayarlayarak sağlayabilirsiniz. Örneğin, yerleştirilmiş bir YouTube videosunun iFrame'i için genişlik ve yükseklik aşağıdaki gibi belirtilmelidir.
<iframe src="https://www.youtube.com/embed/aKydtOXW8mI" width="560" height="315">
</iframe>
YouTube, Google Haritalar ve Facebook gibi popüler yerleştirmeler, yerleştirme kodunu boyut özellikleri belirtilmiş şekilde sağlar. Ancak, bu özelliği içermeyen sağlayıcılar olabilir. Örneğin, bu kod snippet'i, sonuçta ortaya çıkan yerleştirmenin boyutlarını belirtmez.
<a class="twitter-timeline" href="https://twitter.com/ChannelNewsAsia?ref_src=twsrc%5Etfw" data-tweet-limit="1">Tweets by ChannelNewsAsia</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Bu sayfa oluşturulduktan sonra eklenen iframe öğesini incelemek için Geliştirici Araçları'nı kullanabilirsiniz. Aşağıdaki snippet'te görüldüğü gibi, yerleştirilen iFrame'in yüksekliği sabittir, genişliği ise yüzde olarak belirtilir.
<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" class="twitter-timeline twitter-timeline-rendered" style="position: static; visibility: visible; display: inline-block; width: 100%; padding: 0px; border: none; max-width: 1000px; min-width: 180px; margin-top: 0px; margin-bottom: 0px; min-height: 200px; height: 6238.31px;" data-widget-id="profile:ChannelNewsAsia" title="Twitter Timeline">
</iframe>
Bu bilgiler, kapsayıcı öğenin boyutunu ayarlamak için kullanılabilir. Böylece, feed yüklenirken kapsayıcı genişlemez ve düzen kayması olmaz. Aşağıdaki snippet, daha önce eklenen yerleştirmenin boyutunu düzeltmek için kullanılabilir.
<style>
.twitterfeed { display: table-cell; vertical-align: top; width: 100vw; }
.twitter-timeline {height: 400px !important; }
</style>
<div class=twitterfeed>
<a class="twitter-timeline" href="https://twitter.com/ChannelNewsAsia?ref_src=twsrc%5Etfw" data-tweet-limit="1">Tweets by ChannelNewsAsia</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
Düzen Kayması Sonlandırıcı
Üçüncü taraf yerleştirmeleri, oluşturdukları son içeriğin boyutlarını (genişlik, yükseklik) genellikle atladığından sayfada önemli düzen kaymalarına neden olabilir. Bu sorunu, farklı görüntü alanı boyutlarında nihai boyutları Geliştirici Araçları'nı kullanarak manuel olarak incelemeden çözmek zor olabilir.
Artık Twitter, Facebook ve diğer sağlayıcılar gibi popüler yerleştirmelerdeki düzen kaymalarını azaltmanıza yardımcı olabilecek otomatik bir araç olan Layout Shift Terminator'ı kullanabilirsiniz.
Düzen Kayması Sonlandırıcı:
- Yerleştirme, istemci tarafında bir iframe'e yüklenir.
- iframe'i çeşitli popüler görüntü alanı boyutlarına göre yeniden boyutlandırır.
- Her popüler görüntü alanı için yerleştirmenin boyutlarını yakalar ve daha sonra medya sorguları ve kapsayıcı sorguları oluşturur.
- Yerleştirme başlatılana kadar (bundan sonra min-height stilleri kaldırılır) medya sorgularını (ve kapsayıcı sorgularını) kullanarak yerleştirme işaretlemesinin etrafında minimum yüksekliğe sahip bir sarmalayıcı oluşturur.
Normalde yerleştirmeyi sayfanıza ekleyeceğiniz yere kopyalayıp yapıştırabileceğiniz optimize edilmiş bir yerleştirme snippet'i oluşturur.

Layout Shift Terminator'ı deneyin ve Layout Shift Terminator GitHub projesi ile ilgili geri bildirimlerinizi paylaşın. Bu araç beta sürümündedir ve zaman içinde daha da geliştirilmesi amaçlanmaktadır.
Sonuç
Üçüncü taraf yerleştirmeleri kullanıcılara büyük değer sağlayabilir ancak bir sayfadaki yerleştirmelerin sayısı ve boyutu arttıkça performans düşebilir. Bu nedenle, yerleştirmelerin konumuna, alaka düzeyine ve potansiyel kullanıcıların ihtiyaçlarına göre uygun yükleme stratejilerini ölçmek, değerlendirmek ve kullanmak gerekir.