Web sitelerinin açılış hızı, kullanıcı deneyimini (UX) artırmak için olmazsa olmaz etkenlerden biridir. Web sitelerinin yüklenme süresini etkileyen birden fazla faktör bulunmaktadır. Web site hız testi araçlarına girdiğinizde, web sitenizin neden geç açıldığına dair birkaç sebep gösterilecektir. Bu sebeplerin bazıları kolay çözülebilir olsa da bazıları karmaşık gelebilir. Birçok kullanıcı teknik detaylar içeren konularda zorlanır. Bunlardan bazıları önbellekleme, gereksiz CSS (Cascading Style Sheets) ve JS (JavaScript) dosyalarıdır.
Sayfa hızı test araçları, bu dosyaları ne kadar gereksiz olarak bildirse de, başka bir sayfada o JS ya da CSS dosyası kullanılıyor olabilir. Doğrudan dosyaları veya dosya içindeki gereksiz kodları kaldırmanız, sonraki aşamalarda web sitenizin görünümüyle ilgili daha büyük probleme yol açabilir. Bunun önüne geçmek için, web sitenizin yapısına göre dosyaların yüklenme metotlarını nasıl değiştireceğinizi adım adım anlatacağız. Hazırsanız başlıyoruz!
JavaScript Dosyaları Nasıl Çalışır?
Web sitenizin daha fonksiyonel ve kullanıcı ile etkileşimli hale gelmesini sağlayan JavaScript dosyaları bazı durumlarda web sitenizin açılış hızını düşürebilir. Bu durumu daha iyi anlamak için, içinde bulunduğumuz durumu biraz daha hikayeleştirelim.
Dosyalar sunucudan web tarayıcınıza indirilirken 2 aşamadan geçerler;
JS Dosyalarını İndirme
İndirme sırasında sunucudan gönderilen JS dosyaları istemcinin bilgisayarına iletilir. Web tarayıcıları tıpkı medya öğelerinde olduğu gibi bu dosyaları da yürütmek için öncelikle indirmeye ihtiyaç duyar.
JS Dosyalarını Yürütme
Bir önceki aşamada indirilen JS dosyaları indirme işlemi tamamlandığında yürütme sürecine girerler. Bilgisayarınızda kurulu bir programın indirilmiş olması o programın çalışması ve fonksiyonlarını yerine getirmesi için yeterli olmayacaktır. Bir kullanıcının veya tetikleyicinin o programı çalıştırması gerekmektedir. JS dosyaları da indirildikten sonra otomatik olarak çalıştırma ve yürütme sürecine girecektir.
JavaScript Dosyalarının Web Site Açılış Hızına Etkisi
Tüm bahsettiğimiz çalışma süreçlerinin sıralamasını belirlemek ise tamamen sizin elinizde. Bu konuyu daha açıklayıcı hale getirecek olursak. Bir ziyaretçi sayfanızı yüklemeye çalıştığında ilk önce <head> </head> etiketinin içerisinde bulunan dosyalar yüklenmeye başlar. Eğer bu konuyla ilk defa karşılaşıyorsanız büyük ihtimalle dosyalarınız varsayılan şekilde yükleniyordur.
JavaScript Varsayılan Yükleme Nedir?
JavaScript varsayılan yükleme çalıştırılacak dosyaların tamamen bir kuyruğu alınması ve dosyalardan birisinin yükleme ve çalıştırma işlemi bitmeden bir diğerini yüklememesidir. Bu konuyu basit bir kuyruk sıralaması olarak değerlendirebilirsiniz. Sıraya ilk giren dosya ilk çıkar. Diğerleri bir öncekini beklemek zorundadır. Eğer daha kritik dosyalarınız sayfanın biraz daha aşağılarında yükleniyorsa mecburen daha yukarıda kalan dosyaların yüklenmelerinin tamamlanmalarını beklemek zorundadır. Göstereceğimiz iki farklı yöntemle dosyalarınızı bu kuyruktan çıkarabilir veya önem sırasına göre yükleme yöntemini değiştirebilirsiniz.
Async JavaScript Yükleme Yöntemi Nedir?
Async JS yükleme yöntemi, az önce bahsettiğimiz kuyruk şeklinde yükleme yönteminden kurtulmak için kullanılan bir yöntemdir. Çalışma mantığı ise şu şekildedir; varsayılan yüklemede bir dosya indirilip çalışana kadar diğer dosyalar beklemek zorundadır. Bir kuyruk yapısı söz konusudur. Async yüklemede ise kuyruk yapısı bulunmamaktadır. Async şekilde yüklenen bir JS dosyası sonrasında gelen dosyaların yüklenmesine engel olmaz. Tarayıcı diğer dosyaları da eş zamanlı olarak yüklemeye devam edecektir. Yani kısaca, aynı anda birden fazla işlemi eşzamanlı yapabilmek olarak özetleyebiliriz.
Örnek Async Kullanımı
Eğer dosyayı dış kaynak olarak olarak yüklemeyi düşünüyorsak;
<script src="demo_async.js" async></script> şeklinde web sitemizde async js yüklemesi yapabiliriz.
Öte yandan, scriptlerimizi sayfa içerisinde yazıyorsak;
<script async></script>
şeklinde etiketlerimizi açtıktan sonra içerisinde gerekli fonksiyonlarımızı çağırabiliriz.
Defer JavaScript Yükleme Yöntemi Nedir?
Defer JS yükleme yönteminin çalışma mantığı ise varsayılan JS yükleme yöntemiyle benzer bir yol izlemektedir. Çalışma yapısı kuyruk şeklindedir. Bir dosya yüklenmeye başladığında ardından gelen dosyalar beklemek zorundadır. Varsayılan yükleme yöntemi ile aralarındaki fark ise dosya ne kadar üst satırlarda çağırılırsa çağırılsın yükleme sırası en sondadır.
Defer yükleme yöntemini kullanmak için dış kaynaktan yükleme yapıyorsak
<script src=”demo_defer.js” defer></script> şeklinde bir yükleme yapabiliriz.
Satır içi kullanımlarda ise DOM (Document Object Model) içeriğinin tamamen yüklemesini bekledikten sonra fonksiyonların yürütülmesini sağlamak için DOMContentLoaded ibaresini fonksiyonumuzun başına ekleyebiliriz. Örnek kullanımı ise şu şekildedir;
<script> window.addEventListener('DOMContentLoaded', function() { (function($) {//fonksiyon içeriğinizi buraya girebilirsiniz. })(jQuery); }); </script>CSS Dosyalarının Web Site Açılış Hızına Etkisi
Kullanıcının gördüğü sayfa düzeninin gerçekleştirilmesine büyük etkisi olan bir diğer unsur ise CSS dosyalarıdır. CSS dosyalarının boyutu genellikle DOM boyutu ile orantılı olarak artmaktadır. Bunun sebebi sayfada kullanılan her alanın kendine özgü CSS özelliklerine sahip olması diyebiliriz. Bir diğer konu ise CLS (kümülatif düzen kayması) problemidir.
CLS Problemi Nedir?
CLS problemi sayfanızın ilk açılışında kullanıcının karşılaştığı düzen kaymalarıdır. Durumu daha basitçe anlatmak gerekirse web sitenizin ilk açılışında stil dosyalarının yüklenmeden sadece HTML formatı ile görüntülenmesi ve CSS dosyalarınız yüklendikten sonra aniden web sitesinin görünümünün değişmesidir. Kullanıcı açısından olumsuz bir izlenim bırakmaktadır. Ek olarak sayfa hızı test araçlarında puanınızın düşmesine sebep olur.
CLS Hatası Nasıl Giderilir?
CLS Hatası sayfanız ilk ziyaret edildiğinde görünen alan (1. Section) ile alakalıdır. Birinci Section’da yer alan HTML elemanlarınızın ihtiyaç duyduğu CSS dosyalarını olabildiğince ufak tutmak ve head etiketinizin (head tag) ilk satırlarında çağırmak CLS problemini büyük ölçüde çözecektir. CSS dosyalarınızı head etiketinin ilk satırında kullanmak kadar etkili olacak bir diğer çözüm yöntemi ise preload yükleme yöntemidir.
Preload CSS Nasıl Yüklenir?
Preload CSS yüklemenin örnek bir kullanımı şu şekildedir;
<link rel="preload" href="style.css" as="style" />CSS dosyasını çağırdığınız link etiketine rel=”preload” ibaresini eklediğinizde ilgili CSS dosyası her şeyden önce yüklenecektir. Stilleriniz hazır olduğu için sayfanızın ilk açılışında stillendirilmemiş görünümün önüne geçmiş olacaksınız. Bu sayede büyük oranla CLS sorununun da önüne geçeceksiniz. Preload ve Async yükleme metotlarını beraber kullanmak için CSS dosyalarını aşağıdaki şekilde yükleyebilirsiniz.
<link href="style.css" rel="preload" as="style" onload="this.rel='stylesheet'"> <noscript><link rel="stylesheet" href="style.css"></noscript>CSS dosyalarınızın sayfa açılış hızına etkisini azaltmak için ise sayfa açılışında ihtiyaç duymadığınız CSS dosyalarını footer etiketinde veya sayfanın daha alt satırlarında yüklemek sayfa açılış hızına büyük katkı sağlayacaktır.
WordPress Sitenizde JS ve CSS Dosyalarının Yüklenme Metotlarını Nasıl Değiştirirsiniz?
Yukarıda bahsettiğimiz yüklenme metotlarını ve çalışma mantıklarını tamamen kavradıysanız bu değişiklikleri WordPress sitenizde nasıl uygulayabileceğinize geçelim. Web sitenizde async ve defer niteliklerini ne zaman ve nerede kullanmanız gerektiğini iyi anlamanız gerekmektedir. Tüm dosyalarınıza aynı işlemi yaparak (tümüne defer vermek gibi) web site hızınızı arttırabilirsiniz fakat çalışmayan, bozuk görünen alanlarla karşılaşma ihtimaliniz çok yüksek. Bu sebeple CSS ve JS dosyalarınızın yükleme metotlarını belirlerken hangi dosyalara hangi düzeyde ihtiyacınız olduğunu iyi belirlemelisiniz.
Hangi dosyalara hangi sırayla ihtiyacınız olduğunu kesin bir şekilde belirlemediğiniz durumlarda bazı dosyalarınız düzgün çalışmayabilir ya da web siteniz bozuk görünebilir. En temel örnek jQuery gibi bağımlılık dosyalarında ortaya çıkmaktadır
Hatalı kullanıma örnek olabilecek bir senaryo ise şu şekildedir: jQuery gibi bağımlılık oluşturan JS dosyasını defer niteliği ile birlikte yüklediniz. Fakat jQuery kütüphanesine ihtiyaç duyan bir slider JS dosyasını sayfanın ilk açılışında yüklediniz. Bu durumda Slider JS dosyası jQuery kütüphanesini arayacak fakat yükleme sırasında defer özniteliği verdiğiniz için jQuery henüz yüklenmeyecek. Bu sebepten dolayı slider JS dosyanız hata verecek ve bu da web sitenizin düzgün çalışmamasına sebep olacaktır.
Böyle bir durumla karşılaşmamak için yapılabilecek en temel hareket bağımlılık dosyalarını (örn:jQuery.js) defer veya async vermeden preload ile sayfa başında yüklemektir. WordPress sitelerde bir çok eklentinin jQuery kütüphanesini kullandığını varsayarsak jQuery dosyasını preload yüklemek en mantıklı davranış olacaktır. Eğer jQuery kütüphanesinin çok az kullanıldığını düşünüyorsanız ihtiyaç duyan dosyanın yüklemesini koşullandırabilirsiniz.
Koşullandırma kabaca şu şekilde olabilir:
Eğer jQuery.js yüklediyse slider.js dosyasını yükle.
jQuery dosyasının yüklendiğini kontrol etmek için jQuery.ready() fonksiyonundan yararlanabilirsiniz.
jQuery dosyasının kontrolünü sağlayan kod parçacığı ise şu şekilde olabilir:
$(document).ready(function() {
$.getScript("slider.js", function() {
console.log("slider.js yüklendi.");
// Slider kodları burada çalıştırılabilir.
});
});WordPress Sitenizde JS Dosyalarına Async veya Defer Niteliği Nasıl Eklenir?
WordPress sitenizde JS dosyalarına async veya defer niteliği eklemek için plugin (eklenti) kullanabilir veya WordPress kancalarını kullanarak fonksiyon yazabilirsiniz.
Teknik konulara bağımlı kalmak istemiyorsanız alanında güçlü eklentileri kullanabilirsiniz. WP Rocket bu iş için oldukça verimli çalışır. Yalnızca eklentinin arayüzünde bulunan File Optimization bölümünden load defer özniteliklerini ekleyebilirsiniz. Safe mode for jQuery modülünü aktif ederseniz jQuery dosyası için bir işlem yapılmayacaktır. Bu da yukarıda bahsettiğimiz bağımlılık dosyaları konusunda olmazsa olmaz bir maddedir.
Bir eklentiye bağlı kalmadan kendiniz fonksiyonlarla yükleme niteliklerini değiştirmek isterseniz wordpress fonksiyonu hazırlamanız gerekecektir. Async veya Defer yükleme talimatı için aşağıdaki adımları izleyebilirsiniz;
- Web sitenizin Görünüm > Tema Dosya Düzenleyicisi penceresini açtıktan sonra function.php dosyasını açın.
Function.php dosyasının en altına inerek async eklemek istediğiniz dosyanın url adresini aşağıdaki kod parçacığına yerleştirin. - Düzenlediğiniz kod parçacığının function.php dosyasının en altında olduğundan emin olun ve dosyayı kaydedin.
- Kontrol sağladığınızda my-custom-script.js dosyasının async niteliği ile yüklendiğini göreceksiniz.
function custom_enqueue_scripts() {
wp_enqueue_script( 'my-custom-script', 'path/to/my-custom-script.js', array(), '1.0.0', true, 'async' );
}
add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts' );“wp_enqueue_script” fonksiyonu içerisinde, async veya defer niteliğini kullanmadan önce “true” parametresini belirtmeniz gerekmektedir. Bu, JavaScript dosyalarınızın en altta yükleneceği anlamına gelir.
Bahsettiğimiz adımları izleyerek, WordPress sitenizdeki JS dosyalarınıza async veya defer niteliklerini kolayca ekleyebilirsiniz.
Zirveye Çıkın: Digipeak ile Dijitalin Gücünü Kullanın!
Digipeak, Türkiye ve İngiltere merkezli bir dijital pazarlama ajansıdır ve müşterilerine SEO, İçerik Pazarlama, Sosyal Medya Yönetimi ve diğer dijital pazarlama hizmetleri sunmaktadır.
Digipeak olarak müşterilerimize çeşitli dijital pazarlama hizmetleri sunuyor, markalarımızın daha etkili bir şekilde hedef kitlelerine ulaşmalarını ve dijital dünyada rekabet avantajı elde etmelerini sağlıyoruz.
Bu yazımızda, WordPress, Javascript ve CSS dosyalarının yüklenme metotlarını nasıl değiştirebileceğimizi inceledik. Sitenizin performansını artıracak ve büyümenize yardımcı olacak yaratıcı ekibimizin yazdığı diğer yazılarımız için blog kategorimizi ziyaret edebilir; profesyonel destek almak için bize ulaşabilirsiniz.
