CSS, HTML ve javascript dosyalarınızı WordPress'te sıkıştırmak ister misiniz?

Web sitenizin CSS, HTML ve Javascript dosyalarını sıkıştırdığınızda, web sitenizin sayfa yükleme hızında değerli zaman kazanabilirsiniz. Şimdi, sayfa yükleme hızınızı yarıya veya başka bir şeye düşürmekten bahsetmiyoruz, ancak web sitenizin hızı söz konusu olduğunda, herhangi bir küçük parça önemlidir.

Web sitenizin yüklenme hızı sadece yeni ziyaretçiler için değil, aynı zamanda arama motoru sıralamaları için de önemlidir.

Terim "küçültmekProgramlama dilinde gereksiz karakterlerin kaynak koddan kaldırılması sürecini anlatır. Bu karakterler boşlukları, satır sonlarını, les yorum ve insanlar için yararlı olan ancak makineler için faydasız blok sınırlayıcıları.

Bir web sitesinin CSS, HTML ve JavaScript kodu içeren dosyalarını, web tarayıcınızın daha hızlı okuyabilmesi için küçültüyoruz.

Ayrıca bizim makalemizi okuyun. 10 WordPress eklentileri blogunuzun hızını artırmak için

İşte bir CSS küçültme örneği.

Küçültmeden önce CSS

