Üçüncü taraf yerleşik öğeleri kullanmak için en iyi uygulamalar

Popüler üçüncü taraf yerleştirmelerini verimli bir şekilde yükleme tekniklerine genel bakış.

Addy Osmani

Katie Hempenius

Leena Sohoni

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şimlerini kullanır. Üçüncü taraf içerik yerleştirmeye ilişkin 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 oluşturulmamışsa
• Üçüncü taraf sunucularından sunulur

Yerleştirmeler genellikle şu amaçlarla kullanılır:

• Spor, haber, eğlence ve modayla 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 mekanı sayfalarında genellikle haritalar yerleştirilir.

Üçüncü taraf yerleşimleri 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ı alan bir <iframe> içeren HTML snippet'leri sunar. Bazı sağlayıcılar, diğer içerikleri almak için dinamik olarak <iframe> ekleyen bir 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

Birçok popüler yerleşik öğe 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. Denetleme, Chrome Geliştirici Araçları'ndaki Lighthouse sekmesinde yer alır.

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.

Yüklemeyle ilgili en iyi uygulamalar

Üçüncü taraf yerleştirmeleri performansı olumsuz yönde etkileyebilir ancak aynı zamanda önemli işlevler de sunar. Üçüncü taraf yerleştirmeleri 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, diğer destekleyici içeriklerden önce hızlı bir şekilde yüklenmelidir. Örneğin, bir haber sayfasındaki haber metni, Twitter feed'i veya reklamların yerleştirilmesinden önce yüklenmelidir.

Üçüncü taraf yerleşik içerik istekleri, birinci taraf içeriğinin yüklenmesini engelleyebileceğinden üçüncü taraf komut dosyası etiketinin konumu önemlidir. Komut dosyaları yürütülürken DOM oluşturma duraklatıldığı için 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, yalnızca ilk sayfa yüklemesini optimize etmeye yardımcı olmakla kalmaz, aynı zamanda sabit veri planlarına ve yavaş ağ bağlantılarına sahip kullanıcıların indirme maliyetlerini de azaltır.

İçeriğin gerçekten gerekli olana kadar yüklenmesini ertelemeye yavaş yükleme adı verilir. Şartlara ve yerleştirme türüne bağlı olarak farklı gecikmeli yükleme teknikleri kullanabilirsiniz.

<iframe> için tarayıcıda 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, gecikmeli yükleme için iyi bir aday değilse kullanın. loading özelliği belirtilmediyse basit mod dışında varsayılan davranış budur.
• auto: Bu çerçevenin yavaş 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 yavaş yüklemek için Google Haritalar Yerleştirme API'si tarafından oluşturulan iFrame yerleştirme kodunun içine 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'ın ne zaman yükleneceğine karar vermek için geçerli bağlantı türü ve Basit mod gibi sinyallerin yanı sıra yerleştirilen öğenin görüntüleme alanından olan mesafesini kullandığından, tarayıcıda yavaş yükleme tutarsız olabilir. Mesafe eşikleri üzerinde daha fazla kontrole ihtiyacınız varsa veya tarayıcılar arasında tutarlı bir gecikmeli 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. Yayınlar, yorumlar, videolar ve en popüler Beğen düğmesi buna 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.

Yer paylaşımlarını cephelerle değiştirme

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ı harita yerleşimini tıklamaz, genişletmez, kaydırma yapmaz ve harita içinde gezinmez. Benzer şekilde, bir telekom servis sağlayıcıları sayfasındaki her kullanıcı chatbot ile etkileşime girmez. Bu gibi durumlarda, yerine bir ön sayfa göstererek yerleştirmenin yüklenmesini veya yavaş 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.

DevTools, 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şime karşılık gelen resimler oluşturmanıza olanak tanır. Sayfalarınızda yerleşik öğelerin statik sürümlerini oluşturmanıza olanak tanıyan bazı araçlar aşağıda 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'te, kaynağı Maps Static API URL'si olarak ayarlanmış bir resmin kodu gösterilmektedir. 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 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 kavram, canlı feed yerine bir Twitter ekran görüntüsünü dinamik olarak yerleştirmenize olanak tanır. Tweetpik, tweet'lerin 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ı ve boyutlarını özelleştirmek için parametreleri de kabul eder.

Cepheleri iyileştirmek için tıkla ve yükle özelliğini kullanma

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 yer tutucuyla etkileşime geçtiğinde üçüncü taraf yerleşimi yüklenir. Bu, etkileşimde içe aktarma kalıbı olarak da bilinir ve aşağıdaki adımlar uygulanarak uygulanabilir.

1. Sayfa yüklemede: Sayfaya dış cephe veya statik öğe eklenir.
2. Fareyle üzerine gelindiğinde: Cephe, üçüncü taraf yerleştirme sağlayıcıya önceden bağlanır.
3. Tıklandığında: Cephe, üçüncü taraf ürünle değiştirilir.

Cephe, video oynatıcılar, sohbet widget'ları, kimlik doğrulama hizmetleri ve sosyal medya widget'ları için üçüncü taraf yerleşikleriyle kullanılabilir. Oynat düğmesi bulunan resimlerden oluşan YouTube video yerleştirmeleri, sıkça karşılaştığımız yüzeylerdir. 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'de <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şim arasındaki karşılaştırma gösterilmektedir.

  

  

  YouTube ve Vimeo oynatıcıları için kullanılabilen diğer benzer ön uçlar lite-youtube, lite-vimeo-embed ve lite-vimeo'dur.

• 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ı fareyle 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.

  

Yer paylaşımlarını kaldırma veya bağlantılarla değiştirme

Bazı üçüncü taraf yerleşik öğelerinin yükleme performansını düşürdüğünü fark ederseniz ve daha önce açıklanan tekniklerden herhangi birini kullanamıyorsanız en basit çözüm, yerleşik öğeyi 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 sırası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şiminin yükleneceği statik öğeler için sabit bir boyut ayarlayarak sağlayabilirsiniz. Örneğin, YouTube videolarının yerleştirildiği iFrame'lerin genişliği ve yüksekliği 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 içermeyen sağlayıcılar da 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 eklenen iframe öğesini incelemek için Geliştirici Araçları'nı kullanabilirsiniz. Aşağıdaki snippet'te görüldüğü gibi, yerleştirilen iframe'ın yüksekliği sabitken genişliği 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 atlandığından, 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ı:

• Yerleşimi istemci tarafında bir iframe'de yükler.
• iframe'i çeşitli popüler görüntü alanı boyutlarına göre yeniden boyutlandırır.
• Popüler görüntü alanlarının her biri için daha sonra medya sorguları ve kapsayıcı sorguları oluşturmak üzere yerleşik öğenin boyutlarını yakalar.
• Yerleştirme işlemi başlatılana kadar medya sorgularını (ve kapsayıcı sorgularını) kullanarak minimum yükseklik sarmalayıcısını yerleştirme işaretçisinin etrafına boyutlandırır (minimum yükseklik stilleri daha sonra kaldırılır).

• Sayfanıza yerleştireceğiniz yer 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şik içeriklerin 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.