Apa itu Desain Web Berkelanjutan dan Bagaimana Mencapainya

Diterbitkan: 2022-12-01
“Saya sangat menginginkan mobil listrik, tetapi saya tidak mampu membelinya” kata seorang teman saya dengan menyesal beberapa bulan yang lalu. Dia dan saya mendiskusikan perubahan iklim dan perubahan yang kami buat dalam kebiasaan kami.

aku terkekeh.

“Kamu tahu bahwa mereka juga mengkonsumsi energi, dan jika kamu tidak mengisi daya mobil listrikmu melalui stopkontak yang menggunakan energi terbarukan, kamu masih mencemari cukup banyak, bukan?”

Dia mengatakan dia tahu itu, tetapi dia masih merasa bahwa dia dan VW miliknya yang berusia 20 tahun adalah tamparan di hadapan semua upayanya untuk menjalani kehidupan yang lebih berkelanjutan dan ramah lingkungan.



“Bagaimana dengan ini - saya dapat memberi tahu Anda cara mengurangi emisi karbon Anda melalui dunia digital Anda” saran saya. Dia menatapku bingung. Saya kemudian mengatakan kepadanya bahwa menurut beberapa statistik, rata-rata pengguna internet menghasilkan jumlah CO2 yang kira-kira sama dengan yang mereka lakukan dengan menempuh jarak 1000 km dengan mobil biasa dan ada berbagai aktivitas yang berkontribusi.

Dia melawan ide ini selama hampir sepuluh menit sampai saya mengeluarkan data di ponsel saya. Sejujurnya, saya tidak menyalahkannya karena saya ingat saya memiliki reaksi yang sama pada hari saya menyadari bahwa setiap halaman web yang saya kunjungi memiliki biaya tersembunyi - energi yang digunakan untuk mempertahankannya.

Rahasia kotor internet, boleh dikatakan begitu.

Menurut Kalkulator Karbon Situs Web, rata-rata situs web menghasilkan sekitar 0,5 gram CO2 per tampilan halaman, jadi untuk situs web dengan 100.000 tampilan bulanan, itu berarti 500kg per tahun. Ingat itu per situs web!

Sebagai referensi, rata-rata mobil mengeluarkan 1.200 kg CO2 per 1.000 km, sehingga Anda dapat melihat bagaimana Internet memiliki efek yang sangat nyata terhadap perubahan iklim dan pemanasan global karena jejak karbonnya yang sangat besar.

Jadi pertanyaannya adalah: Apa yang dapat Anda lakukan sebagai pemilik situs web untuk mengurangi dampak situs Anda terhadap lingkungan kita?

Desain web yang berkelanjutan, tentu saja.

Di Kualo, kami secara intrinsik terkait dengan konsep keberlanjutan sehingga kami merasa wajar untuk mengeksplorasi topik ini. Pada artikel ini, kita akan belajar:
  • Apa itu desain web yang berkelanjutan?
  • Mengapa kita membutuhkan desain web yang berkelanjutan?
  • Apa manfaat dari desain web yang berkelanjutan?
  • Praktik terbaik desain web yang berkelanjutan


Kami ingin memberi Anda cetak biru yang tepat yang akan membantu Anda meminimalkan jejak karbon situs web Anda, jadi tanpa basa-basi lagi, mari selami!

Apa itu desain web yang berkelanjutan?

“Desain web berkelanjutan adalah pendekatan untuk merancang layanan web yang mengutamakan manusia dan planet ini. Ini memberikan produk dan layanan digital yang menghormati prinsip-prinsip Manifesto Web Berkelanjutan: bersih, efisien, terbuka, jujur, regeneratif, dan tangguh.”



