Web sitenizin hızına kadar WordPress’te CSS nasıl küçülür

Kullanıcılar web sitenizi ziyaret ettiğinde, her web sayfasının hızlı bir şekilde yüklenmesini beklerler. Yüklenmesi uzun sürerse, insanlar sitenizden ayrılır ve rakiplerinizin ne sunduğunu görür. Bu küçük bir şey gibi görünebilir, ancak ziyaretçileri web sitenize hala dahil etmek çok önemlidir. Bu, onları ziyaretçilerden potansiyel müşterilere ve daha sonra potansiyel müşterilerden müşterilere değiştirmeye yardımcı olur.

Ayrıca insanların web sitenizi arama motorlarında bulmasını istiyorsunuz, değil mi? Google, web sitenizin sıralamasında nerede göründüğünü belirlemek için birçok farklı kritere sahiptir.
Web sitesi hızı bu kriterlerden biridir. Web sitenizi yükleme hızını artırmak için yapabileceğiniz birçok şey var. Bu, boyutların mümkün olduğunca küçük olması için görüntüler, CSS ve JavaScript dahil dosyalarınızı optimize etmeyi içerir. CSS’nizi daraltarak optimize edebilirsiniz. Daha teknik iseniz, bunu manuel olarak yapmak isteyebilirsiniz. Kendinizi teknik olmayan olarak görürseniz, aşağıda listelenen en iyi WordPress Minify eklentilerinin sizin için CSS’yi küçülten bir WordPress eklentisi vardır.
WP Buffs’taki ekibimiz, Web sitesinin, ajans ortaklarının ve Freelance ortaklarının WordPress sitelerini 7/24 izlemelerine yardımcı olur. 1 web sitesini yönetmemize veya 1000 istemci sitesini desteklememize ihtiyacınız var mı, sizi destekliyoruz.
CSS Stylesaj CSS’nizi azaltarak, içindeki metin bulunan bir dosyadır. Diğer tüm dosyalar gibi, belirli bir dosya boyutuna sahiptir. Beş kilobayt ve birkaç megabayt kadar küçük olabilir.
CSS’nin azaltılması, dosyanın boyutunun mümkün olduğunca küçük oluşturulmasına yardımcı olur. Sıradan bir CSS dosyası gördüyseniz, birçok alan ve yorum olduğunu göreceksiniz. Bu geliştiriciler için iyidir, çünkü her şeyin organize ve okunması kolay kalmasına yardımcı olur. Bu, kodu geliştirdiğinizde size iyi yardımcı olur, çünkü daha verimli ve etkili bir şekilde çalışmanıza yardımcı olur. Ancak, web sitesinde gerçekten çalışmak için alanlara ve yorumlara gerek yoktur. Tek ihtiyacınız olan CSS komutunun kendisi. Örneğin, CSS dosyanızın üstünde şuna benzeyen bir içerik tablonuz olabilir:/*————————– —– >>> İçindekiler: —————————– # Normalleştir # Tipografi # Elements # Formlar # # Navigasyon # Düzen ## Bağlantılar ## Menüler ————————————-/ Ancak , Web sitesi gerçekten iyi işleyecek şekilde içerik tablosu gerekli değildir. Bu yalnızca kodu geliştirdiğinizde her şeyi düzenli olarak tutmanıza yardımcı olur. Yorumları başlatan ve bitiren / * ve * / arasındaki her şey doğrudan web sitesinde gerekli değildir. Onların varlığı sadece dosya boyutunu arttırır. Şimdi, bir yorum değil ve sitenin iyi çalışması için gerekli olan aşağıdaki CSS bloğunu alalım:
html {font-family: sans-serif; -Webkit-metin boyutu uyum:%100; -Ms-metin boyutu uyum:%100; } Gerçek site çalışması için tüm boşluklar, eğriler ve satır molalarına gerek yoktur. Kodun yalnızca geliştirici tarafından okunmasını kolaylaştırır. Şimdi bakalım CSS’nin hangi azaltıldığını görelim: html {font-family: sans-serif; -webkit-metin boyutu adantı:%100;-MS-Text-Boyut-Just:%100} Site gerekli olmayan her şey Çalışma silindi ve dosya boyutunuz çok daha küçük olacaktır. Dosya boyutu daha küçük = daha hızlı açılış süresi. Uygulama ve Kullanıcılar için CSS Nasıl Azaltılır ıya Profesyonel bir geliştirici değilseniz, CSS’yi basit ve kullanımı kolay bir şekilde küçültebilirsiniz. İster WordPress’i yükleyin ve başkaları için eklentileri yapılandırın veya kendi web sitenizi oluşturan bir kullanıcı olun, CSS Minifiation tarafından sunulan avantajlardan yararlanabilirsiniz. CSS dosyanızda doğrudan bir değişiklik yaptıysanız, her zaman emin olun. bir kopyasını azaltın. Azaltılmış CSS dosyasını düzenlemeye çalışmak, olağanüstü ve gereksiz bir baş ağrısıdır. Bu nedenle, CSS’yi ilk kez küçültüyorsanız, azaltılmayan kopyaları sakladığınızdan emin olun. Çevrimiçi Araçlar CSS’yi küçültmek için çevrimiçi araçları kullanabilirsiniz. Ve CSS Minifier araçları, CSS’nizi metin kutusuna kopyalayıp eklemenize ve küçültmek için düğmeye basmanıza olanak tanır.
Jakub Pawlowicz, CSS dosyalarını madenciye yüklemenizi sağlayan bir araca sahiptir.

WordPress eklentisi WordPress eklentileri, CSS’yi küçültmenize de yardımcı olabilir. WP Super Minify, bu makale oluşturulduğunda WordPress’in en son sürümü ile en yukarı -date ve uyumlu eklentidir. Başka birkaç eklenti buldum, ancak her şey en az bir yıl içinde güncellenmemişti ve WordPress’in en son sürümüyle uyumluluk göstermedi. Bu nedenle, size tavsiye edemem. Geliştiriciler için CSS nasıl azaltılır profesyonel bir web geliştiricisiyseniz, CSS’nizi kolayca küçültmenin iki ana yolu vardır. Runner Runners atama görevinin güzelliği, işi daha verimli bir şekilde tamamlayabilmeniz için yapılması gereken birçok görevi otomatikleştirmeye yardımcı olur. Grunt ve Gulp en ünlü iki görev koşucusudur. Grun’un CSS’yi daraltan ve yudumlayan bir paket var. Kendi iş akışımda Gulp kullanıyorum ve Gulp Clean CSS benim için yeterince iyi çalışıyor. Sass veya daha az gibi CSS praprocessors kullanıyorsanız, görev koşucunuzun CSS’yi derlemek için muhtemelen ayrı bir modülü olacaktır. Minifing modülünü aynı anda kullanabilirsiniz. Örneğin, bu benim ana yudumfilimde kullandığım barebone kodu. CSS Praprocessors’ı kullanarak SASS veya daha az kullanıyorsanız ve bir görev koşucusu kullanmıyorsanız, derleyiciniz de CSS’yi küçültebilmelidir. Gulp’i bulmadan önce Kompas’ı Sass derleyicim olarak kullandım. Config.rb Kompas dosyanızda, çıktı ayarlarını sıkıştırılmış olarak belirlemeniz yeterlidir. SASS dosyanız sıkıştırılmamış ve derlenen CSS azaltılacaktır.

Komut satırını beğenmiyorsanız ve CodeKit gibi GUI tabanlı geliştirme araçlarını kullanmayı tercih ediyorsanız, çıktıyı “sıkıştırılmış” veya “kompakt” veya ayarlar ne olursa olsun ayarlayabilirsiniz. CSS’nin web sitenizi ne kadar küçüldüğünü bilmek istiyorsanız, sayfalardaki artışı test ederek bir hız test aracı kullanabilirsiniz. Size verdikleri geri bildirim türünü görmek için bazı test araçlarını denemelisiniz. Başlayabileceğiniz üç araç şunlardır: Google PagePeed Insight

yavaş
Pingdom
Bu siteler, sayfa açık sürenizi nasıl artırabileceğiniz konusunda CSS’nin azaltılması dışında öneriler sunacaktır.
Şimdi ilerleyin ve daha küçük olun! CSS’yi azaltmak, özellikle web sitenizdeki ziyaretçileri korumak açısından size büyük faydalar sağlayabilir. CSS’yi daraltma görevinin mevcut tüm harika araçlarla zor olması gerekmez. Tutarlı bir şekilde pratik yaptıktan sonra, web sitenizin daha hızlı yüklenmesi için başka teknikler ekleyebilirsiniz. Web sitenizi hız için tek tek hız optimizasyon tekniğine dönüştürün! Cevabınızı vermek mi yoksa sohbete katılmak ister misiniz? Twitter’a yorumlarınızı ekleyin. Kaydet

admin

Bir Cevap Yazın

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