Co je udržitelný webový design? Jak navrhnout web, který bude přátelský k světu a dobrý pro podnikání.

Už jste někdy cítili, že dnes je online svět „rychlý“, ale „těžký“? Máme krásný web. Existují videa s vysokým rozlišením s animací velkolepý, ale někdy ... před dokončením webu. Tajně náhodně osíme sociální média.

Tento problém není jen o „rychlosti“ nebo „trpělivosti“ uživatelů, ale skrývá „náklady“, že nikdy nebudeme myslet na obě „obchodní náklady“, které jsou neviditelné a „náklady na životní prostředí“, které svět platí při každém kliknutí. Je to však důležitá strategie, kterou musí moderní podniky vědět!

Skutečný problém v životě

Představte si, že jste majitelem firmy, který investoval do webu stovky tisíc bahtů. Web je velmi krásný. Funkce je úplná, ale narazí na nekonečné problémy.

• Zákazníci si stěžují, že „pomalý web“ , zejména při otevírání na mobilu, což má za následek, že bohužel ztratí příležitost prodat
• Míra Bookce (sazba návratnosti) je vysoká , protože většina lidí nemůže čekat a stisknout, aby uzavřela před dokončením stahování webu.
• Hosting a CDN (síť doručování obsahu) každý rok dražší, protože váš web na každém displeji používá hodně zdrojů (šířka pásma).
• SEO Rank se nepohybuje, přestože vytváří dobrý obsah. Může to být proto, že základní skóre webových vitalů není dobré, což je částečně způsobeno rychlostí načítání webu.

Zdá se, že tyto problémy jsou technické, ale ve skutečnosti jsou to „příznaky“ webových stránek, které „těžké než nutné“, které přímo ovlivňují jak uživatelskou zkušenost, tak náklady na vaše podnikání.

Výzva pro ilustrace:

Obrázek uživatele se dívá na mobilní obrazovku s podrážděností. Existuje ikona načítání. Otočte na obrazovce. Strana má graf míry s vyšším opuštěním. A stříbrná ikona, která odletěla, vyjadřuje pomalost zákazníků i výdajů.

Proč k tomuto problému došlo?

Důvod, proč většina webových stránek je „těžká“ a „odpadní energie“, není komplikovanou záležitostí. Je to způsobeno koncepty designu, které byly v minulosti populární, „Tím více dobré“, což vede k vytvoření webu:

• Nabité s velkými obrázky: Použijte obrazové soubory s vysokým rozlišením (.png, .jpeg, 100%kvalita) bez komprimování nebo použití formátu, který je vhodný pro éru, jako je webp nebo avif, který je mnohem menší.
• Používejte vlastní písma a externí skripty příliš mnoho: Pokaždé, když načte webová stránka, musí prohlížeč spustit ke stažení souborů písem, sledování skriptů nebo analytických nástrojů z mnoha míst, která způsobují něco, co se nazývá zdroje blokování vykreslení , které přímo blokují webovou stránku.
• Nafouklý kód: kód HTML, CSS a JavaScript, které jsou duplicitní nebo neodstraňují nevyužité části, což způsobuje zbytečně zvýšení celkové velikosti webu
• Spoléhání se na těžká videa a animace: video pozadí nebo složitá animace, aby vypadala krásně. Je však důležitým faktorem, že web musí při zpracování serveru i uživatele používat velmi vysokou energii

Všechny tyto komponenty jsou jako „přebytečný tuk“, díky kterému je náš web osamělý a pomalý a příčinou všech problémů, o kterých jsme zpočátku hovořili.

Výzva pro ilustrace:

Jednoduché infographic obrázky ukazují strukturu webu, že „tuk“ má velkou ikonu obrázku, video soubory, zamotaný kód a mnoho písem. Poukazoval na server, který tvrdě pracuje až do horkého (kouř)

Pokud to odejde, jak to ovlivní?

Mít „těžký“ web a ne šetrný k životnímu prostředí se může zdát být malý problém, ale z dlouhodobého hlediska má intenzivnější dopad na naše „podnikání“ i na náš „svět“.

