Sürdürülebilir web tasarımı nedir? Dünyaya dostça ve iş için iyi bir web nasıl tasarlanır.

Bugün çevrimiçi dünyanın "hızlı" ama şaşırtıcı bir şekilde "ağır" olduğunu hissettiniz mi? Güzel bir web sitemiz var. Animasyon muhteşem olan yüksek çözünürlüklü videolar vardır, ancak bazen ... web sitesi bitmeden önce. Gizlice yanlışlıkla sosyal medyayı sürüyoruz.

Bu sorun sadece kullanıcıların "hızı" veya "sabır" ile ilgili değil, aynı zamanda dünyanın her tıklamada ödediği görünmez ve "çevresel maliyetleri" asla düşünemeyeceğimiz "maliyetleri" gizler. Ancak modern işletmelerin bilmesi gereken önemli bir stratejidir!

Hayattaki asıl sorun

Yüz binlerce baht için web sitesine yatırım yapan bir işletme sahibi olduğunuzu hayal edin. Web sitesi çok güzel. İşlev tamamlandı, ancak sonsuz problemlerle karşılaşıyor.

• Müşteriler, özellikle mobil cihazlarda açılırken, maalesef satma fırsatını kaybetmekle sonuçlanan "yavaş web" dan şikayet ediyorlar.
• Books oranı (iade oranı) yüksektir, çünkü çoğu kişi web indirmeyi bitirmeden önce bekleyemez ve kapanır.
• Her yıl daha pahalı olan barındırma ve CDN (içerik dağıtım ağı) daha pahalı, çünkü web siteniz her ekranda çok fazla kaynak (bant genişliği) kullanır.
• İyi içerik yapmasına rağmen SEO sıralaması hareket etmez Bunun nedeni, çekirdek web canlı iyi olmaması olabilir, bu da kısmen web yükleme hızından kaynaklanmaktadır.

Bu sorunlar teknik gibi görünüyor, ancak aslında hem kullanıcı deneyimini hem de işletmenizin maliyetini doğrudan etkileyen "gerektiğinden daha ağır" olan web sitesinin "belirtileri" dir.

İllüstrasyonlar istemi:

Kullanıcının görüntüsü mobil ekrana sinirlilikle bakıyor. Bir yükleme simgesi var. Ekranda döndürün. Yan, daha yüksek bir hemen çıkma oranı grafiğine sahiptir. Ve uçan gümüş simgesi hem müşterilerin hem de masrafların yavaşlığını aktarır.

Bu sorun neden meydana geldi?

Çoğu web sitesinin "ağır" ve "atık enerjisi" olmasının nedeni karmaşık bir konu değildir. Geçmişte popüler olan tasarım kavramlarından kaynaklanır, "daha iyi", bu da web sitesinin oluşturulmasına yol açar:

• Büyük görüntülerle paketlenmiş: Çok daha küçük olan WebP veya AVIF gibi dönem için uygun bir format kullanmadan veya kullanmadan yüksek çözünürlüklü görüntü dosyaları (.png, .jpeg,%100 kalite) kullanın.
• Özel yazı tiplerini ve harici komut dosyalarını çok kullanın: Web sayfası her yüklediğinde tarayıcı, web sayfasını doğrudan engelleyen render engelleme kaynakları
• Şişirilmiş Kod: Kullanılmayan parçaları yinelenen veya silmeden html, css ve javascript kodu, web sitesinin toplam boyutunun gereksiz yere artmasına neden olan javascript
• Ağır videolara ve animasyona güvenmek: güzel görünmek için video arka planı veya karmaşık bir animasyon. Ancak, web sitesinin hem sunucuyu hem de kullanıcı tarafını işlemek için çok yüksek enerji kullanması önemli bir faktördür.

Tüm bu bileşenler, web sitemizi yalnız ve yavaş ve ilk başta bahsettiğimiz tüm sorunların nedeni olan "fazla yağ" gibidir.

İllüstrasyonlar istemi:

Basit infografik görüntüler, web sitesinin "Fat" ın büyük bir resim simgesi, video dosyası, karışık kod ve birçok yazı tipine sahip olduğunu göstermektedir. Sıcak olana kadar çok çalışan sunucuya işaret etti (duman)

Eğer kalırsa nasıl etkilenecek?

"Ağır" bir web sitesine sahip olmak ve çevre dostu değil, küçük bir sorun gibi görünebilir, ancak uzun vadede hem "işimiz" hem de "dünyamız" üzerinde daha yoğun bir etkisi vardır.

İş Etkisi:

