Web Sitesi Performansını Geliştirmek Gezegeni Kurtarmaya Nasıl Yardımcı Olabilir?

Bunu sık sık düşünmeyebilirsiniz, ancak İnternet muazzam miktarda elektrik kullanır. Bu elektriğin bir yerde üretilmesi gerekiyor. Çoğu ülkede bu, fosil yakıtların yakılması anlamına gelir. Bu da, İnternet'in karbon ayak izinin, küresel hava yolculuğunu gölgede bırakabilecek noktaya kadar büyüdüğü anlamına geliyor ve bu, İnternet'i dünyadaki en büyük kömürle çalışan makine haline getiriyor.

Mozilla İnternet Sağlık Raporu 2018, özellikle İnternet yeni alanlara yayıldıkça “sürdürülebilirliğin daha büyük bir öncelik olması gerektiğini” belirtiyor. Ancak mevcut haliyle, web siteleri giderek daha fazla obez oluyor, bu da İnternet'in enerji talebinin katlanarak artmaya devam ettiği anlamına geliyor.

Bu arada, iklim değişikliğinin etkileri her geçen yıl daha da kötüleşiyor ve sayıları artıyor. İklim bilimcilerinin büyük çoğunluğu, dünya çapında artan vahşeti ve aşırı hava olaylarının sıklığını, büyük ölçüde insan faaliyetlerine bağladıkları iklim değişikliğine bağlıyor. Bazıları bilimi sorgularken, dünyanın en büyük petrol şirketleri bile artık bunu kabul ediyor ve iş modellerinin değişmesi gerektiğini kabul ediyor.

Dünya üzerindeki her ülke (ABD hariç), Paris İklim Anlaşması'na üyedir. ABD tartışmalı bir şekilde geri çekilse de, ABD nüfusunun ve ekonomisinin yarısından fazlasını temsil eden Amerika'nın en etkili bireylerinin, şehirlerinin, eyaletlerinin ve şirketlerinin çoğu, America's Pledge girişimi yoluyla anlaşmaya bağlılıklarını sürdürdüler.

Web geliştiricileri olarak, bunun üzerinde herhangi bir etkimiz olan bir konu olmadığını hissetmek anlaşılabilir, ancak bu doğru değil. Web'deki durumu iyileştirmek için birçok çaba var. Green Web Foundation, ya tamamen yenilenebilir enerjiyle çalışan ya da en azından karbon nötr olmayı taahhüt eden web sunucularının sürekli büyüyen bir veritabanını tutar. 2013 yılında A List Apart, James Christie'nin Sürdürülebilir Web Tasarımını yayınladı. Son üç yıldır, SustainableUX konferansı, web sürdürülebilirliği alanındaki uzmanların bilgilerini bir dizi web tabanlı disiplinde paylaştığını gördü.

2009'dan beri Greenpeace, Clicking Clean kampanyasıyla büyük internet şirketlerine enerji karışımlarını temizlemeleri için baskı yapıyor. Kısmen bu kampanyanın bir sonucu olarak, Google geçen yıl ilk kez operasyonlar için küresel tüketiminin %100'ünü karşılayacak kadar yenilenebilir enerji satın aldığını duyurdu.

Peki, sunucuları yenilenebilir enerjiyle güçlendirmekten başka, web geliştiricileri iklim değişikliği konusunda başka ne yapabilir?

“Ölçemediğiniz Şeyi Yönetemezsiniz”

Web sitelerini daha sürdürülebilir hale getirmek söz konusu olduğunda belki de en büyük kazanç, performans, kullanıcı deneyimi ve sürdürülebilirliğin tamamen iç içe geçmiş olmasıdır. Dijital bir ürünün sürdürülebilirliğini ölçmek için temel ölçü, enerji kullanımıdır. Bu, sunucu, istemci ve ikisi arasında veri ileten aracı iletişim ağları tarafından yapılan işi içerir.

Bunu akılda tutarak, belki de dikkate alınması gereken ilk şey, web sitemizin enerji kullanımını nasıl ölçeceğimizdir? Bu aslında hayal edebileceğinizden daha zor bir iştir ve burada kesin veriler elde etmek zordur. Bununla birlikte, enerji kullanımını gösteren kullanabileceğimiz bazı iyi geri dönüşler vardır. Bunlar, veri aktarımını (yani, web sitenizi görüntülemek için tarayıcının ne kadar veri indirmesi gerekir) ve web sitesine hizmet veren ve web sitesini alan donanımın kaynak kullanımını içerir. Burada bariz bir ölçü CPU kullanımıdır, ancak bellek kullanımı ve diğer veri depolama biçimleri de rol oynar.

