Popüler üçüncü taraf yerleştirmelerini verimli bir şekilde yükleme tekniklerine genel bakış.
Birçok site, bir 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ştirmeleri kullanır. Üçüncü taraf içerik yerleştirmeye en yaygın örnekler video oynatıcılar, sosyal medya yayınları, haritalar ve reklamlardır.
Üçüncü taraf içeriği, sayfanın performansını birçok şekilde etkileyebilir. Oluşturmayı engelleyebilir, ağ ve bant genişliği açısından diğer kritik kaynaklarla mücadele edebilir veya Core Web Vitals metriklerini etkileyebilir. Üçüncü taraf yerleştirmeleri, yüklenirken düzen kaymalarına da neden olabilir. Bu makalede, üçüncü taraf yerleştirmeleri yüklerken kullanabileceğiniz en iyi performans uygulamaları, verimli yükleme teknikleri ve popüler yerleştirmeler için düzen kaymalarını azaltmaya yardımcı olan Layout Shift Sonlandırıcı aracı açıklanmaktadır.
Yerleştirme nedir?
Üçüncü taraf yerleştirme, sitenizde görüntülenen ve aşağıdaki özelliklere sahip herhangi bir içeriktir:
- Sizin tarafınızdan yazılmadı
- Üçüncü taraf sunucularından sunulur
Yerleştirmeler genellikle şu amaçlarla kullanılır:
- Spor, haber, eğlence ve moda ile ilgili web siteleri, metin içeriklerini zenginleştirmek için videolar kullanır.
- Etkin Twitter veya sosyal medya hesapları olan kuruluşlar daha fazla insanla etkileşim kurmak ve onlara ulaşmak için bu hesaplardaki feed'leri web sayfalarına yerleştirir.
- Restoran, park ve etkinlik yeri sayfalarına genellikle haritalar yerleştirilir.
Üçüncü taraf yerleştirmeleri genellikle sayfadaki <iframe>
öğeleri içinde yüklenir. Üçüncü taraf sağlayıcılar genellikle işaretleme, komut dosyaları ve stil sayfalarından oluşan bir sayfayı çeken <iframe>
'den oluşan HTML snippet'leri sunar. Bazı sağlayıcılar, diğer içerikleri çekmek için dinamik olarak <iframe>
ekleyen komut dosyası snippet'i de kullanır. Bu durum, üçüncü taraf yerleştirme işlemlerini yoğunlaştırabilir ve birinci taraf içeriğini geciktirerek sayfanın performansını etkileyebilir.
Üçüncü taraf yerleştirmelerinin performans üzerindeki etkisi
Popüler yerleştirmelerin çoğu 100 KB'tan fazla JavaScript içerir. Bu boyut, bazen 2 MB'a kadar çıkabilir. Yükleme işlemi daha fazla zaman alır ve yürütme sırasında ana iş parçacığını meşgul tutar. Lighthouse ve Chrome Geliştirici Araçları gibi performans izleme araçları, üçüncü taraf yerleştirmelerin performans üzerindeki etkisini ölçmeye yardımcı olur.
Üçüncü taraf kodların etkisini azaltma 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. Bu denetime, Lighthouse sekmesindeki Chrome Geliştirici Araçları'ndan erişilebilir.
Yerleştirme kaynak kodu değişebileceğinden, yerleşik öğelerinizin ve üçüncü taraf kodunuzun performans üzerindeki etkisini düzenli olarak denetlemek iyi bir uygulamadır. Gereksiz kodları kaldırmak için bu fırsatı kullanabilirsiniz.
En iyi uygulamalar yükleniyor
Üçüncü taraf yerleştirmeleri performansı olumsuz yönde etkileyebilir ancak aynı zamanda önemli işlevler de sunar. Üçüncü taraf yerleştirme işlemlerini verimli bir şekilde kullanmak ve bunların performans üzerindeki etkisini azaltmak için bu yönergeleri uygulayın.
Komut dosyası sıralama
İyi tasarlanmış bir sayfada, temel birinci taraf içeriği sayfanın odak noktası olur. Üçüncü taraf yerleştirilmiş öğeler ise kenar çubukları kaplar veya birinci taraf içeriğinden sonra görünür.
En iyi kullanıcı deneyimi için ana içerik hızlı bir şekilde ve diğer destekleyici içeriklerden önce yüklenmelidir. Örneğin, bir haber sayfasındaki haber metni, Twitter özet akışı veya reklamlar için yerleştirilmeden önce yüklenmelidir.
Üçüncü taraf yerleştirme istekleri, birinci taraf içeriğin 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, anahtar birinci taraf etiketlerinin arkasına 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çerik genellikle birincil içerikten sonra geldiğinden, sayfa yüklendiğinde görüntü alanında görünmeyebilir. Bu durumda, kullanıcı sayfanın ilgili bölümüne gidinceye kadar üçüncü taraf kaynaklarının indirilmesi ertelenebilir. Bu, ilk sayfa yüklemenin optimize edilmesine yardımcı olmakla kalmaz, sabit veri planı kullanan ve ağ bağlantısı yavaş olan kullanıcılar için indirme maliyetlerini de azaltır.
İçeriğin yüklenmesini gerçekten ihtiyaç duyulana kadar ertelemeye geç 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ı geç yükleme
<iframe>
öğeleri üzerinden yüklenen üçüncü taraf yerleştirmelerinde, ekran dışı iframe'lerin yüklenmesini ertelemek için kullanıcı düzeyinde geç yükleme özelliğini 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'in yüklenmesini ertelemesi gerektiğini belirtir. Tarayıcı, iframe'i görüntü alanına yaklaştığında yükler. iFrame, geç yükleme için iyi bir adaysa kullanın.eager
: iframe'i hemen yükler. iFrame, geç yükleme için iyi bir aday değilse kullanın.loading
özelliği belirtilmemişse Basit mod hariç bu varsayılan davranıştır.auto
: Bu çerçevenin geç yüklenip yüklenmeyeceğini tarayıcı belirler.
loading
özelliğini desteklemeyen tarayıcılar bu özelliği yoksayar. Böylece, tarayıcı düzeyinde geç yüklemeyi aşamalı bir geliştirme olarak uygulayabilirsiniz. Özelliği destekleyen tarayıcılar, görünümden uzaklık eşiği (iframe'in yüklenmeye başladığı mesafe) için farklı uygulamalara sahip olabilir.
Aşağıda, farklı yerleştirme türleri için iframe'leri geç yükleyebileceğiniz bazı yöntemler verilmiştir.
- YouTube videoları: Bir YouTube video oynatıcı iframe'ini geç yüklemek için YouTube tarafından sağlanan yerleştirme koduna
loading
özelliğini ekleyin. Yerleştirilmiş YouTube öğesinin geç yüklenmesi, 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: Bir Google Haritalar iframe'ini geç yüklemek için Google Maps Embed API tarafından oluşturulan iframe yerleştirmenin koduna
loading
özelliğini ekleyin. Aşağıda, Google Cloud API anahtarı için bir yer tutucu içeren 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üklenmesi gerektiğine karar vermek için etkili bağlantı türü ve Basit mod gibi sinyallere ek olarak, bir yerleşik öğenin görüntü alanına olan uzaklığını kullanır. Bu nedenle, tarayıcının geç yüklemesi tutarsız olabilir. Mesafe eşiklerini daha iyi kontrol etmek veya tarayıcılar genelinde tutarlı bir geç yükleme deneyimi sunmak istiyorsanız lazysizes kitaplığını kullanabilirsiniz.
lazysizes, hem resimler hem de iframe'ler için hızlı, SEO dostu bir geç yükleyicidir. Bileşeni indirdikten sonra, bir YouTube yerleştirmesi için 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, diğer üçüncü taraf yerleştirmeleri için iframe'lerle geç boyutlar kullanılabilir.
lazysizes'in, bir öğenin ne zaman görünür hale geldiğini tespit etmek için Intersection Observer API'yi kullandığını unutmayın.
Facebook'ta veri gecikmesini kullanma
Facebook, yerleştirilebilecek farklı türlerde sosyal medya eklentileri sunar. Buna yayınlar, yorumlar, videolar ve en popüler Beğen düğmesi dahildir. Tüm eklentiler bir data-lazy
ayarı içerir. Politikanın true
olarak ayarlanması, eklentinin loading="lazy"
iframe özelliğini ayarlayarak tarayıcının geç yükleme mekanizmasını kullanmasını sağlar.
Instagram feed'lerini geç yükleme
Instagram, yerleştirmenin parçası olarak bir işaretleme bloku ve bir komut dosyası sağlar. Komut dosyası, sayfaya <iframe>
ekler. Yerleştirilmiş öğenin boyutu 100 KB'tan daha fazla olabileceği için bu <iframe>
öğesinin geç yüklenmesi performansı artırabilir. WPZoom ve Elfsight gibi WordPress siteleri için birçok Instagram eklentisi, geç yükleme seçeneğini sunar.
Yerleştirmeleri hafif bileşen ile değiştirin
Etkileşimli yerleştirmeler sayfaya değer katsa da birçok kullanıcı bunlarla etkileşimde bulunmayabilir. Örneğin, bir restoran sayfasına göz atan her kullanıcı, yerleştirilmiş haritayı tıklama, genişletme, kaydırma ve gezinme işlemlerini yapmaz. Benzer şekilde, bir telekom servis sağlayıcıları sayfasındaki her kullanıcı chatbot ile etkileşime girmez. Bu gibi durumlarda, yerinde bir dış cephe görüntüleyerek yerleşik öğenin yüklenmesini veya geç yüklenmesini tamamen önleyebilirsiniz.
Cep telefon, yerleştirilmiş gerçek üçüncü tarafa benzeyen ancak işlevsel olmayan ve bu nedenle sayfa yükleme yükünün çok daha az olduğu statik bir öğedir. Aşağıda, bu tür yerleştirmeleri optimum şekilde yüklerken bir yandan da kullanıcıya değer sağlamaya yönelik birkaç strateji verilmiştir.
Statik resimleri dış cephe olarak kullanın
Haritayı etkileşimli hale getirmenizin gerekmeyebileceği harita yerleştirmeleri yerine statik resimler kullanılabilir. Haritada ilgilendiğiniz alanı yakınlaştırabilir, bir resim çekebilir ve etkileşimli harita yerleştirme yerine bunu kullanabilirsiniz. Yerleşik iframe
öğesinin ekran görüntüsünü almak için Geliştirici Araçları'ndaki Düğüm ekran görüntüsü yakala ö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.
Dinamik resimleri hafif bileşen olarak kullanın
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.
Haritalar Statik API'si: Google Haritalar Statik API hizmeti, standart HTTP isteğinde yer alan URL parametrelerine dayalı bir harita oluşturur ve haritayı, web sayfanızda görüntüleyebileceğiniz bir resim olarak döndürür. URL'nin Google Maps API anahtarını içermesi ve
src
özelliği olarak sayfadaki<img>
etiketine yerleştirilmesi gerekir.Statik harita oluşturucu aracı, URL için gerekli parametrelerin yapılandırılmasına yardımcı olur ve size resim öğesinin kodunu gerçek zamanlı olarak verir.
Aşağıdaki snippet, kaynağı Haritalar Statik API URL'sine ayarlanmış bir resmin kodunu göstermektedir. Bu harita, resmin tıklanarak gerçek haritaya ulaşılmasını sağlayan bir bağlantı etiketine eklenmiştir. (Not: API anahtarı özelliği URL'ye dahil değildir)
<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 kavram, canlı feed yerine bir Twitter ekran görüntüsünü dinamik olarak yerleştirmenize olanak tanır. 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ğiyle birlikte bir resim döndürür. API ayrıca resmin arka planını, renklerini, kenarlıklarını ve boyutlarını özelleştirmek için kullanılan parametreleri de kabul eder.
hafif yapıları geliştirmek için tıkla ve yükle özelliğini kullanın
Tıkla ve yükle kavramı, geç yükleme ile hafif yüklemeyi bir araya getirir. Sayfa başlangıçta hafif bileşenle yüklenir. Kullanıcı, statik yer tutucuyu tıklayarak etkileşimde bulunduğunda, üçüncü taraf yerleştirmesi yüklenir. Bu, etkileşimde içe aktarma kalıbı olarak da bilinir ve aşağıdaki adımlar uygulanarak uygulanabilir.
- Sayfa yüklemede: Sayfaya dış cephe veya statik öğe eklenir.
- Fareyle üzerine gelindiğinde: Cephe, üçüncü taraf yerleştirme sağlayıcıya önceden bağlanır.
- Tıklandığında: Dış cephenin yerini üçüncü taraf ürünü alır.
Dış cepheler; video oynatıcılar, sohbet widget'ları, kimlik doğrulama hizmetleri ve sosyal medya widget'ları için üçüncü taraf yerleştirmeleriyle kullanılabilir. Oynat düğmesi bulunan resimlerden oluşan YouTube video yerleştirmeleri, sıkça karşılaştığımız küçük yapılardır. Gerçek video, yalnızca resmi tıkladığınızda yüklenir.
Etkileşimde içe aktarma kalıbını kullanarak özel bir tıkla ve yükle hafif bileşeni oluşturabilir veya farklı yerleştirme türleri için mevcut olan aşağıdaki açık kaynak cephelerinden birini kullanabilirsiniz.
YouTube dış görünümü
Lite-youtube-embed, YouTube oynatıcısı için önerilen bir bileşendir. Bu biçim, gerçek oynatıcıya benzeyen ancak 224 kat daha hızlıdır. Komut dosyası ve stil sayfası indirilerek ve ardından 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 bir karşılaştırma bulunmaktadır.
YouTube ve Vimeo oyuncuları tarafından kullanılabilen diğer benzer bileşenler şunlardır: lite-youtube, lite-vimeo-embed ve lite-vimeo.
Sohbet widget'ı dış görünümü
Canlı sohbet yükleyicisi, yerleşik sohbet yerine yerleşik sohbet düğmesi gibi görünen bir düğme yükler. Intercom, Help Scout, Messenger gibi çeşitli sohbet sağlayıcı platformlarıyla kullanılabilir. Benzer widget, sohbet widget'ından çok daha hafiftir ve daha hızlı yüklenir. Kullanıcı düğmenin üzerine geldiğinde veya düğmeyi tıkladığında ya da sayfa uzun süredir boşta kaldığında, gerçek sohbet widget'ı ile değiştirilebilir. Postmark örnek olayı,
react-live-chat-loader
ürününü nasıl uyguladıklarını ve elde ettikleri performans iyileştirmelerini açıklamaktadır.
Yerleştirilmiş öğeleri kaldırma veya bağlantılarla değiştirme
Bazı üçüncü taraf yerleştirme işlemlerinin yükleme performansının düşük olduğunu fark ederseniz ve daha önce açıklanan tekniklerden herhangi birini kullanmanın seçenek olmadığını fark ederseniz, yapabileceğiniz en basit şey yerleştirmeyi tamamen kaldırmaktır. Kullanıcılarınızın yerleştirilmiş içerikteki içeriğe yine de erişebilmesini istiyorsanız target="_blank"
ile içeriğin bağlantısını sağlayabilirsiniz. Böylece, kullanıcı söz konusu içeriği 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ı iyileştirebilir. Ancak bazen sayfa içeriğinin beklenmedik şekilde taşınmasına da neden olabilir. Bu işlem, düzen kayması olarak bilinir.
Sorunsuz bir kullanıcı deneyimi için görsel kararlılık önemli olduğundan Cumulative Layout Shift (CLS) bu değişimlerin ne sıklıkta gerçekleştiğini ve ne kadar rahatsız edici olduğunu ölçer.
Düzen kaymalarını önlemek için sayfa yükleme esnasında daha sonra dinamik olarak yüklenecek öğeler için alan ayrılmış olmalıdır. 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, bir YouTube yerleştirilmesine ilişkin iframe'de 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 özellikleriyle birlikte sağlar. Ancak, bunu belirtmeyen sağlayıcılar olabilir. Örneğin, bu kod snippet'i, sonuç olarak elde edilen 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 yerleştirilen içeriği incelemek için Geliştirici Araçları'nı iframe
kullanabilirsiniz. Aşağıdaki snippet'te görüldüğü gibi, yerleştirilen iframe'in yüksekliği sabit olurken genişlik 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 bilgi, feed yüklenirken kapsayıcının genişlemediğinden ve düzen kayması olmadığından emin olmak amacıyla kapsayıcı öğenin boyutunu ayarlamak için kullanılabilir. 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ştirmelerinde, oluşturuldukları son içeriğin boyutları (genişlik, yükseklik) genellikle atlanır. Bu durum, sayfada önemli düzen kaymalarına neden olabilir. Bu sorunu, çeşitli farklı görüntü alanı boyutlarında Geliştirici Araçları'nı kullanarak nihai boyutları 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 var.
Düzen Kayması Sonlandırıcı:
- Bir iframe'de yerleştirilmiş istemci tarafını yükler.
- 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, daha sonra medya sorguları ve kapsayıcı sorguları oluşturmak üzere yerleştirmenin boyutlarını yakalar.
- Yerleştirme başlatılıncaya (bundan sonra min-height stilleri kaldırılır) kadar, medya sorgularını (ve kapsayıcı sorgularını) kullanarak yerleşik işaretlemenin etrafına min-height sarmalayıcı seçer.
Normalde sayfanıza yerleştirilmiş olan yere kopyalanıp yapıştırılabilen optimize edilmiş bir yerleştirme snippet'i oluşturur.
Layout Shift Terminator'ı deneyin ve GitHub'a geri bildirimlerinizi bırakın. Bu araç beta aşamasındadır ve zaman içinde daha fazla iyileştirmeyle iyileştirmeyi amaçlar.
Sonuç
Üçüncü taraf yerleştirmeleri kullanıcılar için büyük bir değer sağlayabilir, ancak bir sayfadaki yerleştirmelerin sayısı ve boyutu arttıkça performans düşebilir. Bu nedenle, yerleştirmelere ilişkin konuma, alaka düzeyine ve potansiyel kullanıcılara göre uygun yükleme stratejilerini ölçmek, değerlendirmek ve kullanmak gerekir. gerekiyor.