• Artan maliyetler: Web sitesi ne kadar çok bilgi kullanırsınız. Hosting hizmeti ve CDN daha da yüksek olacaktır.
• Rekabet Fırsatlarını Kaybetmek: Kullanıcının web sitenizin rakiplerden sadece 1-2 saniye sonra hız beklediği dönemde, rakiplere sonsuza dek müşterileri kaybetmek anlamına gelebilir.
• Dönüşüm Oranı Düşük: Web sitesinin daha yavaş yüklediği her saniye, sipariş veya temas oranını önemli ölçüde düşürecektir
• Marka imajını yok edin: Yavaş ve zor web siteleri kötü bir deneyim yaratın ve markanızın kullanıcıların gözünde kesintisiz görünmesini sağlayın

Dünya üzerindeki etki:

• Karbon emisyonunu artırın: İnternet, dünyanın en büyük karbon serbest bırakmalarından biridir! Sunucudan ekranınıza gönderilen her veri, dünyanın dört bir yanındaki veri merkezinden muazzam elektrik gücü gerektirir. Sürdürülebilir web tasarımı topluluğunun ilkelerine göre
• Kullanıcının yanında enerji harcamak: ağır web, zorla CPU ve kullanıcı cihazının pilleri. (Hem mobil hem de bilgisayar) daha çok çalışmalıdır, bu da mantıklı bir enerji kaybıdır

Bu sorunu görmezden gelmek, her zaman ödenmesi gereken maliyetleri olduğunu bilmeden suyun açmaktan farklı değildir. Hem para şeklinde hem de çevresel etki

İllüstrasyonlar istemi:

Sol tarafın görüntüsü dönüşüm oranını ve geliri azaltan bir grafiktir. Daha yüksek bir barındırma faturasının yanı sıra sağ taraf, sıcak görünen dünya. Veri merkezinden ağır bir web sitesinden bağlantılı bir duman baca var.

Herhangi bir çözüm var mı? Ve nereden başlamalı?

İyi haber şu ki, bu sorunu doğrudan web sitesini "sıkıcı" yapmak değil, web yapmaktır. "Verimlilik" (verimlilik) tüm boyutlarda

Hemen başlayabileceğiniz ana prensip aşağıdaki gibidir:

1. Basitliği vurgulayan tasarım (Yalın ve Temiz Tasarım): Temel, web sayfasındaki tüm öğelerin gerçekten gerekli olup olmadığını kendinize sorun. Tasarım basittir, karmaşık değildir, sadece rahat ve kullanımı kolay görünmekle kalmaz. Aynı zamanda dosyanın boyutunu ve muazzam yüklemek için kullanılması gereken kaynakları azaltmaya yardımcı olur
2. Akıllı Medya Optimizasyonu:
   • Şekil: Yüklemeden önce daima görüntü sıkıştırma aracını kullanın.
   • Doğru biçimi seçin: İyi kalite veren yeni formatlara, WebP veya Avif'e geçin, ancak dosya JPEG veya PNG'den çok daha küçük.
   • Tembel Yükleme Teknikleri kullanın: Görüntüyü veya videoyu ekranın altına ayarlayın. (Hala görülmüyor) Yalnızca kullanıcı sadece kayarken yük
3. Etkili Yazma (Verimli Kod):
   • HTML, CSS, JavaScript: Dosya boyutunu azaltmak için kod dosyasından gereksiz boşlukları ve karakterleri silin.
   • Kullanılmayan kodu kaldırın: Çalışmayan CSS veya JS'yi düzenli olarak kontrol edin ve ortadan kaldırın.
4. Önbellekleme stratejisini kullanışlı olmak için kullanın: Web sitesi nakit parası , web sitenizin "hatırla" bileşenlerinin kullanıcı rayını sipariş etmektir. Tekrar geri döndüğünde, her şeyi tekrar indirmeye gerek yok, web sitesinin bir sonraki ziyarette çok daha hızlı indirmesine neden oluyor
5. Yeşil Bir Hosting Servis Sağlayıcısı Seçin: Veri Merkezi işlemlerinde yenilenebilir enerji (yenilenebilir enerji) kullanan servis sağlayıcılar arıyor.

En iyi başlangıç, web sitenizdeki tüm resmi sıkıştırmaya başlamak gibi, en kolay noktadan yapmaktır. Bu, web sayfasının hızı ve boyutu açısından hemen görülebilen "hızlı kazanma" dır. Derinlikli bir tavsiye istiyorsanız, sürdürülebilirlik için Web Tasarım Kılavuzuna bakın. Tam Sürümümüz

