7 Dosa Desainer yang Bikin Website Lambat (Dan Cara Memperbaikinya)

pada tanggal

 

Pernahkah Anda mengalami ini? Anda baru saja selesai mendesain mockup website yang cantik di Figma. Klien menyukainya. Developer membangunnya.

Lalu, Anda menjalankan tes Google PageSpeed, dan hasilnya... MERAH. Skor: 25/100.

Seringkali, jari telunjuk langsung mengarah ke developer. "Kodenya pasti jelek!" Padahal, 9 dari 10 kasus, masalahnya bukan di kode. Masalahnya ada pada aset yang diserahkan oleh desainer.

Di era mobile-first ini, performa (kecepatan) adalah bagian dari desain. Website yang indah tapi lambat adalah desain yang gagal. Sebagai desainer "Sintaks Logis", kita harus lebih pintar. Kita harus menjadi mitra teknis, bukan hanya seniman.

Selain dosa terbesar (yaitu salah format gambar, seperti yang kita bahas di artikel ini), berikut adalah 7 "dosa" lain yang sering dilakukan desainer yang membunuh kecepatan loading website.

Dosa #1: Gambar "Super-Size" (Resolusi Berlebihan)

Ini berbeda dari format gambar. Ini soal dimensi.

  • Dosa: Anda mengunggah foto 4000x3000 piksel yang baru keluar dari kamera... hanya untuk digunakan sebagai thumbnail profil 150x150 piksel.

  • Apa Masalahnya? Browser dipaksa mengunduh gambar 10MB, lalu bekerja keras "mengecilkan" gambar itu secara visual agar pas di slot 150px. Ini adalah pemborosan bandwidth dan tenaga prosesor yang luar biasa.

  • Cara Memperbaikinya (Solusi):

    • Ubah Ukuran SEBELUM Diunggah! Jangan pernah mengandalkan HTML/CSS untuk mengubah ukuran gambar Anda.
    • Buka Photoshop/Affinity/Canva. Jika slot gambar di website Anda lebarnya 800px, resize gambar Anda ke 800px. Jika itu thumbnail, resize ke 150px. Baru setelah itu simpan (sebagai WebP!).

Dosa #2: Pesta Font (Terlalu Banyak Font & Berat)

Desainer menyukai tipografi. Terkadang, terlalu menyukainya.

  • Dosa: Anda menggunakan satu font untuk judul (Montserrat Black), satu untuk sub-judul (Roboto Slab), dan satu untuk teks (Lato). Masing-masing memuat 4 weight (Regular, Italic, Bold, Bold Italic).

  • Apa Masalahnya? 3 Font x 4 Varian = 12 file font terpisah yang harus diunduh browser sebelum bisa menampilkan teks apa pun. Ini adalah blocker render yang sangat besar.

  • Cara Memperbaikinya (Solusi):

    • Minimalisme: Terapkan aturan "maksimal 2 keluarga font" (misal: satu untuk judul, satu untuk bodi).
    • Gunakan Variable Fonts: (Pilihan Pro) Satu file variable font modern bisa berisi semua weight (dari Thin hingga Black) dalam satu file kecil.
    • Pilih Weight: Saat mengimpor dari Google Fonts, jangan klik "Select all". Pilih HANYA weight yang Anda butuhkan (misal: Regular 400 dan Bold 700).

Dosa #3: Mengunggah Video 50MB Langsung ke Website

  • Dosa: Klien memberi Anda video profil perusahaan 50MB. Anda mengunggahnya langsung ke media library WordPress/Blogger dan menaruhnya di homepage.

  • Apa Masalahnya? Web hosting Anda (terutama shared hosting) tidak dirancang untuk streaming video. Browser akan mencoba mengunduh seluruh file 50MB itu sebelum memutarnya. Homepage Anda akan crash.

  • Cara Memperbaikinya (Solusi):

    • JANGAN PERNAH meng-hosting video Anda sendiri.
    • Unggah ke YouTube atau Vimeo. Platform ini dirancang untuk streaming video dengan sempurna ke perangkat apa pun.
    • Sematkan (Embed): Salin kode embed dari YouTube/Vimeo dan tempelkan ke situs Anda. Gratis, cepat, dan profesional.

