Günümüzde sayfa yüklenme süresi en önemli web site optimizasyon ölçütlerinden biri haline geldi. Web sitenizdeki milisaniyelik bir yüklenme süresi azalışı bile aramalarda öne çıkmak için büyük bir etkiye sahip olabilir. Yavaş sayfa yüklemesi ise dönüşüm oranlarınızı oldukça sıkıntıya sokabilir . Web sitenizi hızlandırmak için uygulayabileceğiniz birçok araç ve teknik vardır. Bu yazıda, ön uç performansını geliştirmek için kullanabileceğiniz en iyi CSS optimizasyon ipuçlarını inceleyeceğiz. 1. Performansa Etki Eden Etkenleri Bulun Her türlü optimizasyonda en önemli şey kapsamlı bir denetim ile başlamaktır. Herhangi bir performans düşüklüğünü bulmanıza yardımcı olabilecek birçok CSS teşhis aracı vardır. Öncelikle ve en önemlisi, var olan dosyaların yüklenme hızını kontrol etmek için web tarayıcınızın DevTools'unu kullanmaktır. Çoğu tarayıcıda klavyenin F12 tuşuna basarak DevTools yani Geliştirici Seçeneklerini açabilirsiniz. Örneğin, Chrome DevTools'ta, Network sekmesini kullanarak web sayfanız tarafından yüklenen tüm CSS dosyalarının boyutunu ve yükleme süresini kontrol edebilirsiniz. Ayrıca, CSS’nizin ne kadar hızlı yüklendiğini önbellek ve önbellek olmadan da test edebilirsiniz. DevTools ayrıca üçüncü taraf CDN'lerden alınan Google Font dosyaları ve CSS dosyaları gibi harici CSS dosyalarını da gösterdiğinden, daha önce bilmediğiniz birçok kaynağı bulabilirsiniz. Pingdom Tools ve Lighthouse by Google geliştiricileri, web sitelerinin hızını ve ön uç performansını analiz etmek için sıklıkla kullanılan diğer iki ücretsiz araçtır. Örneğin, Pingdom Tools, basit bir web sitesinin hızını test etmek için kullanıyorsanız size birkaç faydalı CSS optimizasyon için ipucu verir. 2. CSS Dosyalarını Küçült ve Sıkıştır Çoğu web sitesi birden fazla CSS dosyasını kullanarak açılır. Çoğu durumda, modüler CSS en iyi yöntem olarak düşünülse de, tüm dosyaların yüklenmesi uzun süre alabilir. Ancak, burada CSS küçültme ve sıkıştırma araçları devreye girer. Akıllıca kullanırsanız, sayfa yükleme sürenizi önemli ölçüde iyileştirebilirsiniz. CSS dosyanızı küçültmek için basit bir forma kodlarınızı kopyala-yapıştır yaparak kullanabileceğiniz CSS Minify gibi online araçlar vardır. Bu tür araçlar nispeten daha küçük projeler için daha iyi çalışabilir. Ancak, bunları kullanmak, birden fazla CSS dosyasıyla birlikte gelen daha büyük projeler için kullanışsızdır ve zaman alır. Bu gibi durumlarda, otomatik bir çözümü tercih etmek daha iyidir. Artık çoğu derleme aracı, kod tabanınızda otomatik olarak sıkıştırmayı gerçekleştirmenize izin verir. Örneğin, Webpack tüm dosyalarınızı varsayılan olarak küçültülmüş paket olarak döndürür. PostCSS ise, sadece dosyalarınızı küçültmekle kalmaz, aynı zamanda birçok özel optimizasyon da çalıştıran CSS Nano gibi akıllı eklentilere sahiptir. 3. Flexbox ve CSS Grid CSS yazarken yalnızca geleneksel kutu modeline güveniyorsanız ve kenar boşlukları ve dolgular kullanarak ekrandaki öğeleri hizalarsanız, daha modern düzen modüllerini, yani flexbox ve CSS Grid yöntemini benimsemeyi düşünmelisiniz. Bu yeni modeller, karmaşık düzenleri çok daha az kodla uygulamanıza izin verir. Daha eski tekniklerde, öğeleri dikey olarak ortalamak gibi basit şeyler için bile birçok ince ayar yapmanız gerekir. Ancak, flexbox ve CSS Grid ile bu işler daha kolaydır. Yeni düzen modüllerine alışmak biraz zaman alabilir, ancak CSS dosyalarınız çok daha küçük olacağından buna değer. 4. @import Yerine < link> Tagını Kullanın Bir web sayfasının CSS dosyalarını yüklemesini sağlamak için kullanabileceğiniz iki ana teknik vardır: < link> etiketini kullanarak CSS dosyalarını HTML sayfasının < head> bölümüne ekleme, Ana CSS dosyasında @import kullanarak diğer stil sayfalarını buradan içe aktarma. @import kuralında diğer CSS dosyalarını ana CSS dosyasının en üstüne eklemeniz gerekir. Çoğu durumda, yazı tipleri ve diğer tasarım öğeleri gibi daha küçük içerikleri yüklemek için kullanılır. İlk başta bu iyi bir çözüm gibi görünebilir, ancak tarayıcının HTML sayfasının link etiketlerini kullanarak doğrudan CSS dosyalarını yüklediğinden daha bu stil sayfasını yüklemesi çok daha uzun sürer. HTML sayfanıza birden fazla CSS dosyası eklediğinizde, her zaman CSS önceliğine dikkat edin. Önce en genel stil sayfasını ekleyin ve daha spesifik olanlara doğru gidin. Bunu yapmanız gerekir çünkü daha sonra eklediğiniz stil sayfaları önceki CSS dosyalarının kurallarını geçersiz kılar. Örneğin, CSS dosyaları doğru sırada eklendiğinde dair bir örnek: 5. Görüntüler yerine Gradients ve SVG'ler kullanın Tüm görüntüleri aynı anda bir web sayfasında görüntülemek çok zaman alabilir. Geliştiriciler, harici bir CDN'den görüntü yükleme veya TinyJPG gibi görüntü sıkıştırma araçlarını kullanma gibi etkiyi azaltmak için birçok görüntü optimizasyon tekniği kullanır. Bu çözümler size çok yardımcı olabilir, ancak çoğu zaman kaynak ağırlıklı JPG ve PNG görüntülerini yerel CSS efektleriyle değiştirebilirsiniz. Örneğin, tarayıcınızı biraz yavaşlatabilecek dev arka plan görüntüleri yerine Gradients kullanabilirsiniz. CSS'nin gradyan işlevlerini doğrusal, radyal ve yinelenen Gradients oluşturmak için kullanabilirsiniz. Bu ana CSS işlevleriyle, yalnızca renkleri tanımlamaz, ayrıca Gradients açısını da tanımlayabilirsiniz. Aşağıdaki kodlar ile herhangi bir görüntüden çok daha hızlı yüklenen hoş bir degrade arka planı oluşturabilirsiniz: Daha karmaşık arka plan resmi ve dokular için CSSmatic ve ColorZilla gibi araçları kullanabilirsiniz. Gradients özelliğinin yanı sıra, geleneksel JPG ve PNG görüntülerini Ölçeklenebilir Vektör Grafikleri (SVG) ile de değiştirebilirsiniz. Yalnız hızlı yüklenmeleri değil aynı zamanda SVG'nin vektör yapısı nedeniyle herhangi bir kalite kaybı olmadan herhangi bir boyuta ölçeklendirebilir. Ek olarak, sıradan bir HTML dosyasındaki gibi SVG'yi de CSS ile biçimlendirebilirsiniz. 6. !important Kodunu Kullanmaktan Kaçının Her ne kadar !important css kodlarında bazı durumlarda gerekli olsada, sadece son çare olarak kullanmak gerekir. Bu kural, basamaklı bir özel durum oluşturur. Bu nedenle, !important eklediğinizde CSS bildirimi için önemli olan, daha yüksek özgüllüğe sahip olanlar bile, diğer bildirimleri geçersiz kılacaktır. Sözdizimi böyle görünüyor: CSS'inizde çok fazla !important kodu varsa, kullanıcı tarafında tarayıcının kod üzerinde fazladan kontroller yapması gerekir; bu da sayfayı oldukça yavaşlatabilir. Genel bir kural olarak, site genelinde CSS için veya bir tema veya eklenti oluştururken asla !important kullanmayın. Mümkünse, yalnızca üçüncü taraf bir kütüphaneden gelen CSS'yi geçersiz kılmak istediğinizde kullanın. 7. CSS Dosyasını Yeniden Düzenlemeyi Düşünün CSS yeniden düzenleme nadiren kolay bir iş olsa da, web sitesi performansını önemli ölçüde artırabilecek birçok durum vardır. Örneğin, CSS dosyalarınız çok büyük olduğunda ya da eski bir kod tabanını devraldığınızda ya da dönüşüm oranlarınıza ciddi şekilde zarar veren çok düşük sayfa yükleme sürelerine sahipseniz. CSS düzenlemenin amacı, kodunuzu daha şık, daha bakımlı göstermek ve daha hızlı yüklemektir. CSS düzenleme, CSS kod tabanınızın her yönünü analiz etmeniz gereken çok adımlı bir işlemdir. Aşağıdakiler gibi birkaç farklı şeyi kontrol etmeniz gerekir: Kullanılmayan veya yinelenen CSS kurallarınız veya kaynaklarınız olup olmadığını, flexbox ve CSS grid gibi daha modern tekniklerden faydalanıp faydalanamayacağınızı, Çok fazla özellik kullanıp kullanmadığınızı (bu görsel özellik hesaplayıcısını kullanarak hesaplayabilirsiniz), CSS dosyalarınızın yapısının makul olup olmadığı (örneğin, büyük dosyalardan daha küçük dosyaları saklamak daha kolaydır), otomatik bir yapım aracı kullanmaya değip değmeyeceğini, Ve diğerleri. Yeniden düzenleme işlemine başlamadan önce, ölçülebilir hedefler belirleyin ve sayfa yükleme süresi veya First Meaningful Paint gibi kullanacağınız kriterleri seçin, böylece öncesi ve sonrası değerlerini karşılaştırabilirsiniz. Ayrıca Git gibi bir sürüm kontrol aracı kullanmayı da unutmayın. Bu şekilde, eğer bir şeyler ters giderse, kodunuzun önceki bir sürümüne geri dönebilirsiniz. Sonuç Web sitenizin performansını artırmak için kullanabileceğiniz birçok CSS optimizasyon seçeneği var. Bunların çoğunun uygulanması kolaydır, ancak sayfanızın yükleme süreleri üzerinde önemli bir etkisi olabilir. Sayfaları daha hızlı yükleme, yalnızca kullanıcı deneyimini geliştirmekle kalmaz, aynı zamanda Google ve diğer arama motorlarında daha iyi sıralama elde etmenize yardımcı olur. CSS optimizasyonu en iyi uygulamalarının yanı sıra, önbelleğe alma, Google AMP ve HTTPS protokolü gibi yükleme hızını artırmak için birçok başka tekniği kullanabilirsiniz.
