Projelerinizde 'Zarar Veren' CSS'lerden Kaçınmak

Görünüşe göre web tasarımcıları kreasyonlarını sürekli olarak optimize etmeye çalışıyorlar. Kısa vadede bu performansa fayda sağlar. Uzun vadede bakımı da basitleştirebilir.

Oldukça sık olarak bu, görüntüleri optimize etmek, sayfa önbelleğe alma uygulamak ve bir içerik dağıtım ağı (CDN) aracılığıyla dosya sunmak anlamına gelir. Bunların hepsi etkili önlemlerdir. Ancak yeterince dikkat çekmeyen bir öğe, bir web sitesinin CSS'sindeki potansiyel şişkinliktir.

Stil sayfalarınızı küçültebilir veya bir CDN üzerinden sunabilirsiniz, ancak daha fazlasını yapabilirsiniz. Spesifik olarak, kullanılmayan savurgan işaretlemeden kurtulmak ve hala alakalı olan stilleri sıkılaştırmak.

Bu en iyi inşa sürecinin en başından yapılır. Ancak mevcut web sitelerindeki yükü hafifletmek de mümkündür. Daha hızlı bir web sitesi oluşturabilecek bazı araç ve tekniklerle birlikte ilgili zorluklara bir göz atalım.

Temalarda ve Çerçevelerde Yerleşik Bloat ile Başa Çıkmak

Eskiden web siteleri esasen sıfırdan inşa ediliyordu. Bu harika bir yaklaşımdı, çünkü tasarımcılar yalnızca ihtiyaç duyulan stilleri ve senaryoları içerebiliyordu. Dikkatli bir şekilde yapılırsa, bu işlem ince ayarlanmış bir web sitesiyle sonuçlanabilir.

Tabii ki, bu uygulamanın birçoğumuz tarafından terk edilmesinin birkaç nedeni var. Zaman ve bütçe kısıtlamaları açısından verimli değil.

Modern web siteleri genellikle önceden oluşturulmuş bir ürünün üzerine kurulur. Bu, Bootstrap gibi bir CSS çerçevesi veya ayrıntılı bir WordPress teması olabilir. Bazı durumlarda, bir CMS teması bir çerçeve bile içerebilir.

Bu ürünler her bedene uygun olacak şekilde tasarlanmıştır. İhtiyaç duyabileceğiniz her şeyi dahil ederek, geliştirmeyi çok daha hızlı hale getirir. Ne yazık ki, performans üzerindeki etkileri için aynı şey söylenemez.

Peki, durumu iyileştirmek için ne yapılabilir?

Mümkün Olduğunda Bileşen Tabanlı veya Hafif Çerçeveler Kullanın

Teorik olarak, şişkinlikten kaçınırken bir çerçevenin avantajlarını elde etmek mümkündür. Bu, diğerlerini dışarıda bırakırken belirli özellikleri yüklemenizi sağlayan bileşen tabanlı paketler kullanılarak gerçekleştirilebilir. Yukarıda bahsedilen Bootstrap, bir noktaya kadar bu tür bir kişiselleştirmeye izin verir.

Başka bir alternatif, temel stiller sağlayan ve bunların üzerine inşa edeceğinizi varsayan Tailwind CSS'dir. Daha bitmiş bir ürün yerine harika bir başlangıç ​​noktası arıyorsanız, bu sizin için uygun olabilir.

Bir çerçeve kullanmanın yanlış bir tarafı yok. Ancak şunlardan birini arayın: a) hangi bileşenlerin yükleneceğini seçmenize ve seçmenize izin verir veya; b) kolayca özelleştirilebilen bir barebone stil sayfası sunar. Her iki durumda da projeniz azaltılmış yükten faydalanacaktır.

CMS Temaları ile Ne Yapmalı?

Ticari WordPress temaları gibi ürünler, ihtiyacınız olsun ya da olmasın, genellikle bir sürü stil içerdiğinden yanıltıcı olabilir.

Belirli bir temanın, istemediğiniz stil sayfalarını temizlemenin yeterince kolay olduğu noktaya kadar iyi organize edilmiş olması mümkündür. Bunu birkaç tıklamayla yapmanızı sağlayan bir tema seçenekleri paneli bile olabilir. Ancak, bu kuraldan çok istisnadır.

Şişirilmiş bir temadan kaçınmanın en iyi yolu, kendi temanızı oluşturmaktır. Örneğin, bir WordPress başlangıç ​​teması, özelleştirebileceğiniz bazı barebone CSS'ler sunacaktır. Bu, daha yalın bir stil sayfası sağlamaya yardımcı olur ve bir CMS ile ilişkili ek yükün en azından küçük bir kısmını ortadan kaldırır.