Inilah yang dapat kita baca di Manifesto Desain Web Berkelanjutan, dengan situs web menjelaskan secara singkat apa yang akan dicakup oleh kredo ini. Mari kita bahas 6 poin dengan cepat:

  1. Bersih: layanan yang digunakan oleh situs web Anda harus diberdayakan oleh sumber energi terbarukan, artinya hosting web Anda harus bertenaga hijau.
  2. Efisien: layanan yang Anda berikan harus dioptimalkan sepenuhnya untuk menggunakan energi (dan material) dalam jumlah sesedikit mungkin
  3. Terbuka: layanan yang Anda berikan harus dapat diakses oleh semua orang dan harus memungkinkan pengguna untuk memiliki kontrol penuh atas data mereka
  4. Jujur: situs web Anda tidak akan menyediakan konten yang menyesatkan dan/atau mencoba menyesatkan pengguna melalui desain web
  5. Regeneratif: layanan Anda akan berpartisipasi dalam ekonomi yang berorientasi untuk mendukung masyarakat dan lingkungan
  6. Tangguh: Layanan Anda akan diberikan kapan dan di mana mereka paling dibutuhkan

Jika Anda mempertimbangkan semua poin yang dibuat di atas, Anda mungkin melihat bahwa apa yang diminta oleh manifesto ini bukan hanya desain web yang berkelanjutan tetapi memang dasar untuk praktik bisnis yang berkelanjutan dan ekonomi yang berkelanjutan. Untuk memiliki masa depan yang lebih baik, kita membutuhkan bisnis yang menyediakan layanan dan produk yang bermakna dan bermanfaat yang memiliki dampak negatif minimal terhadap lingkungan dan masyarakat.

Dengan kata lain, jika Anda menginginkan desain web yang berkelanjutan, Anda harus:
  • Gunakan jumlah sumber daya seminimal mungkin
  • Kembangkan dan ikuti rencana konten yang dipikirkan dengan baik yang memastikan setiap halaman yang Anda desain memiliki tujuan
  • Manfaatkan pembuatan situs web yang dioptimalkan
  • Hindari menyesatkan pengguna Anda dengan cara apa pun untuk melakukan tindakan yang mungkin tidak mereka inginkan

Mengapa Desain Web Berkelanjutan Penting?

Jadi, internet memiliki banyak manfaat bagi masyarakat, tetapi memiliki biaya lingkungan yang sangat besar. Rata-rata pengguna web menggunakan konten online selama 5-6 jam per hari di komputer atau perangkat seluler mereka. Karena kami terus menggunakan teknologi lebih sering daripada sebelumnya, ini hanya akan meningkat di tahun-tahun mendatang hingga miliaran orang menjelajahi situs web dari seluruh dunia dengan 8 jenis perangkat berbeda!

Sekarang, kembali ke apa yang saya katakan di awal artikel ini (dan infografis kami tentang dampak lingkungan dari Internet), kami tahu ini pada dasarnya adalah lubang hitam energi yang terus meningkat. Di sisi lain, kami juga tahu bahwa Internet sangat penting bagi banyak orang, dan mereka tidak dapat menukarnya dengan versi yang lebih hemat energi, seperti yang Anda lakukan dengan mobil atau laptop.

Tapi tahukah Anda apa yang bisa kita tukar?

Desain situs web kami, tentu saja.

Jika poin utamanya adalah ukuran situs web Anda dan cara pembuatannya secara langsung memengaruhi berapa banyak CO2 yang dihasilkannya, maka inilah yang perlu kami tangani sebagai pemilik situs web.

Manfaat Desain Web Berkelanjutan

Sekarang, secara umum, jika Anda membaca ini, Anda sudah memiliki alasan bagus untuk menginginkan situs web yang berkelanjutan, dan alasan itu terkait dengan perlindungan lingkungan. Pada dasarnya, Anda ingin menjadi pahlawan bagi planet ini, dan saya mengagumi Anda karenanya.

Tapi apakah ada manfaat tambahan untuk mengubah cara kita dalam hal desain web?

Saya benar-benar akan mengatakan ya.