/ * Örnek bir CSS dosyası ------------------------------------ * / .user-profile-card { marjı: 0px; background: #33E43} .user-profile-Description {sınır: 0; pozisyon: mutlak; genişlik: otomatik; kenar boşluğu: 20px; }

Küçültmeden sonra CSS

.user-profile-card{margin:0;background:#33e43}.user-profile-description{border:0;position:absolute;width:auto;margin-top:20px}

Açıkçası, bu sadece bir CSS parçacığı kullanan küçük bir örnek, ancak binlerce satır kod küçültüldüğünde bunun ne kadar alan kazandıracağını tahmin edebilirsiniz. 

WordPress blogunuzda geçirilen süreyi nasıl artırabilirim? Bu makaleye danışarak öğrenin.

Yani manuel olarak yapmak istiyorsanız, teknik olarak yapabilirsiniz. Ancak yüksek bir hata riski ile karşı karşıya kalırsınız ve değerli zamanınızı gereksiz yere boşa harcarsınız!

Bu ipuçlarını izleyin ve emrinde olan araçları kullanın.

Sıkıştırma gerçekleştirmek için bazı araçlar

Neyse ki, web sitenizin dosya boyutlarını azaltmak için mutlaka bir geliştirici olmanız veya programlama dillerinden birini bilmeniz gerekmez. Küçültme, web tasarım dünyasında yaygın bir uygulama haline geldi. Bu nedenle, işi sizin için yapacak birçok harika (ve ücretsiz) araç olduğunu öğrenince şaşırmamalısınız.

Ayrıca bakınız Makalelerinize yeni bir soluk getirmek için 6 WordPress eklentisi

Başlamak için faydalı araçların bir listesi aşağıda verilmiştir. Bunların çoğu birden fazla kod türünü en aza indirebildiğinden, kod türü seçeneklerini parantez içine ekledim.

    • cssminifier.com et javascript-minifier.com (CSS ve JS) - Andrew Chilton'un bu iki minifier'ın kullanımı kolaydır. Kodunuzu yapıştırmanız ve ardından düğmeyi tıklamanız yeterlidir Küçültmek sıkıştırılmış kodu görüntülemek için. Kolaylık sağlamak için çıkış kodunu bir dosya olarak bile indirebilirsiniz.
    • htmlcompressor.com (HTML, CSS ve JS) - Bu çevrimiçi sıkıştırma / küçültme aracı HTML, CSS ve JS kod türlerini destekler. CSS + PHP ve JavaScript + PHP gibi farklı kod türü kombinasyonlarını bile destekler. Hatta sıkıştırılmış kodu hatalar için kontrol edebilirsiniz.
    • csscompressor.net (Yalnızca CSS) - Bu çevrimiçi CSS sıkıştırıcı hızlı, kolay ve kullanımı ücretsizdir.
    • jscompress.com (Yalnızca JS) - Bu JavaScript sıkıştırma aracı, JavaScript kodunu kopyalayıp yapıştırarak sıkıştırmanıza olanak tanır, ancak aynı anda birden çok JavaScript dosyası da indirebilirsiniz. Bu, daha iyi sayfa yükleme hızı için JavaScript dosyalarını tek bir dosyada birleştirmek için idealdir.
    • Dan'in Araçları - Dan'in Araçları un önerecek küçültmek CSS ve JavaScript'i küçültmek için . Her iki aracın da gerçekten temiz ve kullanımı kolay bir kullanıcı arayüzü vardır. Herhangi bir gelişmiş seçenek sunmazlar, ancak genel küçültme amaçları için harikadırlar.
    • refresh-sf.com (HTML, CSS ve JS) - Bu sıkıştırıcı JavaScript, CSS ve HTML kod türlerini azaltır. Ayrıca, ihtiyacınız olması durumunda her kod türü için tüm sıkıştırma seçeneklerini içerir.
    • Kapanış Derleyicisi (Yalnızca JS) - Closure Compiler, Kapatma Araçları , Google Developers'tan bir araç paketi. JavaScript'inizi diğer faydalı optimizasyonlarla birlikte küçültmenize olanak tanır. Javascript kodunuzu, js dosyası konumunun URL'sini girerek kullanabilir ve ardından kodun nasıl optimize edilmesini ve biçimlendirilmesini istediğinizi seçebilirsiniz. 

Örneğin, yalnızca boşlukları kaldırmak için kodunuzu optimize etmeyi seçersiniz. Derleme düğmesine tıkladıktan sonra, kod sizin için azalır (veya derlenir).

    • minifycode.com (HTML, CSS ve JS) - Bu web sitesi, JavaScript , CSS et HTML kodunuzu tek bir tıklamayla sıkıştıran basit ve temiz bir kullanıcı arayüzü ile. Ayrıca, daha okunabilir hale getirmek için (küçültmenin tersi) küçültülmüş kodu açmak için bir "güzelleştirici" aracı sunar.

Yerel olarak CSS’nizi veya JavaScript HTML’nizi en aza indirmek için çevrimdışı araçlar arıyorsanız, işte bazı seçenekler:

Çevrimiçi bir araç kullanarak HTML, CSS ve JavaScript'inizin boyutunu nasıl küçültebilirsiniz?

Bu çevrimiçi araçların çoğunda aşağıdaki adımları içeren benzer bir süreç vardır:

  • Kaynak kodunuzu yapıştırın veya kaynak kod dosyasını indirin. 
  • Belirli bir çıktı için ayarları optimize et (eğer seçenekler mevcutsa)
  • Kodu sıkıştırmak için bir düğmeyi tıklayın.
  • Küçültülmüş kod sonucunu kopyalayın veya kültülmüş kod dosyasını indirin.

Bu örnek için, küçültme araçlarını minifycode.com.

Ayrıca bakınız: Nasıl WordPress güvenli bir CSS kodu eklemek bu bağlantıya danışarak.

İlk olarak, web sitesi dosyalarınızda CSS dosyasını (genellikle style.css olarak adlandırılır) bulun ve bir sayfa düzenleyicisi kullanarak açın. Ardından tüm CSS kodunu panonuza kopyalayın.

CSS, HTML ve javascript dosyalarınızı WordPress'te sıkıştırın

gitmek minifycode.com ve CSS minifier sekmesine tıklayın. Ardından CSS kodunu giriş kutusuna yapıştırın ve düğmeyi tıklayın CSS'yi minify.

küçültme css.jpg

Yeni küçültülmüş kod üretildikten sonra kopyalayın.

sıkıştırılmış bir code.jpg kopyalayın

Ardından web sitenizin CSS dosyasına geri dönün ve kodu yeni basitleştirilmiş sürümle değiştirin.

İşte bu kadar!

Web sitenizin JavaScript ve HTML dosyalarını da azaltmak için aynı işlemi tekrarlayın.

Eklentileri Kullanarak WordPress'te HTML, CSS ve JavaScript Nasıl En Aza İndirilir

WordPress'te HTML, CSS ve JavaScript'inizi en aza indirmenin en kolay yolu bir eklenti kullanmaktır. Bu, WordPress web sitesi dosyalarınızı yalnızca birkaç düğme tıklamasıyla sayfa yükleme süresini azaltmak için otomatik olarak optimize etmenizi sağlar.

İşi halledecek pek çok eklenti var, ancak birkaç örneğe kısaca değineceğim.

Autoptimize (ÜCRETSİZ)

wp.png dosyasını otomatik olarak küçültün
Autoptimize muhtemelen WordPress Plugin en popüler küçültme. Kullanımı kolay ve güçlü özelliklerle dolu olduğu için popülerdir. Kodunuzu paketleyebilir (komut dosyalarını birleştirebilir), küçültebilir ve önbelleğe alabilir. Bonus olarak, Google Yazı Tiplerini, resimleri vb. optimize etmek için ek seçenekleriniz vardır.

Autoptimize'ı kullanmak için, eklentiyi aşağıdaki WordPress kontrol panelinden indirebilir, yükleyebilir ve etkinleştirebilirsiniz. Eklenti> Yeni ekle.

Daha fazla bilgi için aşağıdaki kılavuzumuza bakın:  WordPress bir eklenti yüklemeniz nasıl

autoptimize.jpg

Eklenti etkinleştirildikten sonra şu adrese gidin: Ayarlar> Otomatik optimizasyon. Ardından, Ana parametreler sekmesinin altında, optimize etmek istediğiniz kodu (HTML, CSS ve / veya JavaScript) kontrol edin ve E seçeneğine tıklayın.değişiklikleri kaydet.

optimizasyon css.jpg

Düğmesine de tıklayabilirsiniz Gelişmiş ayarları göster Kod optimizasyonunuzu daha da özelleştirmek için sayfanın üst kısmında.

css seçenekleri advanced.jpg

Az ya da çok bu! Oldukça basit ve güçlü.

W3 Toplam Önbellek (ÜCRETSİZ)

v3 toplam cache.png
W3 Toplam Önbellek HTML, JS ve CSS dosyalarınızı en aza indirme olanağı sunan mükemmel bir önbellek eklentisidir.

CSS, HTML ve javascript dosyalarını sıkıştır

WP En Hızlı Önbellek (ÜCRETSİZ)

en hızlı cache.png wp
WP En Hızlı Önbellek - Bu eklenti WordPress önbelleğe alma, yüksek incelemelerle son derece popülerdir. Daha iyi performans için HTML CSS ve JavaScript'inizi birleştirme ve azaltma dahil olmak üzere çeşitli performans optimizasyonları gerçekleştirir.

Ayrıca bizim makalemizi okuyun. 8 WordPress eklentileri blogunuza bir canlı sohbet eklemek için

Eklenti yüklendikten sonra sekmeyi tıklamanız yeterlidir WP En Hızlı Önbellek WordPress kontrol paneli kenar çubuğunda. Sekmenin altında AyarlarHTML ve CSS dosyalarını birleştirmek ve azaltmak için seçenekler bulacaksınız. JavaScript'i küçültmek yalnızca pro sürümünde mevcut olsa da.

CSS, HTML ve javascript dosyalarını sıkıştır

Özetlemek

Blogunuzu daha hızlı hale getirmek ve daha iyi performansa sahip olmak istiyorsanız, HTML, CSS ve JavaScript dosyalarınızın boyutunu azaltmanız gerekir. Mevcut tüm çevrimiçi araçlarla, herhangi bir web sitesinin kodunu kolayca azaltabilirsiniz. 

Blogunuzun içeriğini gizlemek için 9 WordPress eklentileri kesinlikle keşfetmek

WordPress kullananlar için, bu dosyaları birkaç tıklamayla otomatik olarak küçültmek için güçlü eklentilere sahipsiniz.

Ayrıca bazı premium WordPress eklentilerini keşfedin  

diğer kullanabilirsiniz WordPress eklentileri modern bir görünüm vermek ve blogunuzun veya web sitenizin kullanımını optimize etmek için.

Size, bu konuda yardımcı olacak bazı premium WordPress eklentileri sunuyoruz.

1. 404 Hata Sayfası Ana Sayfaya veya Özel Sayfaya Yönlendirme

İşte bu eklentinin etkinleştirilmesinden sonra ziyaretçiyi ana sayfaya veya kişiselleştirilmiş sayfaya yönlendirecek bir 404 hata sayfasını kolayca eklemenin en iyi yollarından biri. WordPress Premium.

404 hata sayfası ana sayfaya veya özel sayfaya yönlendiriyor. wordpress eklentisi

404 hata sayfasının tümü ana sayfaya veya özel bir URL. Bunu kullanarak WordPress Plugin, çok sayıda 404 hata sayfası varsa, Google'ın web sitenizin pagerank'ını düşürmesine izin vermiş olursunuz.

Çok keşfetmek WordPress'te 413 hatası nasıl düzeltilir

Ce WordPress Plugin sadece yönlendirme yapmakla kalmaz, aynı zamanda web sitenizin arama motoru sonuçlarındaki sıralamasını iyileştirmek için de uygun bir çözüm olabilir.

Indir | gösteri | Web hosting

2. Borlabs Önbelleği

WordPress, dinamik olarak içerik üreten bir veritabanı tarafından desteklenen bir platformdur. Daha fazla içerik ve eklenti varsa, daha fazla veritabanı sorgusu yürütülür. Bu, özellikle veritabanınız farklı bir sunucuda bulunduğunda, web sitenizin performansını yavaşlatabilir.

Borlabs önbellek wordpress önbellek eklentisi

WordPress Borlabs Cache eklentisi, dinamik olarak oluşturulan içeriği sunucu belleğinize statik bir dosya olarak kaydeder. Sayfa istendiğinde, bu statik dosya yüklenir ve ziyaretçiye gönderilir, bu da normal veritabanı sorgularından oldukça hızlıdır. Ama hepsi bu değil.

Ayrıca bakınız 5 WordPress eklentileri web sitenizin veritabanını temizlemek için

Sayfalarınızda, genel sayfa boyutunu artıran çok sayıda gereksiz boşluk veya HTML yorumu var. Borlabs Cache hepsini kaldırır ve sayfalarınızı sıkıştırmak için GZIP kullanır.

keşfedin Nasıl tek bir sayfada tüm WordPress yayınları görüntülemek için

Birçok eklentinin kendi JavaScript ve CSS dosyaları vardır, bu da sunucunuzda daha fazla istekle sonuçlanır. Borlabs Cache, tüm bu JavaScript ve CSS dosyalarını birleştirir, böylece en iyi durumda, ziyaretçinizin yalnızca bir JavaScript dosyası ve bir CSS dosyası yüklemesi gerekir.

Indir gösteri | Web hosting

3. Çok Dilli Basın

Multilingual Press, çok siteli bir WordPress kurulumuyla çalışır ve çevirileri bağlamanıza olanak tanır. Eklenti, dil yöneticisinde yerleşik 174 dil ile birlikte gelir ve sınırsız sayıda web sitesini destekler, böylece istediğiniz kadar çeviri oluşturabilir ve bağlayabilirsiniz.

Çok dilli basın çeviri eklentisi wordpress eklentisi

Bu şu kişi için iyidir: SEO çünkü bu, dillerinizi ayrı yazılarda ve sayfalarda tutmanıza olanak tanır ve eklentinin farklı bir çevirisini kullanmaya karar verirseniz içeriğiniz bozulmadan kalır (Multilingual Press eklentisini devre dışı bıraktıktan veya kaldırdıktan sonra bile). Buna ek olarak, kolayca çeviriler arasında geçiş yapmak için bir çeviri widget'ı ekleyebilirsiniz.

keşfedin WordPress'te Gutenberg kullanarak bir kod pasajı nasıl eklenir

Multilingual Press, aracılığıyla WordPress sitenize çeviri eklemek için harika bir ücretsiz seçenektir. çoklu alan. Buna ek olarak, daha fazla seçeneğe ihtiyacınız olduğunu fark ederseniz, 75 dolarlık pro sürümünü tercih edebilirsiniz.

Indir gösteri Web hosting

Diğer önerilen kaynaklar

Ayrıca, web sitenizi ve blogunuzu daha iyi ele geçirmek ve kontrol altına almak için sizi aşağıdaki kaynaklara başvurmaya davet ediyoruz.

Sonuç