1. Ana Sayfa
  2. Genel
  3. Kullanılmayan JavaScript’i kaldırın: en_US/base.js Çözümü

Kullanılmayan JavaScript’i kaldırın: en_US/base.js Çözümü

WordPress site hızlandırma ile ilgili güncel bilgileri araştırırken, site hızını etkileyen “Kullanılmayan JavaScript’i kaldırın” uyarısına denk geldim ve bu konuda size işe yarar bilgi vereceğim.

Google page speed sayfasından sitenizin hızını ara sıra siz de benim gibi yokluyorsunuzdur. Benim sitelerin hızları berbat. Sebebini araştırırken “en_US/base.js” adında, youtube embed kodu kaynaklı kullanılmayan bir js kodunun bu yavaşlığa sebep olduğunu fark ettim.

Yani sitenize yerleştirdiğiniz youtube videoları sitenizin yavaşlamasına sebep olmakta ve bu google tarafından olumsuz değerlendirilmekte. Şimdi bu yayında size youtube videolarını sitenize eklemenin daha iyi bir yolunu anlatacağım. Önce mantığından bahsedeyim sonra kendi sitenize nasıl ekleyeceğinizi anlatayım.

Lite YouTube Embeds

Lite YouTube embeds, normal youtube embed koduna göre çok daha kullanıcı odaklı ve hızlı bir arayüz sunan kod biçimidir. Siz bir video embedi eklediğinizde, yayınınızda o video olduğu gibi yüklenmektedir. Bu esnada javalar çağrılmakta iframeler işlenmekte ve sitenize uygun olmayan bir boyutta video oluşabilmektedir.

Gömülü YouTube videosu yalnızca web sayfalarınızın bayt boyutunu artırmakla kalmaz, aynı zamanda tarayıcının video oynatıcıyı oluşturmak için birden çok HTTP isteği yapması gerekir.

Lite YouTube embed koduyla ise yapacağımız şey, ilgili videonun sadece küçük bir görselini yüklemek olacak. Sitenize ve ilgili yayınınıza tıklayan birisi, bu küçük görsele tıklamadıkça video yüklenmeyecek ve dolayısıyla yayınınız çok daha hızlı açılmış olacak. Bu yöntem şu an artık tarihe karışan google+ platformunun kullandığı yöntemdi.

Hafif ve Duyarlı Youtube Embed Kodu

YouTube için standart yerleştirme kodu, video oynatıcının genişliğinin ve yüksekliğinin sabitlendiği ve dolayısıyla oynatıcıyı yanıt vermeyen hale getiren IFRAME etiketini kullanır.

YouTube için yeni isteğe bağlı yerleştirme kodu, oynatıcı boyutlarını ziyaretçinin ekran boyutuna göre otomatik olarak ayarlayan duyarlıdır

Youtube Video ID Nasıl Öğrenilir?

Bu yöntemimizde size youtube video id lazım olacak. Bir youtube videosunun id’sini öğrenmek çok kolay. Videonun URL adresinde v= den sonraki kısım video id’ sidir. Örneğin “youtube com/watch?v=w7TpH4-T58E” adresinde video id “w7TpH4-T58E” kodudur.

Kullanılmayan Javascript base.js’yi kaldırın

en_US/base.js silmek için yani bunu kaldırmak için aşağıda yazdıklarımı adım adım uygulayın. Önceki yayınlarınızda eklemiş olduğunuz youtube videolarının embed kodlarını da tek tek düzenleyin. O halde anlatmaya başlayayım.

Önemli Uyarı: Burada anlatılanlar tarafımca denenmiştir ama siz işlemlere başlamadan önce Tüm dosyalarınızı yedekleyin. Bu yayından doğabilecek sizin yapacağınız bir hatayla ilgili alacağınız hatalardan hiçbir sorumluluk kabul etmiyorum.

Adım 1: Yeni Youtube Embed Kodu

Bu yöntemde artık youtube embed kodunu şu şekilde elle ekleyeceksiniz:

<div class="youtube-player" data-id="VIDEO_ID"></div>

Şimdi diğer adıma geçelim. Kolları sıvayın başlıyoruz:


