Windows İçin Web config Ayarları Nasıl Yapılır?

İnternet dünyasında yer alan web siteleri, site performanslarını ve hızlarını değerlendirmek amacıyla bazı araçlardan yararlanır. Yaygın olarak kullanımı tercih edilen GTmetrix, Google Pagespeed Insights gibi araçlar, sitelerin analizlerini yaparak, iyileştirme önerileri de sunmaktadır. Bu araçların kullanımları sırasında en sık karşılaşılan hatalardan biri “Defer Parsing of JavaScript” dir. Genellikle “JavaScript Ayrışmasını Ertele” ibaresiyle karşımıza çıkan bu hata, SEO çalışmalarını yürütenler için büyük bir sorun yaratır. Bir ziyaretçi, web sitesine giriş yaptığı anda, ilk görüntülenen kısım site sayfasının üst kısmıdır. JavaScript bu sırada, site dosyalarının yükleme işlemini arka planda başlatır. Site ziyaretçisi, web sayfasını yukarıdan aşağıya kaydırırken, bir JavaScript koduna denk gelirse, dosya yüklenene kadar sayfa görüntülenmesi duraklar. Web sayfasının tamamının yüklenmesi sırasında herhangi bir JavaScript koduna ihtiyaç duyulmuyorsa, sitenin öncelikli kısımlarının yüklenmesi istenmektedir. Defer Parsing of JavaScript çözümü de bu şekilde sağlanmaktadır.

Defer Parsing of JavaScript Nedir? Ne İşe Yarar?

Defer Parsing of JavaScript açılımı, bir web sitesinde, site hızını arttırmak için, JavaScript kodunun içerisinde “Defer” etiketi eklenerek, JavaScript dosyalarının sayfada en son açılması sağlanmaktadır. Defer Parsing of JavaScript kullanımının amacı, site ziyaretçilerinin sayfa yüklenmeleri sırasında yaşanan gecikmelere maruz kalmasını engellemektir. Defer Parsing of JavaScript çözümü, “Defer” etiketinin kodlara eklenmesi ile uygulanır. 

Defer Parsing of JavaScript çözümü, sitenin yapısına uygun şekilde işlemin sağlamasını gerektirmektedir. Web sitelerinin yüklenme sürelerini azaltmanın alternatif yolları bulunuyor. En etkili yöntemlerden biri ise JavaScript dosya veri miktarlarını minimum seviyeye indirmektir. Bu işlem için de Java Script dosyaları ayrıştırılarak, dosya aktarımları ertelenmektedir.

JavaScript Ayrıştırması Nedir? Nasıl Ertelenir?

JavaScript ayrıştırmasının ertelenmesi, “Defer Parsing JavaScript” olarak ifade edilmektedir. Bu işlemi gerçekleştirmenin farklı nedenleri bulunur. Web siteleri için hayati önem taşıyan nedenlerden biri ise site hızı ve performansının iyileştirilmesi olarak açıklanabilir. JavaScript ayrıştırması sırasında uygulanması gereken işlem adımları ise;

  • Google Pagespeed gibi site performans ölçüm araçları yardımı ile sitenin analiz edilmesi,
  • JavaScript ayrıştırma işleminin uygulanması,
  • Yapılan işlem değişikliklerinin test edilmesi şeklindedir.

JavaScript ayrıştırması erteleme işlemlerinde kullanılan farklı yöntemler bulunur. Bilinen en kolay ve en fazla tercih edilen yöntem ise, ihtiyaç duyulan süreye kadar JavaScript dosyalarının yüklenme sürelerinin ertelenmesi şeklinde olmaktadır. Diğer sık kullanılan yöntem ise script_async niteliğinden yararlanmaktır. Bu yöntemde, web sitesinin açılış sayfasında oluşan yükün ertelenerek, tarayıcının UI parçası meşguliyetini yitirene dek, ertelemenin sürdürülmesidir.

WordPress İçin Defer Parsing of JavaScript Çözümü

Bir web sitesinin, JavaScript ayrıştırması ertelenmesine ihtiyacı olup, olmadığı GTmetrix gibi site performans ölçüm araçları ile tespit edilmektedir. WordPress tabanlı web siteleri için Defer Parsing of JavaScript çözümü iki farklı yöntem ile yapılır. Bunlar;

  • Eklentiler yardımıyla JavaScript ertelemesi.
  • Kod kullanımıyla JavaScript ertelemesi.

Web sitelerinde JavaScript genel olarak <head> etiketlerinin içerisinde yerleştirilmektedir. Bu işlem ile site bir ziyaretçi tarafından açıldığında, kodlar yukarıdan aşağıya olacak şekilde çalışır. Bir web sitesinde fazla sayıda JavaScript dosyası bulunuyorsa ya da uzun dizinler kullanılmışsa, site içeriğinin görüntülenme süresi uzar çünkü o sırada JavaScript dosyalarının yüklenmesi beklenmektedir. JavaScript ayrıştırmasını engelleme işlemi ile tüm JavaScript dosyalarının yüklenmesi beklenmeden, sitenin tamamen açılması sağlanır. Bu işlem ile site yükleme hızı arttırılmaktadır.