Veri aktarımı, oldukça kolay ölçebileceğimiz bir şeydir. Tüm büyük tarayıcılar, ağ etkinliğini ölçmemize olanak tanıyan geliştirici araçları sağlar. Aşağıdaki bu ekran görüntüsünde, örneğin, Smashing Magazine web sitesinin ilk kez yüklenmesinin bir megabayt veri aktarımının hemen altında olduğunu görebiliriz. Firefox'un geliştirici araçları aslında bize iki sayı sağlar: ilki, aktarılan dosyaların sıkıştırılmamış boyutu ve ikincisi sıkıştırılmış boyuttur.

Varlıkları ağda dolaşırken sıkıştırmak için en yaygın araç gzip'tir, bu nedenle bu iki sayı arasındaki fark genellikle gzip'in çalışmasının bir sonucudur. Bu son sayı, gerçekte ne kadar veri iletildiğini temsil eder ve göz önünde bulundurulması gereken sayıdır.

Not : Çok saygı duyulan WebPagetest dahil olmak üzere veri aktarımı için bize bir ölçüm sağlayan birçok başka araç vardır.

CPU kullanımını ölçmek için Chrome bize ayrı sekmelerin bellek ayak izini, CPU kullanımını ve ağ etkinliğini gösteren ayrıntılı bir Görev Yöneticisi sağlar. Daha maceracı/teknik için, top (işlem tablosu) komutu, macOS ve Ubuntu gibi çoğu Unix benzeri işletim sisteminde benzer ölçümler sağlar. Genel olarak konuşursak, top komutunu kabuk erişimine sahip olduğumuz herhangi bir sunucuda da çalıştırabiliriz.

Neyse ki, WebsiteCarbon ve Ecograder gibi bu ölçümleri belirli bir CO2 rakamına (WebsiteCarbon durumunda) veya bir puana (Ecograder durumunda) çevirmeye çalışan çabalar var.

Sürdürülebilir Web Tasarımı

Artık sitemizin etkisini nasıl ölçeceğimizi biliyoruz, artık siteyi daha sürdürülebilir, daha performanslı ve genel olarak daha iyi bir deneyim kullanmak için nasıl optimize edebileceğimizi düşünmenin zamanı geldi.

Burada bize yardımcı olması için yararlanabileceğimiz bazı mevcut çalışmalar var. 2016'da O'Reilly, Tim Frick'in “Designing For Sustainability” kitabını yayınladı. Bu kitapta Tim, bizi sürdürülebilir tasarımın nedenlerini ve nasıllarını anlatan bir tura çıkarıyor. Ancak, sürdürülebilir web tasarımı felsefesiyle büyük ölçüde örtüşen - sürdürülebilirliğe açık bir odaklanma olmasa da - çok sayıda mevcut fikir, konferans görüşmesi ve makaleden yararlanabiliriz. Burada özellikle iyi örnekler Brad Frost'un yan projesi “Death To Bullshit”, Heydon Pickering'in daha az lanet kod yazmakla ilgili makaleleri ve konuşmaları ve Adam Silver'ın “Designing For Actual Performance” blog yazısı.

Bir web sitesini tamamen yeniden tasarlıyorsak veya sıfırdan yeni bir web sitesi başlatıyorsak, burada gerçekten yüksek seviyeli sorularla başlayabiliriz. Örneğin, bir ana sayfada gerçekten neyi hak ediyor veya olması gerekiyor? Ve daha spesifik olarak, bir ana sayfadaki her bir öğe hangi değeri getirir? Heydon Pickering'in dediği gibi:

“Bir web sitesinin en performanslı, erişilebilir ve bakımı kolay özelliği, en başta sizin yapmadığınız özelliğidir.”

WordPress.com VIP ekibinde çalışıyorum, bu nedenle, sürdürülebilir web tasarımı tekniklerini ne kadar ileri götürebileceğimi görmek için minimalist bir WordPress teması oluşturarak kendime meydan okumaya karar verdim. Sonuç, Susty adlı bir temadır ve bir araya getirdiğim aşağıdaki web sitesinde eylem halinde görülebilir: sustywp.com. Bu özel örnekte, web sitesi 6 KB'ın biraz üzerinde veri aktarımı ile teslim edilir; bu, medyan web sitesinin yaklaşık 1,5 MB olduğu göz önüne alındığında iyi hissettirir.