Dosa #4: Menggunakan GIF 10MB untuk Animasi Pendek

  • Dosa: Anda ingin animasi lucu 5 detik di postingan blog Anda. Anda mengekspornya sebagai .gif berukuran 10MB.

  • Apa Masalahnya? Format GIF sudah berusia puluhan tahun. Teknologinya sangat boros, palet warnanya jelek, dan ukuran filenya raksasa untuk kualitas yang buruk.

  • Cara Memperbaikinya (Solusi):

    • Gunakan Video Modern: Konversi GIF itu menjadi file .mp4 atau .webm. Ukurannya akan turun 90% (misal: 1MB). Gunakan tag HTML <video autoplay loop muted> untuk membuatnya berperilaku seperti GIF.
    • Gunakan Lottie: Jika itu adalah animasi vektor, ekspor sebagai Lottie (JSON). Kualitasnya sempurna dan ukurannya hanya beberapa KB.

Dosa #5: SVG yang "Kotor" (Tidak Dioptimalkan)

Anda sudah tahu SVG itu hebat (dari artikel "Save for Web"). Tapi ada jebakannya.

  • Dosa: Anda mengekspor SVG langsung dari Adobe Illustrator dan langsung menggunakannya.

  • Apa Masalahnya? File SVG dari software desain seringkali penuh dengan "sampah"—metadata editor, komentar, grup kosong, dan ribuan node yang tidak perlu. Kode ini membengkakkan ukuran file.

  • Cara Memperbaikinya (Solusi):

    • "Bersihkan" SVG Anda. Selalu jalankan file SVG Anda melalui tool gratis seperti SVGOMG (oleh Jake Archibald dari Google). Tool ini akan membersihkan semua kode sampah dan mengecilkan ukuran file secara drastis tanpa kehilangan kualitas.

Dosa #6: Mengabaikan Desain Mobile-First

  • Dosa: Anda mendesain hanya di frame Desktop 1920px. Anda tidak menyediakan mockup mobile.

  • Apa Masalahnya? Developer mungkin terpaksa memuat semua aset desktop (gambar 1200px, slider kompleks) di handphone, lalu menggunakan CSS untuk "menyembunyikannya" atau "mengecilkannya". Masalahnya, file itu tetap diunduh, menghabiskan kuota mobile dan memperlambat loading.

  • Cara Memperbaikinya (Solusi):

    • Desain Mobile-First. Mulailah desain Anda dari layar terkecil. Pikirkan: aset apa yang benar-benar penting di mobile?
    • Berikan aset yang berbeda untuk mobile jika perlu (misal: gambar banner yang lebih simpel/ter-crop).

Dosa #7: "Div-itis" (Terlalu Banyak Elemen dari Page Builder)

  • Dosa: Anda menggunakan page builder (seperti Elementor) dan untuk membuat satu tombol, Anda menyeret widget "Kolom", lalu "Widget Spasi", lalu "Widget Tombol", lalu "Widget Teks" di atasnya.

  • Apa Masalahnya? Di balik layar, page builder itu baru saja membuat 10 <div> bersarang hanya untuk satu tombol. Ini disebut "Div-itis". Browser harus bekerja ekstra keras untuk merender struktur HTML yang "bengkak" dan memuat banyak file CSS/JS yang mungkin tidak Anda perlukan.

  • Cara Memperbaikinya (Solusi):

    • Desain dengan Ramping: Pahami cara kerja HTML. Beri developer Anda desain yang "bersih" dan logis, bukan yang ditumpuk-tumpuk.
    • Jika Anda menggunakan builder, belajarlah untuk menggunakan padding dan margin internal, alih-alih menambahkan widget "Spasi" ekstra di mana-mana.

Kesimpulan

Performa website adalah tanggung jawab bersama. Sebagai desainer "Sintaks Logis", kita harus memimpin.

Desain modern bukan lagi hanya soal "bagaimana tampilannya", tapi juga "seberapa cepat kerjanya". Dengan menghindari 7 dosa ini, Anda tidak hanya membuat website yang lebih cepat, Anda juga membuktikan diri sebagai desainer profesional yang cerdas secara teknis.

"Dosa" performa apa yang paling sering Anda lihat (atau lakukan)? Bagikan di kolom komentar!

Komentar

Posting Komentar