Wordpress

WordPress Sitenizin CSS, HTML ve JavaScript’i Nasıl Küçültülür

Küçültme, genellikle web sitenizi hızlandırmak için bir adım olarak önerilen basit bir kavramdır. Ancak gerçek şu ki, birçok site sahibinin dosyalarını küçültmeye çalıştıklarında ve sonunda sitelerini bozduklarında sinir bozucu oluyor.

Peki ne verir?

Küçültme genellikle çok fazla deneme gerektirir. Birçok çözüm mevcut olsa da, nasıl davrandıkları, kullandığınız tema ve eklentilere bağlı olarak siteden siteye değişecektir.

Bu yazıda, siteniz için doğru çözüme yönlendirmenize yardımcı olmak için küçültmenin ne olduğunu, faydalarını ve mevcut daha popüler bazı küçültme çözümlerini (hem kılavuz hem de eklentiler) keşfedeceğiz.

Küçültme 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 dosyalarda bulunan kodu okuyabilmemiz için yazıyoruz, ancak bilgisayarlar yorumlar, biçimlendirme, beyaz boşluk ve yeni satırlar gibi karakterleri umursamıyor. Dolayısıyla web sitesi dosyalarında bu gereksiz karakterlerle karşılaştıklarında onları görmezden geliyorlar.

İşte minikleştirme burada devreye giriyor. Küçültme, temelde kodun çalıştırılması için gerekli olmayan tüm gereksiz karakterleri kaldırmak anlamına gelen bir programlama terimidir. Küçültme, dosyalarınızın genel boyutunu küçültmek için kodu analiz edip yeniden yazarak çalışır, böylece sitenizin toplam boyutunu küçülterek kullanıcının tarayıcısına daha hızlı yüklenmesini sağlar.

Örneğin, bir stil sayfasında bulabileceğiniz bazı CSS’ler:

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ılmış olduğunu görüyor musunuz?

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

SEO uzmanı Yoast açıkladığı gibi , küçültmek dosyalar% 30-40 kadar tasarruf, veya bazı durumlarda dosya boyutu hatta% 50 olabilir.

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

Hızlı bir web sitesine sahip olmak yalnızca Google’ı mutlu etmekle kalmaz, web sitenizin aramada 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.

Site hızının neden önemli olduğunu açıklığa kavuşturan birçok istatistik vardır: İnsanların% 40’ı ana sayfanızın yüklenmesi için 3 saniye beklemeyecek ve Google , sitelerin 2-3 saniye içinde yüklenmesini önermektedir .

Küçültmenin birçok faydası vardır:

  • Daha küçük dosyalar, sitenizin toplam indirme boyutunun azaltıldığı anlamına gelir.
  • Site ziyaretçileri sayfalarınızı daha hızlı yükleyebilecek ve erişebilecek,
  • Site ziyaretçileri büyük dosyaları indirmek zorunda kalmadan özdeş bir kullanıcı deneyimi var ve olacak
  • Ağ üzerinden daha az veri iletildiği için site sahipleri daha düşük bant genişliği maliyetleri elde edeceklerdir.

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

Sitenizin dosyalarını küçültmeden önce, bir yedekleme çalıştırmak iyi bir fikirdir. Daha da iyisi, yayındaki sitenizde değişiklik yapmadan önce her şeyin çalışır durumda olduğunu kontrol edebilmek için bir hazırlık sitesinde dosyalarınızı küçültün.

Ayrıca , dosyalarınızı küçültmeden önce ve sonra sayfa hızınızı karşılaştırmak da önemlidir, böylece sonuçları karşılaştırabilir ve küçültmenin herhangi bir etki yaratıp yaratmadığını görebilirsiniz.

En sevdiğim hız testi sitem GTmetrix. Hem Google PageSpeed ​​Insights hem de açık kaynaklı bir performans test aracı olan YSlow’u kullanarak sayfa hızınızın performansını analiz eder. Daha sonra puanlar oluşturur ve site optimizasyonu 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. Ben bireysel beyaz boşluk, çizgiler ve gereksiz kod dosyalarından çıkarmak için zamanı var ki kim ki? Sıkıcı! Ayrıca, insan hatası için daha fazla alan sağlar. Bu yüzden dosyaları küçültmek için bu yöntemi önermem.