İllüstrasyonlar istemi:

Infiguric özet her bileşenle ilgili sorunları çözmenin 5 yolu: 1), lamba simgesi (basit), 2) Görüntü simgesi+tüyler (ışık), 3) simge+süpürge (temiz), 4) simge+dişli (önbellekleme), 5)

Eskiden başarılı olan gerçek şeyden örnekler

Daha net olabilmek için "Çevrimiçi Mağazalar El Yapımı Ürünler Satın" örneğini vermek istiyorum.

Orijinal sorun: Bu dükkanın orijinal web sitesi çok güzel. Tam ekran resimleri kullanın. Bir video gösterisi var. Ancak sonuç, web sitesi çok yavaş yükleniyor (ortalama 8-10 saniye sürüyor), bu da cep telefonlarını kullanan müşterilerin bastırmak ve barındırma değerine yakın bir artış artıyor. Eklenen ürün sayısına göre

Kılavuzlara göre sorunun nasıl çözülür. Sürdürülebilir Web Tasarımı:

1. Revizyon. Şekil: Ekip, tüm ürün görüntü dosyalarını .png'den .Webp'e dönüştürdü ve dosyaları sıkıştırdı. İlk sayfanın genel görüntü boyutunun% 70'den fazla azalmasıyla sonuçlandı
2. Videoyu küçük bir animasyon olarak değiştirin: Ağır videolar kullanmak yerine, bazı animasyonlar için on kez daha küçük olan Lottie dosyalarını (vektör animasyonu) kullanmak için değiştirdiler.
3. Kod Güncellemesi: Hizmeti kullandılar. Kodu (kod temizleme) temizlemek ve uygun önbelleklemeyi ayarlamak için web geliştirme uzmanı
4. Yeşil Hosting'e geçti: % 100 temiz enerji politikasını açıklayan barındırma hizmetini kullanmak için harekete geçtiler.

İnanılmaz Sonuçlar:

• Sayfa yükleme süresi 2,5 saniyeye düşürüldü.
• Kitap oranı%45 azaldı.
• Müşteriler iyi ve sorunsuz bir deneyime sahip oldukları için dönüşüm oranı% 20 arttı
• Aylık barındırma maliyetleri%30 azaldı.

Bu, sürdürülebilir web tasarımının sadece "iyi işler yapmak" değil, aynı zamanda muazzam iş getirileri sağlayan "akıllı yatırım" olduğunun bir kanıtıdır.

İllüstrasyonlar istemi:

Çevrimiçi mağazanın web sitesinin resimleri, ilk taraflı ekran yavaş yük ekranı ve düşük bir dönüşüm grafiği gösterir. Dönüşüm grafiği ve açıkça yükselen satışlarla tam, güzel olan ekranı görüntüledikten sonra.

Takip etmek istiyorsanız, ne yapmalı? (Hemen kullanılabilir)

Burada okuyun Birçok insan kendi web sitelerini geliştirmeye başlamak istiyor, değil mi? Beklemek zorunda değilsin! Bu, hemen kontrol edip yapabileceğiniz basit bir kontrol listesidir:

1. Hız ve boyutu kontrol edin. Mevcut Web: Web sitenizin şu anda ne kadar web boyutu olduğunu ve indirmenin ne kadar sürdüğünü görmek için Google PagePeed Insights veya GTMetrix gibi ücretsiz araçları kullanın.
2. Resimle başlayın (düşük asılı meyve):
   • Web sitenizde bulunan resimleri kaydetmek için tinypng veya Squosh.app gibi çevrimiçi araçları kullanın.
   • Görüntü dosyalarını otomatik olarak WebP'ye dönüştürmek için eklenti kullanmayı veya ayarlayın.
3. Yazı tiplerini ve komut dosyalarını keşfedin:
   • Kaç tür özel yazı tipi kullanıyorsunuz? Sadece ihtiyaç duyulan 1-2 türünü azaltabilir mi? Veya hiç indirilmesi gerekmeyen sistem yazı tiplerini (makineye bağlı standart yazı tipi) kullanmayı düşünün
   • Kullanılmayan bir izleme komut dosyası veya eklenti olup olmadığını kontrol edin? Varsa, hemen çıkarın.