Eklentiler İle WordPress JavaScript ertelemesi

Web sitesinde eklentiler ile JavaScript ertelemesi yapmadan önce GTmetrix gibi araçlar yardımıyla, analizin tamamlanmış olduğundan emin olmak gerekir. Site hızı performans araçlarının, web siteleri için uygun gördüğü ortalama değer %71 olarak belirtilmektedir. Analiz sonucunda WordPress tabanlı web siteniz bu değerin altında ise JavaScript ertelemesi yapılması gerektiği söylenebilir. Analiz sonuçlarına örnek olarak ise aşağıdaki tabloda verilebilir.

WordPress sitelerinde JavaScript ayrıştırması işlemlerinde iki farklı eklenti kullanılmaktadır. Bunlar;

  • WP Deferred JavaScript
  • Speed Booster Pack 

Speed Booster Pack eklentisi, JavaScript ayrıştırması dışında, farklı optimizasyon işlemlerinin gerçekleştirilmesine de yardımcı olmaktadır. Speed Booster Pack eklentisi WordPress içerisinde kurulduktan sonra aşağıdaki adımlar sırası ile uygulanmalıdır;

  • Speed Booster Pack eklentisi ayarlar (Settings) kısmına giriş yapılır.
  • Defer Parsing of JavaScript Files” seçeneğinin belirtildiği kutucuk işaretlenir.
  • Son adımda “Değişiklikleri Kaydet” seçilir.

Ancak Fastest Cache gibi eklentilerin de defer etme özelliği bulunur, eğer bu tarz bir eklenti (plugin) kullanıyorsanız ilk önce eklenti ayarlarından gerekli ayarları yaptıktan sonra test edebilirsiniz.

Kod Kullanımlı WordPress JavaScript Ertelemesi

WordPress sitelerinde JavaScript ayrıştırmasının bir diğer yöntemi, kod kullanımı ile gerçekleştirilir. Javascript dosyalarının ayrıştırılma işleminin ertelenmesi, wp-includes/functions.php dosyası üzerinden yapılmaktadır. Bu işlemin uygulanması iki şekilde yürütülebilir. Bunlar, WordPress yönetici paneli erişimiyle ya da FTP kontrol paneli üzerindendir. Her iki yöntemden biri ile işlem paneline erişim sağlandıktan sonra, wp-includes/functions.php dosyası içerisinde en son bölüme, aşağıdaki kod dizilimi eklenmelidir.

İşlem adımları tamamlandıktan sonra, daha önce analiz yapılan test aracı yardımıyla, işlemin kontrolü sağlanır. Defer Parsing of JavaScript çözümü gerçekleştiğinde, test aracında aşağıdaki gibi bir sonuç çıkması gerekmektedir.

CSS Dosyaları İle Defer Parsing of JavaScript Çözümü

Web sitelerinde Defer Parsing of JavaScript çözümü, CSS ve JavaScript dosyalarının yeniden düzenlenmesi ile de sağlanmaktadır. WordPress geliştiricilerin ve tema hazırlayanların alternatif yollarından biri olan bu yöntem, JavaScript ve CSS stil dosyalarının yapılandırılması ile uygulanmaktadır. WordPress sitelerinde JavaScript ve CSS dosyaları genellikle “header.php” ya da “footer.php” içerisine eklenir. Ancak site performans araçları bu işlem akışını negatif olarak algılar. Sitenin değerinin düşmesine de neden olan yöntem, Defer Parsing of JavaScript hataları ile de sorun olarak karşımıza çıkar. Bunun yerine web sitelerinin değerini yükseltmek, sorgu sayılarını düşürmek ve sitenin açılış hızını arttırmak için JavaScript ve CSS dosyaları “functions.php” içerisine eklenir. Defer Parsing of JavaScript çözüm yollarından biri olan “functions.php” barındırması, aşağıdaki şekilde yapılmaktadır.

Enqueue Fonksiyonu İle Defer Parsing of JavaScript Çözümü

Enqueue fonksiyonu kullanımı ile Defer Parsing of JavaScript çözümü, iki aşamalı olarak gerçekleştirilmektedir. Bunlar;

  • Enqueue fonksiyonu ile CSS ve Script dosyalarını eklemek,
  • Enqueue fonksiyonu ile Stil dosyalarını eklemek şeklindedir.

Enqueue Fonksiyonu İle CSS ve Script Dosyalarının Eklenmesi

WordPress alt yapısının “wp_enquene_script” ile “wp_enqueue_style” fonksiyonlarının kullanımıyla, seçtiğiniz Script ve CSS dosyalarının nereye yüklenebileceği belirlenmektedir. Seçili işlemler her zaman “functions.php” içerisinde gerçekleştirilmektedir. Eklenmesi gereken kod dizilimi ise aşağıda belirtilmiştir.

functions.php” içerisine eklenen kod dizilimde yer alan wp_register_script() fonksiyonunun özelliği ise aşağıdaki şekilde açıklanır.

