Hvad er bæredygtigt webdesign? Hvordan man designer et web for at være venligt over for verden og godt for erhvervslivet.

Har du nogensinde følt, at onlineverdenen i dag er "hurtig", men "tung" overraskende? Vi har et smukt websted. Der er højopløsningsvideoer med animation spektakulær, men nogle gange ... inden webstedet er færdigt. Vi pløjer hemmeligt på et uheld sociale medier.

Dette problem handler ikke kun om brugernes "hastighed" eller "tålmodighed", men det skjuler "omkostninger", som vi måske aldrig tænker på både "forretningsomkostninger", der er usynlige og "miljøomkostninger", som verden betaler i hvert klik. Men det er en vigtig strategi, som moderne virksomheder skal vide!

Det virkelige problem i livet

Forestil dig, at du er en virksomhedsejer, der investerede på hjemmesiden i hundreder af tusinder af Baht. Hjemmesiden er meget smuk. Funktionen er komplet, men støder på uendelige problemer.

• Kunder klager over "langsomt web" , især når de åbnes på mobil, hvilket resulterer i, at en desværre mister muligheden for at sælge
• Bookce Rate (returrate) er høj , fordi de fleste ikke kan vente og trykke på for at lukke, før Internettet er færdig med at downloade.
• Hosting og CDN (Content Delivery Network) dyrere hvert år, fordi dit websted bruger en masse ressourcer (båndbredde) i hvert display.
• SEO Rank bevæger sig ikke på trods af at have lavet godt indhold. Det kan skyldes, at kerne -web -vitals ikke er god, hvilket delvis skyldes hastigheden på webbelastning.

Disse problemer ser ud til at være tekniske, men det er faktisk "symptomerne" på webstedet, der "tungt end nødvendigt", der direkte påvirker både brugeroplevelsen og omkostningerne ved din virksomhed.

Spørg om illustrationer:

Billedet af brugeren ser på mobilskærmen med irritabilitet. Der er et belastningsikon. Drej på skærmen. Siden har en højere afvisningshastighedsgraf. Og det sølvikon, der fløj væk, formidler både kundernes og udgifternes langsomhed.

Hvorfor skete dette problem?

Årsagen til, at de fleste websteder er "tunge" og "affaldsenergi", er ikke en kompliceret sag. Det er forårsaget af de designkoncepter, der har været populære i fortiden, "jo mere gode", der fører til oprettelsen af webstedet:

• Pakket med store billeder: Brug billedfiler med høj opløsning (.png, .jpeg, 100%kvalitet) uden at komprimere eller bruge et format, der er egnet til den æra som WebP eller AVIF, som er meget mindre.
• Brug de brugerdefinerede skrifttyper og eksterne scripts for meget: Hver gang websiden indlæses, skal browseren køre for at downloade fontfiler, sporing af scripts eller analyseværktøjer fra mange steder, der forårsager noget, der kaldes render-blokerende ressourcer , der blokerede direkte på websiden.
• Oppustet kode: kode HTML, CSS og JavaScript, der er duplikat eller ikke sletter de ubrugte dele, der får den samlede størrelse på webstedet til at øge unødvendigt
• At stole på tunge videoer og animation: Video baggrund eller en kompleks animation for at se smuk ud. Men det er en vigtig faktor, at webstedet skal bruge meget høj energi til behandling af både serveren og brugersiden

Alle disse komponenter er som "overskydende fedt", der gør vores hjemmeside ensom og langsom og årsagen til alle de problemer, vi talte om i starten.

Spørg om illustrationer:

Enkle infografiske billeder viser strukturen på webstedet, at "fedt" har et stort billedikon, videofil, sammenfiltret kode og mange skrifttyper. Peger på den server, der arbejder hårdt, indtil det er varmt (røg op)

Hvis det er tilbage, hvordan vil det påvirke?

At have et "tungt" websted og ikke miljøvenligt kan det synes at være et lille problem, men på lang sigt har det en mere intens indflydelse på både vores "forretning" og vores "verden".

Forretningspåvirkning:

• Forøgede omkostninger: Jo mere webstedet, bruger du en masse information. Hosting Service og CDN vil være endnu højere.
• At miste konkurrencemuligheder: I den æra, hvor brugeren forventer hastighed, hvis dit websted kun er 1-2 sekunder senere end konkurrenter, kan det betyde at miste kunder til konkurrenter for evigt.
• Konverteringsfrekvens lavere: Hvert sekund, hvor webstedet indlæses langsommere, falder ordren eller kontaktprisen markant
• Ødelæg brandbillede: Langsomt og vanskelige websteder skaber en dårlig oplevelse og får dit brand til at se uafbrudt ud i brugernes øjne

Virkningen på verden:

• Forøg Carbon Emission: Internettet er en af verdens største kulstofudgivere! Hver data, der sendes fra serveren til din skærm, kræver enorm elektrisk strøm fra datacentret rundt om i verden. I henhold til principperne i bæredygtigt webdesignsamfund
• Spilning af energi på siden af brugeren: tung web, tvungen CPU og batterier på brugerenheden. (Både mobil og computer) skal arbejde hårdere, hvilket er spild af energi af fornuft

At ignorere dette problem er ikke anderledes end at åbne vandet uden at vide, at det har omkostninger, der skal betales hele tiden. Både i form af penge og miljøpåvirkningen

Spørg om illustrationer:

Billedet af venstre side er en graf, der viser konverteringsfrekvensen, og indtægterne falder. Sammen med en højere hostingfaktura er højre side den verden, der ser varm ud. Der er en røg skorsten fra datacentret, der er knyttet fra et tungt websted.

Er der nogen løsning? Og hvor skal det starte?

Den gode nyhed er, at vi kan løse dette problem direkte med principperne i det bæredygtige webdesign , som dens hjerte ikke er for at gøre webstedet "kedeligt", men er at lave internettet. "Effektivitet" (effektivitet) i alle dimensioner

Hovedprincippet om, at du kan starte med det samme, er som følger:

1. Designet, der understreger enkelheden (Lean & Clean Design): Grundlæggende spørg dig selv, om alle elementer på websiden virkelig er nødvendig eller ej. Designet er enkelt, ikke kompliceret, ikke kun for at se behageligt og let at bruge. Men hjælper også med at reducere størrelsen på den fil og ressourcer, der skal bruges til at indlæse enorm
2. Smart medieoptimering:
   • Figur: Brug altid billedkomprimeringsværktøjet inden upload.
   • Vælg det rigtige format: Skift til nye formater, WebP eller AVIF, der giver god kvalitet, men filen er meget mindre end JPEG eller PNG.
   • Brug dovne belastningsteknikker: Indstil billedet eller videoen under skærmen. (Stadig ikke set) Indlæs kun, når brugeren kun glider ned
3. Effektiv skrivning (effektiv kode):
   • Minify HTML, CSS, JavaScript: Slet unødvendige huller og tegn fra kodefilen for at reducere filstørrelse.
   • Fjern den ubrugte kode: Kontroller regelmæssigt og eliminerer CSS eller JS, der ikke kører.
4. Brug cache -strategien til at være nyttig: At gøre webstedets kasse er at bestille brugerskinnen til "Husk" komponenter på dit websted. Når han kommer tilbage igen, skal du ikke downloade alt igen, hvilket får webstedet til at downloade meget hurtigere i det næste besøg
5. Vælg en Green Hosting Service Provider: På udkig efter tjenesteudbydere, der bruger vedvarende energi (vedvarende energi) i deres datacenteroperationer.

Den bedste start er at gøre fra det nemmeste punkt først, såsom at begynde at komprimere hele billedet på dit websted. Dette er "hurtig gevinst", der kan ses øjeblikkeligt med hensyn til hastighed og størrelse på websiden. Hvis du ønsker i -dybde råd, skal du se på Web Design Manual for bæredygtighed. Vores komplette version

Spørg om illustrationer:

Infigurafic resume 5 måder at løse problemer med hver komponent: 1), lampeikon (enkel), 2) Image Icon+Feathers (Light), 3) Icon+Broom (Clean), 4) Icon+Gear (Cache), 5)

Eksempler fra den rigtige ting, der plejede at få succes

For at være klarere vil jeg gerne give et eksempel på "online butikker, der sælger håndlavede produkter"

Det originale problem: Det originale websted i denne butik er meget smukt. Brug billeder i fuld skærm. Der er en videodemonstration. Men resultatet er, at webstedet indlæses meget langsomt (tag i gennemsnit 8-10 sekunder), hvilket får de kunder, der bruger mobiltelefoner til at presse og tæt på de fleste af hostingsværdien, øges. I henhold til antallet af tilføjede produkter

Hvordan man løser problemet i henhold til retningslinjerne. Bæredygtigt webdesign:

1. Revision. Figur: Holdet har konverteret alle produktbillede -filer fra .png til .webp og komprimering af filer. Hvilket resulterede i den samlede billedstørrelse på den første side faldt med mere end 70%
2. Skift videoen til en lille animation: I stedet for at bruge tunge videoer skiftede de til at bruge Lottie -filer (Vector Animation), der er titusinder af gange mindre til en eller anden animation.
3. Kodeopdatering: De har brugt tjenesten. Webudviklingsekspert for at rense koden (kodeoprydning) og indstille den relevante cache
4. Skiftet til Green Hosting: De flyttede for at bruge hostingtjenesten, der annoncerede en 100% ren energipolitik.

Fantastiske resultater:

• Sidebelastningstid reduceret til 2,5 sekunder.
• Bookce -satsen faldt med 45%.
• Konverteringsfrekvensen steg med 20% , fordi kunderne har en god og glat oplevelse.
• Månedlige hostingomkostninger faldt med 30%.

Dette er et bevis på, at bæredygtigt webdesign ikke kun er "gøre gode gerninger", men også "intelligente investeringer", som giver enorme forretningsafkast.

Spørg om illustrationer:

Billeder af onlinebutikens websted, den første -sidede skærm viser en langsom belastningsskærm og en lav konverteringsgraf. Efter at have vist den skærm, der er komplet, smuk, med konverteringsgrafen og det salg, der tydeligt stiger.

Hvis du vil følge, hvad skal jeg gøre? (Kan bruges med det samme)

Læs her mange mennesker vil gerne begynde at forbedre deres eget websted, ikke? Du behøver ikke vente! Dette er en simpel tjekliste, som du kan tjekke og gøre med det samme:

1. Kontroller hastigheden og størrelsen. Nuværende web: Brug gratis værktøjer som Google PageSpeed Insights eller GTMetrix for at se, hvor meget dit websted nu er en webstørrelse, og hvor lang tid det tager at downloade.
2. Start med billedet (lavt hængende frugt):
   • Brug online -værktøjer som tinypng eller squosh.app til at optage billeder tilgængelige på dit websted.
   • Overvej at bruge plugin eller indstille til at konvertere billedfiler til WEBP automatisk.
3. Udforsk skrifttyper og scripts:
   • Hvor mange typer brugerdefinerede skrifttyper bruger du? Kan kun reducere de 1-2 typer, der er nødvendige? Eller overvej at bruge systemskrifterne (standard fonten, der er knyttet til maskinen), som slet ikke behøver at blive downloadet
   • Kontroller, om der er en sporingsskripts eller plugin, der ikke bruges eller ej? Hvis der er, skal du fjerne straks.