Sebagai pemasar, saya terbiasa mempertimbangkan semua sudut upaya digital saya dan pengaruhnya terhadap proyek saya. Saya dapat langsung memberi tahu Anda bahwa bahkan pada tingkat pribadi, jauh lebih baik untuk menggunakan situs web yang mengikuti ramah lingkungan desain web dan berikut beberapa alasannya:
  • Anda akan menghabiskan lebih sedikit : dari pengeluaran desainer hingga produksi konten Anda, setiap hal tambahan akan dikenakan biaya. Desain yang lebih rumit akan menghabiskan uang Anda, lebih banyak copywriting dan konten akan menghabiskan uang Anda, dan seterusnya. Menjadi minimalis dan hanya memiliki apa yang sebenarnya Anda butuhkan adalah cara terbaik untuk memotong pengeluaran
  • Pelanggan Anda akan lebih puas: dulu ketika situs web adalah hal baru, orang-orang menikmati bel dan peluit, sekarang semua orang kewalahan dengan mereka, karena mereka menghabiskan sepanjang hari untuk berselancar. Ini berarti bahwa untuk rata-rata pengguna, semakin jelas situs web Anda, semakin besar kemungkinan mereka akan menemukan apa yang mereka inginkan daripada menekan tombol X dan pergi ke seseorang yang tidak membuang-buang waktu.
  • Upaya SEO Anda akan lebih efektif : Kecepatan telah menjadi sesuatu selama beberapa tahun sekarang dalam hal peringkat Google, namun dengan berlalunya waktu setiap tahun, kami melihat ini menjadi semakin penting dalam hal SEO. Google BENCI situs web yang lambat, dan mereka pasti akan memprioritaskan situs yang lebih ringan dan lebih cepat. Ngomong-ngomong, ini juga berlaku untuk pengalaman pelanggan, seperti yang kita semua tahu.

Cara Membuat Situs Web Anda Berkelanjutan

1. Mulailah dengan merencanakan perjalanan pengguna Anda

Jika Anda tidak terbiasa dengan konsep tersebut, perjalanan pengguna merujuk pada urutan tindakan yang akan dilakukan pengguna saat mengunjungi situs Anda untuk mencapai tujuan tertentu - pendaftaran, pembelian, dll.

Untuk alasan yang jelas, perjalanan pengguna yang lebih pendek lebih disukai oleh pengguna, karena mereka tidak membuang waktu. Selain dari pengalaman pelanggan, mereka juga akan mengunjungi lebih sedikit halaman untuk menemukan apa yang mereka butuhkan dan dengan demikian mengurangi emisi karbon dari kunjungan mereka.