Mevcut Stil Sayfalarını Temizle

Odağımızı mevcut bir web sitesine değiştirmek, CSS'yi dağınıklıktan arındırmak ve yeniden düzenlemek iki yoldan biriyle yapılabilir:

Stilleri Manuel Olarak İnceleme

Favori kod düzenleyicinizi çalıştırmak ve sitenizin stil sayfalarını açmak her zaman başlamak için iyi bir yerdir. Evet, sıkıcı bir deneyim olabilir. Ama aynı zamanda düşük asılı meyvelere bakmanın da etkili bir yolu.

CSS'nin her satırını incelemek gerekli değildir. Bunun yerine, fikir, kullanılmadığını veya olabildiğince verimli olmadığını bildiğiniz herhangi bir öğeyi bulmaktır.

Örneğin, bir eklentininkilerin üzerine yazmak için bazı özel stilleri olan bir WordPress web sitesi çalıştırdığınızı varsayalım. Ya artık o eklentiyi kullanmıyorsanız? Bu durumda, stiller kolayca çıkarılabilir.

Veya belki de kış tatillerinde olduğu gibi sadece ara sıra kullandığınız çeşitli stiller vardır. Bu stilleri ayrı bir dosyaya taşımak ve yalnızca gerektiğinde çağırmak faydalı olabilir.

Sonra çok iyi yazılmamış CSS seçicileri var. Belki de artık ihtiyaç duyulmayan birkaç tarayıcı önekine veya gereksiz yinelenen özelliklere sahiptirler. Burası temizlik için olgunlaşmış bir bölge.

Sitenizin tasarımı birkaç yıldan daha eskiyse, ne kadar fazla stil bulabileceğinize şaşırabilirsiniz.

Otomatik Bir Araç Kullanın

Sitenizi (veya en azından bir kısmını) tarayacak ve kullanılmayan CSS listesiyle geri bildirimde bulunacak bir dizi araç var. Ancak, mükemmelliği beklerken nefesinizi tutmayın.

Otomatik erişilebilirlik araçları gibi, kullanılmayan CSS tarayıcıları da size ancak bu kadar bilgi verebilir. Bu nedenle, bir tuz tanesi ile sonuç almak ve bunları bir kılavuz olarak kullanmak en iyisidir - sorunuza nihai bir cevap değil.

CSS-Tricks'ten Chris Coyier, bu özel konu hakkında incelemeye değer olağanüstü bir makale yazdı. Yalnızca bu araçlardan bazılarını test etmekle kalmıyor, aynı zamanda medya sorguları gibi eldeki daha büyük sorunlara da bakıyor.

Ancak, bu araçlardan birini veya birkaçını denemekle ilgileniyorsanız, daha popüler seçeneklerden birkaçı şunlardır:

• JitBit
• PurgeCSS
• PurifyCSS
• Kullanılmayan CSS

Otomatik bir araç ve manuel incelemenin bir kombinasyonu, muhtemelen en iyi eylem şeklidir. Her ikisini de yapmak, size potansiyel performans optimizasyonlarının daha eksiksiz bir resmini verecektir. Her bir öğeyi yakalayamayabilirsiniz, ancak yine de ölçülebilir bir etki yaratmak için bir fırsat var. Sonuçları görmek için GTmetrix gibi bir araçla testten önce ve sonra biraz yapabilirsiniz.

CSS'ye Geldiğinde: İsraf Etme, İstememe

Bir stil sayfasının ne kadar büyük olabileceği şaşırtıcı - özellikle de hazır bir CSS çerçevesi kullanırken. Elbette, stil unsurları açısından yazarın sizin için çok fazla zor iş yapmış olması güzel. Aynı zamanda sayfa oluşturma ve yükleme süreleri söz konusu olduğunda masada çok şey bırakıyor.

Bu, bir projenin en başından itibaren dikkat etmeye değer bir şeydir. Bir stil sayfasının ağırlığını azaltmaya çalışarak, optimizasyonun her son damlasını sitenizden çıkarmaya yardımcı oluyorsunuz.

Web siteniz zaten dünyanın görebileceği bir yerdeyse, hala atabileceğiniz olumlu adımlar var. CSS'yi gözden geçirin ve kolaylaştıracak veya kaldırılacak öğeleri arayın. Kaçırmış olabileceğiniz öğeleri bulmak için birçok otomatik araçtan birini kullanın.

Sonuç olarak, CSS'nizi temellere kadar kırpmanın mükemmel bir süreç olmadığıdır. Ancak yine de harcadığınız zamana ve çabaya değer.