css ekleme
adım 2, açıklayıcı görsel.

Adım 2: İlgili CSS kodlarını ekleyin

Sitenizin temasında “header.php” dosyasını açın ve “</head>” tagının hemen öncesine şunu ekleyin:


<style>
.youtube-player {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
background: #000;
margin: 5px;
}

.youtube-player iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background: transparent;
}

.youtube-player img {
object-fit: cover;
display: block;
left: 0;
bottom: 0;
margin: auto;
max-width: 100%;
width: 100%;
position: absolute;
right: 0;
top: 0;
border: none;
height: auto;
cursor: pointer;
-webkit-transition: 0.4s all;
-moz-transition: 0.4s all;
transition: 0.4s all;
}

.youtube-player img:hover {
-webkit-filter: brightness(75%);
}

.youtube-player .play {
height: 72px;
width: 72px;
left: 50%;
top: 50%;
margin-left: -36px;
margin-top: -36px;
position: absolute;
background: url('//i.imgur.com/TxzC70f.png') no-repeat;
cursor: pointer;
}
</style>

 

Burası tamamsa şimdi diğer adıma geçiyoruz, bununla birlikte işlemlerimiz bitmiş olacak.


 

footer
adım 3, açıklayıcı görsel

Adım 3: İlgili JavaScript kodunu ekleyin

Şimdi ise son bir adım kaldı. Bu adımda js kodlarını ekleyeceğiz. Ben bunu body tagı sonrasına ekledim. Size de buraya eklemenizi öneririm. 

Temanızın “footer.php” dosyasını açın ve orada 


<script>
/*
* Light YouTube Embeds by @yazangeveze on twitter
* Credit: https://www.yazmakistiyorum.com/
*/

function labnolIframe(div) {
var iframe = document.createElement('iframe');
iframe.setAttribute(
'src',
'https://www.youtube.com/embed/' + div.dataset.id + '?autoplay=1&rel=0'
);
iframe.setAttribute('frameborder', '0');
iframe.setAttribute('allowfullscreen', '1');
iframe.setAttribute(
'allow',
'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'
);
div.parentNode.replaceChild(iframe, div);
}

function initYouTubeVideos() {
var playerElements = document.getElementsByClassName('youtube-player');
for (var n = 0; n < playerElements.length; n++) {
var videoId = playerElements[n].dataset.id;
var div = document.createElement('div');
div.setAttribute('data-id', videoId);
var thumbNode = document.createElement('img');
thumbNode.src = '//i.ytimg.com/vi/ID/hqdefault.jpg'.replace(
'ID',
videoId
);
div.appendChild(thumbNode);
var playButton = document.createElement('div');
playButton.setAttribute('class', 'play');
div.appendChild(playButton);
div.onclick = function () {
labnolIframe(this);
};
playerElements[n].appendChild(div);
}
}

document.addEventListener('DOMContentLoaded', initYouTubeVideos);
</script>

kopyala yapıştır yapın.

Adım 4: Yeni Embed Kodunuzu Yayınınıza Ekleyin

Adım 1 de yazanın aynısı, yine de belirtmek istedik. Artık herhangi bir içerik hazırlarken wordpress de “Metin” kısmına gelin ve şu embed kodunu yapıştırıp videonun ID sini girin:

<div class="youtube-player" data-id="VIDEO_ID"></div>

 

Not: Diğer yayınlarınızdaki videoların kodlarını da bu şekilde düzenlemeniz gerekecek.


 

SONUÇ

Normalde eklediğiniz youtube videosu şu şekilde görünecek ve ziyaretçiye direkt yüklenecekti:

 

Sonuç olarak videolarınız artık şu şekilde sadece küçük resimle yüklenecek, ziyaretçi etkileşime geçerse asıl yüklenmesini yapacaktır.

 

 
Herhangi bir sorunuz mu var? Yorum kısmında sorun yanıtlarım.

Yazar Hakkında

Bu siteyi çok sevdim. Buraya katkı sağlamak için üye oldum. Aklıma geldikçe karalarım bir şeyler.

Sence?