(kredit gambar: https://www.appcues.com/blog/user-journey-map)

Sebaiknya Anda membiasakan diri dengan konsep perjalanan pengguna, lalu setelah Anda bebas mendesain peta perjalanan pengguna, sesuaikan desain web Anda dengannya.

Pengalaman pengguna yang baik (UX) yang menghindari titik gesekan pasti akan menghasilkan konsumsi energi yang lebih rendah dan pelanggan yang lebih bahagia.

2. Pilih penyedia hosting ramah lingkungan

Saya tahu ini terdengar sedikit mementingkan diri sendiri karena kami, pada akhirnya, adalah perusahaan hosting, tetapi kenyataannya adalah siapa yang memberi daya pada situs web Anda setiap hari akan sangat penting jika Anda ingin mengurangi jejak karbon Anda. Sayangnya, pusat data mengonsumsi sebagian besar energi yang digunakan untuk menggerakkan internet. Sangat penting bagi kita untuk beralih dengan cepat ke 100% sumber terbarukan.



Memilih penyedia yang menawarkan hosting berkelanjutan yang didukung oleh energi terbarukan adalah hal yang harus dilakukan. Ini juga merupakan ide bagus untuk melihat kebijakan lingkungan mereka secara keseluruhan dan memeriksa apakah penyedia hosting Anda telah mengambil langkah tambahan untuk menebus emisi CO2 mereka dan/atau apakah mereka terlibat dalam praktik keberlanjutan lainnya.

3. Cache semuanya!

Jika Anda menggunakan aplikasi berbasis PHP seperti yang dilakukan banyak situs web (WordPress, Magento, Drupal, dll.), maka caching adalah hal yang harus dilakukan untuk keberlanjutan.

Jika sebuah situs tidak memiliki caching, maka Anda membuat server bekerja lebih keras. Setiap kali seseorang mengakses halaman di situs web Anda, konten halaman harus dibuat dengan cepat dengan memproses kode PHP, membuat kueri ke database, dan mengubahnya menjadi konten HTML yang menampilkan situs web Anda.

Ini menggunakan lebih banyak CPU, memori, dan disk server, menghabiskan energi dalam prosesnya. Server perlu melakukan ini untuk setiap pengunjung dan setiap halaman, jadi semakin banyak pengunjung dan halaman yang Anda miliki, semakin banyak energi yang Anda konsumsi.



Dengan adanya caching, sebagian besar beban kerja intensif ini hanya dilakukan saat pertama kali pengunjung meminta halaman. HTML yang dihasilkan kemudian disimpan dalam cache sehingga setiap pemuatan halaman berikutnya tidak perlu melakukan semua pekerjaan berat itu.

Terlebih lagi, halaman Anda memuat lebih cepat. Ini bukan hanya kemenangan bagi Anda dan pengunjung Anda, tetapi juga berarti bahwa pengunjung Anda menghabiskan lebih sedikit waktu menganggur menunggu halaman dimuat - menghabiskan lebih sedikit energi dalam prosesnya.

Ada banyak cara untuk meng-cache situs web, di Kualo, kami lebih memilih LiteSpeed ​​Cache untuk caching halaman, dan kami juga memiliki Redis dan Memcached untuk menyimpan kueri basis data. Situs web super cepat dan keberlanjutan yang lebih baik - apa yang tidak disukai?

4. Jika Anda menulis kode, pastikan itu kode yang bersih

Sebagian besar pengguna akan menggunakan semacam CMS, namun jika Anda menulis beberapa kode, pastikan itu mudah dipahami, mudah diubah, dan menghindari duplikasi dan operasi yang tidak perlu.

5. Hindari plugin dan addons yang tidak berguna

Ini relevan dengan aturan di atas, tapi untuk orang yang memang menggunakan CMS seperti WordPress, Magento, Craft, Laravel dan sebagainya. Terkadang kita mungkin terlalu bersemangat dengan semua kemungkinan yang ditawarkan pasar plugin dan menenggelamkan situs web kita dalam plugin yang tidak perlu

Itu sering terjadi pada plugin berorientasi pemasaran atau yang digandakan yang telah kita lupakan. Nilai apa yang Anda miliki dan kemudian apa yang Anda butuhkan dan berikan boot ke hal lain.

6. Hindari atau gunakan font kustom minimal

Ini mungkin mengejutkan, tetapi font khusus benar-benar dapat meningkatkan ukuran file situs web Anda].



(font khusus yang dibuat untuk Duolingo oleh agensi Johnson Banks)

File font kustom tipikal Anda dapat dengan mudah melebihi 200kb sambil menyertakan satu bobot. Jika Anda menggunakan berbagai bobot dan tipografi, ini pasti akan bertambah, sehingga memengaruhi kecepatan dan konsumsi energi.

Oleh karena itu disarankan agar Anda menggunakan font khusus hanya jika Anda merasa itu sangat penting untuk merek dan tujuan praktis Anda.

7. Gunakan file media dengan bijak (dan optimalkan)

Tidak perlu dikatakan lagi bahwa semua citra di situs web Anda harus dioptimalkan ukurannya. Kami mengetahuinya dari praktik terbaik terkait kecepatan situs web (dan, selanjutnya, SEO). Kami terkadang melihat pelanggan bertanya mengapa situs mereka lambat, hanya untuk mengetahui bahwa halaman beranda menyertakan gambar berukuran 4MB karena mereka telah mengunggah file asli yang sangat besar! Gambar yang sama tersebut mungkin dapat disajikan tanpa penurunan kualitas dengan mengoptimalkannya.

https://youtu.be/eY-VyLd2t-Q

LiteSpeed ​​Cache untuk WordPress menyertakan pengoptimalan gambar otomatis, jadi Anda tidak perlu khawatir melakukannya sendiri. Terlebih lagi, itu dapat mengonversi gambar untuk menggunakan format file modern seperti WebP, yang ukurannya sekitar 25% lebih kecil dibandingkan dengan gambar PNG atau JPG.

Di luar pengoptimalan, yang juga perlu kami pertimbangkan adalah apakah penggunaannya dapat dibenarkan dan bertujuan.

Misalnya, beberapa foto produk mungkin tidak berguna (mis. sudut yang sangat mirip). Dalam kasus lain, gambar yang digunakan pada halaman, seperti stok citra acak, dapat dengan mudah diganti dengan alternatif seperti grafik SVG atau efek yang sama dicapai melalui gaya CSS.