Obchodní dopad:

• Zvýšené náklady: Čím více webu používáte spoustu informací. Hostitelská služba a CDN budou ještě vyšší.
• Ztráta příležitostí ke konkurenci: V době, kdy uživatel očekává rychlost, pokud je váš web jen o 1-2 sekundy později než konkurenti, může to znamenat ztrátu zákazníků na konkurenty navždy.
• Míra konverze nižší: Každou sekundu, že se web načítá pomaleji, výrazně sníží objednávku nebo kontaktní sazbu
• Zničit obrázek značky: Pomalé a obtížné webové stránky vytvářejí špatný zážitek a aby vaše značka vypadala nepřetržitým v očích uživatelů

Dopad na svět:

• Zvýšení emise uhlíku: Internet je jedním z největších uhlíkových releaserů na světě! Každá data, která jsou odeslána ze serveru na obrazovku, vyžadují obrovskou elektrickou energii z datového centra po celém světě. Podle principů udržitelné komunity webového designu
• Plýtvání energie na straně uživatele: těžký web, nucené CPU a baterie uživatelského zařízení. (Mobilní i počítač) musí tvrději pracovat, což je plýtvání energií z důvodu

Ignorování tohoto problému se neliší od otevírání vody, aniž by bylo známo, že má náklady, které musí být vyplaceny po celou dobu. Ve formě peněz i dopadu na životní prostředí

Výzva pro ilustrace:

Obrázek levé strany je graf ukazující rychlost konverze a snižování příjmů. Spolu s vyšší hostingovou fakturou je pravá strana svět, který vypadá horký. Z datového centra je kouřový komín, který je propojen z těžkého webu.

Existuje nějaké řešení? A kde by to mělo začít?

Dobrou zprávou je, že tento problém můžeme vyřešit přímo se zásadami udržitelného webového designu , kterým jeho srdcem není, aby web byl „nudný“, ale je vytvořit web. „Účinnost“ (účinnost) ve všech rozměrech

Hlavní princip, který můžete začít okamžitě, je následující:

1. Design, který zdůrazňuje jednoduchost (Lean & Clean Design): Základní zeptejte se sami sebe, zda jsou všechny prvky na webové stránce skutečně nezbytné nebo ne. Design je jednoduchý, nekomplikovaný, nejen vypadat pohodlně a snadno se používá. Ale také pomáhá snižovat velikost souboru a zdrojů, které musí být použity k načtení obrovských
2. Optimalizace inteligentních médií:
   • Obrázek: Před nahráním vždy použijte nástroj pro kompresi obrázku.
   • Vyberte správný formát: Přepněte na nové formáty, webp nebo avif, který poskytuje dobrou kvalitu, ale soubor je mnohem menší než JPEG nebo PNG.
   • Použijte techniky líného načítání: Nastavte obrázek nebo video pod obrazovkou. (Stále není vidět) Načíst pouze tehdy, když uživatel sklouzne pouze dolů
3. Efektivní psaní (efektivní kód):
   • Minify HTML, CSS, JavaScript: Odstraňte zbytečné mezery a znaky ze souboru kódu a sníží velikost souboru.
   • Odstraňte nepoužitý kód: Pravidelně kontrolujte a eliminujte CSS nebo JS, které nejsou spuštěny.
4. Použijte strategii ukládání do mezipaměti k užitečnému: Vytváření výplaty webových stránek je objednat uživatelskou železnici „Pamatujte“ komponenty vašeho webu. Když se znovu vrátí, nemusíte si všechno znovu stahovat, což způsobí, že si web při další návštěvě stahová mnohem rychleji
5. Vyberte poskytovatele služeb zeleného hostingu: Hledáte poskytovatele služeb, kteří ve svých operacích datového centra využívají obnovitelné energie (obnovitelná energie).

Nejlepším začátkem je nejprve z nejjednoduššího bodu, například začít komprimovat celý obrázek na vašem webu. Toto je „rychlé vítězství“, které lze okamžitě vidět z hlediska rychlosti a velikosti webové stránky. Pokud chcete, aby se rada o tom, podívejte se na příručku pro webový design pro udržitelnost. Naše úplná verze