Peki, ne yaptım? Pekala, sana söyleyeceğim.

Ağ İsteklerini Azaltın

Yukarıda ana hatlarıyla belirttiğim gibi, ağ istekleri kolayca ölçebileceğimiz bir şeydir, bu nedenle iyi bir başlangıç ​​noktası oluştururlar. Susty'yi bir araya getirirken, gerekli görünmeyen bir dizi HTTP isteği olduğunu fark ettim. Örneğin, WordPress, emojilerin kullanımını algılayan ve bunların yasa dışı karakterler olarak görünmemesini sağlayan bazı CSS ve JavaScript'leri bir araya getirir. Bunda doğal olarak yanlış bir şey yok, ancak emoji kullanmayı planlamıyorsanız veya çeşitli sistem varsayılanlarının sizi kapsayacağından mutlu ve eminseniz, bunların yüklenmesini önleyebilirsiniz.

Bu nispeten yetersiz bir tasarrufu temsil eder, ancak istenmeyen kodları ve sayfalarımızdan gelen istekleri budama felsefesi oluşturarak çok daha önemli performans iyileştirmeleri yapabiliriz. Örneğin:

• Bazı temel DOM işlemleri için jQuery'nin tamamını mı yüklüyoruz?
  Saf JavaScript ile aynı sonuçlara ulaşabilir miyiz? Google için Jeremy Wagner tarafından yazılan bu yayında daha gelişmiş ölü kod eleme (aka ağaç sallama) hakkında bilgi edinebilirsiniz.
• Bir resim atlıkarıncamız var mı?
  Tüm bu görüntülere gerçekten ihtiyacımız var mı? Kullanıcı deneyimini önemli ölçüde iyileştiriyorlar mı? Yoksa onu tek bir güçlü imaja indirgeyebilir miyiz? Veya geri gelen kullanıcılara bir dinamizm duygusu vermek için rastgele seçilmiş resimlerden birini mi göstermelisiniz? Bu arada, burada yapılan araştırma, çoğu kullanıcının atlıkarıncalardan hoşlanmadığını veya bunlarla ilgilenmediğini gösteriyor.
