CSS, HTML & amp;JavaScript Web Siteniz
CSS, HTML ve JavaScript dosyalarınızı küçülttüğünüzde, site sayfalarınızı yükleme hızının değerli süresini azaltabilirsiniz. Şimdi sayfanızı yarıya veya başka bir şeye yükleme hızını kesme hakkında konuşmuyoruz, ancak web sitenizin hızına gelince, biraz yardımcı oluyor. Sitenizin ne kadar hızlı yüklendiği sadece ilk ziyaretçi için önemli değil, aynı zamanda arama motoru sıralamasını taşımak da önemlidir. “Minify” terimi, kaynak koddaki gereksiz karakterleri ortadan kaldırma sürecini tanımlayan programlama terimidir. Bu karakter, insanlar için yararlı olan ancak makineler için gerekli olmayan beyaz alanlar, çizgi duraklamaları, yorumlar ve blok sınırları içerir. Web tarayıcınızın daha hızlı okuyabilmesi için CSS, HTML ve JavaScript kodları içeren web sitesi dosyasını azaltıyoruz.
Aşağıda bir CSS Minifikasyon ekranının bir örneği verilmiştir. Minifikasyondan Önce CSS /* Düzen Yardımcıları
———————————
.ui-Helper-gizli {
Görüntü yok;
}
.ui-Helper-gizli erişilebilir {
Sınır: 0;
Klip: Rect (0 0 0 0);
Yükseklik: 1 piksel;
Marj: -1px;
Taşma: gizli;
Dolgu: 0;
Pozisyon: Mutlak;
Genişlik: 1 piksel;
}
CSS Minifikasyondan sonra .ui-Helper-hydden {Display: none} .ui-yardım-gizli erişilebilir {sınır: 0; klip: rect (0 0 0); yükseklik: 1px; marj: -1px; taşma: gizli; pedding : 0; pozisyon: mutlak; genişlik: 1px}
Açıkçası, bu sadece CSS kod parçalarını kullanan küçük bir örnektir, ancak binlerce kod satırını azaltırken kaydedilecek alan miktarını hayal edebilirsiniz. Yani, bunu elle elle yapmak istiyorsanız, teknik olarak yapabilirsiniz. Ancak yüksek bir hata riski ile karşılaşacaksınız ve değerli boş zamanınızı veya hayatınızı tıraş etmeye gerek yok! Tavsiyemi takip edin ve istediğiniz araçları kullanın. Dosyanızı manuel olarak azaltmak için çevrimiçi araç
Neyse ki, bir geliştirici olmanıza veya site dosyanızı küçültmek için herhangi bir programlama dili bilmenize gerek yoktur. Minifikasyon, web tasarımı dünyasında standart bir uygulama haline gelmiştir, bu yüzden sizin için işi yapmak için birçok olağanüstü (ve ücretsiz) araç olduğunu bilmenizi şaşırtmamalıdır. İşte başlamak için bazı yararlı araçların bir listesi. Bunların çoğu birden fazla kod türünü küçültebildiğinden, braketlere kod türü seçeneğini ekledim.
CSSMinifier.com ve JavaScript-inifier.com (CSS ve JS) -Heyt Andrew Chilton’un her ikisi de kullanımı kolaydır. Kodunuzu yapıştırın ve azaltılmış kodu görüntülemek için Minify düğmesine tıklayın. Hatta çıktı kodunu pacerence.csscompressor.net (yalnızca CSS) için bir dosya olarak indirebilirsiniz – Bu çevrimiçi CSS kompresörü hızlı, kolay ve kullanımı ücretsizdir.
JSCompress.com (Yalnızca JS)- Bu JavaScript Sıkıştırma aracı, JavaScript kodunu kopyala ve yapıştırarak sıkıştırmanıza olanak tanır, ancak aynı anda birkaç JavaScript dosyası yükleyebilirsiniz. Bu, JavaScript dosyalarını daha iyi sayfalar için bir dosyaya birleştirmek için iyidir.
Yenileme-sf.com (HTML, CSS ve JS) -Bu kompresör JavaScript, CSS ve HTML kodları türlerini azaltacaktır. Ayrıca, ihtiyacınız varsa her bir kod türü için tüm kompresör seçeneklerini de içerir.
HTMLCompressor.com (HTML, CSS ve JS) – Bu çevrimiçi kompresör/madenci HTML, CSS ve JS kodlarını destekler. Hatta CSS + PHP ve JavaScript + PHP gibi farklı bir kod kombinasyonunu destekler. Ve hatalar için sıkıştırılmış kodu bile kontrol edebilirsiniz.
Minifycode.com (HTML, CSS ve JS) – Bu site, kodunuzu tek tıklamayla azaltan basit ve temiz kullanıcı arayüzüne sahip JavaScript, CSS ve HTML için bir madenci sunar. Bu aynı zamanda okunması kolay (temelde minifikasyonun tersi) olması için düşük bir kod sıkıştırması açmak için bir “güzellik” aracı içerir.
Dan’s Tools – ve’s Tools, CSS Minifier ve JavaScript Minifier’ı sunar. Bu araçların her ikisi de çok temiz bir kullanıcı arayüzüne sahiptir ve kullanımı kolaydır. Gelişmiş seçenekler sunmazlar, ancak genel minifikasyon amaçları için çok uygundurlar. CSS HTML veya JavaScript’i yerel olarak küçültecek bazı çevrimdışı araçlar arıyorsanız, bazı seçenekler:
Daha küçük (HTML, CSS ve JS)
Phpied.com/csmin-js/ (Yalnızca CSS)
yui.github.io/Yuicompressor (JS ve CSS)
CSS, HTML & JavaScript Nasıl Büzülür Web Siteniz YouTube kanalımıza abone olur HTML, CSS ve JavaScript Bu çevrimiçi araçtan birçok çevrimiçi araç kullanın, aşağıdaki adımları içeren benzer bir işleme sahiptir: Kaynak kodunuzu yapıştırın veya kodu yükleyin dosya kodu kaynağı. Belirli çıkışlar için ayarları optimize edin (seçenek kullanılabilirse) Kodu azaltmak veya sıkıştırmak için düğmeye tıklayın. Azalan kodun çıktısını kopyalayın veya azaltılmış kod dosyasını indirin.
Bu örnek için, Minifycode.com’dan bir Minify aracı kullanacağım. İlk olarak, site dosyanızdaki CSS dosyasını (genellikle style.css olarak adlandırılır) arayın ve sayfa düzenleyicisini kullanarak dosyayı açın. Ardından CSS kodunun tamamını panonuza kopyalayın.
Minifycode.com’u açın ve CSS Minifier sekmesini tıklayın. Ardından CSS kodunu giriş kutusuna yapıştırın ve Minify CSS düğmesini tıklayın.
Azaltılan kod yalnızca yapıldıktan sonra kodu kopyalayın.
Ardından, web sitenizin CSS dosyasına dönün ve kodu yeni bir sürüm azaltılmış olarak değiştirin. İşte burada! JavaScript ve HTML dosyalarınızı da azaltmak için aynı işlemi tekrarlayın. WordPress, WordPress’te HTML, CSS ve JavaScript’i küçültmenin en kolay yolunu kullanarak WordPress’te HTML, CSS ve JavaScript’in nasıl büzülmesi eklentileri kullanmaktır. Bu, birkaç tıklamayla sayfaları otomatik olarak yükleme süresini azaltmak için WordPress site dosyanızı optimize etmenizi sağlar. Orada işi yapacak birçok eklenti var ama kısaca öne çıkan bazılarından bahsedeceğim. Otomatik Optimizasyon (ÜCRETSİZ), muhtemelen en popüler Minify eklentisidir. Bu popülerdir, çünkü kullanımı kolaydır ve güçlü performans özellikleriyle doludur. Kodunuzu birleştirebilir (komut dosyalarını birleştirebilir), büzülebilir ve önbelleğe alabilir. Bir bonus olarak, Google yazı tipini, resimleri ve diğerlerini optimize etmek için ek seçenekleriniz vardır. AutoPtimize’yi kullanmak için, eklentiyi eklentinin altındaki WordPress kontrol panelinden indirebilir, yükleyebilir ve etkinleştirebilirsiniz> Yeni Ekle.
Eklenti etkinleştirildikten sonra, Ayarlar> Otomatik Alınma’ya gidin. Ardından Ana Ayarlar sekmesi altında, optimize etmek istediğiniz kodu (HTML, CSS ve/veya JavaScript) kontrol edin ve değişiklikleri kaydet’i tıklayın.
Kodunuzun nasıl optimize edilmesini istediğiniz daha fazla ayarlamak için sayfanın üst kısmındaki Gelişmiş Ayarlar düğmesini de tıklayabilirsiniz.
Hızlı Velocity Minify, sadece küçülmekten daha fazlasını yapan popüler, ücretsiz ve diğer güçlü bir WordPress eklentileridir. Bu, sunucunuza HTTP isteklerini azaltmak için CSS ve JavaScript’inizi en aza indirir ve birleştirir, böylece adından da hızlı bir hız sayfası yüklemeye zaman ayırmayı ima eder. Ek bir seçenek vardır, ancak varsayılan ayarlar çoğu sitede iyi işlev görür. Eklentileri kullanmak için, eklentiler> Yeni Ekle’ye gezerek WordPress kontrol panelinizden önce yükleyin ve etkinleştirin. Ardından “Hızlı Hız” arayın ve arama sonuçlarında göründükten sonra yüklemek ve etkinleştirmek için tıklayın. Eklenti etkinleştirildikten sonra, dosyanız en iyi performans için otomatik olarak azaltılır ve optimize edilir. O kolay! Mevcut tüm seçenekleri görmek için eklenti ayar sayfasına (ayarlar> hızlı hız) atlayın. Durum sekmesi altında, işlenen yararlı JavaScript ve CSS dosyalarının bir listesini görebilirsiniz. Ayarlar sekmesi altında, dosyanızın optimize edilme şeklini ayarlayabilirsiniz. HTML, CSS ve JavaScript Minifies etkin olduğundan, varsayılan seçeneği ayarlamak veya belirli kod türleri için minifikleyicileri devre dışı bırakmak için bu ayarı kullanabilirsiniz. Google yazı tipini ve yazı tiplerini harika optimize etme seçeneği bile var. İşte burada! Önbellek toplamı (ücretsiz) W3 Total Cache, HTML, JS ve CSS’nizi küçültme seçenekleri içeren harika bir önbellek eklentisidir.
En hızlı WP önbelleği (ücretsiz) WP En Hızlı Önbellek – Bu ücretsiz WordPress önbellek eklentisi, yüksek incelemelerle çok popülerdir. Bu eklenti, daha iyi performans için HTML CSS ve JavaScript’inizi birleştirmek ve daraltmak gibi çeşitli performans optimizasyonu gerçekleştirir. Eklenti yüklendikten sonra, WordPress gösterge paneli kenar çubuğundaki (inanılmaz bir çita simgesine sahip) WP’nin en hızlı önbellek sekmesini tıklamanız yeterlidir. Ayarlar sekmesi altında, HTML ve CSS dosyalarını birleştirme ve azaltma seçenekleri bulacaksınız. JavaScript’i en aza indirmesine rağmen yalnızca Pro sürümünde mevcuttur. Final Mind Daha hızlı bir yükleme süresi ve daha iyi performans puanları istiyorsanız, HTML, CSS ve JavaScript dosyalarını azaltmanız gerekir. Mevcut tüm çevrimiçi araçlarla, herhangi bir web sitesi için kodunuzu kolayca azaltabilirsiniz. WordPress kullanıcıları için, dosyayı birkaç tıklamayla otomatik olarak küçültecek birkaç harika eklenti vardır. Yukarıdaki eklenti, diğer performans optimizasyonu arasında minifikleyicileri idare eden harika eklentilerden sadece birkaçı. Aslında, zaten mevcut olan bir minifikasyona sahip bir performans türü eklentisine sahip olabilirsiniz. Örneğin, birçok önbellek eklentisi bir minifikasyon seçeneği içerir. Umarım bu yazı hangisinin sizin için en iyi seçim olduğuna karar vermenize yardımcı olur. Aşağıdaki yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
