SEO çalışmaları internet sitelerinin arama motorları tarafından üst sıralarda gösterim sağlaması için yapılıyor. Bu çalışmalar kapsamında kullanılan birçok farklı yöntem var, site yüklenme ve çalışma hızını artıracak optimizasyonlarından biri de Minify JavaScript (JavaScript dosya boyutu küçültme) işlemi. Bu yazıda Minify JavaScript çözümü olarak ifade edilen bu işlemin nasıl yapıldığını aktarmaya çalışacağız.

İnternet Siteleri Nasıl Görüntülenir?

Her internet sitesi CSS, HTML ve JavaScript gibi dosyaların koordinasyonu sayesinde görüntüleniyor. Adres çubuğuna bir alan adı girildiğinde sayfanın görüntülemesi için Sunucu (Server) tarafında kayıtlı olan tüm bu dosyaların İstemci’ye (Tarayıcı) iletilmesi gerekir. Bu iletim internet üzerinden yapıldığı için tüm dosyaların boyutunun yükleme hızına etkisinin olması gayet normal. JavaScript dosyalarının boyutu da bu kapsamda değerlendirilerek küçültülmeli. Bu sayede yükleme işlemi hızlı olacağı için site görüntülemesi de hızlı olacaktır. Hızlı açılan siteler kullanıcılar tarafından daha fazla tercih ediliyor.

Minify JavaScript Nedir?

Geliştiriciler kod yazarken okunabilir ve problem yaşandığında çözülebilir kılmak için kod satırları arasında boşluklar ve yorumlar bırakırlar. Bırakılan bu boşluklar kod dizilerinin yazan veya inceleyen kişi tarafından daha anlamlı hale gelmesine yardımcı olur. 

blank
Kod dizileri arasındaki bu boş alanlar ile yorum satırları JavaScript dosyasının da boyutuna doğrudan etki eder. Bu boyutu küçültebilmenin en basit yolu ise aradaki bu boşlukları kaldırmak. Bu olay aslında yazı yazarken kelimeler arasında boşluk bırakmamaya benziyor. Okunabilir olmaktan uzak hale getiren bu işlem sonucunda her ne kadar biz okuyamasak da kod dizileri bilgisayar sistemleri tarafından okunabildiği için sıkıntı yaşanmadan çalıştırılıyor. 
Kodlar arasındaki bu boşluklarla gereksiz satırların kaldırılması işlemi Minify JavaScript olarak adlandırılıyor.
Şimdi sıra bu işlemi yapmak ne kazandırır ve Minify JavaScript çözümü nasıl gerçekleştirilir sorularını cevaplamaya geldi. 

JavaScript Dosyalarını Küçültmek Bize Ne Kazandırır?

Tarayıcılar bir siteyi yükleyeceği zaman, sayfa yükleme esnasında JavaScript dosyalarını indirir, ayrıştırır ve yürütür. Büyük bir JavaScript dosyası daha yüksek bir JavaScript yükü demektir ve bu durum sayfa yükünü de artırır. 

Minify JavaScript işlemi ile dosyada bulunan gereksiz elemanlar kaldırılır, dosya boyutu küçültülerek tüketilen bant genişliğini azaltır. Bu işlem ayrıca genel sayfa yüklemesini hızlandırır, ayrıca sistemi tanımlayan kodlar daha sade ve basit hale getirilir.

Daha küçük JavaScript dosya boyutu komut dosyalarının ayrıştırılması için gereken süreyi azaltır ve daha iyi bir sayfa deneyimi yaşanır.

JavaScript Dosyaları Nasıl Küçültülür?

JavaScript dosyalarında bulunan kodlar sayfanın çalışması için gerekli en temel öğelerdendir. Küçültme işlemleri düzgün yapılamaz ise siteniz bozulabilir. Bu sebeple, bu işlemleri yapmayı denemeden önce sitenizi yedeklemeniz yaşanacak sıkıntıların daha kolay çözülmesine yardımcı olur.

Minify JavaScript çözümü ile JavaScript küçültme işlemi, kod bölme ve kodu önbelleğe alma gibi diğer JavaScript işlemlerine oranla daha az etkili bir işlemdir ancak yapılmasının faydası vardır.GTmetrix’in bu konuda oluşturduğu raporlar var. Alan adınızı girerek oluşturacağınız testte kendi sitenize ait Minify JavaScript raporunuzu buradan girerek siz de inceleyebilirsiniz.

blank
blank

Şimdi Javascript küçültme metodlarını inceleyelim.

JavaScript Küçültme Araçları İle Manuel Küçültme