8. Malas memuat konten paruh bawah

Setiap halaman web Anda mungkin berisi banyak konten 'paro bawah' - artinya, konten yang tidak terlihat kecuali pengunjung menggulir halaman Anda ke bawah.

Jika ini termasuk banyak gambar atau video khususnya, yang mungkin berukuran besar, semua data itu harus melintasi internet meskipun mungkin tidak akan pernah terlihat.



Lazy loading berarti Anda meminta konten ini hanya saat pengguna menggulir halaman Anda ke bawah. Bagian tersebut akan muncul tepat sebelum konten tersebut terlihat, jadi dari sudut pandang pengunjung, seolah-olah selalu ada - tidak ada perbedaan yang terlihat.

Anda tidak hanya menghindari pengiriman data yang tidak perlu, tetapi Anda juga akan meningkatkan skor PageSpeed ​​dengan membuat situs web Anda tidak terlalu berbobot.

Beberapa aplikasi dilengkapi dengan lazy loading built-in, atau dapat dibaut dengan plugin. Untuk WordPress, LiteSpeed ​​Cache menyertakan fitur pemuatan malas yang mampu memuat apa pun dengan lambat mulai dari gambar, video, konten yang disematkan, atau bahkan seluruh blok HTML jika halaman Anda sangat panjang.

9. Batasi penggunaan video dan animasi

Anda tidak perlu membuat situs web Anda terlihat seperti halaman Word dan menghindari video dan animasi seperti wabah, tetapi seperti gambar, gunakan dengan hemat.

Animasi biasanya tidak memiliki tujuan taktis, jadi gunakanlah seminimal mungkin. Dengan video, sangat tergantung pada tujuan apa yang akan mereka layani, jadi jika menurut Anda itu berguna bagi pengguna Anda, gunakanlah, pastikan saja mereka juga dioptimalkan sebaik mungkin.

10. Perkecil HTML, CSS & Javascript di situs Anda

Sekali lagi, Anda mungkin sudah melakukan ini untuk tujuan kecepatan, tetapi jika tidak, mari kita segera membahas alasan di balik ini.

Seringkali kode HTML, CSS, dan Javascript Anda akan berisi data tambahan, seperti spasi, jeda baris, atau komentar. Spasi atau komentar ini hanya berguna agar pengembang dapat membaca dan memahami kode dengan mudah, tetapi tidak membuat perbedaan pada cara browser menginterpretasikan kode Anda.

Meminimalkan kode Anda menghapus semua bobot yang tidak perlu ini, mengurangi ukuran file yang perlu ditransfer melalui internet, dan membuat situs Anda memuat lebih cepat.

Untuk WordPress LiteSpeed ​​Cache menangani aspek ini untuk Anda, tetapi sebagian besar aplikasi lain juga akan memiliki fitur serupa yang tersedia melalui sebuah plugin.

11. Hapus CSS dan Javascript yang tidak perlu

Sedangkan minifikasi menghapus data yang tidak perlu, ini tidak menganalisis apakah ada kode yang benar-benar digunakan oleh situs Anda.

Anda mungkin telah menggunakan pembuat tema atau halaman yang menyertakan banyak tata letak, gaya, atau fungsi berbeda yang tidak pernah Anda gunakan di mana pun di situs Anda.

Semua kode akan tetap berada di file CSS dan JS Anda, meningkatkan jumlah data yang harus ditransfer melalui internet dan membuat situs Anda lebih lambat memuat tanpa alasan yang jelas.



Mungkin sulit untuk menentukan kode apa yang harus dihapus secara manual, tetapi untuk WordPress, LiteSpeed ​​Cache memungkinkan Anda menghapus CSS yang tidak digunakan secara otomatis. Ini menghapus CSS yang tidak digunakan dan menghasilkan file CSS unik untuk setiap halaman. Ini mungkin bermanfaat jika Anda hanya memiliki beberapa halaman, tetapi jika situs Anda memiliki banyak halaman, akan lebih efisien jika menggunakan satu file CSS.

