Web Tasarım'da Sıfır Atık

Web ürünlerinin çevresel bir etkisi olup olmadığını hiç düşündünüz mü? Bütün olarak ele alındığında, veri merkezlerine, telekomünikasyon ağlarına ve milyarlarca son kullanıcı cihazına güç sağlamak için gereken büyük miktarda elektrik sayesinde internet her yıl küresel havacılık endüstrisinden daha fazla karbon emisyonu üretiyor. Tüm bu ekipmanın üretilmesi ve bakımının yapılması gerektiği de göz önüne alınırsa tüketimin boyutu iyice artıyor. İnternet sanılanın aksine sadece sanal değil, hatta daha çok fiziksel.

Konuyla ilgili araştırmalar yapıldıkça en enerji verimli web sitelerinin, 1990'lardan kalma gibi görünen web siteleri olduğu ve birçok yeni web sitesi oldukça kirletici olduğu görülmüştür. Temel işlevlerine ve görünümlerine rağmen, ilk web sitelerinin, küçük dosya boyutlarıyla ve neredeyse hiç bilgi işlem gücü gerektirmeyen süper verimli olduğu ortaya çıktı. Bilgisayarlar daha güçlü hale geldikçe ve internet hızları arttıkça, web siteleri giderek daha fazla şişti ve bilgisayar donanımındaki ilerlemelerin yararlarını aşındırdı. Sonuç olarak, modern web 10 yıl öncesine göre daha hızlı değil ve çok daha fazla kirletici.

Tasarımlarınızdaki gereksiz tüketimleri azaltmak için birkaç ipucu derledik.

1. Resimler kelimeden daha değerlidir

Bir resim bin kelime anlatır, ancak gerçek şu ki bir resim 1000 kelimelik metinden çok daha fazla veri kullanır ve karşılığında depolamak, iletmek ve işlemek için çok daha fazla enerji kullanır.

NielsenNorman Group tarafından yapılan bir araştırma, web sitesi ziyaretçilerinin içerikle alakalı olmayan görselleri tamamen görmezden geldiğini ve web sitelerindeki genel stok fotoğraflarının gerçek bir alan ve veri kaybı haline geldiğini buldu. Görselleri dikkatli kullanmak ve yalnızca gerçekten değer katan tasarımlara dahil etmek daha iyidir.

Tasarımlarınıza fotoğraf koyacak olsanız bile, onları nasıl kullandığınız çoğu zaman israf olabilir. Örneğin, görüntü boyutları ve dosya boyutu söz konusu olduğunda kabaca bir kare yasası vardır. Genişliği ve yüksekliği iki katına çıkarırsanız, dosya boyutunu neredeyse dört katına çıkarırsınız. Ve bu, büyük resim dosyalarını yüklemek ve onları küçük görünecek şekilde görüntülemek yerine, doğru boyutta resim yüklemek için kodu yazdığınızı varsayar.

Ayrıca, görüntülerin içinde, orada olması gerekmeyen ayrıntı biçiminde atık bulabilirsiniz. Bir görüntünün bölümlerini bulanıklaştırarak ayrıntıları kaldırmak, sığ alan derinliğine sahip fotoğrafçılık kullanmak, düz arka planlar üzerinde nesneleri fotoğraflamak veya tek renkli görüntüler kullanmak, görüntü dosya boyutlarını küçültmenin sadece birkaç yoludur. Detay gerekli değilse, o zaman israftır.

Görüntüleri verimli bir şekilde tasarlasanız bile, görüntü dosyalarının kendisinde hala potansiyel israf vardır. Görüntü düzenleme uygulamanızda dizine alınmış renk kullanmak, görsel kalite kaybı olmadan görüntü dosyalarından gereksiz verileri çıkarabilir.

2. Dosya biçiminizi akıllıca seçin

Daha verimli dosya biçimleri de kullanabilirsiniz. Örneğin, WebP görüntü dosyaları tipik olarak JPEG'den %30 daha küçüktür ve AVIF görüntü dosyaları, JPEG'lerin kabaca yarısı kadardır.