Neyse ki, kodu sitenizden kopyalayıp sitenize yapıştırmanızı sağlayan birçok ücretsiz çevrimiçi küçültme aracı vardır. İşte araçların kısa bir listesi ve siteniz için daha iyi sonuç verebilecek diğer seçenekleri araştırmanızı tavsiye ederim.

1. Will Peavy’in HTML Minifier’ı

Peavy'nin Minifier aracı.

Peavy’nin Minifier aracı.

HTML Minifier, PHP ile oluşturulmuş HTML küçültme için ücretsiz bir çevrimiçi araçtır. Aracı kullanmak için, biçimlendirmenizdeki JavaScript CSS’si dahil olmak üzere HTML’nizi metin alanına yapıştırmanız ve “Küçült” düğmesini tıklamanız yeterlidir. Komut dosyalarınızın küçültmeden sonra çalışmasını sağlamak için, JavaScript ifadelerini noktalı virgülle sonlandırmanız ve yorumlar için * * sözdizimi kullanmanız önerilir .

2. CSS Minifier

CSS Minifier çevrimiçi aracı.

CSS Minifier çevrimiçi aracı.

Diğer bir ücretsiz araç olan CSS Minifier, kopyalayıp “CSS GiriĢi” metin alanına yapıştırdığınız CSS’yi küçülterek çalıĢır. Küçültülmüş çıktıyı bir dosya olarak indirmek için seçenekler vardır. Geliştiriciler için bu araç ayrıca bir API sağlar.

3. JSCompress

JSCompress aracı.

JSCompress aracı.

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ısıdır. Bunu kullanmak için, kodunuzu kopyalayıp yapıştırın veya birden çok dosyayı yükleyip birleştirin ve ardından “JavaScript’i Sıkıştır” ı tıklayın. Bu araç, UglifyJS 3 ve babili-standalone’a dayanmaktadır.

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

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

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

Google’ın Closure Compiler’ı JavaScript için bir optimizasyon aracıdır. Bir kaynak dilden makine koduna derlemek yerine, daha iyi JavaScript yapmak için JavaScript’ten derler. Kodunuzu ayrıştırır, analiz eder, ölü kodu kaldırır ve kalanları yeniden yazar ve en aza indirir. Bu araç aynı zamanda sözdizimini, değişken referanslarını ve türleri kontrol eder ve yaygın JavaScript tuzakları hakkında uyarıda bulunur.

Eklentilerle Dosyaları Küçültme

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

Not: Bu liste için, yalnızca WordPress Eklenti Deposunda bulunan ve WordPress’in en son sürümleriyle uyumlu olarak test edilen ücretsiz eklentileri ekledim. Premium seçenekler için aşağı kaydırın. /

1. HTML Küçültme

HTML Minify eklentisi.

HTML Minify eklentisi.

Bu basit, hafif ve sorunsuz eklenti, sitenizin HTML çıktısını küçültmenizi sağlar. Bunu kullanmak için tek yapmanız gereken eklentiyi kurmak ve etkinleştirmek ve herhangi bir ayar yapılandırmanıza gerek kalmadan işaretlemenizi otomatik olarak küçültecektir.

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

Minify HTML eklentisi.

Minify HTML eklentisi.

Bu eklentinin WordPress.org açıklamasına bayılıyorum : “Hiç web sitenizin HTML biçimlendirmesine bakıp ne kadar özensiz ve amatörce göründüğünü fark ettiniz mi?” Bu eklenti özensiz işaretlemeyi temizler ve küçültür.

HTML Minify eklentisinin aksine, bu araç daha fazla seçenek sunar. JavaScript ve CSS için isteğe bağlı küçültme içerir, ancak metin alanları veya önceden biçimlendirilmiş metinle karışıklık yaratmaz. Ayrıca HTML, CSS ve JavaScript yorumlarını kaldırma (MSIE koşullu yorumları bırakarak), HTML5 geçersiz öğelerinden gereksiz XHTML kapatma etiketlerini kaldırma ve bağlantılardan gereksiz göreli şemaları ve etki alanlarını kaldırma seçenekleri de vardır.

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

Merge + Minify + Refresh eklentisi

Merge + Minify + Refresh eklentisi.

Bu eklenti, kodunuzu küçültmekten daha fazlasını yapar. CSS ve JavaScript dosyalarınızı birleştirir ve ardından oluşturulan dosyaları Minify (CSS için) ve Google Closure (JavaScript için) kullanarak 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, bunlar yeniden işlenir, 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 Edin

