Site Hızı için CSS'yi Optimize Etme - 9 Yol

Bu makaleyi dinle

Yavaş bir site her zaman kötüdür! bence cümle siteyi hızlandırmak için CSS kodunun optimizasyonu, genellikle aramalarda ve 301 yönlendirmelerinde veya robots.txt dosyasında bulunur. Ya da belki de web sitelerini optimum performansı umursamadan gönderen türden bir geliştiricisiniz?

İlk seçeneğe aitseniz, bu makale tam size göre. Şimdi size CSS'nizi optimize etmenize yardımcı olacak en iyi 9 yoldan bahsedeceğim. Bu ipuçları sitenizi hızlandıracak ve SERP'lerde tırmanacaktır. Bu etki, sitenize yeni ziyaretçi akışını önemli ölçüde artıracaktır.

Makalenin içeriği:

• Web Sitesi Hızının Önemi
• Görüntü Karakterlerini Kullan
• CSS optimizasyonu
• Gereksiz kodu azaltın
• Tabloları başlığa ve JS betiklerini alt bilgiye koyun
• CSS Dosyalarını Ayırma
• Kodunuzdaki boşluk sayısını azaltın
• Kodunuzu belgeleyin
• Kodunuzu düzenleyin
• KISS tekniği (Basit Tut Aptal)

Organik Sıralama İçin Site Hızının Önemi

Daha hızlı web sitelerinin önemine şaşıracaksınız. Birkaç ana sebep vardır, ancak etkileri sitenin konumunu önemli ölçüde etkiler. Ana sebepler:

1. Web sitesi ziyaretçileri, bir sayfanın tamamen yüklenmesi için uzun süre beklemekten hoşlanmazlar;
2. Hızlı çalışırsa müşterileriniz mutlaka siteye geri dönecektir.Daha hızlı siteler arama motorlarında her zaman daha üst sıralarda yer alır;
3. Ayrıca site hızı, SEO stratejinize değer katar;

Bu kaynaklar harika ve harika bir izlenim bırakıyor. Şimdi sitenizi daha hızlı hale getirmek için ne yapardınız? Tabii ki, bu durumu iyileştirmek sizden birçok işlem yapmanızı gerektirebilir.

Örneğin, sunucunuzu, RAM'inizi, depolama alanınızı veya genel olarak donanımınızı yükseltmek, ancak sitenin yavaş olmasının ana nedeninin kaynak kodunuz olduğunu biliyor muydunuz? Optimize edilmiş CSS eksikliği en yaygın nedendir. Bu, stil sayfanızın dosya boyutunu birkaç kilobayt bile azaltmanın sayfa yükleme sürenizi önemli ölçüde etkileyeceği anlamına gelir.

Görüntü Karakterlerini Kullan

CSS Sprites, birden çok görüntüyü tek bir görüntü dosyasında birleştirmenin bir yoludur. Performansı artırmak için web sitesinde daha fazla kullanın. Görüntü karakterlerinin bu şekilde kullanılması eski bir tekniktir. CSS dosya boyutunu küçültme ve sayfa yükleme sürelerini azaltma söz konusu olduğunda, bu teknik bir zorunluluktur.

Görüntü hareketli görüntüleri, görüntüleri tek bir büyük .png dosyasına paketlemenize olanak tanır. Bu yöntem, HTTP isteklerini azaltır ve sayfa yükleme sürelerini hızlandırır. Sitenizde çok sayıda simge ve grafik kullanıyorsanız, bir görüntü sprite harika bir seçimdir. Bu seçenek, birden çok görüntüyü ayıklamak zorunda kalmanın ek yükünü önemli ölçüde azaltacaktır.

CSS optimizasyonu

CSS'yi kısaltma dosyanızı olabildiğince az boşlukla yeni bir dosyaya sıkıştırmaktır. Kod ne kadar küçük olursa, kullanıcının tarayıcısı tarafından o kadar hızlı okunur.

Tabiki manuel olarak yapmanıza gerek yok çünkü internette otomatik kompresörler var. Yalnızca bu tür basit çevrimiçi araçlar sayesinde sıkıştırma işlemini birkaç dakika içinde gerçekleştirmek mümkündür. İşte böyle bir küçültücü: http://www.cssminifier.com

Gereksiz kodu azaltın

Tekrarlanan koda ihtiyacımız yok. Bunun gibi kod, öğelerin yüklenmesini büyük ölçüde yavaşlatır. Tarayıcının yinelenen kodu tekrar tekrar gözden geçirmesi ve bunun için fazladan bir saniye harcaması gerekir.Sayfa yükleme hızını artırmanın bir başka püf noktası da gereksiz kodu azaltmaktır. Böyle bir iyileştirme, fazlalık veya yinelenen kod olup olmadığı kontrol edilerek elde edilebilir.

Başlığa CSS tabloları ve alt bilgiye JS komut dosyaları koyun