Výzva pro ilustrace:

Infigurafické shrnutí 5 způsobů, jak vyřešit problémy s každou komponentou: 1), ikona lampy (jednoduché), 2) ikona obrazu+peří (světlo), 3) ikona+koště (čisté), 4) ikona+zařízení (ukládání do mezipaměti), 5)

Příklady ze skutečné věci, která bývala úspěšná

Abych byl jasnější, rád bych uvedl příklad „online obchodů prodávající ručně vyráběné produkty“

Původní problém: Původní web tohoto obchodu je velmi krásný. Použijte obrázky na celé obrazovce. Existuje demonstrace videa. Výsledkem je však to, že se web načítá velmi pomalu (trvá v průměru 8-10 sekund), což způsobuje, že zákazníci, kteří používají mobilní telefony, stiskne a blíží se většině hostitelské hodnoty, roste. Podle počtu přidaných produktů

Jak vyřešit problém podle pokynů. Udržitelný webový design:

1. Oprava. Obrázek: Tým převedl všechny soubory obrázků produktu z .png na .Webp a komprimování souborů. Což má za následek celkovou velikost obrazu první stránky se snížila o více než 70%
2. Změňte video na malou animaci: Namísto použití těžkých videí přepnuli k použití souborů Lottie (vektorová animace), které jsou pro nějakou animaci desítky menší.
3. Aktualizace kódu: Službu použili. Odborník na vývoj webových stránek za účelem vyčištění kódu (vyčištění kódu) a nastavení příslušného ukládání do mezipaměti
4. Přepnuto na Green Hosting: Přesunuli se, aby používali hostingovou službu, která oznámila 100% politiku čisté energie.

Úžasné výsledky:

• Doba načítání stránky zkrátí na 2,5 sekundy.
• Míra bookce se snížila o 45%.
• Míra konverze se zvýšila o 20% , protože zákazníci mají dobrý a hladký zážitek.
• Měsíční náklady na hostování se snížily o 30%.

Toto je důkaz, že udržitelný webový design není jen „dělat dobré skutky“, ale také „inteligentní investice“, což poskytuje obrovské obchodní výnosy.

Výzva pro ilustrace:

Fotografie webové stránky internetového obchodu, první obrazovka zobrazuje obrazovku pomalé načtení a graf s nízkým převodem. Po zobrazení obrazovky, která je kompletní, krásná, s převodovým grafem a prodejem, které jasně rostou.

Pokud chcete následovat, co dělat? (Lze použít okamžitě)

Přečtěte si zde mnoho lidí by chtělo začít zlepšovat svůj vlastní web, že? Nemusíte čekat! Toto je jednoduchý kontrolní seznam, který můžete zkontrolovat a udělat okamžitě:

1. Zkontrolujte rychlost a velikost. Aktuální web: Používejte bezplatné nástroje, jako jsou Google PageSpeed Insights nebo GTMetrix, abyste zjistili, jak moc je váš web nyní velikostí webu a jak dlouho trvá stažení.
2. Začněte s obrázkem (nízko visící ovoce):
   • K nahrávání obrázků dostupných na vašem webu použijte online nástroje, jako je tinypng nebo squosh.app.
   • Zvažte použití pluginu nebo nastavení automaticky převádět obrazové soubory na webp.
3. Prozkoumejte písma a skripty:
   • Kolik typů vlastních písem používáte? Může omezit pouze 1-2 typy, které jsou potřebné? Nebo zvažte použití systémových písem (standardní písmo připojené ke stroji), které nemusí být vůbec staženo
   • Zkontrolujte, zda dochází k sledovacím skriptům nebo pluginu, který se nepoužívá nebo ne? Pokud existuje, odstraňte okamžitě.
