Web sitenizi optimize etmenin en iyi yollarını araştırdıysanız, muhtemelen küçültme veya küçültme terimleriyle karşılaşmışsınızdır. Minify terimi, web sitenizdeki dosyaların boyutunu küçültmek için kullanılan yöntemleri ifade eder. Bu durum beyaz boşlukları, satırları ve gereksiz karakterleri kaynak kodundan kaldırarak gerçekleştirilir.
Bu yazıda küçültmenin neleri kapsadığını, faydalarını ve en popüler küçültme çözümlerinden bazılarını açıklayacağız. Oradan, web siteniz için performans ve hız iyileştirmelerini ele almanın en iyi yoluna karar verebileceksiniz.
Küçültme nedir?
Web siteleri, sunucuda bulunan klasörlerde düzenlenmiş birçok farklı dosyadan oluşur. Bu dosyalar, sitenizin görünümünü ve işlevselliğini belirleyen kod içerir. Sitenizin hafif olması ve hızlı yüklenmesi için kullandığı kodun optimize edilmesi gerekir. Özellikle, JavaScript ve CSS kodunuz. Dosyalarınızı küçültmek, bunu başarmanın bir yoludur. GTmetrix veya PageSpeed Insights kullanarak web sitenizin hızını test etmeyi denediyseniz, muhtemelen site dosyalarınızın bazılarını, yani CSS ve JavaScript dosyalarını küçültme önerisi almışsınızdır.
Bir web sitesinin dosyalarındaki kodu kontrol ettiğimizde, yorumlamayı kolaylaştırmak için anlaşılır bir şekilde yazılmış olmasını hepimiz bekleriz. Fakat bu kodu yürüten bilgisayarlar, dosyaların yorum, biçimlendirme, boşluk veya yeni satırlar içerip içermediğini umursamaz. Web sitesi dosyalarında herhangi bir gereksiz karakterle karşılaştıklarında, onları yok sayarlar; yalnızca yürütülmesi gereken kod önemlidir.
Bu durum küçültmenin sahneye girdiği zamandır. Küçültme, temel olarak yazılı kodu yürütmek için gerekli olmayan gereksiz karakterlerin kaldırılması anlamına gelen bir bilgi işlem terimidir. Küçültme, kodu analiz edip yeniden yazarak çalışır. Bu durum dosyaların genel boyutunu ve dolayısıyla web sitesinin boyutunu azaltır, böylece kullanıcının tarayıcısında daha hızlı yüklenebilir.
Örneğin web sitenize biraz şuna benzeyen CSS koduyla stil vermeyi amaçlayan bir stil sayfası dosyanız varsa:
Küçültülmüş versiyonu şöyle görünür:
Gördüğünüz gibi fark önemli; küçültülmüş sürüm tek satırda ve kodun orijinal sürümünden çok daha az yer kaplıyor.
Bir istemcinin (web tarayıcısının) isteğine yanıt gönderilmeden önce web sunucusunda küçültme gerçekleşir. Küçültmeden sonra, web sunucusu orijinal dosyalar yerine daha küçük, küçültülmüş ve çok daha hızlı CSS ve JavaScript dosyaları kullanır. Bu durum işlevsellik kaybı olmadan gelişmiş sayfa yükleme hızıyla sonuçlanır.
WordPress CSS ve JavaScript Dosyalarınızı Küçültme
Web sitesi dosyalarınızı küçültmeye başlamadan önce, tüm web sitesini yedeklemenizi veya tek tek dosyaları yedeklemenizi öneririz. Hatta bir hazırlık siteniz veya yerel bir test ortamınız varsa, önce web sitenizin dosyalarını orada küçültmeniz iyi olur. Bu şekilde canlı sitede değişiklik yapmadan önce her şeyin düzgün çalışıp çalışmadığını kontrol edebilirsiniz.
Hatta dosyaları küçültmeden önce ve sonra web sitenizin sayfa hızını kontrol etmelisiniz. Ardından sonuçları karşılaştırın ve küçültmenin iyileştirmeye yardımcı olup olmadığına bakın. Bunu GTmetrix’i kullanarak yapabilirsiniz; sonuçlar üreten ve web sitesi optimizasyonu iyileştirmeleri için öneriler veren çok kullanışlı bir test aracıdır.
Dosyaları küçültmek için bir eklenti kullanabilir veya online bir araçla manuel olarak yapabilirsiniz. Her iki yöntemi de aşağıdaki bölümlerde daha ayrıntılı olarak açıklayacağız.
Eklentileri Kullanarak Dosyaları Küçültme
Küçültme için bir WordPress eklentisi kullanmak, web sitenizdeki CSS ve JavaScript dosyalarını küçültmenin en kolay yoludur. En sık kullanılan eklentiler şunlardır:
otomatik optimize et
Autoptimize, bulabileceğiniz en popüler küçültme eklentilerinden biridir. Kullanımı çok kolaydır ve birçok olanak sunar ve üstelik ücretsizdir. Bu eklenti, komut dosyalarınızı birleştirebilir, küçültebilir ve kodunuzu önbelleğe alabilir.
Bu eklentiyi WordPress yönetici paneli aracılığıyla indirin ve kurun. Etkinleştirdiğinizde, Ayarlar > Otomatik optimizasyon seçeneğini bulun ve optimizasyon seçeneklerinde CSS ve JavaScript seçenekleri için kutuları işaretleyin.
Bu dosyaları optimize etmek için aşağıda ek seçenekler de göreceksiniz. Bunları etkinleştirebilir ve ek olarak dosya küçültmeyi özelleştirebilirsiniz. Sonunda, tek yapmanız gereken Değişiklikleri Kaydet ve Önbelleği Temizle düğmesine tıklamak.
Hızlı Hız Küçültme
Fast Velocity Minify başka bir popüler, ücretsiz ve kullanışlı eklentidir. Sunucunuza gelen HTTP isteklerini azaltmak için CSS ve JavaScript dosyalarınızı küçülterek ve birleştirerek çalışır. Dosyaları bir grupta birleştirir ve mümkün olduğunca azını kullanmaya çalışır. Ek optimizasyon seçenekleri mevcuttur. Fakat varsayılan ayarlar çoğu web sitesi için yeterlidir.
Bu eklentiyi kurup etkinleştirdiğinizde, web sitesi dosyalarınız otomatik olarak küçültülür ve optimize edilir.
Eklenti ayarlarına erişmek ve mevcut tüm seçenekleri kontrol etmek için yönetici panelindeki Ayarlar > Hızlı Hız Küçültme seçeneğini kullanabilirsiniz. Durum sekmesinin altında, Fast Velocity Minify’ın işlediği JavaScript ve CSS dosyalarının bir listesini görebilirsiniz.
Hatta dosyalarınızın nasıl optimize edileceğini uyarlamak için Ayarlar sekmesini kullanabilirsiniz. CSS ve JavaScript gruplaması varsayılan olarak etkinleştirildiğinden, eklentiyi etkinleştirdikten sonra varsayılan seçenekleri ayarlamak veya belirli kod türleri için küçültmeyi devre dışı bırakmak için ayarları kullanabilirsiniz. Hatta Google Fonts ve Font Awesome simgelerini optimize etme seçeneğiniz de var.
WP Süper Küçültme
WP Super Minify, web sitenizin CSS ve JavaScript dosyalarını küçültebilen, birleştirebilen ve önbelleğe alabilen bir küçültme eklentisidir.
Bu eklentiyi etkinleştirdikten sonra, tüm satır içi JavaScript ve CSS kodunu otomatik olarak sıkıştıracaktır. Böylece dosya boyutu daha küçük olacak ve bu da web sitenizin yükleme hızını artırmanıza yardımcı olacaktır. Ayarlar > WP Süper Küçültme seçeneğini kullanarak, hem JavaScript’i hem de CSS’yi mi yoksa bu iki dosya türünden birini mi küçülteceğinizi seçebilirsiniz.
Bu eklentinin düzgün çalıştığından emin olmak için web sitenizin kaynak kodunu incelemeniz yeterlidir. Bunu yapmanın en kolay yolu, sitenizi bir tarayıcıda açıp Ctrl + U (Windows için) veya Option + Command + U (Mac için) tuşlarına basmaktır. Her şey yolundaysa, kaynak kodun sonunda aşağıdaki mesajı görmelisiniz:
Konu Özeti, hangi eklentiyi kullanmayı seçerseniz seçin, tek yapmanız gereken küçültmek istediğiniz dosyaları seçmek ve eklenti arka planda tüm işi sizin yerinize yapacak. Piyasadaki her küçültme eklentisi, küçültmeye ek olarak farklı işlevler sunar, bu nedenle birkaç eklenti denemeli ve size en uygun olanı seçmelisiniz.
Hatta küçültme, W3 Total Cache ve WP Super Cache gibi önbelleğe alma eklentilerinin neredeyse standart bir özelliğidir. Böylece, web sitenizin CSS ve JavaScript dosyalarını küçültmek için bunları da kullanmayı deneyebilirsiniz.
Dosyaları Manuel Olarak Küçültme
İlk olarak dosyaları manuel olarak küçültmek, web sitenizdeki her dosyayı manuel olarak gözden geçirmeniz ve beyaz veya boş alanları kaldırmanız anlamına gelmez. Manuel küçültme aslında bu amaç için popüler online araçlardan birinin kullanılmasını içerir. Bunlardan biri, kodunuzu küçültmek için atmanız gereken adımları göstermek için kullanacağımız Küçültme Kodu. Bu araç oldukça basit ve kullanıcı dostu bir arayüze sahiptir. Ve bu türdeki birçok online araç, küçültme için benzer veya aynı prosedüre sahiptir. İşte deneyebileceğiniz birkaç tanesi:
-
CSS Küçültücü
-
JavaScript Küçültücü
-
CSS Kompresörü
-
JS Sıkıştır
-
küçült
Küçültme Kodu aracını kullanmayı seçerseniz, önce ihtiyacınız olan sekmeyi seçmeniz gerekir. Hangi kodu küçültmek istediğinize bağlı olarak CSS küçültücü ve JavaScript küçültücü için bir sekme vardır. Karar verdikten sonra açılan pencereye kodunuzu yapıştırın ve Minify butonuna basın.
Birkaç dakika sonra girdiğiniz kodun küçültülmüş halini göreceksiniz. Basitçe kopyalayabilir ve orijinal dosyanıza aktarabilirsiniz. Küçük bir hatırlatma—orijinal kodun üzerine küçültülmüş kodu yazmadan önce dosyalarınızı yedeklediğinizden emin olun.
Manuel küçültme, yalnızca belirli dosyaları veya yazdığınız bazı kodları küçültmek istiyorsanız öncelikle kullanışlıdır. Örneğin web sitenizi özelleştirmek için bir alt tema kullanıyorsanız, özel kodunuzu içeren CSS dosyası küçültme için iyi bir aday olacaktır. Bu durumda, orijinal dosyanın yedeğini alabilir, ardından online aracı kullanarak kodunu küçültebilir ve doğrudan dosyada değiştirebilirsiniz.
Daha sonra bir şeyi değiştirmeye karar verirseniz, bunu her zaman kaydettiğiniz yedekleme dosyasında yapabilirsiniz. Yapılan değişikliklerle tekrar küçültün ve sunucudaki dosyadaki kodu değiştirin. Bu şekilde, her zaman düzenleyebileceğiniz hazır bir yedekleme dosyanız olur ve küçültülmüş dosya, sitenizi olabildiğince optimize etmek için üzerine düşeni yapan sunucuda olur.
Son düşünceler
Web sitenizin performansını iyileştirmek ve daha iyi sayfa yükleme hızları elde etmek istiyorsanız, CSS ve JavaScript dosyalarını küçültmek size çok yardımcı olacaktır. Online olarak bulunan küçültme araçlarını kullanarak, web sitenizin kodunu kolayca küçültebileceksiniz. Hatta WordPress web siteleriyle, her zaman piyasadaki birçok eklentiden birini yükleyebilir ve yalnızca birkaç tıklamayla CSS ve JavaScript dosyalarını otomatik olarak küçültebilirsiniz. Zaten bir önbellek eklentisi kullanıyorsanız, ayarlarında herhangi bir küçültme seçeneği olup olmadığını kontrol edebilir ve bir sürü yeni eklenti eklemek yerine onu kullanabilirsiniz.
CSS ve JavaScript dosyalarını küçültmek için kullanabileceğiniz birçok seçenek vardır, sizin için hangisinin en iyi olduğuna karar vermeniz yeterlidir. Umarız bu makaleyi faydalı bulmuşsunuzdur ve tavsiyemizi kullanırsanız, optimize edilmiş siteniz yakında sıralamalarda yükselecektir.