• Çok fazla resim kullanıyorsak, resimlerimizi destekleyen tarayıcılar için WebP formatını kullanarak sağlamanın faydası olur mu?
  WebP'nin desteği uzun süredir sinir bozucu bir şekilde sınırlıydı. Ancak Firefox'un 65 sürümünde desteğine başlaması nedeniyle (Ocak 2019'dan itibaren), Safari gibi geride kalanların yetişmesi sadece bir zaman meselesi.
• Yüzlerce kilobaytlık web yazı tipi mi yüklüyoruz?
  Yüklediğimiz tüm web yazı tiplerini mi kullanıyoruz? Web yazı tiplerine bile ihtiyacımız var mı? Bugünlerde çoğu cihazda yarı düzgün yazı tipi yığını var, tercihe göre düzenlenmiş görmek istediğimiz yazı tiplerinin bir listesini belirtebilir miyiz? Web yazı tiplerini kullanmamız gerekiyorsa, yazı tiplerimizin makul olarak mümkün olduğu kadar performanslı olduğundan emin olmalıyız.
• YouTube videolarını mı yerleştiriyoruz?
  Gömülü bir YouTube videosu, herhangi biri onunla etkileşime girmeden önce genellikle yaklaşık bir megabayt veri aktarımı ekler. Kullanıcılarımızın yalnızca bir kısmı gerçekten oturup web sitemize yerleştirilmiş videoyu izleyecekse, bunun yerine ona bağlantı verebilir miyiz?

Her Şeyi İnceleyin

Bu doğrultuda sayfalarımızın her yönünü de sorgulayabiliriz. Gerçekten orada olmayı hak eden nedir? Kenar çubuğumuz herhangi bir gerçek değer katıyor mu, yoksa konvansiyonel web sitelerinin kenar çubukları olduğunu belirttiği için oraya bir tane mi koyduk? Yani, bir tane ekledik ve onu saçmalıklarla doldurduk.

Susty ile, navigasyonu kendi sayfasına devretme konusunda biraz alışılmışın dışında bir yaklaşım denedim. Bu, ek içeriğin yalnızca kullanıcının açık isteği üzerine yüklendiği, kelimenin tam anlamıyla temel gereksinimlere indirgenmiş sayfalara sahip olmamı sağlıyor. Susty o kadar hafif ve o kadar hızlı ki, bazı kullanıcı araştırmaları (diğer bir deyişle ortağım) sayesinde menünün yüklenmesinin gerçekten yeni bir sayfa gibi hissetmediğini fark ettim, bu yüzden onu bir bindirme gibi göstermeye karar verdim. reddetmek, aslında sizi önceki sayfaya geri götürür.

Göze hoş gelen hafif sayfalar oluşturmama yardımcı olmasının yanı sıra, kümelenmiş gezinme, onu göstermek için herhangi bir süslü gizleme/açma koduna olan ihtiyacı da ortadan kaldırıyor. Bu noktada, Susty'nin sürdürülebilir web tasarım tekniklerini uç noktalara taşımanın bir örneği olduğunu açıkça belirtmek isterim (bunun iyi bir web sitesinin arketipi olduğunu önermiyorum).

Büyükannen Gibi CSS Yaz

Ciddi performans geliştirme söz konusu olduğunda, kelimenin tam anlamıyla her kod karakterinin önemli olduğunu aklımızda tutmalıyız. Her karakter bir baytı temsil eder ve gzip ile sıkıştırıldıktan sonra bile ağırlık almaya devam ederler. CSS, genellikle çok fazla şişkinlik gördüğümüz bir alandır. Neyse ki, kullanılmayan CSS'yi ayıklamanıza yardımcı olabilecek, giderek artan sayıda karmaşık araç var. Sarah Dayan'ın bu harika gönderisi, CSS paketini 259KB'den 9KB'ye nasıl düşürdüğünü özetliyor!

Sıfırdan başlıyorsak, belki de ilk etapta CSS'yi nasıl yazdığımız hakkında daha derin düşünmeliyiz. Heydon Pickering, CSS'yi sözdiziminin nasıl tasarlandığının güçlü yönlerine oynayacak şekilde nasıl yazabileceğimiz ve bunun geliştiricilerin tekrarı önlemesine nasıl yardımcı olabileceği hakkında mükemmel bir yazı yazdı. Heydon, hem HTML hem de CSS'de div'lerin ve sınıfların aşırı kullanımıyla ne kadar israf olduğuna da dikkat çekiyor.

Neyi Analiz Ediyorsun?

Google Analytics, KISSmetrics, Piwik vb. araçlarla web sitelerinin ziyaretçilerinin ne yaptığını analiz etmek herkesin web üzerinde aşağı yukarı her yerde yaygın hale geldiği görülüyor. her web sitesinde analize mi ihtiyacınız var? Birincisi, yönettiğim her siteye doğal olarak Google Analytics ekledim. Ancak, nispeten yakın zamanda, söz konusu web sitelerinin çoğu için bunun neredeyse tamamen anlamsız bir çaba olduğunu fark ettim: "Ah, bugün Facebook üzerinden altı kişi bu gönderiye geldi." Kimin umrunda?

Gerçekten ihtiyacınız olmadıkça ve verileri analiz edip buna göre hareket etmeyecekseniz, sadece analitiği bir kenara bırakın ve bugün X web sitesini kaç kişinin ziyaret ettiğinin çokluğuna şaşkınlıkla bakmaktan daha iyi bir zaman harcamanın yolunu bulun.

Google Analytics gibi bir şeyin kullanılması, sayfanızın ağırlığını artırmanın yanı sıra, Google adına kullanıcılarınızdan topladığınız verilerle ilgili etik soruları da beraberinde getirir; yani, Google'ın size Analytics'i ücretsiz olarak sağlamasının bir nedeni vardır.

Temel Bilgileri Unutmayalım

Bu günlerde aşağıdakilerle ilgili çok fazla bilgi var, ama asla kayıtsız kalmamalı ve onları unutmamalıyız. Yukarıdaki her şeyin yanı sıra, HTML, CSS ve JavaScript'i mutlaka küçültmeli ve uygun olan yerlerde birleştirmeliyiz. Ayrıca mümkün olduğunca küçük olduklarından emin olmak için tüm görüntüleri sıkıştırmalıyız, doğru ayarlarda doğru formatları kullanmalı ve aşamalı oluşturmayı kullanmalıyız.

Sunucu Tarafı Performansı

Şimdiye kadar, odak noktamız neredeyse tamamen ön uçtu, ancak sunucu tarafında da şeyleri optimize etmezsek, bunların çoğu alakasız hale geliyor. Zaten birkaç kez bahsetmiştim, ancak gzip sıkıştırmasını her zaman kesinlikle etkinleştirmeliyiz.

Web sitemize hizmet vermeyi sunucumuz için mümkün olduğunca kolaylaştırmalıyız. Ağırlıklı olarak Nginx kullanıyorum ve FastCGI önbelleğine özel bir düşkünlüğüm var ve onu özellikle verimli buldum. Kendi sunucunuza kabuk erişiminiz varsa, onu nasıl yapılandıracağınızı açıklayan bir gönderi burada. Sunucunuz üzerinde çok fazla kontrole sahip değilseniz (veya istemiyorsanız) daha az teknik seçenek vardır. WordPress alanındaki özel bir favori, WP Super Cache'dir.

HTTPS üzerinden HTTP2 kullanmalıyız. HTTPS kullanmak, ağın kendisine sahip olunması güzel bir şey gibi davranmamıza izin veren hizmet çalışanları gibi yeni web teknolojileri dünyasının kapılarını açar. Bu konuda daha fazla bilgi edinmek istiyorsanız, Jeremy Keith'in yeni kitabı “Çevrimdışı Olmak”ı şiddetle tavsiye ederim.

Not : Ayrıca, hem Apache hem de Nginx için kullanılabilen Google'ın Sayfa Hızı Modülünü de araştırmak isteyebilirsiniz.

Son olarak, burada yapabileceğimiz en büyük etki, web sitelerimizi yenilenebilir enerjiyle çalışan veri merkezlerinde barındırmaktır. İngiltere'de, sitelerimi doğrudan barındırdığım şirketler açısından Krystal ve Kualo'yu şiddetle tavsiye edebilirim. (Yeşil web barındırıcılarının tam bir dizini için The Green Web Foundation'a bakın.)

Sonuç olarak

Umarım sizi, web sitelerimizi daha sürdürülebilir hale getirmek için çaba sarf etmeye değer olduğuna ikna edebilmişimdir. Özellikle bu süreçte web sitelerimizi de yaptığımız göz önüne alındığında:

• Daha performanslı,
• Daha kullanıcı dostu,
• Daha erişilebilir,
• Daha sunucu dostu,
• Arama motorları için daha iyi optimize edilmiştir.

Bazı insanların sürdürülebilir web tasarımı fikrine verdiği cevap - ki bu mantıksız değil - çevresel nedene çok küçük bir taviz gibi görünüyor. Elbette, ne kadar etkiniz olabileceği, üzerinde çalıştığınız web sitelerinin ne kadar meşgul olduğuna bağlıdır. Ancak, web'in biraz daha çevre dostu olmasına yardımcı olmanın yanı sıra, sürdürülebilir web tasarımı temelde en iyi web tasarımı uygulamasıdır.

Ayrıca kaçınamayacağınız karbon emisyonlarını dengelemeyi düşünmeye değer. Karbon dengeleme bazen alay konusu olur ve bunun iyi bir nedeni vardır. Dengelemeyle ilgili temel sorun, tipik olarak karbonun dengeleneceği sürenin oldukça uzun olmasıdır. Örneğin, ağaç dikerken, karbon ayırma miktarı için verilen rakam tipik olarak 100 yıllık bir süreyi temel alır. Dolayısıyla, karbon emisyonlarını azaltmak açısından, bu gerçekten bir çözüm değil. Ama hiç yoktan iyidir.

Myclimate'in sloganı, elinizden gelenin en iyisini yapmak ve gerisini telafi etmektir. Kendi karbon dengeleme planınızı yuvarlama hakkında bir blog yazısı yazdım. Ayrıca %1 For The Planet girişimini şiddetle tavsiye ediyorum. Son olarak, bir işletme sahibiyseniz ve daha iyi sosyal, çevresel ve ekonomik adalet görmek isteyen bir şirketler ittifakına katılmak istiyorsanız, Certified B Corporation planına göz atın.