JCH Optimize eklentisi.

JCH Optimize eklentisi.

JCH Optimize, ücretsiz bir eklenti için bir dizi güzel özelliğe sahiptir: CSS ve JavaScript’i birleştirir ve küçültür, HTML’yi küçültür, dosyaları birleştirmek için GZip sıkıştırması, arka plan görüntüleri için hareketli grafik oluşturma ve çakışmaları çözmek için belirli dosyaları birleştirmekten hariç tutabilirsiniz.

JavaScript’i eşzamansız olarak yükleme, oluşturma engellemesini ortadan kaldırmak için CSS dağıtımını optimize etme, CDN / çerezsiz alan desteği ve resimler için tembel yükleme ve optimizasyon dahil olmak üzere daha fazla optimizasyon özelliğine sahip bir profesyonel sürüm mevcuttur.

5. CSS Küçültme

CSS Minifier eklentisi.

CSS Minifier eklentisi.

CSS’nizi bu eklentiyle küçültmek daha kolay olamazdı – sadece bir seçeneği etkinleştirmek için kurun, etkinleştirin, Ayarlar> CSS Küçült’e gidin : CSS kodunu optimize edin ve küçültün.

Bu eklentideki kod, popüler Autoptimize eklentisinden (bu eklentiyle ilgili daha fazla bilgi aşağıda) alınmıştır. Eklentinin yazarı Peter Pfeiffer, JavaScript için Minify JavaScript için benzer bir eklentiye sahiptir .

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

Fast Velocity Minify eklentisi

Fast Velocity Minify eklentisi.

20.000’den fazla etkin yükleme ve beş yıldızlı derecelendirme ile bu, dosyaları küçültmek için kullanılabilen en popüler seçeneklerden biridir. Kullanmak için eklentiyi kurun ve etkinleştirin ve Ayarlar> Hızlı Hız Küçültme’ye gidin . Burada, geliştiriciler için JavaScript ve CSS istisnaları için gelişmiş seçenekler, CDN seçenekleri ve sunucu bilgileri 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 gerçek zamanlı olarak ve yalnızca ilk önbelleğe alınmamış istek sırasında küçültme gerçekleştirir. İlk istek işlendikten sonra, aynı CSS ve JavaScript kümesini gerektiren diğer sayfalara aynı statik önbellek dosyasıyla sunulacaktır.

7. Otomatik optimize edin

Autoptimize eklentisi

Autoptimize eklentisi.

400.000’den fazla etkin kurulumla Autoptimize, WordPress Eklenti Deposundaki en popüler küçültme aracıdır.

Autoptimize, komut dosyalarını ve stilleri toplayabilir, küçültebilir ve önbelleğe alabilir, varsayılan olarak sayfa üstbilgisine CSS ekleyebilir ve ayrıca komut dosyalarını altbilgiye taşıyabilir ve erteleyebilir. Geliştiriciler için çok sayıda gelişmiş seçenek ve kapsamlı bir API vardır, böylece Autoptimize’ı sitenizin özel ihtiyaçlarını karşılayacak şekilde özelleştirebilirsiniz.

8. Hummingbird Sayfa Hızı Optimizasyonu

Hummingbird optimizasyon eklentisi

Hummingbird optimizasyon eklentisi.

Hummingbird, premium bir eklenti olarak başlayan WordPress Eklenti Deposu için nispeten yeni bir eklentidir. Ücretsiz sürüm, küçültme dahil olmak üzere harika bir site optimizasyon araçları koleksiyonuna sahiptir ve en yüksek performans için dosyaları küçültmenizi, konumlandırmanızı ve birleştirmenizi sağlar.

Eklentinin içinden sitenizin performansını test etmenize ve sitenizi iyileştirmek için eyleme geçirilebilir öneriler almanıza olanak tanıyan harika bir tarama özelliği de vardır.

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

Küçültme, genellikle önbelleğe alma eklentilerinde bulacağınız standart bir özelliktir . İşte test ettiğim ve önerebileceğim eklentiler:

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

Sonuç

Umarım bu makale sizin için küçültmeyi aydınlatmıştır ve ne olduğu ve web sitenize nasıl uygulayabileceğiniz konusunda sağlam bir anlayış sağlamıştır.

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

Editör

I am a web developer who is working as a freelancer. I am living in Saigon, a crowded city of Vietnam. I am promoting for http://sneeit.com

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu