SEO
Wawasan
6 Okt 2025
FramerFramer situs kecepatan dan metode optimasi performa
FramerFramer situs dapat dioptimalkan untuk meningkatkan kecepatan dan kinerja. Anda dapat mempercepat waktu pemuatan situs dan meningkatkan pengalaman pengguna dengan mengoptimalkan gambar, font, video, dan mengelola kode kustom.
Diposting oleh
Diterjemahkan oleh
Daftar Isi
Daftar Isi
Dokumen ini disusun untuk mengatasi kesulitan pengguna Indonesia yang ingin belajar Framer, akibat kurangnya sumber daya dalam bahasa Indonesia. Kami menerjemahkan konten blog resmi ke bahasa Indonesia dan menambahkan informasi berguna untuk praktik. Semoga ini bisa sedikit membantu Anda yang menggunakan Framer.
Alasan untuk Optimalisasi Situs
Framer menerapkan berbagai optimalisasi secara otomatis untuk menjaga kecepatan situs. Namun, masih ada langkah-langkah tambahan yang dapat diambil untuk meningkatkan kinerja. Jika kecepatan situs Anda belum sesuai keinginan, pertimbangkan untuk mencoba langkah-langkah lanjutan yang kami sarankan di bawah ini.
Optimalisasi Gambar
Framer secara otomatis mengoptimalkan sebagian besar gambar sehingga pengguna tidak perlu mengonversi ke WebP atau mengubah ukuran gambar secara manual. Untuk informasi lebih lanjut tentang bagaimana gambar dioptimalkan dalam Framer, lihat artikel terkait ini.
Gambar umum: Unggah gambar secara langsung dan atur resolusi ke
Auto. Framer akan menangani konversi ke WebP dan penyesuaian ukuran untuk Anda.Gambar SVG: Cukup buat frame lalu seret-dan-letakkan gambar ke dalamnya untuk mengunggah.
Optimalisasi Font
Font berpengaruh besar pada kecepatan pemuatan situs dan keterbacaan. Framer mengoptimalkan pemuatan font secara otomatis, namun mengikuti beberapa prinsip dapat memberikan pengalaman yang lebih cepat dan stabil. Lihat artikel cara mengoptimalkan font di Framer untuk detail lebih lanjut.
Menggunakan macam font dari Light hingga Extra Bold
: Dengan cara ini, teks tidak akan menghilang ketika font memuat dan digantikan font alternatif berkatfont-display: swap.Menggunakan Google Fonts
: Google Fonts hanya mengunduh karakter yang diperlukan sehingga mengurangi bobot yang tidak perlu dan meningkatkan kecepatan pemuatan.Jika ada font custom yang diunggah sebelum November 2023, unggah kembali
: Ini akan mengonversinya ke format WOFF2 yang mengurangi ukuran file dan meningkatkan kinerja.
Optimalisasi Video
Video dapat meningkatkan kualitas situs namun juga bisa memperlambat kecepatan. Beberapa prinsip harus diingat. Untuk detail lebih lanjut, lihat cara mengoptimalkan video di Framer.
Menggunakan YouTube atau Vimeo
: Kedua platform ini menyesuaikan kualitas video berdasarkan kecepatan jaringan dan ukuran layar, berbeda dengan Framer yang menyajikan berdasarkan resolusi asli. Elemen YouTube dan Vimeo dapat digunakan dari menuInsert.Menghindari Auto Play
: Auto Play mengonsumsi bandwidth yang tidak perlu dan dapat memperlambat kecepatan pemuatan situs lainnya.
Jika video digunakan sebagai latar belakang, nonaktifkan suara (
Muted), atur ke pengulangan (Loop), dan hapus tombol kontrol. Dengan ini, video hanya memuat saat dilihat, menghemat bandwidth.
Memeriksa Status Optimalisasi
Di Framer, Anda dapat langsung mengonfirmasi apakah situs telah dioptimalkan dengan benar.
Dari menu atas, pergi ke Site Settings → Versions dan pastikan versi terbaru memiliki label Optimized. Jika terdapat Optimization Error, itu menandakan ada masalah, sehingga perlu diperiksa kembali dan dipublikasi ulang.
Pengelolaan Kode Kustom
Framer memungkinkan untuk menambahkan kode kustom langsung ke dalam <head> atau <body>. Namun, penggunaan berlebihan dapat menurunkan kinerja.
Menambah kode yang benar-benar diperlukan
: Misalnya, jika ada halaman yang memerlukan skrip MailChimp, atur agar hanya memuat di halaman tersebut.Menggunakan kode yang tepat per skrip
: Kelola kode yang berlaku di seluruh situs padaProject settings → Custom code, dan yang diperlukan untuk halaman tertentu padaPage settings → Custom code.Memperhatikan penempatan skrip
: Biasanya, letakkan<script>di bagian akhir<body>dan tambahkan atributdefer.
Jika kode harus dijalankan secepat mungkin, Anda dapat menggunakan async, tetapi hindari memasukkan tanpa atribut apa pun karena itu dapat memperlambat situs. Sebaiknya gunakan async pada skrip yang perlu segera dimuat tetapi tidak menggunakan keduanya sekaligus. Kode inline sudah dioptimalkan dengan defertype="module".
Mengelola Efek Animasi
Animasi dapat meningkatkan pengalaman pengguna, namun harus digunakan dengan hati-hati untuk kinerja optimal.
Gunakan Appear Effect untuk elemen penting di bagian atas halaman. Efek ini dijalankan sebelum JavaScript memuat, memberikan pengalaman pengguna yang lebih mulus. Namun, memberikan efek Scroll Animation pada elemen yang sama dapat mengurangi kinerja pemuatan awal.
Bayangan dan Blur
Bayangan dan blur dapat memberikan kedalaman desain, tetapi juga dapat mempengaruhi kinerja browser. Walaupun tidak mempengaruhi waktu pemuatan, mereka dapat memperlambat animasi atau kecepatan gulir.
Jika mungkin, gunakan sesedikit mungkin dan pertahankan nilai blur di bawah 10 untuk memelihara kinerja.
Embed Eksternal dan iFrame
Membawa konten dari luar dapat pula mempengaruhi kinerja. Elemen eksternal seperti form HubSpot atau ilustrasi 3D Spline pada dasarnya ditangani dengan cara Lazy-load oleh Framer, namun masih bisa memuat kode tambahan dan memperberat situs.
Dalam situasi seperti ini, coba gandakan situs dan hapus embed tersebut untuk membandingkan perubahannya terhadap kecepatan. Pemeriksaan seperti ini dapat membantu memastikan peningkatan kinerja.
Jika setelah melakukan langkah-langkah tersebut masih ada masalah yang belum teratasi, Anda bisa mendapatkan bantuan dari halaman bantuan.
Artikel ini adalah terjemahan dan adaptasi dari konten blog resmi Framer ‘Optimizing your site for speed and performance’.