#handle: Bu bölümde, eklenen script ile ilgili daha önce kullanılmamış bir isim tanımlanması gerekmektedir.

$src: Gönderilecek olan dosyanın yolu, “$src” komutu ile belirlenmektedir. WordPress içerisinde, template ya da plugin öğelerinin dosya dizinlerini göstermesi için bu komut kullanılmaktadır.

$deps: Scriptler çoğu zaman jQuery ile birlikte çalışmaktadır. Aralarındaki bağı kurmak için bu alana “jQuery” adını tanımlamak gerekmektedir.

$ver: JavaScript dosyasının versiyonu bu alana yazılmaktadır. Opsiyonel olarak bu alan, boş da bırakılabilir.

$in_footer: Bu alandaki değerin “False” olarak belirtilmesi, web sayfasının “Footer” alanına girmesine neden olmaktadır. “True” olarak belirlenirse dosyalar sayfanın üst kısmına eklenir. Web sitelerinin daha hızlı sayfa yüklemesine sahip olması için, birçok optimizasyon çalışması gerçekleştirilmektedir. Buradaki amaç, siteyi ziyaret eden kullanıcının, site içeriğinin tamamını görebilmesini sağlamaktır. JavaScript dosyaları, kullanıcı boyutunda önem taşımazlar. Bu nedenle de web sitelerinde jQuery, Script gibi dosyalar en son olarak yüklenmektedir.

Enqueue Fonksiyonu İle Stil Dosyalarının Eklenmesi

Aşağıda belirtilen kod dizilimi, WordPress tabanlı web sitelerinde stil dosyalarının eklenmesi için kullanılmaktadır.

Stil dosyalarının eklenmesinde, bir önceki yöntemde kullanılan “wp_enqueue_script” yerine “wp_enqueue_style” getirilmektedir. Dosyaların çağrılma işlemlerinde WordPress fonksiyonları aktif olarak kullanılmaktadır. Plugin dosyalarının çağrılmasında “plugins_url”, tema dosyaları için “get_template_directory_uri()”, stil dosyaları için de “get_stylesheet_directory_uri()” klasörlerine erişim sağlamak mümkün olmaktadır.

Yazımızın üst bölümlerinde yer alan WordPress eklentileri ile JavaScript ayrıştırma yöntemlerine alternatif getiren Enqueue fonksiyonu uygulaması da diğer yöntemler gibi Defer Parsing of JavaScript çözümü konusunda yardımcı olmaktadır.

Defer Parsing of JavaScript Çözümü Alternatif Yolları

Defer Parsing of JavaScript çözümü için önerilen son yöntem ise JavaScript eklentileri ile gerçekleştirilmektedir. Yaygın olarak kullanılan JavaScript eklentileri aşağıdaki gibidir;

  • Async JavaScript eklentisi
  • WP Rocket eklentisi

Async Eklentisi İle Defer Parsing of JavaScript Çözümü

Async JavaScript eklentisi, yaygın olarak kullanılan, ücretsiz ve oldukça işlevsel eklentiler arasında gösterilmektedir. JavaScript dosyalarının ertelenmesi ve zamanlamalarının yapılması için oldukça basit bir kullanım sunmaktadır. Defer Parsing of JavaScript çözümü için Async eklentisi web sitesine kurularak işlem akışı başlatılmaktadır. Ardından, “Ayarlar” bölümü ziyaret edilerek, “Async JavaScript” alanında aktivasyon tamamlanmaktadır. Async eklentisini aktif hale getirdikten sonra, iki seçeneğiniz bulunuyor. Bunlar;

  • Async: HTML dosyaları ayrıştırılırken, JavaScript dosyaları indirilmektedir. Ancak JavaScript yürütülürken, HTML ayrıştırma işlemleri duraklatılır.
  • Defer: Uygulanması daha fazla önerilen bu seçenek, HTML dosyalarının ayrıştırılması sırasında, JavaScript dosyalarını indirmeyi ertelemektedir. Tüm HTML dosyalarının ayrıştırılma işlemi bitene dek, Javascript de yüklenmeyi beklemektedir.

WP Rocket Eklentisi İle Defer Parsing of JavaScript Çözümü

WordPress sitelerinin ücretsiz eklentilerinden bir diğeri de WP Rocket plugini yani eklentisidir. WP Rocket eklentisi, JavaScript ayrıştırma ertelemesi işlemlerinde sıklıkla kullanılmaktadır. Bu eklentinin kullanım kolaylığı da, tercih edilme nedenleri arasında yer alır. WP Rocket ile Defer Parsing of JavaScript çözümü için aşağıdaki adımlar takip edilmelidir;

  • WordPress paneline giriş yapılır.
  • WP Rocket eklentisi yüklenir.
  • Ayarlar” bölümüne gidilir.
  • WP Rocket” seçilir.
  • Dosyaları İyileştir” sekmesine gidilir.
  • Aktifleştirme” seçilerek işlem adımları tamamlanır.

Sık Karşılaşılan Hatalar ve Çözümleri