Stil sayfasını en üste (head etiketlerinin arasına) ve JavaScript kodunu en alta koymak iyi bir uygulamadır. Kodunuzun sayfanın geri kalanından önce yüklendiğinden emin olun. JavaScript'i sitenin alt kısmına yerleştirmenin ana nedeni, büyük boyutudur. Web sitesi hızı üzerindeki daha fazla etkisinin yanı sıra. Bu nedenle, bu tür komut dosyaları sitenin en altına yerleştirilir. Bu, sayfanın ana bileşenlerinden sonra yüklenmelerini sağlar.

Sayfanın üst kısmındaki içeriği biçimlendirmek için gereken temel stiller satır içine alınır ve hemen belgeye uygulanır. Small.css dosyasının tamamı, sayfa ilk kez oluşturulduktan sonra yüklenir. Stilleri, yükleme tamamlandıktan sonra, kritik içeriğin ilk oluşturulmasını engellemeden sayfaya uygulanır.

Büyük veri URI'lerini gömmeyin

Veri URI'lerini stil dosyalarına yerleştirirken dikkatli olun. CSS'nizde küçük veri URI'lerini seçici olarak kullanmak mantıklı olsa da, büyük veri URI'lerini gömmek, CSS'nizin ekranın üst kısmında daha büyük olmasına ve sayfa oluşturma süresini yavaşlatmasına neden olabilir.

CSS niteliklerini gömmeyin

CSS niteliklerini HTML öğelerine (örneğin ) gömmekten mümkün olduğunca kaçınılmalıdır, çünkü bu genellikle kodun gereksiz yere tekrarlanmasına yol açar. Ayrıca, HTML öğelerindeki satır içi CSS varsayılan olarak İçerik Güvenliği Politikası (CSP) tarafından engellenir.

CSS Dosyalarını Ayırma

Ayrıca CSS dosyalarını, yani farklı stil sayfalarını ayırabilirsiniz. Örneğin, IE, Chrome veya Firefox gibi birden çok tarayıcıyı hedefliyorsanız. Örneğin, bir stil sayfasındaki CSS saldırılarını kontrol etmek yerine, başka bir stil sayfasını (örneğin IE6 için) yüklemek için IE koşullu deyimlerini kullanabilirsiniz. Bu şekilde, Chrome kullanırken IE kodunu yüklemezsiniz. Bu, dosya boyutunu büyük ölçüde azaltacaktır.

Kodunuzdaki boşluk sayısını azaltın

Stil sayfanızdaki boşluk sayısını her zaman azaltmaya çalışmalısınız. Artan beyaz alan, boş baytları kaplar. Bu, çok büyük projelerde daha hızlı ve daha yavaş bir site arasında fark yaratabilir.Beyaz boşlukların sayısı azaltılarak dosyanın boyutu küçültülür. Böylece, daha düşük ağırlık nedeniyle dosyanın indirilmesini hızlandırıyoruz.

Kodunuzu belgeleyin

Kodunuzu mümkün olan her yerde belgelemelisiniz. /* Buraya yorum yapın */ gibi yorumları kullanmak, gereksiz kodu belirlemenize yardımcı olabilir. Yorum eklemek çok yer kaplasa da, bunları ihmal etmek kolaydır.Bazı durumlarda gereksiz yorumlar silinir. Bu teknik, CSS'nin fazla ağırlığından çok verimli bir şekilde kurtulmanızı sağlar.

Kodunuzu düzenleyin

CSS Kodu Optimizasyonu hakkında konuşmayı bile düşünmeyecekleri bir tekniktir. Aslında, birçok düzeyde, kodunuzu düzenlemek dosya boyutunu önemli ölçüde azaltmanıza yardımcı olabilir. Sonuç olarak sitenizin hızını arttırın.Nasıl olur acaba? Çok basit.

CSS sınıflarınızı doğru dal grubuna yerleştirin. Bu yöntem minimum çoğaltmayı garanti eder. Düzensiz kod, modern web tasarımında yaygın bir sorundur. Bazı senaryolarda, sitenizin yüklenmesi için tek ihtiyacınız olan dağınık kodunuzu hiyerarşik dallar halinde düzenlemektir.Tek bir stil sayfasında CSS saldırılarından kaçınmaya çalışın. Bunun yerine, 5. ve 8. noktalarda belirtilen yöntemleri kullanın.

KISS tekniği (Basit Tut Aptal)

Son söz, yaptığınız her şeyin KISS tekniğine uygun olduğundan emin olmaktır. KISS, Keep it Simple Stupid'in kısaltmasıdır. Yeniden bir dosya oluşturursanız! O zaman kesinlikle düzenli, iyi yazılmış, daha az gereksiz ve temiz kod için doğru yolda olmalısınız. Gördüğünüz gibi, CSS'yi optimize etmek zor değil. Özellikle bazı durumlarda, bu makalenin birkaç paragrafıyla idare edebilirsiniz. Bu teknikler zaman zaman siteyi hızlandırmaya yardımcı olacaktır.

Bu makaleyi okumak:

• Çevrimiçi JS ve CSS site kodunu optimize etme - ayrıntılı bir kılavuz
• Web sitesi teknik optimizasyonu - en önemli eylemler

Okuduğunuz için teşekkürler: SEO YARDIMI | NICOLA.ÜST