Ana İçeriğe Geç

CSS, HTML ve Javascript dosyalarınızı nasıl sıkıştırabilirim?

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

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 yararlı optimizasyonlarla küçültmenize olanak tanır. Javascript kodunuzu, js dosyasının konumu için url girerek ve ardından kodun nasıl optimize edilmesini ve biçimlendirilmesini istediğinizi seçerek kullanabilirsiniz. 

Ö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 tarzı divi.jpg

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.

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

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 en popüler küçültme WordPress eklentisidir. Kullanımı kolay ve güçlü özelliklerle dolu olduğu için popülerdir. Kodunuzu paketleyebilir (komut dosyalarını birleştirebilir), simge durumuna küçültebilir ve önbelleğe alabilir. Bonus olarak, Google Yazı Tiplerini, resimleri vb. Optimize etmek için ek seçenekleriniz var.

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.

genel parametreler w3 toplam cache.jpg

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.

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

wp daha hızlı önbellek settings.png

Ö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  

Modern bir görünüm kazandırmak ve blogunuzun veya web sitenizin rahatlığını artırmak için diğer WordPress eklentilerini kullanabilirsiniz.

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ının tümü ana sayfaya veya özel bir URL. Bu WordPress eklentisini kullanarak, çok sayıda 404 hata sayfası varsa Google’ın web sitenizin pagerank değerini azaltmasına izin vereceksiniz.

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

Bu WordPress eklentisi sadece yönlendirme değil, aynı zamanda arama motorlarının sonuçlarında web sitenizin sıralamasını iyileştirmek için 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.

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 Web sitenizin veritabanını temizlemek için 5 WordPress eklentileri

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 izin verir. Eklenti, dil yöneticisine yerleşik 174 dille birlikte gelir ve sınırsız sayıda web sitesini destekler, böylece istediğiniz kadar çeviri oluşturabilir ve bağlayabilirsiniz.

SEO için iyidir, çünkü dillerinizi ayrı yazılarda ve sayfalarda tutmanıza izin verir ve eklentiden farklı bir çeviri kullanmaya karar verirseniz içeriğiniz bozulmadan kalır (Çok Dilde Basın 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.

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

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

Çok Dilde Basın, 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ç

Bu makalede, 1 yorumunu içeren

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
2 hisseleri
hisse2
cıvıltı
Enregistrer