JavaScript kodlarını küçültme işlemi yapan bir çok online araç var, minifiycode.com , toptal.com gibi adreslerden birine giderek işlem yapabilirsiniz. 

  • Bu tür işlemler her zaman sorun çıkarabilir, bu sebeple öncelikle sitenizin yedeğini almayı unutmayın.
  • Küçültmek istediğiniz JavaScript kodlarını, GTmetrix raporunda küçültülmesi gerekenler şeklinde gösterilen kaynak yolundan alın.
  • Kopyaladığınız kod dizisini sitede küçültme işlemi için belirtilen alana yapıştırarak değiştirilmesini sağlayın. 
  • Küçültülmüş kodları kopyalarak sitenize ekleyin.

Bu işlemlerin bazı handikapları olabiliyor. Küçültülmüş dosyalar bazı işlevlerin devre dışı kalmasına yol açabilir. Örneğin JavaScript yorumlarında veri depolayan ve ardından DOM’da yürüyen, komut dosyası için kaynak kodunu alarak yorumlardan veri okumaya yarayan bazı kodlar vardır. Bu kod sistemleri küçültme işleminden sonra çalışmayabilir.

Bunun yanında daha profesyonel kullanıcılar Google Closure Complier kullanarak JavaScript dosyalarını küçültebilirler. Bir API şeklinde de çalışan bu uygulama web tabanlı çalışan aracıyla yaptığı düzenlemeler ile JavaScript dosyalarının daha hızlı indirilmesini ve daha hızlı çalışmasını sağlar. 

CDN Kullanarak Minify JavaScript Çözümü

JavaScript dosyalarının küçültülerek sunulmasını sağlamanın bir diğer yolu da CDN (Content Delivery Network) kullanmaktır. CDN, bu özelliği tanımladığınız taktirde cache işlemi yaparak sitenize ait dosyaları küçültür, senkronize bir şekilde elinde tutar ve ziyaretçilere sunar. Sitenizde halen küçültülmemiş dosyaların küçültmesini sağlayan doğal bir yöntemdir.

CDN, dünya genelinde yayılmış sunucu ağı ile sitenizin yayınını daha hızlı bir şekilde sunar ve site hızınızı artırır. Bu işlem hem dosyalarınızın küçültülmesini sağlayarak hem de CDN’in sunum hızı sayesinde hızlanır.

WordPress Eklentileri ile Otomatik Minify JavaScript Çözümü

Eğer sitenizin altyapısı WordPress ise böyle bir yöntemi kullanabilirsiniz. WordPress gibi açık kaynak kodlu CMS’ler (Content Management System) sundukları ilave araçlarla birçok işlem yapmaya müsade ediyor. Plugin’ler (Eklenti) galeri oluşturma, Cache işlemi yapma, harita sunma, form doldurma ve hatta CAPTCHA işlemi yapmasına bile yardımcı oluyor. Geliştiriciler SEO çalışmaları için de birçok eklenti geliştiriyor. CSS, JS ve HTML dosyalarını düzenleyen, görselleri sıkıştıran veya formatını değiştiren bu uygulamalar sitenin düzgün ve hızlı çalışmasını sağlayan otomatik düzenleme yapan eklentilerdir.

  • Autoptimize eklentisi sitenize ait CSS, JavaScript ve HTML dosyalarını optimize eden bir uygulamadır. 
  • WP Optimize eklentisi de aynı şekilde çalışan diğer bir popüler eklentidir.
  • WP Rocket bir Cache eklentisi olarak işlev görüyor. Cache olarak dosyaların tarayıcıda saklanması da küçültülmesi gerekliliğini doğuruyor. 
  • LiteSpeed Cache, Litespeed server yazılımı tarafından sunulan özel bir Cache eklentisi, doğal bir şekilde JavaScript Minify işlemi yapar.
  • W3 Total Cache, popüler cache eklentilerinden biridir.
  • WP Fastest Cache, yine en çok tercih edilen eklentilerdendir.

Sonuç

SEO çalışmaları sitenizi düzenler, hızını artırır ve arama motorlarına ait SERP (Search Engine Result Page) sayfasında üst sıralara taşınmasına yardımcı olur. Ancak bu işlemler bir bütündür. GTmetrix, Pagespeed Insights ve Pingdom Tools gibi araçlarla sitenizi inceleyin. JavaScript küçültmek (Minify JavaScript) yapılması gereken işlemlerden sadece biridir. Ayrıca bu işlemin sitenizdeki JavaScript dosyaların boyutuna bağlı olarak görece etkisi olacaktır. Yani eğer sitenizin dosyaları zaten sorun yaratmayacak kadar küçükse bu işlemleri yapmanız yeterli etki almanıza yol açmayacaktır.

Bilinçsizce sitenizin dosyalarının boyutunu küçültmeye çalışmak, sitenizin yapısal dosyalarına zarar verebilir, bu sebeple bu işlemleri yapmadan önce mutlaka sitenizin yedeğini alın. Böylece bir sorun yaşamanız durumda yedekten tekrar yükleme şansınız olacaktır. Eğer kod düzenlemek ve yönetmek konusunda fazla bilginiz yoksa, Eklentiler (Plugin) yardımıyla yapılan optimizasyonları tercih etmelisiniz.