SVG gibi vektör grafikleri de web sitelerinde fotoğrafçılık için çok daha verimli alternatifler olabilir. Tasarım dosyalarındaki gereksiz katmanları çıkararak ve vektör yollarını basitleştirerek SVG dosyalarınızı optimize edebilirsiniz. Bir SVG dosyasının boyutu, yalnızca tasarım dosyasını temizlemek için birkaç dakika harcayarak %97'ye kadar küçültülebilir.

3. Videoyu otomatik oynatmayı durdurun

Otomatik oynatılan videolar, diğer içerik türlerinden çok daha fazla veri ve enerji tüketir. Kullanıcının veri tüketimini ve cihaz enerjilerini boşa harcarlar ve web sayfalarını yavaşlatırlar. Sayfanızdaki video gösterimlerini akıllıca kullanın, sayfa ve kullanıcı arasındaki etkileşimi artırmak için üzerine bir oynat düğmesi koyun.

4. Sıfır atık yazı tipleri

Sistem yazı tipleri tasarımcılar arasında popüler olmayabilir, ancak zaten her kullanıcının cihazında bulunurlar, bu nedenle yüklenmelerine gerek kalmaz, bu da onları gerçekten sıfır atık haline getirir.  

Font-family CSS özelliği, ana bilgisayar sisteminde zaten yüklü olan fontları atamak için kullanabileceğiniz bazı genel aile adları sağlar:

serif

sans-serif

cursive

system-ui

Web yazı tiplerini kullanıyorsanız, israfı aramanın en kolay yolu, yazı tipi dosyasında web sitenizin kullanmadığı karakterleri belirlemektir. Örneğin, bazı yazı tipleri binlerce karakter sağlar, ancak sayfanızın hitap ettiği kullanıcı kitlesi aynı dili kullanıyorsa karakter sayınız yüze kadar düşebilir. Herhangi bir yazı tipi dosyasını alabilen ve hedef dillerinizde kullanılmayan karakterleri çıkarabilen çevrimiçi olarak kullanılabilen bir dizi yazı tipi alt ayarlama aracı vardır.

Tıpkı resimler gibi, verimli dosya formatlarını kullanarak daha fazla veri kaydedebilirsiniz. WOFF2 yazı tipi dosyaları, WOFF dosyalarından yaklaşık %30 ve TTF dosyalarından %75 kadar daha küçük olabilir.

5. Kodunuzdaki israfı bulun

CSS dosyalarınızda gerçekte ne olduğunu görselleştirmenize ve aynı stilleri ne sıklıkta çoğalttığınızı görmenize olanak tanıyan geliştirici araçlarını kullanabilirsiniz. Bu israfı görmek onu temizlemenize yardımcı olabilir ve tekrarlanabilir stiller içeren modüler bir tasarım dili uygulamak, uzun vadede temiz ve verimli CSS'yi korumanıza yardımcı olabilir.

Kitaplıkları, çerçeveleri veya izleme komut dosyalarını seçerken kendinize bunların gerçekten gerekli olup olmadığını ve daha küçük alternatiflerin olup olmadığını sormalısınız. Örneğin, jQuery yalnızca 30 kb olabilir, ancak tüm bir web sayfasını 30 kb'den daha azı ile oluşturmak mümkündür. Benzer şekilde, temel Google Analytics izleme komut dosyası 17 kb'dir, ancak 1 kb'den az dosya boyutunda açık kaynak komutlar kullanabilir ve kullanıcı veri gizliliğini iyileştirebilirsiniz.

Bazı programlama dilleri, görevleri gerçekleştirebilecekleri enerji verimliliği açısından da diğerlerinden daha fazla savurgandır. JavaScript, PHP'den yedi kat daha fazla enerji verimlidir. Hangi yeni dilleri öğreneceğinize ve gelecekteki projeler için hangi teknolojileri belirleyeceğinize karar verirken bunu aklınızda bulundurmalısınız.

Web'deki israfı azaltmak herkes için iyidir.

Web projelerimizde israfı ortadan kaldırmak için ayrıntılara biraz daha fazla dikkat gösterilmesi gerektiği doğrudur, ancak bunu yaptığınızda yalnızca çevre için daha iyi değil, aynı zamanda daha hızlı, daha erişilebilir kullanıcı deneyimleri sunan web deneyimleri oluşturabilirsiniz.