4. Yakalama Etkinleştir: CMS'nizdeki ayarları kontrol edin veya tarayıcı önbelleğinin zaten etkin olup olmadığını barındırın. Hala, kullanmak için acele et.
5. Tasarımınızla önemli bir soru sorun: Web sayfanıza bakın ve "Bu arka plan videosu gerçekten gerekli mi?" Veya "Hikayeyi GIF yerine hareketsiz bir görüntüle anlatabilir miyiz?" Bu sorular daha fazla verimlilikle tasarlamanıza yardımcı olacaktır. Awwwards gibi önde gelen web siteleri birçok güzel ve sürdürülebilir web sitesi derledi.

Bu küçük adımları yapmak kesinlikle web siteniz için büyük bir değişiklik yapacaktır.

İllüstrasyonlar istemi:

Yukarıdaki listeye göre 5 ana konu ile güzel kontrol listesi resimleri, kolay anlaşılması. Net simgelerle okuyucu, kendi web sitelerini derhal kontrol etmek için bir kılavuz olarak kullanılabilir.

İnsanların merak ettiği sorular ve temizlenen cevaplar

S: Sürdürülebilir tasarım web sitemin "sıkıcı" veya "çok pürüzsüz" görünmesini sağlayacak mı?

Cevap: Doğru değil! Sürdürülebilir tasarım "sıkıcı" anlamına gelmez, ancak "enthental tasarım", minimal stil tasarım, serbest alan kullanımı (beyaz alan) ve göze çarpan tipografi seçimi sürdürülebilir ve modern tasarımın kalbidir . Hem güzel hem de etkili bir web sitesi oluşturmaya yardımcı olacak

S: Yeşil barındırma, genel barındırmadan çok daha pahalı mı?

Cevap: Şu anda fiyat önemli ölçüde farklı değil. Ve bant genişliğinden tasarruf edebileceğiniz maliyeti göz önünde bulundururken, web'i daha yumuşak hale getirerek azalır, yeşil bir barındırma seçmek uzun vadeden daha değerli olabilir.

S: Web sitesinin çevresel etkisini nasıl ölçebiliriz?

Cevap: Web sitesi karbon hesap makinesi gibi değerlendirmeye yardımcı olabilecek ücretsiz çevrimiçi araçlar vardır. Sadece URL'nizi ekleyin. Araç, web sitenizin yaklaşık olarak yayınladığı karbon miktarını hesaplayacaktır. Bu, iyileştirmeden önce ve sonra ölçmenin iyi bir yoludur

Soru: Sürdürülebilir web tasarımı sadece bir trend ve geçti mi, geçmiyor mu?

Cevap: Bu web'in geleceği! Çünkü dijital dünyayı yönlendiren 3 önemli şeyle tutarlı olduğundan: 1) hıza ihtiyaç duyan kullanıcıların beklentileri, 2) SEO'yu etkileyen çekirdek web canlılarının önemi ve 3) küresel çevre farkındalık eğilimi. Bugünden adaptasyon, uzun vadede işletmeniz için bir avantaj yaratmaktır.

İllüstrasyonlar istemi:

Image Icon, içinde bir soru işareti olan bir ampul ve net bir cevap var, çözümü çeşitli sorulara iletir

Anlaması kolay olmak için özet + yapmaya çalışmak istiyorum

Bu noktada, sürdürülebilir web tasarımının uzak bir konu olmadığını görebiliriz. Ancak somut bir uygulamadır ve "dört kuşla bir atış" faydaları sağlamak:

1. Kullanıcılar için iyi (daha iyi UX): Web sitesi daha hızlı kullanımı daha kolay sinir bozucu değil
2. İş için iyi (daha iyi iş): Dönüşüm oranı ekleyin, maliyetleri azaltın ve SEO'ya fayda sağlayın.
3. Daha iyi (daha iyi gezegen): Karbon emisyonlarını azaltın ve enerji tasarrufuna yardımcı olun.
4. Görüntü için iyi (daha iyi marka): Markanızın hem müşterileri hem de bu dünyayı önemsediğini gösterin.

Anahtar, görünümü "yapılabilecek her şeyi sıkıştır" dan "sadece en gerekli ve etkili şeyleri seçmek".

İşletmenizin büyümesini çekmek için yavaş ve ağır olan web sitesini beklemeyin. Bugünden itibaren web siteniz için "Kilo Ver" e başlama zamanı. Sadece görüntü sıkıştırması gibi basit bir konu ile başlayın, harika bir ilk adım olarak kabul edilir!

Web sitenizin hem güzel, hızlı, çevre dostu hem de şaşırtıcı iş sonuçları yaratmasını ister mi? Vision X Brain'den bir uzman ekibine danışın. İşletmenizle sürdürülebilir ve büyüyen bir web sitesi oluşturmanıza yardımcı olmaya hazırız.

‍