WordPress Sitenizin CSS, HTML ve JavaScript'ini Nasıl Küçültebilirsiniz?

Küçültme, genellikle web sitenizi hızlandırmaya yönelik bir adım olarak önerilen basit bir kavramdır. Ancak gerçek şu ki, birçok site sahibi, dosyalarını küçültmeye çalıştıklarında ve sitelerini bozduklarında sonu gelmez bir hayal kırıklığı yaşarlar.

Peki ne verir?

Küçültme genellikle çok fazla deney gerektirir. Pek çok çözüm mevcut olsa da bunların nasıl davranacağı, kullandığınız tema ve eklentilere bağlı olarak siteden siteye farklılık gösterecektir.

Bu yazıda, siteniz için doğru çözümü bulmanıza yardımcı olmak amacıyla küçültmenin ne olduğunu, faydalarını ve mevcut en popüler küçültme çözümlerinden bazılarını (hem manuel hem de eklentiler) inceleyeceğiz.

Minifikasyon Nedir?

Web siteleri birçok farklı dosyadan oluşur. Site hızınızı Google PageSpeed ​​Insights ile test ederseniz HTML, CSS ve JavaScript dosyalarınızı küçültme önerisi alabilirsiniz.

Sorun? İnsanlar olarak bu dosyaların içerdiği kodları okuyabilmek için yazıyoruz, ancak bilgisayarlar yorum, biçimlendirme, boşluk ve yeni satırlar gibi karakterleri önemsemiyor. Dolayısıyla web sitesi dosyalarında bu gereksiz karakterlerle karşılaştıklarında onları görmezden geliyorlar.

Minifikasyonun devreye girdiği yer burasıdır. Küçültme, temel olarak kodun yürütülmesi için gerekli olmayan gereksiz karakterlerin kaldırılması anlamına gelen bir programlama terimidir. Küçültme, dosyalarınızın genel boyutunu azaltmak için kodu analiz edip yeniden yazarak çalışır, böylece sitenizin toplam boyutu azaltılarak kullanıcının tarayıcısında daha hızlı yüklenir.

Örneğin, bir stil sayfasında bulabileceğiniz bazı CSS'ler şunlardır:

a:link {
  color: gray;
}

a:visited {
  color: green;
}

a:hover {
  color: rebeccapurple;
}

a:active {
  color: teal;
}

Ve işte yukarıdaki CSS örneğinin küçültülmüş versiyonu:

