Sürdürülebilir Web Tasarımı Nedir ve Nasıl Elde Edilir?
Yayınlanan: 2022-12-01
Birkaç ay önce bir arkadaşım pişmanlıkla "Gerçekten elektrikli bir araba istiyorum ama buna gücüm yetmiyor" dedi. O ve ben iklim değişikliğini ve ikimizin de alışkanlıklarımızda yaptığımız değişiklikleri tartışıyorduk.
kıkırdadım.
"Onların da enerji tükettiklerini biliyorsunuz ve elektrikli arabanızı yenilenebilir enerji kullanan bir prizden şarj etmezseniz, yine de çok fazla çevreyi kirletiyorsunuz, değil mi?"
Bunu bildiğini söyledi, ancak yine de kendisinin ve 20 yaşındaki VW'sinin daha sürdürülebilir, çevre dostu bir yaşam sürmeye yönelik tüm çabaları karşısında bir tokat olduğunu hissetti.
"Şuna ne dersin - sana dijital dünyan aracılığıyla karbon salınımını nasıl azaltacağını anlatabilirim" diye önerdim. Bana şaşkın bir bakış attı. Daha sonra ona, bazı istatistiklere göre, ortalama bir internet kullanıcısının normal bir araba ile 1000 km yol kat edecek kadar CO2 ürettiğini ve buna katkıda bulunan çeşitli aktiviteler olduğunu söyledim.
Ben telefonumdaki verileri çıkarana kadar bu fikirle neredeyse on dakika mücadele etti. Dürüst olmak gerekirse, ziyaret ettiğim her web sayfasının gizli bir maliyeti olduğunu anladığım gün aynı tepkiyi verdiğimi hatırladığım için onu suçlamadım - onu ayakta tutmak için harcanan enerji.
İnternetin kirli sırrı tabiri caizse.
Website Carbon Calculator'a göre, ortalama bir web sitesi sayfa görüntüleme başına yaklaşık 0,5 gram CO2 üretir, bu nedenle aylık 100.000 kez görüntülenen bir web sitesi için bu yılda 500 kg'dır. Bunun web sitesi başına olduğunu unutmayın!
Referans olarak, ortalama bir araba 1000 km'de 1200 kg CO2 yayar, bu nedenle, muazzam karbon ayak izi nedeniyle İnternet'in iklim değişikliği ve küresel ısınma üzerinde nasıl çok somut bir etkisi olduğunu görebilirsiniz.
Öyleyse soru şu: Sitenizin çevremiz üzerindeki etkisini azaltmak için bir web sitesi sahibi olarak ne yapabilirsiniz?
Elbette sürdürülebilir web tasarımı.
Kualo'da, sürdürülebilirlik kavramıyla içsel olarak o kadar iç içeyiz ki, bu konuyu keşfetmenin çok doğal olacağını hissettik. Bu makalede şunları öğreneceğiz:
Web sitenizin karbon ayak izini en aza indirmenize yardımcı olacak kesin planları size sağlamak istiyoruz, bu yüzden lafı daha fazla uzatmadan başlayalım!
Sürdürülebilir Web Tasarım Manifestosu'nda bu inancın neleri kapsayacağını kısaca açıklayan web sitesinde okuyabileceğimiz şey budur. Hızlıca 6 noktanın üzerinden geçelim:
Yukarıda belirtilen tüm noktaları göz önünde bulundurursanız, bu manifestonun sadece sürdürülebilir web tasarımı değil, aynı zamanda sürdürülebilir iş uygulamaları ve sürdürülebilir ekonomi için gerçekten temel olduğunu görebilirsiniz. Daha iyi bir geleceğe sahip olmak için, çevreye ve insanlara minimum düzeyde olumsuz etkisi olan anlamlı ve faydalı hizmetler ve ürünler sunan işletmelere ihtiyacımız var.
Başka bir deyişle, sürdürülebilir web tasarımına gidiyorsanız şunları yapmalısınız:
Şimdi, bu makalenin başında söylediklerime (ve İnternetin çevresel etkisine ilişkin bilgi grafiğimize) geri dönersek, bunun temelde sürekli artan bir enerji kara deliği olduğunu biliyoruz. Öte yandan, İnternet'in birçok insan için kritik öneme sahip olduğunu da biliyoruz ve onlar, bir araba veya dizüstü bilgisayarda olduğu gibi onu daha enerji tasarruflu versiyonuyla değiştiremezler.
Ama neyi takas edebileceğimizi biliyor musun?
Tabii ki web tasarımımız.
Ana nokta, web sitenizin boyutunun ve nasıl inşa edildiğinin ne kadar CO2 üreteceğini doğrudan etkilemesiyse, web sitesi sahipleri olarak ele almamız gereken şey budur.
Ancak web tasarımı söz konusu olduğunda yollarımızı değiştirmenin ek bir faydası var mı?
Kesinlikle evet derdim.
Bir pazarlamacı olarak, dijital çabalarımın tüm açılarını ve bunların projelerimi nasıl etkilediğini düşünmeye alışkınım. Kişisel düzeyde bile çevre dostu bir web sitesi kurmanın çok daha iyi olduğunu hemen söyleyebilirim. web tasarımı ve işte nedenlerinden bazıları:
Bariz nedenlerden dolayı, kullanıcılar zamanlarını boşa harcamadıkları için daha kısa kullanıcı yolculukları tercih edilmektedir. Müşteri deneyiminin yanı sıra, ihtiyaç duyduklarını bulmak için daha az sayfa ziyaret edecekler ve böylece ziyaretlerinden kaynaklanan karbon emisyonlarını azaltacaklar.
(resim kaynağı: https://www.appcues.com/blog/user-journey-map)
Kullanıcı yolculukları kavramını daha iyi tanımak ve ardından kullanıcı yolculuk haritalarınızı özgürce tasarladıktan sonra web tasarımınızı bunlara uyarlamak iyi bir fikirdir.
Sürtünme noktalarını önleyen iyi bir kullanıcı deneyimi (UX), kaçınılmaz olarak hem daha düşük enerji tüketimi hem de daha mutlu müşterilerle sonuçlanacaktır.
Yenilenebilir enerji ile desteklenen sürdürülebilir barındırma sunan bir sağlayıcı seçmek, yapılması gereken bir şeydir. Genel çevre politikalarına bakmak ve yer sağlayıcınızın CO2 emisyonlarını telafi etmek için ek adımlar atıp atmadığını ve/veya başka sürdürülebilirlik uygulamalarına dahil olup olmadığını kontrol etmek de iyi bir fikirdir.
Bir sitenin önbelleği yoksa, sunucuyu daha çok çalıştırıyorsunuz demektir. Birisi web sitenizdeki bir sayfaya her eriştiğinde, sayfa içeriği PHP kodunu işleyerek, veritabanında sorgular yaparak ve bunu web sitenizi görüntüleyen HTML içeriğine dönüştürerek anında oluşturulmalıdır.
Bu, işlem sırasında enerji tüketen sunucunun CPU, bellek ve diskinin daha fazlasını kullanır. Sunucunun bunu her ziyaretçi ve her sayfa için yapması gerekir, dolayısıyla ne kadar çok ziyaretçiniz ve sayfanız olursa, o kadar çok enerji tüketirsiniz.
Önbelleğe alma yerinde olduğundan, bu yoğun iş yükünün çoğu yalnızca bir ziyaretçi bir sayfayı ilk kez istediğinde yapılır. Ortaya çıkan HTML daha sonra bir önbellekte saklanır, böylece sonraki her sayfa yüklemesinin tüm bu ağır işleri yapmasına gerek kalmaz.
Dahası, sayfalarınız daha hızlı yüklenir. Bu sadece siz ve ziyaretçileriniz için bir kazanç değil, aynı zamanda ziyaretçilerinizin sayfanın yüklenmesini beklerken boşta daha az zaman harcaması ve bu süreçte daha az enerji tüketmesi anlamına da gelir.
Web sitelerini önbelleğe almanın birçok yolu vardır, Kualo'da sayfa önbelleğe alma için LiteSpeed Cache'i tercih ediyoruz ve ayrıca veritabanı sorgularını önbelleğe almak için Redis ve Memcached'e sahibiz. Süper hızlı web siteleri ve daha iyi sürdürülebilirlik - sevilmeyecek ne var?
Pazarlama odaklı eklentilerde veya unuttuğumuz yinelenen eklentilerde genellikle durum budur. Neye sahip olduğunuzu ve ardından neye ihtiyacınız olduğunu değerlendirin ve önyüklemeyi başka bir şeye verin.
(Johnson Banks ajansı tarafından Duolingo için oluşturulan özel yazı tipi)
Tipik özel yazı tipi dosyanız, tek bir ağırlık eklerken kolayca 200 kb'yi aşabilir. Çeşitli ağırlıklar ve yazı biçimleri kullanırsanız, bu kaçınılmaz olarak artacak ve böylece hem hız hem de enerji tüketimini etkileyecektir.
Bu nedenle, özel yazı tiplerini yalnızca markanız ve pratik amaçlarınız için gerçekten önemli olduğunu düşünüyorsanız kullanmanız önerilir.
https://youtu.be/eY-VyLd2t-Q
WordPress için LiteSpeed Cache, otomatik görüntü optimizasyonu içerir, bu nedenle bunu kendi başınıza yapma konusunda endişelenmenize gerek yoktur. Dahası, PNG veya JPG resimlere kıyasla yaklaşık %25 daha küçük olan WebP gibi modern dosya formatlarını kullanmak için resimleri dönüştürebilir.
Optimizasyonun ötesinde, kullanımlarının haklı ve amaca uygun olup olmadığını da dikkate almamız gerekiyor.
Örneğin, bazı ürün fotoğrafları gereksiz olabilir (örneğin çok benzer açılar). Diğer durumlarda, rastgele stok görüntüler gibi sayfada kullanılan görüntüler, SVG grafikleri gibi alternatiflerle kolayca değiştirilebilir veya aynı etki CSS stilleriyle elde edilebilir.
Bu, özellikle boyutu büyük olabilecek çok sayıda resim veya video içeriyorsa, bu verilerin tümü, hiç görülmese bile internette dolaşmak zorundadır.
Geç yükleme, bu içeriği yalnızca kullanıcı sayfanızı aşağı kaydırırken talep ettiğiniz anlamına gelir. Bu bölümler, içerik görüntülenmeden hemen önce görünecektir, bu nedenle ziyaretçilerin bakış açısından, sanki her zaman oradaymış gibi görünür - algılanabilir bir fark yoktur.
Yalnızca gereksiz veri iletmekten kaçınmakla kalmaz, aynı zamanda web sitenizin ağırlığını azaltarak Sayfa Hızı puanınızı da yükseltirsiniz.
Bazı uygulamalar yerleşik olarak yavaş yükleme ile birlikte gelir veya bir eklenti ile sabitlenebilir. WordPress için LiteSpeed Cache, resimlerden, videolardan, gömülü içerikten ve hatta sayfanız çok uzunsa tüm HTML bloklarından her şeyi geç yükleme yeteneğine sahip bir yavaş yükleme özelliği içerir.
Animasyonların tipik olarak taktiksel bir amacı yoktur, bu nedenle onları olabildiğince az kullanın. Videolarda, hangi amaca hizmet edecekleri kesinlikle önemlidir, bu nedenle kullanıcılarınız için yararlı olduklarını düşünüyorsanız, onları gerçekten kullanın, mümkün olduğunca optimize edildiklerinden emin olun.
Genellikle HTML, CSS ve Javascript kodunuz boşluklar, satır sonları veya yorumlar gibi ek veriler içerir. Bu boşluklar veya yorumlar, yalnızca bir geliştiricinin kodu kolayca okuyup anlayabilmesi için kullanışlıdır, ancak tarayıcının kodunuzu nasıl yorumlayacağı konusunda hiçbir fark yaratmaz.
Kodunuzu küçültmek tüm bu gereksiz ağırlığı kaldırır, internet üzerinden aktarılması gereken dosyaların boyutunu azaltır ve sitenizin daha hızlı yüklenmesini sağlar.
WordPress için LiteSpeed Cache bu yönü sizin yerinize halleder, ancak diğer çoğu uygulamada da bir eklenti aracılığıyla benzer bir özellik bulunur.
Sitenizde asla kullanmadığınız tonlarca farklı düzen, stil veya işlev içeren bir tema veya sayfa oluşturucu kullanmış olabilirsiniz.
Kodun tamamı CSS ve JS dosyalarınızda kalacak, bu da internet üzerinden aktarılması gereken veri miktarını artıracak ve sitenizin yüklenmesini sebepsiz yere yavaşlatacaktır.
Tam olarak hangi kodun manuel olarak çıkarılacağını bulmak zor olabilir, ancak WordPress için LiteSpeed Cache, kullanılmayan CSS'yi otomatik olarak kaldırmanıza olanak tanır. Bu, kullanılmayan CSS'yi çıkarır ve her sayfa için benzersiz bir CSS dosyası oluşturur. Yalnızca birkaç sayfanız varsa bu faydalı olabilir, ancak sitenizde çok sayıda sayfa varsa, tek bir CSS dosyası kullanmak daha verimli olabilir.
Javascript'i çıkarmak daha karmaşık olabilir, ancak LiteSpeed en azından kullanıcı etkinliği algılanana kadar yüklenmesini geciktirebilir. Ekranın üst kısmındaki içerik için gerekmediği sürece bu uygun olabilir.
Sonuç olarak en iyi tavsiye, sayfa oluşturucuları veya şişirilmiş eklentileri mümkün olduğunca kullanmaktan kaçınmak ve gerçekten gerekli olduğunu bildiğiniz temiz kod kullanmaktır.
Aradıklarını bulmak için çok daha fazla zaman harcayacaklar ve bu da daha fazla enerji tüketimine neden olacak.
Bunu önlemek için, kullanıcılara en uygun deneyimi sağlamak üzere tasarımınızın bu değişkenlerin mümkün olduğunca çoğuna iyi uyum sağladığından emin olun.
Daha da önemlisi, sürdürülebilirlik açısından bakıldığında, dünyanın farklı bölgelerine veri aktarımı çok fazla enerji gerektirdiğinden bu, CO2'nin azaltılmasına yardımcı olur. Ve verilerin ne kadar uzağa gitmesi gerekiyorsa, o kadar fazla enerji gerektirir.
Bu adımı bir şekilde atlarsanız, CDN aracılığıyla sunulan görüntülerin boyutunun genellikle küçüldüğünü belirtmekte fayda var. Birçok CDN, görüntünün boyutunu, piksel yoğunluğunu, biçimini ve sıkıştırmasını azaltmak da dahil olmak üzere görüntü optimizasyonu için size araçlar sağlar.
Elbette Cloudflare gibi yenilenebilir enerji kullanan bir CDN seçmek önemlidir.
Hangi sayfaların güncelliğini yitirdiğini veya düşük performans gösterdiğini değerlendirmek için bunları manuel olarak inceleyebilir veya Google Analytics'i kullanabilirsiniz. Daha sonra bunları yararlı, güncel içeriğe sahip olacak şekilde uyarlayıp uyarlayamayacağınıza veya çöp kutusuna atılacaklarını belirleyip belirlemeyeceğinize karar verebilirsiniz.
Ağaç diken ve karbonu dengeleyen projelere katılmak, yalnızca web tasarımınızın değil, genel olarak işletmenizin sürdürülebilirliğini iyileştirmenin harika bir yoludur. CO2 emisyonlarını azaltma söz konusu olduğunda, ağaçlar onları emip oksijene dönüştürdükleri için mutlak kazananlardır.
Sizi Ecologi'deki ortaklarımızı (veya gerçekten başka benzer organizasyonları) ziyaret etmeye ve o ağaçları dikmeye davet ediyoruz!
kıkırdadım.
"Onların da enerji tükettiklerini biliyorsunuz ve elektrikli arabanızı yenilenebilir enerji kullanan bir prizden şarj etmezseniz, yine de çok fazla çevreyi kirletiyorsunuz, değil mi?"
Bunu bildiğini söyledi, ancak yine de kendisinin ve 20 yaşındaki VW'sinin daha sürdürülebilir, çevre dostu bir yaşam sürmeye yönelik tüm çabaları karşısında bir tokat olduğunu hissetti.
"Şuna ne dersin - sana dijital dünyan aracılığıyla karbon salınımını nasıl azaltacağını anlatabilirim" diye önerdim. Bana şaşkın bir bakış attı. Daha sonra ona, bazı istatistiklere göre, ortalama bir internet kullanıcısının normal bir araba ile 1000 km yol kat edecek kadar CO2 ürettiğini ve buna katkıda bulunan çeşitli aktiviteler olduğunu söyledim.
Ben telefonumdaki verileri çıkarana kadar bu fikirle neredeyse on dakika mücadele etti. Dürüst olmak gerekirse, ziyaret ettiğim her web sayfasının gizli bir maliyeti olduğunu anladığım gün aynı tepkiyi verdiğimi hatırladığım için onu suçlamadım - onu ayakta tutmak için harcanan enerji.
İnternetin kirli sırrı tabiri caizse.
Website Carbon Calculator'a göre, ortalama bir web sitesi sayfa görüntüleme başına yaklaşık 0,5 gram CO2 üretir, bu nedenle aylık 100.000 kez görüntülenen bir web sitesi için bu yılda 500 kg'dır. Bunun web sitesi başına olduğunu unutmayın!
Referans olarak, ortalama bir araba 1000 km'de 1200 kg CO2 yayar, bu nedenle, muazzam karbon ayak izi nedeniyle İnternet'in iklim değişikliği ve küresel ısınma üzerinde nasıl çok somut bir etkisi olduğunu görebilirsiniz.
Öyleyse soru şu: Sitenizin çevremiz üzerindeki etkisini azaltmak için bir web sitesi sahibi olarak ne yapabilirsiniz?
Elbette sürdürülebilir web tasarımı.
Kualo'da, sürdürülebilirlik kavramıyla içsel olarak o kadar iç içeyiz ki, bu konuyu keşfetmenin çok doğal olacağını hissettik. Bu makalede şunları öğreneceğiz:
- Sürdürülebilir web tasarımı nedir?
- Neden sürdürülebilir web tasarımına ihtiyacımız var?
- Sürdürülebilir web tasarımının faydaları nelerdir?
- Sürdürülebilir web tasarımı en iyi uygulamaları
Web sitenizin karbon ayak izini en aza indirmenize yardımcı olacak kesin planları size sağlamak istiyoruz, bu yüzden lafı daha fazla uzatmadan başlayalım!
Sürdürülebilir web tasarımı nedir?
“Sürdürülebilir web tasarımı, insanlara ve gezegene öncelik veren web hizmetleri tasarlama yaklaşımıdır. Sürdürülebilir Web Manifestosu'nun ilkelerine saygı duyan dijital ürünler ve hizmetler sunar: temiz, verimli, açık, dürüst, yenileyici ve dirençli.Sürdürülebilir Web Tasarım Manifestosu'nda bu inancın neleri kapsayacağını kısaca açıklayan web sitesinde okuyabileceğimiz şey budur. Hızlıca 6 noktanın üzerinden geçelim:
- Temiz: Web siteniz tarafından kullanılan hizmetler yenilenebilir enerji kaynakları tarafından desteklenmelidir, yani web barındırma hizmetiniz çevre dostu olmalıdır.
- Verimli: Sağladığınız hizmetler, mümkün olan en az miktarda enerji (ve malzeme) kullanmak üzere tamamen optimize edilmelidir.
- Açık: sağladığınız hizmetler herkes tarafından erişilebilir olmalı ve kullanıcıların verileri üzerinde tam kontrole sahip olmasına izin vermelidir.
- Dürüst: web siteniz yanıltıcı içerik sağlamaz ve/veya web tasarımı yoluyla kullanıcıları yanlış yönlendirmeye çalışmaz
- Yenileyici: Hizmetleriniz, toplulukları ve çevreyi desteklemeye yönelik bir ekonomiye katkıda bulunacaktır.
- Dirençli: Hizmetleriniz, en çok ihtiyaç duyuldukları zaman ve yerde sağlanacaktır.
Yukarıda belirtilen tüm noktaları göz önünde bulundurursanız, bu manifestonun sadece sürdürülebilir web tasarımı değil, aynı zamanda sürdürülebilir iş uygulamaları ve sürdürülebilir ekonomi için gerçekten temel olduğunu görebilirsiniz. Daha iyi bir geleceğe sahip olmak için, çevreye ve insanlara minimum düzeyde olumsuz etkisi olan anlamlı ve faydalı hizmetler ve ürünler sunan işletmelere ihtiyacımız var.
Başka bir deyişle, sürdürülebilir web tasarımına gidiyorsanız şunları yapmalısınız:
- Mümkün olan en az miktarda kaynak kullanın
- Tasarladığınız her sayfanın bir amacı olmasını sağlayan iyi düşünülmüş bir içerik planı geliştirin ve uygulayın.
- Optimize edilmiş bir web sitesi yapısından yararlanın
- Kullanıcılarınızı, yapmak istemeyecekleri eylemleri gerçekleştirmeleri için herhangi bir şekilde yanıltmaktan kaçının.
Sürdürülebilir Web Tasarımı Neden Önemli?
Bu nedenle, internetin toplum için sayısız faydası vardır, ancak çevresel olarak çok büyük bir maliyeti vardır. Ortalama bir web kullanıcısı, bilgisayarında veya mobil cihazında günde 5-6 saat çevrimiçi içerik tüketir. Teknolojiyi her zamankinden daha sık kullanmaya devam ettikçe, bu yalnızca gelecek yıllarda milyarlarca insan 8 farklı cihaz türüyle dünyanın her yerinden web sitelerinde gezinene kadar artacaktır!Şimdi, bu makalenin başında söylediklerime (ve İnternetin çevresel etkisine ilişkin bilgi grafiğimize) geri dönersek, bunun temelde sürekli artan bir enerji kara deliği olduğunu biliyoruz. Öte yandan, İnternet'in birçok insan için kritik öneme sahip olduğunu da biliyoruz ve onlar, bir araba veya dizüstü bilgisayarda olduğu gibi onu daha enerji tasarruflu versiyonuyla değiştiremezler.
Ama neyi takas edebileceğimizi biliyor musun?
Tabii ki web tasarımımız.
Ana nokta, web sitenizin boyutunun ve nasıl inşa edildiğinin ne kadar CO2 üreteceğini doğrudan etkilemesiyse, web sitesi sahipleri olarak ele almamız gereken şey budur.
Sürdürülebilir Web Tasarımının Faydaları
Şimdi, genel olarak konuşursak, bunu okuyorsanız, sürdürülebilir bir web sitesi istemek için zaten iyi bir nedeniniz var ve bu neden çevrenin korunmasıyla bağlantılı. Temel olarak, gezegen için bir kahraman olmak istiyorsun ve bunun için sana hayranım.Ancak web tasarımı söz konusu olduğunda yollarımızı değiştirmenin ek bir faydası var mı?
Kesinlikle evet derdim.
Bir pazarlamacı olarak, dijital çabalarımın tüm açılarını ve bunların projelerimi nasıl etkilediğini düşünmeye alışkınım. Kişisel düzeyde bile çevre dostu bir web sitesi kurmanın çok daha iyi olduğunu hemen söyleyebilirim. web tasarımı ve işte nedenlerinden bazıları:
- Daha az harcarsınız : Tasarımcı harcamalarınızdan içerik üretiminize kadar her ek şey size paraya mal olur. Daha karmaşık tasarımlar size paraya mal olur, daha fazla metin yazarlığı ve içerik size paraya mal olur vb. Minimalist olmak ve yalnızca gerçekten ihtiyacınız olan şeylere sahip olmak, harcamaları kısmak için mükemmel bir yoldur.
- Müşterileriniz daha memnun olacak: Bir zamanlar web siteleri bir yenilikken, insanlar çan ve ıslıklardan zevk alırken, şimdi herkes tüm gün sörf yaparak geçirdikleri için bunlara boğulmuş durumda. Bu, ortalama bir kullanıcı için web siteniz ne kadar net olursa, X düğmesine basıp zamanını boşa harcamayan birine gitmek yerine istediklerini bulma olasılıklarının o kadar yüksek olacağı anlamına gelir.
- SEO çabalarınız daha etkili olacak : Google sıralaması söz konusu olduğunda hız birkaç yıldır bir şey oldu, ancak her geçen yıl SEO söz konusu olduğunda bunun giderek daha kritik hale geldiğini görüyoruz. Google, yavaş web sitelerinden NEFRET eder ve kesinlikle daha hafif ve daha hızlı sitelere öncelik verir. Bu arada bu, hepimizin bildiği gibi müşteri deneyimi için de geçerli.
Web Sitenizi Nasıl Sürdürülebilir Hale Getirirsiniz?
1. Kullanıcı yolculuğunuzu planlayarak başlayın
Konsepte aşina değilseniz, kullanıcı yolculuğu, bir kullanıcının sitenizi ziyaret ederken belirli bir hedefe (kayıt olma, satın alma vb.) ulaşmak için gerçekleştireceği eylemlerin sırasını ifade eder.Bariz nedenlerden dolayı, kullanıcılar zamanlarını boşa harcamadıkları için daha kısa kullanıcı yolculukları tercih edilmektedir. Müşteri deneyiminin yanı sıra, ihtiyaç duyduklarını bulmak için daha az sayfa ziyaret edecekler ve böylece ziyaretlerinden kaynaklanan karbon emisyonlarını azaltacaklar.
(resim kaynağı: https://www.appcues.com/blog/user-journey-map)
Kullanıcı yolculukları kavramını daha iyi tanımak ve ardından kullanıcı yolculuk haritalarınızı özgürce tasarladıktan sonra web tasarımınızı bunlara uyarlamak iyi bir fikirdir.
Sürtünme noktalarını önleyen iyi bir kullanıcı deneyimi (UX), kaçınılmaz olarak hem daha düşük enerji tüketimi hem de daha mutlu müşterilerle sonuçlanacaktır.
2. Çevre dostu bir barındırma sağlayıcısı seçin
Sonunda bir barındırma şirketi olduğumuz için bunun biraz kendi kendine hizmet ettiğini biliyorum, ancak gerçek şu ki, karbon ayak izinizi azaltmak istiyorsanız, web sitenize her gün kimin güç verdiği kesinlikle önemli olacaktır. Veri merkezleri maalesef internete güç sağlayan enerjinin büyük bir bölümünü tüketiyor. Hızla %100 yenilenebilir kaynaklara geçiş yapmamız esastır.Yenilenebilir enerji ile desteklenen sürdürülebilir barındırma sunan bir sağlayıcı seçmek, yapılması gereken bir şeydir. Genel çevre politikalarına bakmak ve yer sağlayıcınızın CO2 emisyonlarını telafi etmek için ek adımlar atıp atmadığını ve/veya başka sürdürülebilirlik uygulamalarına dahil olup olmadığını kontrol etmek de iyi bir fikirdir.
3. Her şeyi önbelleğe alın!
Pek çok web sitesinin yaptığı gibi (WordPress, Magento, Drupal vb.) PHP tabanlı bir uygulama kullanıyorsanız, önbelleğe alma sürdürülebilirlik için yapılması gereken bir işlemdir.Bir sitenin önbelleği yoksa, sunucuyu daha çok çalıştırıyorsunuz demektir. Birisi web sitenizdeki bir sayfaya her eriştiğinde, sayfa içeriği PHP kodunu işleyerek, veritabanında sorgular yaparak ve bunu web sitenizi görüntüleyen HTML içeriğine dönüştürerek anında oluşturulmalıdır.
Bu, işlem sırasında enerji tüketen sunucunun CPU, bellek ve diskinin daha fazlasını kullanır. Sunucunun bunu her ziyaretçi ve her sayfa için yapması gerekir, dolayısıyla ne kadar çok ziyaretçiniz ve sayfanız olursa, o kadar çok enerji tüketirsiniz.
Önbelleğe alma yerinde olduğundan, bu yoğun iş yükünün çoğu yalnızca bir ziyaretçi bir sayfayı ilk kez istediğinde yapılır. Ortaya çıkan HTML daha sonra bir önbellekte saklanır, böylece sonraki her sayfa yüklemesinin tüm bu ağır işleri yapmasına gerek kalmaz.
Dahası, sayfalarınız daha hızlı yüklenir. Bu sadece siz ve ziyaretçileriniz için bir kazanç değil, aynı zamanda ziyaretçilerinizin sayfanın yüklenmesini beklerken boşta daha az zaman harcaması ve bu süreçte daha az enerji tüketmesi anlamına da gelir.
Web sitelerini önbelleğe almanın birçok yolu vardır, Kualo'da sayfa önbelleğe alma için LiteSpeed Cache'i tercih ediyoruz ve ayrıca veritabanı sorgularını önbelleğe almak için Redis ve Memcached'e sahibiz. Süper hızlı web siteleri ve daha iyi sürdürülebilirlik - sevilmeyecek ne var?
4. Kod yazıyorsanız temiz kod olduğundan emin olun
Kullanıcıların çoğu bir tür CMS kullanır, ancak yine de bazı kodlar yazarsanız, bunun anlaşılmasının, değiştirilmesinin kolay olduğundan ve gereksiz tekrarlardan ve işlemlerden kaçındığından emin olun.5. Gereksiz eklentilerden ve eklentilerden kaçının
Bu, yukarıdaki kuralla ilgilidir, ancak gerçekten WordPress, Magento, Craft, Laravel ve benzeri bir CMS kullanan kişiler içindir. Bazen eklenti piyasasının bize sunduğu tüm imkanlar karşısında çok heyecanlanabilir ve sitemizi gereksiz eklentilere boğabiliriz.Pazarlama odaklı eklentilerde veya unuttuğumuz yinelenen eklentilerde genellikle durum budur. Neye sahip olduğunuzu ve ardından neye ihtiyacınız olduğunu değerlendirin ve önyüklemeyi başka bir şeye verin.
6. Minimum düzeyde özel yazı tiplerinden kaçının veya kullanın
Bu şaşırtıcı gelebilir, ancak özel yazı tipleri kesinlikle web sitenizin dosya boyutunu artırabilir].(Johnson Banks ajansı tarafından Duolingo için oluşturulan özel yazı tipi)
Tipik özel yazı tipi dosyanız, tek bir ağırlık eklerken kolayca 200 kb'yi aşabilir. Çeşitli ağırlıklar ve yazı biçimleri kullanırsanız, bu kaçınılmaz olarak artacak ve böylece hem hız hem de enerji tüketimini etkileyecektir.
Bu nedenle, özel yazı tiplerini yalnızca markanız ve pratik amaçlarınız için gerçekten önemli olduğunu düşünüyorsanız kullanmanız önerilir.
7. Medya dosyalarını akıllıca kullanın (ve optimize edin)
Web sitenizdeki tüm görüntülerin boyut olarak optimize edilmesi gerektiğini söylemeye gerek yok. Bunu web sitesi hızıyla (ve ardından SEO ile) ilgili en iyi uygulamalardan biliyoruz. Bazen müşterilerin sitelerinin neden yavaş olduğunu sorduğunu ve süper büyük orijinaller yükledikleri için ana sayfanın 4MB resim içerdiğini gördüklerini görüyoruz! Aynı görseller, optimize edilerek kalitesinde herhangi bir azalma olmadan sunulabilir.https://youtu.be/eY-VyLd2t-Q
WordPress için LiteSpeed Cache, otomatik görüntü optimizasyonu içerir, bu nedenle bunu kendi başınıza yapma konusunda endişelenmenize gerek yoktur. Dahası, PNG veya JPG resimlere kıyasla yaklaşık %25 daha küçük olan WebP gibi modern dosya formatlarını kullanmak için resimleri dönüştürebilir.
Optimizasyonun ötesinde, kullanımlarının haklı ve amaca uygun olup olmadığını da dikkate almamız gerekiyor.
Örneğin, bazı ürün fotoğrafları gereksiz olabilir (örneğin çok benzer açılar). Diğer durumlarda, rastgele stok görüntüler gibi sayfada kullanılan görüntüler, SVG grafikleri gibi alternatiflerle kolayca değiştirilebilir veya aynı etki CSS stilleriyle elde edilebilir.
8. Katlama içeriğinin altında yavaş yükleme
Web sayfalarınızın her biri, 'ekranın alt kısmında' çok sayıda içerik içerebilir - yani, ziyaretçi sayfanızı aşağı kaydırmadığı sürece görünmeyen içerik.Bu, özellikle boyutu büyük olabilecek çok sayıda resim veya video içeriyorsa, bu verilerin tümü, hiç görülmese bile internette dolaşmak zorundadır.
Geç yükleme, bu içeriği yalnızca kullanıcı sayfanızı aşağı kaydırırken talep ettiğiniz anlamına gelir. Bu bölümler, içerik görüntülenmeden hemen önce görünecektir, bu nedenle ziyaretçilerin bakış açısından, sanki her zaman oradaymış gibi görünür - algılanabilir bir fark yoktur.
Yalnızca gereksiz veri iletmekten kaçınmakla kalmaz, aynı zamanda web sitenizin ağırlığını azaltarak Sayfa Hızı puanınızı da yükseltirsiniz.
Bazı uygulamalar yerleşik olarak yavaş yükleme ile birlikte gelir veya bir eklenti ile sabitlenebilir. WordPress için LiteSpeed Cache, resimlerden, videolardan, gömülü içerikten ve hatta sayfanız çok uzunsa tüm HTML bloklarından her şeyi geç yükleme yeteneğine sahip bir yavaş yükleme özelliği içerir.
9. Video ve animasyon kullanımını sınırlayın
Web sitenizi bir Word sayfası gibi göstermenize ve veba gibi videolardan ve animasyonlardan kaçınmanıza gerek yok, ancak görüntülerde olduğu gibi, bunları tutumlu kullanın.Animasyonların tipik olarak taktiksel bir amacı yoktur, bu nedenle onları olabildiğince az kullanın. Videolarda, hangi amaca hizmet edecekleri kesinlikle önemlidir, bu nedenle kullanıcılarınız için yararlı olduklarını düşünüyorsanız, onları gerçekten kullanın, mümkün olduğunca optimize edildiklerinden emin olun.
10. Sitenizde HTML, CSS ve Javascript'i küçültün
Yine, bunu zaten hız amacıyla yapıyor olabilirsiniz, ancak yapmıyorsanız, bunun arkasındaki nedeni hızlıca gözden geçirelim.Genellikle HTML, CSS ve Javascript kodunuz boşluklar, satır sonları veya yorumlar gibi ek veriler içerir. Bu boşluklar veya yorumlar, yalnızca bir geliştiricinin kodu kolayca okuyup anlayabilmesi için kullanışlıdır, ancak tarayıcının kodunuzu nasıl yorumlayacağı konusunda hiçbir fark yaratmaz.
Kodunuzu küçültmek tüm bu gereksiz ağırlığı kaldırır, internet üzerinden aktarılması gereken dosyaların boyutunu azaltır ve sitenizin daha hızlı yüklenmesini sağlar.
WordPress için LiteSpeed Cache bu yönü sizin yerinize halleder, ancak diğer çoğu uygulamada da bir eklenti aracılığıyla benzer bir özellik bulunur.
11. Gereksiz CSS ve Javascript'i kaldırın
Küçültme gereksiz verileri ayıklarken, bu kodlardan herhangi birinin siteniz tarafından gerçekten kullanılıp kullanılmadığını analiz etmez.Sitenizde asla kullanmadığınız tonlarca farklı düzen, stil veya işlev içeren bir tema veya sayfa oluşturucu kullanmış olabilirsiniz.
Kodun tamamı CSS ve JS dosyalarınızda kalacak, bu da internet üzerinden aktarılması gereken veri miktarını artıracak ve sitenizin yüklenmesini sebepsiz yere yavaşlatacaktır.
Tam olarak hangi kodun manuel olarak çıkarılacağını bulmak zor olabilir, ancak WordPress için LiteSpeed Cache, kullanılmayan CSS'yi otomatik olarak kaldırmanıza olanak tanır. Bu, kullanılmayan CSS'yi çıkarır ve her sayfa için benzersiz bir CSS dosyası oluşturur. Yalnızca birkaç sayfanız varsa bu faydalı olabilir, ancak sitenizde çok sayıda sayfa varsa, tek bir CSS dosyası kullanmak daha verimli olabilir.
Javascript'i çıkarmak daha karmaşık olabilir, ancak LiteSpeed en azından kullanıcı etkinliği algılanana kadar yüklenmesini geciktirebilir. Ekranın üst kısmındaki içerik için gerekmediği sürece bu uygun olabilir.
Sonuç olarak en iyi tavsiye, sayfa oluşturucuları veya şişirilmiş eklentileri mümkün olduğunca kullanmaktan kaçınmak ve gerçekten gerekli olduğunu bildiğiniz temiz kod kullanmaktır.
12. Web sitenizin farklı cihazlarda düzgün çalıştığından emin olun
Sitenizi çok sayıda ekran boyutunda, tarayıcıda, cihazda ve bant genişliği hızında test etmek oldukça zaman alabilir, ancak sürdürülebilir web tasarımıyla sıkı bir şekilde bağlantılıdır. Bu, n.1 noktasıyla ilgilidir, yani içeriğin ve tasarımın yanlış görüntülenmesi, zayıf UX'e ve kullanıcılar arasında çok fazla kafa karışıklığına yol açacaktır.Aradıklarını bulmak için çok daha fazla zaman harcayacaklar ve bu da daha fazla enerji tüketimine neden olacak.
Bunu önlemek için, kullanıcılara en uygun deneyimi sağlamak üzere tasarımınızın bu değişkenlerin mümkün olduğunca çoğuna iyi uyum sağladığından emin olun.
13. İçeriğinizi sunmak için bir CDN kullanın
Peki CDN nedir? İçerik dağıtım ağı (CDN), farklı coğrafi konumlardaki sunuculardan oluşan bir ağdır. İçeriğinizin daha hızlı yüklenmesine yardımcı olacakları yol, kullanıcılarınıza yakın bir konumdan sunmaktır. Başka bir deyişle, bu hem hız hem de kullanıcı deneyimi ile bağlantılıdır.Daha da önemlisi, sürdürülebilirlik açısından bakıldığında, dünyanın farklı bölgelerine veri aktarımı çok fazla enerji gerektirdiğinden bu, CO2'nin azaltılmasına yardımcı olur. Ve verilerin ne kadar uzağa gitmesi gerekiyorsa, o kadar fazla enerji gerektirir.
Bu adımı bir şekilde atlarsanız, CDN aracılığıyla sunulan görüntülerin boyutunun genellikle küçüldüğünü belirtmekte fayda var. Birçok CDN, görüntünün boyutunu, piksel yoğunluğunu, biçimini ve sıkıştırmasını azaltmak da dahil olmak üzere görüntü optimizasyonu için size araçlar sağlar.
Elbette Cloudflare gibi yenilenebilir enerji kullanan bir CDN seçmek önemlidir.
14. Stratejiye uygun olduğundan emin olmak için içeriğinizi denetleyin
Büyük bir web siteniz varsa, içeriğini periyodik olarak denetlemek çok önemlidir. Bazı sayfalar kaçınılmaz olarak geçerliliğini yitirecek veya artık amaçlarına hizmet etmeyecektir. Bu özellikle bilgi tabanları için geçerlidir, ancak aynı zamanda ürün sayfaları, blog gönderileri vb. için de geçerlidir.Hangi sayfaların güncelliğini yitirdiğini veya düşük performans gösterdiğini değerlendirmek için bunları manuel olarak inceleyebilir veya Google Analytics'i kullanabilirsiniz. Daha sonra bunları yararlı, güncel içeriğe sahip olacak şekilde uyarlayıp uyarlayamayacağınıza veya çöp kutusuna atılacaklarını belirleyip belirlemeyeceğinize karar verebilirsiniz.
15. Karbon ayak izinizi dengeleyerek CO2 emisyonlarınızı azaltın
İklim pozitif bir işletme olmak, sürdürülebilirliğimizi bir üst seviyeye taşımak açısından muhtemelen verdiğimiz en iyi kararlardan biriydi. Bu yolculuğu önümüzdeki yıllarda da sürdürmek amacıyla bugüne kadar 50.000'den fazla ağaç diktik ve 2000 tondan fazla CO2'yi dengeledik.Ağaç diken ve karbonu dengeleyen projelere katılmak, yalnızca web tasarımınızın değil, genel olarak işletmenizin sürdürülebilirliğini iyileştirmenin harika bir yoludur. CO2 emisyonlarını azaltma söz konusu olduğunda, ağaçlar onları emip oksijene dönüştürdükleri için mutlak kazananlardır.
Sizi Ecologi'deki ortaklarımızı (veya gerçekten başka benzer organizasyonları) ziyaret etmeye ve o ağaçları dikmeye davet ediyoruz!