Javascript bisa lebih rumit untuk dihapus, meskipun LiteSpeed ​​setidaknya dapat menunda pemuatannya hingga aktivitas pengguna terdeteksi. Ini mungkin sesuai, asalkan tidak diperlukan untuk konten paro atas.

Pada akhirnya, saran terbaik adalah menghindari penggunaan pembuat halaman atau plugin yang membengkak sedapat mungkin dan gunakan kode bersih yang Anda tahu benar-benar diperlukan.

12. Pastikan situs web Anda berfungsi dengan baik di berbagai perangkat

Menguji situs Anda ke berbagai ukuran layar, browser, perangkat, dan kecepatan bandwidth bisa memakan waktu, namun terkait erat dengan desain web yang berkelanjutan. Ini berkaitan dengan poin n.1, artinya tampilan konten dan desain yang salah akan menyebabkan UX yang buruk dan banyak kebingungan di antara pengguna.

Mereka akan menghabiskan lebih banyak waktu untuk mencoba menemukan apa pun yang mereka cari, menghasilkan konsumsi energi yang lebih besar.

Untuk menghindarinya, pastikan desain Anda menyesuaikan dengan baik sebanyak mungkin variabel ini untuk memberikan pengalaman yang optimal bagi pengguna.

13. Gunakan CDN untuk menyajikan konten Anda

Jadi apa itu CDN? Jaringan pengiriman konten (CDN) adalah jaringan server di lokasi geografis yang berbeda. Cara mereka membantu memuat konten Anda lebih cepat adalah dengan menyajikan dari lokasi yang dekat dengan pengguna Anda. Dengan kata lain, ini terkait dengan kecepatan dan pengalaman pengguna.

Lebih penting lagi, dari sudut pandang keberlanjutan, ini membantu mengurangi CO2 karena mentransfer data ke berbagai belahan dunia membutuhkan banyak energi. Dan semakin jauh data harus berjalan, semakin banyak energi yang dibutuhkan.

Juga baik untuk menyebutkan bahwa gambar yang disajikan melalui CDN biasanya diperkecil ukurannya jika Anda melewatkan langkah ini. Banyak CDN akan memberi Anda alat untuk pengoptimalan gambar, termasuk mengurangi ukuran gambar, kerapatan piksel, format, dan kompresi.



Penting untuk memilih CDN yang menggunakan energi terbarukan tentunya seperti Cloudflare.

14. Audit konten Anda untuk memastikannya sesuai dengan strategi

Jika Anda memiliki situs web besar, mengaudit kontennya secara berkala sangatlah penting. Beberapa halaman pasti akan menjadi usang atau tidak lagi memenuhi tujuannya. Ini terutama berlaku untuk basis pengetahuan, tetapi juga berlaku untuk halaman produk, posting blog, dan sebagainya.

Anda dapat memeriksanya secara manual atau menggunakan Google Analytics untuk menilai halaman mana yang mungkin kedaluwarsa atau berkinerja buruk. Anda kemudian dapat memutuskan apakah Anda dapat mengadaptasinya untuk memiliki konten yang bermanfaat dan terkini atau menentukan bahwa mereka hanya ditujukan untuk tempat sampah.

15. Kurangi emisi CO2 Anda dengan mengimbangi jejak karbon Anda

Menjadi bisnis yang positif terhadap iklim mungkin merupakan salah satu keputusan terbaik yang pernah kami buat dalam hal meningkatkan keberlanjutan kami. Hingga saat ini, kami telah menanam lebih dari 50.000 pohon dan telah mengimbangi lebih dari 2.000 ton CO2, dengan tujuan untuk melanjutkan perjalanan ini di tahun-tahun mendatang.

Berpartisipasi dalam proyek yang menanam pohon dan mengimbangi karbon adalah cara yang luar biasa tidak hanya untuk meningkatkan keberlanjutan desain web Anda tetapi juga bisnis Anda secara keseluruhan. Pohon adalah pemenang mutlak dalam hal pengurangan emisi CO2, karena pohon menyerapnya dan mengubahnya menjadi oksigen.

Kami mengundang Anda untuk mengunjungi mitra kami di Ecologi (atau organisasi serupa lainnya) dan mulai menanam pohon itu!