a:link{color:gray}a:visited{color:green}a:hover{color:#663399}a:active{color:teal}

Kodun ne kadar sıkıştırıldığını gördünüz mü?

Yanıt gönderilmeden önce küçültme bir web sunucusunda gerçekleştirilir. Küçültme işleminden sonra, web sunucusu orijinal dosyaların yerine daha küçük, küçültülmüş ve çok daha hızlı dosyaları kullanır, bu da işlevsellikten ödün vermeden daha düşük bant genişliği sağlar.

SEO uzmanı Yoast'ın açıkladığı gibi, dosyaları küçültmek bazı durumlarda dosya boyutunun %30-40'ına, hatta %50'sine kadar tasarruf sağlayabilir.

HTML, CSS ve JavaScript Dosyalarınızı Neden Küçültmelisiniz?

Hızlı bir web sitesine sahip olmak yalnızca Google'ı mutlu etmekle ve web sitenizin aramalarda daha üst sıralarda yer almasına yardımcı olmakla kalmaz, aynı zamanda site ziyaretçileriniz için daha iyi bir kullanıcı deneyimi sağlar.

Minifikasyonun birçok faydası vardır:

• Dosyaların daha küçük olması sitenizin toplam indirme boyutunun azalması anlamına gelir,
• Site ziyaretçileri sayfalarınızı daha hızlı yükleyip erişebilecek,
• Site ziyaretçileri daha büyük dosyalar indirmek zorunda kalmadan aynı kullanıcı deneyimine sahip olacak ve
• Ağ üzerinden daha az veri iletildiği için site sahipleri daha düşük bant genişliği maliyetleri elde edecek.

HTML, CSS ve JavaScript Dosyalarınızı Nasıl Küçültebilirsiniz?

Sitenizin dosyalarını küçültmeden önce bir yedekleme yapmak iyi bir fikirdir. Daha da iyisi, bir hazırlama sitesinde dosyalarınızı küçültün, böylece canlı sitenizde değişiklik yapmadan önce her şeyin çalışır durumda olup olmadığını kontrol edebilirsiniz.

Sonuçları karşılaştırabilmeniz ve küçültmenin herhangi bir etki yaratıp yaratmadığını görebilmeniz için dosyalarınızı küçültmeden önce ve sonra sayfa hızınızı karşılaştırmak da önemlidir.

En sevdiğim hız testi sitesi GTmetrix. Hem Google PageSpeed ​​Insights'ı hem de açık kaynaklı bir performans test aracı olan YSlow'u kullanarak sayfa hızı performansınızı analiz eder. Daha sonra puanlar oluşturur ve site optimizasyon iyileştirmeleri için öneriler sunar.

Önerebileceğim diğer harika hız testi araçları arasında Pingdom Web Sitesi Hız Testi ve WebPageTest ve Mobil hızınızı test edin.

Dosyaları Manuel Olarak Küçültme

Dosyaları manuel olarak küçültmek önemli miktarda zaman ve çaba gerektirir. Yani, dosyalardan tek tek beyaz boşlukları, satırları ve gereksiz kodları kaldırmak için kimin zamanı var? Sıkıcı! Ayrıca insan hatasına daha fazla yer verir. Bu nedenle dosyaları küçültmek için bu yöntemi önermem.

Neyse ki, sitenizden kod kopyalayıp sitenize yapıştırmanıza olanak tanıyan birçok ücretsiz çevrimiçi küçültme aracı bulunmaktadır. Burada araçların kısa bir listesini bulabilirsiniz; siteniz için daha iyi sonuç verebilecek diğer seçenekleri araştırmanızı öneririm.

1. Will Peavy'nin HTML Minifier'ı

HTML Minifier, PHP ile oluşturulmuş HTML minifikasyonu için ücretsiz bir çevrimiçi araçtır. Aracı kullanmak için, HTML'nizi, işaretlemenizdeki JavaScript CSS'si de dahil olmak üzere metin alanına yapıştırın ve "Küçült" düğmesini tıklayın. Komut dosyalarınızın küçültme sonrasında çalışmasını sağlamak için, JavaScript ifadelerini noktalı virgülle sonlandırmanız ve yorumlar için* *sözdizimini kullanmanız önerilir.

2. CSS Küçültücü

Başka bir ücretsiz araç olan CSS Minifier, kopyalayıp "Giriş CSS" metin alanına yapıştırdığınız CSS'yi küçülterek çalışır. Küçültülmüş çıktıyı dosya olarak indirmek için seçenekler vardır. Geliştiriciler için bu araç aynı zamanda bir API sağlar.

3. JS Sıkıştırma

JSCompress, JS dosyalarınızı orijinal boyutlarının %80'ine kadar sıkıştırmanıza ve küçültmenize olanak tanıyan çevrimiçi bir JavaScript sıkıştırıcıdır. Kullanmak için kodunuzu kopyalayıp yapıştırın veya birden fazla dosyayı yükleyip birleştirin ve ardından "JavaScript'i Sıkıştır"ı tıklayın. Bu araç UglifyJS 3'ü ve babili-bağımsızını temel alır.

Geliştiriciler için Manuel Küçültme Araçları

Google, daha gelişmiş seçenekler arayan geliştiricilere şu HTML, CSS ve JavaScript küçültme kaynaklarını önerir:

• HTMLMinifier – Javascript tabanlı bir HTML sıkıştırıcı/küçültücü (Node.js desteğiyle).
• CSSNano – PostCSS ekosisteminin üzerine inşa edilmiş modüler bir küçültücü.
• csso – Yapısal optimizasyonlara sahip bir CSS küçültücü.
• UglifyJS – Bir JavaScript ayrıştırıcı, yönetici, sıkıştırıcı ve “güzelleştirici” araç seti.

Google'ın Kapatma Derleyicisi, JavaScript için bir optimizasyon aracıdır. Kaynak dilden makine koduna derlemek yerine, daha iyi JavaScript oluşturmak için JavaScript'ten derler. Kodunuzu ayrıştırır, analiz eder, ölü kodu kaldırır ve yeniden yazar ve kalanları en aza indirir. Bu araç aynı zamanda sözdizimini, değişken referanslarını ve türlerini de kontrol eder ve yaygın JavaScript tuzakları konusunda uyarıda bulunur.

Dosyaları Eklentilerle Küçültme

Manuel adımlar uygulamanıza gerek kalmadan dosyalarınızı küçültebilecek hem ücretsiz hem de premium bazı harika eklentiler mevcut.

Not: Bu listeye yalnızca WordPress Eklenti Havuzunda bulunan, güncel ve WordPress'in en son sürümleriyle uyumlu olarak test edilmiş ücretsiz eklentileri ekledim. Premium seçenekler için aşağı kaydırın./

1. HTML'yi Küçült

Bu basit, hafif ve sorunsuz eklenti, sitenizin HTML çıktısını küçültmenize olanak tanır. Kullanmak için tek yapmanız gereken eklentiyi yükleyip etkinleştirmektir; eklenti, herhangi bir ayar yapılandırmanıza gerek kalmadan işaretlemenizi otomatik olarak küçültecektir.

2. HTML'yi küçültün

Bu eklentinin WordPress.org açıklamasına bayıldım: "Hiç web sitenizin HTML işaretlemesine bakıp ne kadar özensiz ve amatörce göründüğünü fark ettiniz mi?" Bu eklenti özensiz işaretlemeyi temizler ve en aza indirir.

HTML Minify eklentisinin aksine bu araç daha fazla seçenek sunar. Metin alanları veya önceden biçimlendirilmiş metinlerle uğraşmasa da, JavaScript ve CSS için isteğe bağlı küçültme içerir. Ayrıca HTML, CSS ve JavaScript yorumlarını kaldırma (MSIE koşullu yorumlarını bırakma), gereksiz XHTML kapatma etiketlerini HTML5 void öğelerinden kaldırma ve gereksiz göreceli şemaları ve alanları bağlantılardan kaldırma seçenekleri de vardır.

3. Birleştir + Küçült + Yenile – WordPress Eklentileri

Bu eklenti kodunuzu küçültmekten fazlasını yapar. CSS ve JavaScript dosyalarınızı birleştirir veardındanMinify (CSS için) ve Google Closure (JavaScript için) kullanarak oluşturulan dosyaları küçültür. Küçültme, site hızınızı etkilememesi için WP-Cron aracılığıyla gerçekleştirilir.

CSS veya JS dosyalarınızın içeriği değiştiğinde yeniden işlenirler, böylece önbelleğinizi boşaltmanıza gerek kalmaz. Çoklu site kullanıcıları bu eklentinin ağlarda iyi çalıştığını bilmekten mutluluk duyacaktır.

4.JCH Optimize Etme

JCH Optimize, ücretsiz bir eklenti için çok sayıda güzel özelliğe sahiptir: CSS ve JavaScript'i birleştirir ve küçültür, HTML'yi küçültür, birleştirilmiş dosyalar için GZip sıkıştırması vardır, arka plan görüntüleri için sprite oluşturma özelliği vardır ve çakışmaları çözmek için belirli dosyaları birleştirmenin dışında bırakabilirsiniz.

JavaScript'in eşzamansız olarak yüklenmesi, oluşturma engellemesini ortadan kaldırmak için CSS dağıtımını optimize etme, CDN/çerezsiz etki alanı desteği ve görüntüler için yavaş yükleme ve optimizasyon gibi daha fazla optimizasyon özelliğine sahip bir profesyonel sürüm mevcuttur.

5. CSS Küçült

CSS'nizi bu eklentiyle küçültmek bundan daha kolay olamazdı; yükleyin, etkinleştirin veAyarlar > CSS Küçült'egiderek tek bir seçeneği etkinleştirin: CSS kodunu optimize edin ve küçültün.

Bu eklentideki kod, popüler Autoptimize eklentisinden alınmıştır (bu eklenti hakkında daha fazla bilgiyi aşağıda bulabilirsiniz). Eklentinin yazarı Peter Pfeiffer'ın JavaScript için benzer bir eklentisi var: Minify JavaScript.

6. Hızlı Hızı Küçültme

20.000'den fazla aktif yükleme ve beş yıldızlı derecelendirmeyle bu, dosyaları küçültmek için mevcut en popüler seçeneklerden biridir. Kullanmak için eklentiyi yükleyip etkinleştirin veAyarlar > Fast Velocity Minify'agidin. Burada, geliştiricilerin JavaScript ve CSS istisnaları için gelişmiş seçenekler, CDN seçenekleri ve sunucu bilgileri de dahil olmak üzere, eklentiyi yapılandırmak için bir dizi seçenek bulacaksınız. Ancak varsayılan ayarlar çoğu site için gayet iyi çalışır.

Eklenti, ön uçta ve yalnızca ilk önbelleğe alınmamış istek sırasında gerçek zamanlı olarak küçültme gerçekleştirir. İlk istek işlendikten sonra, aynı CSS ve JavaScript kümesini gerektiren diğer sayfalara aynı statik önbellek dosyası sunulacaktır.

7. Otomatik optimizasyon

400.000'den fazla aktif kurulumla Autoptimize, WordPress Eklenti Deposu'ndaki en popüler küçültme aracıdır.

Autoptimize, komut dosyalarını ve stilleri toplayabilir, küçültebilir ve önbelleğe alabilir, varsayılan olarak CSS'yi sayfa üstbilgisine enjekte edebilir ve ayrıca komut dosyalarını altbilgiye taşıyabilir ve erteleyebilir. Autoptimize'ı sitenizin özel ihtiyaçlarını karşılayacak şekilde uyarlayabilmeniz için geliştiriciler için çok sayıda gelişmiş seçenek ve kapsamlı bir API mevcuttur.

8. Sinek Kuşu Sayfa Hızı Optimizasyonu

Hummingbird, WordPress Eklenti Deposu için premium bir eklenti olarak başlayan nispeten yeni bir eklentidir. Ücretsiz sürüm, küçültme de dahil olmak üzere, dosyaları en üst performans için küçültmenize, konumlandırmanıza ve birleştirmenize olanak tanıyan harika bir site optimizasyon araçları koleksiyonuna sahiptir.

Ayrıca, doğrudan eklentinin içinden sitenizin performansını test etmenize ve sitenizi iyileştirmeye yönelik uygulanabilir öneriler almanıza olanak tanıyan harika bir tarama özelliği de bulunmaktadır.

WordPress Önbellek Eklentilerinde Bir Özellik Olarak Küçültme

Küçültme genellikle önbellek eklentilerinde bulacağınız standart bir özelliktir. Test ettiğim ve önerebileceğim eklentiler şunlardır:

• WP Roketi
• W3 Toplam Önbellek
• WP Süper Önbellek

Çözüm

Umarım bu makale sizin için küçültmenin gizemini çözmüştür ve bunun ne olduğu ve web sitenize nasıl uygulayabileceğiniz konusunda sağlam bir anlayış sağlamıştır.

Küçültme işleminin daha çok bir ince ayar adımı olduğunu akılda tutmak önemlidir; site hızınızda küçük bir iyileşme görebilirsiniz, ancak bu önemli olmayacaktır. Bununla birlikte, dosyaları birleştirmek gibi diğer performans ve optimizasyon tekniklerine ek olarak uygulamaya değer bir en iyi uygulamadır.

Ayrıca, her web sitesi farklı olduğundan, dosyalarınızı küçültürken web siteniz için en iyi olanı yapılandırdığınızdan, test ettiğinizden, yeniden yapılandırdığınızdan, yeniden test ettiğinizden, ince ayar yaptığınızdan ve kontrol ettiğinizden emin olun.

Bu yazıyı beğendiyseniz sitenizi nasıl hızlandıracağınıza dair daha fazla tavsiye için Karşılaştırılan En İyi 6 WordPress Önbellek Eklentisine göz atın.

Kodunuzu küçültmeyi denediniz mi? Web sitenizi daha hızlı hale getirmek için başka hangi yöntemleri kullandınız? Aşağıdaki yorumlar bölümünde bize bildirin!