4. Aktivujte chytání: Zkontrolujte nastavení ve vašem CMS nebo hostujete, zda již bylo povoleno ukládání do mezipaměti prohlížeče. Pokud stále, pospěšte si ho použít.
5. Zeptejte se důležité otázky s vaším designem: Podívejte se na svou webovou stránku a zeptejte se „Je toto video na pozadí opravdu nutné?“ Nebo „Můžeme vyprávět příběh se statickým obrázkem místo GIF?“ Tyto otázky vám pomohou navrhnout s větší účinností. Protože přední webové stránky jako Awwwards sestavily mnoho krásných a udržitelných webových stránek.

Provedení těchto malých kroků určitě pro váš web provedou skvělou změnu.

Výzva pro ilustrace:

Krásné obrázky kontrolního seznamu, snadno srozumitelné, s 5 hlavními tématy podle výše uvedeného seznamu. U jasných ikon lze čtenář použít jako vodítko pro okamžitou kontrolu svých vlastních webových stránek.

Otázky, které lidé mají tendenci divit a odpovědi, které jsou vymazány

Otázka: Udržitelný design způsobí, že můj web bude vypadat „nudný“ nebo „příliš hladký“?

Odpověď: Není to pravda! Udržitelný design neznamená „nudný“, ale znamená „intenntální design“, minimální design stylu, využití volného prostoru (bílý prostor) a výběr typografie, která vyniká, je srdcem udržitelného a moderního designu . Pomůže vytvořit web, který je krásný a efektivní

Otázka: Green hosting je mnohem dražší než obecný hosting?

Odpověď: V současné době se cena výrazně neliší. A při zvažování nákladů můžete ušetřit z šířky pásma, což se snižuje tím, že se web měkčí, může být výběr zeleného hostingu ještě více užitečnější než z dlouhodobého hlediska.

Otázka: Jak měříme dopad webové stránky na životní prostředí?

Odpověď: Existují bezplatné online nástroje, které mohou pomoci posoudit, například kalkulačka na webových stránkách. Stačí přidat svou adresu URL. Nástroj vypočítá množství uhlíku, který váš web uvolnil přibližně. Což je dobrý způsob měření před a po zlepšení

OTÁZKA: Udržitelný webový design je jen trend a prošel nebo ne?

Odpověď: Toto je budoucnost webu! Protože je v souladu s 3 důležitými věcmi, které řídí digitální svět: 1) očekávání uživatelů, kteří potřebují rychlost, 2) význam klíčových webových vitálů, které ovlivňují SEO, a 3) globálním trendem povědomí o životním prostředí. Adaptace od dnešního dne je vytvořit výhodu pro vaše podnikání z dlouhodobého hlediska.

Výzva pro ilustrace:

Ikona obrázku, žárovka s otazníkem uvnitř a existuje jasná odpověď, která se objevuje, což vychází z různých otázek

Shrnutí, které má být snadno pochopitelné + chtějí to zkusit udělat

V tomto okamžiku můžeme vidět, že udržitelný webový design není vzdálená záležitost. Je však hmatatelnou praxí a poskytuje výhody „jeden výstřel se čtyřmi ptáky“:

1. Dobré pro uživatele (lepší UX): Web rychlejší snáze se používá frustrující
2. Dobré pro podnikání (lepší podnikání): Přidejte míru konverze, snižují náklady a prospívají SEO.
3. Lepší (lepší planeta): Snižte emise uhlíku a pomáhají ušetřit energii.
4. Dobré pro image (lepší značka): Ukažte, že vaše značka se stará o zákazníky i tento svět.

Klíčem je změnit pohled z „komprese všeho, co lze udělat“, je „výběr pouze nejpotřebnějších a nejúčinnějších věcí“

Nečekejte, až web, který je pomalý a těžký, vytáhne růst vašeho podnikání. Je čas začít „zhubnout“ pro váš web od dnešního dne. Stačí začít s jednoduchou záležitostí, jako je komprese obrázků, považuje se za skvělý první krok!

Chtělo by, aby váš web byl krásný, rychlý, šetrný k životnímu prostředí a vytvářel úžasné obchodní výsledky, že? Poraďte se s týmem odborníků z Vision X Brain. Jsme připraveni vám pomoci s vaší firmou vytvořit udržitelný a rostoucí web.

‍