4. Aktivér fangst: Kontroller indstillingerne i din CMS eller vært for, om browsercache allerede har aktiveret. Hvis du stadig er, skal du skynde dig at bruge det.
5. Stil et vigtigt spørgsmål med dit design: Se på din webside og spørg "Er denne baggrundsvideo virkelig nødvendig?" Eller "Kan vi fortælle historien med et stillbillede i stedet for GIF?" Disse spørgsmål hjælper dig med at designe med mere effektivitet. Som førende websteder som Awwwards har samlet mange smukke og bæredygtige websteder.

At gøre disse små trin vil helt sikkert foretage en stor ændring for dit websted.

Spørg om illustrationer:

Smukke tjeklistebilleder, let at forstå, med 5 hovedemner i henhold til listen ovenfor. Med klare ikoner kan læseren bruges som en retningslinje for at kontrollere deres egne websteder med det samme.

Spørgsmål, som folk har en tendens til at undre sig, og de svar, der er ryddet

Spørgsmål: Bæredygtigt design får mit websted til at se "kedeligt" eller "for glat"?

Svar: Ikke sandt! Bæredygtigt design betyder ikke "kedeligt", men betyder "intental design", et minimalt stildesign, brugen af frit rum (hvidt rum) og udvælgelsen af typografi, der skiller sig ud, er hjertet i bæredygtigt og moderne design . Vil hjælpe med at oprette et websted, der er både smukt og effektivt

Spørgsmål: Grøn hosting er meget dyrere end generel hosting?

Svar: På nuværende tidspunkt er prisen ikke væsentligt forskellig. Og når du overvejer de omkostninger, du kan spare fra båndbredden, som falder ved at gøre nettet blødere, kan det være endnu mere værd at vælge en grøn hosting.

Spørgsmål: Hvordan måler vi miljøpåvirkningen af webstedet?

Svar: Der er gratis online -værktøjer, der kan hjælpe med at vurdere, f.eks. Carbon Calbon Calculator. Bare tilføj din URL. Værktøjet beregner mængden af kulstof, som dit websted frigav omtrent. Hvilket er en god måde at måle før og efter forbedringen

Spørgsmål: Bæredygtigt webdesign er bare en tendens og er gået eller ej?

Svar: Dette er fremtiden for web! Fordi det er i overensstemmelse med 3 vigtige ting, der driver den digitale verden: 1) forventningerne til brugere, der har brug for hastighed, 2) vigtigheden af kernewebvital, der påvirker SEO, og 3) den globale miljøbevidsthedstrend. Tilpasning fra i dag er at skabe en fordel for din virksomhed i det lange løb.

Spørg om illustrationer:

Billedikon, en pære med et spørgsmålstegn indeni, og der er et klart svar, der vises formidler løsningen på forskellige spørgsmål

Resume for at være let at forstå + vil prøve at gøre

På dette tidspunkt kan vi se, at det bæredygtige webdesign ikke er en fjern sag. Men er en håndgribelig praksis og giver fordele "et skud med fire fugle":

1. Godt for brugere (bedre UX): websted hurtigere lettere at bruge ikke frustrerende
2. God til forretning (bedre forretning): Tilføj konverteringsfrekvens, reducer omkostningerne og fordel af SEO.
3. Bedre (bedre planet): Reducer kulstofemissioner og hjælp med at spare energi.
4. God til billedet (bedre brand): Vis, at dit brand plejer både kunder og denne verden.

Nøglen er at ændre udsigten fra "komprimere alt, hvad der kan gøres", er "at vælge kun de mest nødvendige og effektive ting"

Vent ikke på det websted, der er langsomt og tungt for at trække væksten i din virksomhed. Det er tid til at starte "tabe sig" til dit websted fra i dag. Start bare med en simpel sag som billedkomprimering Det betragtes som et godt første skridt!

Ønsker, at dit websted skal være både smukt, hurtigt, miljøvenligt og skabe fantastiske forretningsresultater, ikke? Konsulter et team af eksperter fra Vision X Brain. Vi er klar til at hjælpe dig med at oprette et bæredygtigt og voksende websted med din virksomhed.

‍