Cara Mengoptimalkan Tata Letak Situs Web Anda dengan Elementor

Ingin tahu cara mengoptimalkan tata letak situs web Anda dengan Elementor ?

Mengoptimalkan kinerja situs web adalah salah satu aspek terpentingnya Pengalaman pengguna. Situs web yang memuat lambat dapat membuat pengguna frustrasi, sering kali mengakibatkan tingkat bouncing tinggi yang dapat mempengaruhi keberhasilan bisnis kami.

Performa situs web dapat dipengaruhi oleh banyak faktor, misalnya: ukuran gambar yang besar, konfigurasi server, terlalu banyak plugin, di antara faktor lainnya.

Performa situs web adalah salah satu nilai terkuat kami sebagai pembuat web. Inilah mengapa kami membuat kursus ini dalam 5 bagian.

Sekarang Anda dapat mempelajari cara membuat tata letak dan posting menggunakan teknik yang optimal. Pengetahuan ini akan memastikan bahwa situs web Anda tidak akan menyertakan bagian, kolom, atau widget berlebihan yang tidak diperlukan. Kami juga akan menjelajahi beberapa fitur widget bawaan untuk meningkatkan waktu pemuatan.

Pada akhir tutorial ini, Anda akan sepenuhnya siap untuk mengoptimalkan kinerja setiap situs web Elementor Anda buat dan langsung menuai hasilnya.

Pelajaran 1: Praktik Terbaik Pengoptimalan Tata Letak

Dalam pelajaran pertama kita, kita akan membahas cara paling efisien untuk membuat halaman dan postingan Anda di editor Elementor. Kita sering melihat penggunaan terlalu banyak bagian, kolom, bagian internal, dan widget, padahal tata letak yang sama dapat dicapai dengan menggunakan elemen yang jauh lebih sedikit.

Menggunakan elemen dalam jumlah berlebihan memperlambat kinerja situs web Anda, jadi mari selami dan pelajari cara membuat situs web dengan Elementor dengan cara yang paling efisien.

Kami akan membahas topik-topik berikut:

• Melihat lebih dekat pada struktur halaman yang benar
• Melihat dan menguji kinerja situs web Anda
• Mengoptimalkan konten header, footer, dan halaman Anda
• Contoh praktik tata letak situs web yang baik dan buruk
• Penggunaan widget, pemosisian, dan gaya global yang benar
• Tips menghindari lag beban, tingkatkan SEO dan meningkatkan waktu pemuatan
• Pengoptimalan aksesibilitas
• Mengurangi jumlah elemen DOM
• Dan banyak lagi !

Untuk lebih memahami tata letak optimal di Elementor, kita akan menjelajahi template Elementor yang menunjukkan penyalahgunaan umum bagian, kolom, dan widget. Pada akhir pelajaran ini, kita akan sepenuhnya membangun kembali seluruh halaman ini dengan mengurangi jumlah kolom dan widget. Halaman awal kami terdiri dari sembilan bagian, 31 kolom, lima bagian internal, dan 44 widget.

Di akhir tutorial, halaman yang dioptimalkan akan dikurangi menjadi enam bagian, tujuh kolom, dan 16 widget.

Kami akan menggunakan yang gratis, ringan Halo Temadan kami akan membuat ulang setiap bagian template dan meningkatkan kinerja situs web secara keseluruhan menggunakan praktik terbaik.

Menguji praktik buruk

Sebelum kita menyelami pengoptimalan tata letak situs web, mari kita lakukan pengujian di halaman kita untuk memahami sepenuhnya apa yang terjadi ketika seseorang mengunjungi situs web kita. Setelah semua pengoptimalan kami selesai, kami akan mengulangi pengujian dan membandingkan hasilnya.

Langkah 1: Verifikasi situs web Anda di jendela penyamaran

• Buka jendela baru dalam "Mode penyamaran" dan ketik URL halaman web yang Anda uji.

Langkah 2: Verifikasi bahwa Anda menggunakan jalur URL langsung

Jika Anda tidak yakin dengan tautan halaman Anda, Anda dapat dengan mudah menemukannya dengan membuka dasbor WP Anda:

• Klik "Halaman" untuk melihat semua halaman di situs web Anda.
• Arahkan kursor ke halaman Anda dan klik opsi "Lihat". Ini akan membawa Anda langsung ke halaman Anda.
• Salin dan tempel URL ini ke jendela penyamaran dan setelah situs web dimuat, Anda siap untuk mengujinya!

Menguji & Melihat Hasil Kinerja

Langkah 1: Uji hasil kinerja

Anda mungkin pernah menggunakan Alat Pengembang Chrome sebelumnya.

Jika tidak, untuk memeriksa dan menampilkan konten HTML dan CSS halaman Anda:

• Klik kanan di mana saja di halaman Anda dan klik pilih "Periksa." Anda akan melihat beberapa tab tempat Anda dapat membaca HTML dan CSS, menemukan kesalahan, mendapatkan hasil SEO, dan menjalankan berbagai tes.
• Pilih tab Network dan tekan tombol cmd atau ctrl + R untuk memuat hasilnya.

Seperti yang Anda lihat, tata letak kami saat ini membutuhkan 2,88 detik untuk memuat dan melakukan 81 permintaan.

Langkah 2: Lihat Hasil Kinerja

• Beralih ke tab Mercusuar, tempat kami dapat menjalankan laporan audit di halaman kami.

Ini akan memberi kami lebih banyak informasi tentang kinerja halaman saat ini.

• Pilih "Hasilkan Laporan". Setelah beberapa saat, laporan Anda akan muncul.

Kami saat ini menerima peringkat kinerja 73/100, yang pasti bisa kami kerjakan.

Idealnya, kami ingin semua angka ini berwarna hijau. Sekarang mari kita lanjutkan untuk mengoptimalkan halaman kita dan meningkatkan halaman kita statistika.

Ingatlah bahwa setelah setiap langkah pengoptimalan yang kami lakukan, kami mungkin mengambil beberapa praktik terbaik dari perubahan dan mengingatnya untuk situs web yang kami buat di masa mendatang.

Mengoptimalkan elemen halaman

Langkah 1: Optimalkan tajuk

Mari kita mulai dengan Header.

Seperti yang Anda lihat dalam desain ini, header dibuat dengan tiga kolom.

Di kolom pertama, logo kami terdiri dari dua widget:

1. Un Widget Gambar yang menampilkan file gambar .png dari logo kami
2. Widget Judul.

Di kolom kedua, menu header terdiri dari Widget Menu Navigasi kami.

Kolom ketiga berisi:

1. Widget Bagian internal (yang mengontrol posisi Widget Ikon).
2. Detail kontak kami untuk Header

Mari kita lihat bagaimana kita dapat meminimalkan jumlah bagian, widget, dan bagian di sini.

Langkah 2: Buat tajuk baru

Kolom 1:

• Buat 1 bagian dengan 1 kolom saja.
• Tambahkan Widget Logo Situs Web dan seret ke dalam bagian.

Praktik terbaik untuk gambar:

• Berikan setiap file gambar di situs web Anda judul yang relevan dan teks alternatif di perpustakaan media.

Ini akan meningkatkan aksesibilitas halaman Anda dan peringkat mesin pencari Anda. Dalam logo yang awalnya kami gunakan, judulnya tidak relevan dengan gambar sebenarnya, dan tidak ada teks alternatif.

• Tentukan dimensi gambar di dalam widget.

Ini memungkinkan halaman ditata dengan ruang yang tepat sebelum gambar dimuat, menghindari jeda tata letak (faktor yang diukur oleh browser).

Dalam contoh yang sedang kita kerjakan bersama, selesaikan masalah ini dengan membuka tab Style dan mengatur lebar gambar menjadi 200px.

Kolom 2

Kembali ke panel widget:

• Seret dan lepas widget menu navigasi di bawah logo
• Setel penunjuk ke "Tidak Ada"
• Buka tab "Gaya" dan tambahkan font pilihan Anda (agar cocok dengan desain kami sebelumnya)

Praktik terbaik untuk penataan gaya secara keseluruhan:

• Hindari menggunakan lebih dari 2 font berbeda yang menyertakan banyak bobot (Font global).
• Hindari memilih warna yang berbeda untuk setiap item dengan pemilih warna (Warna global).
• Tingkatkan kecepatan pemuatan situs web Anda dengan menghasilkan lebih sedikit kueri (font keseluruhan).
• Ulangi kode yang tidak perlu dua kali (warna global).
• Pertahankan konsistensi dan kontrol model Anda (gaya keseluruhan).

Font global:

Ini dapat dilakukan dengan menggunakan fungsi Font Global:

• Buka tab "Gaya" dan tambahkan font pilihan Anda (agar cocok dengan desain kami sebelumnya) dengan memilih salah satu, buat perubahan kecil, dan arahkan kursor ke ikon plus.
• Klik ikon plus dan pilih jenis font yang Anda butuhkan
• Simpan gaya yang akan Anda gunakan dalam template sebagai font global

Anda kemudian dapat menggunakan gaya ini pada setiap widget yang Anda buat.

Warna global:

Metode yang sama dapat digunakan untuk keseluruhan warna Anda:

• Klik "Global"
• Arahkan kursor ke pemilih warna dan klik di atasnya
• Pilih warna dan arahkan ke ikon plus
• Klik "Global" >> pilih "Principal"

Setelah Anda selesai melakukannya, warna akan disimpan ke palet warna template Anda, sehingga Anda dapat memilihnya dari daftar Warna Global kapan pun Anda membutuhkannya untuk item atau widget.

Sebelum kita melanjutkan dengan header kita, mari kita atur padding vertikal ke nol.

Langkah 3: Edit tajuk

Kolom 3

• Buka panel "Widget"
• Seret Widget Daftar Ikon di bawah menu.
• Hapus item daftar tambahan
• Tambahkan teks Anda
• Pilih ikon pilihan Anda
• Buka tab "Gaya"
• Tentukan keseluruhan warna dan font pilihan Anda

Sekarang kita perlu memperbaiki satu hal lagi - tiga elemen header saat ini ditumpuk dan tidak selaras satu sama lain. Kita dapat mengatasi masalah ini dengan mengubah lebar setiap elemen ke ukuran sebenarnya, sehingga tidak memakan semua ruang di kolom.

Untuk mengatasi masalah ini:

• Pilih widget logo Situs >> tab 'Lanjutan'
• Pilih "Positioning" dan atur lebarnya ke "Inline"

Ulangi langkah yang tepat ini untuk widget Menu Navigasi dan untuk widget Daftar Ikon.

Sekarang setelah semua elemen header sejajar, yang tersisa hanyalah memposisikannya dengan benar.

Menentukan posisi kolom dengan elemen sebaris

• Pilih kolom Anda >> buka tab "Tata Letak"
• Di "Perataan vertikal", pilih "Bawah"
• "Dalam perataan Horizontal" pilih "Spasi di antara"

Pilih posisi perataan "Spasi antara" widget pertama dan terakhir di kedua ujungnya, memberikan jarak yang sama di antara semua widget lainnya.

Namun, widget pertama dan terakhir memiliki lebar yang berbeda, sehingga ruang yang sama mungkin tidak selalu berada di tengah widget internal kita.

Kita dapat memecahkan masalah ini dengan menyesuaikan margin:

• Pilih widget Menu Navigasi >> tab “Lanjutan”
• Pisahkan margin dan hapus spasi dengan nilai negatif

Langkah 4: Jadikan tajuk responsif

Sekarang mari kita lihat seperti apa versi situs web kita saat ini di perangkat seluler.

Praktik terbaik untuk respons seluler:

• Sederhanakan desain Anda dan pikirkan cara untuk membuat bagian yang sama responsif, untuk menghindari penggunaan dua kali jumlah kode yang akan memengaruhi kecepatan halaman Anda.

Seperti yang Anda lihat di tajuk ini - Adalah umum untuk melihat bagian yang sama didesain ulang secara khusus untuk tablet dan perangkat seluler. Inilah yang kita lihat di sini: dua versi desain telah dibuat: satu versi untuk desktop dan satu untuk seluler.

Sebaliknya, ketika desain dan kode Anda responsif, kecepatan halaman Anda meningkat karena akan menggunakan lebih sedikit kode.

Mari kita lihat bagaimana kita bisa mencapainya, menggunakan pengaturan "Lebar Kustom" untuk widget dan elemen kita.

Menyetel lebar khusus untuk tablet

• Klik pada 'Menu Nav' >> tab 'Lanjutan'
• Pilih "Positioning" >> atur lebar ke "Custom".
• Pilih "%" >> beri widget lebar yang sama (dalam persentase) dari ruang kosong di sekitarnya.
• Klik pada tab “Content” >> “Toggle Align” >> pilih “Right”.

Ini memungkinkan Anda untuk menyelaraskan menu sakelar di mana saja dalam lebar widget.

Sekarang mari kita selesaikan penyesuaian menu sakelar.

• "Konten" >> Klik sakelar "Lebar Penuh" dan atur ke "Ya".
• "Gaya" >> Hapus latar belakang dengan menyeret bilah "Pemilih Warna" ke kiri.

Sekarang mari kita lihat seperti apa tampilannya di layar ponsel.

Menentukan lebar khusus untuk seluler

Dalam skenario ini, kami akan menyimpan tiga widget header di dalam viewport. Namun perlu diingat bahwa untuk beberapa situs web mungkin lebih masuk akal untuk menghilangkan elemen tertentu dari header saat dilihat di ponsel atau tablet.

Dalam hal ini, yang terjadi pada header kita saat ditampilkan di ponsel adalah Menu Navigasi dan widget Logo tidak dapat masuk ke dalam satu baris.

Untuk mengatasi masalah ini:

Penempatan Menu Nav

• Klik "Nav Menu" >> tab "Advanced"
• Pilih "Positioning" >> atur lebar ke "Custom"
• Pilih "%" >> Beri widget lebar 30%, agar pas di sebelah logo kita

Posisi daftar ikon

• Klik pada "Daftar Ikon" >> '' Lanjutan 'tab
• Pilih "Isi" >> Pisahkan nilai-nilai
• Tambahkan bantalan 12px ke "TOP"

Bisakah Anda mempercayainya?

Header kami awalnya digunakan 2 bagian, 12 widget dan 10 kolom. Sekarang tajuk kami menggunakan 1 bagian, 3 widget, dan 1 kolom.

Dan hasilnya sama!

Langkah 5: Optimalkan bagian Pahlawan

Mari kita beralih ke bagian selanjutnya dari situs web kami: bagian pahlawan

Praktik Terbaik untuk Bagian Pahlawan:

• Pastikan teks bagian pahlawan Anda mudah terlihat, terutama jika memiliki gambar latar belakang.

Mengontrol posisi widget di kolom

Kesalahan umum yang kami lihat dibuat di editor Elementor adalah menggunakan kolom dan spasi tambahan untuk mengontrol posisi widget.

Dalam model contoh kami, kami gambar pahlawan terdiri dari bagian dengan gambar latar belakang. Judul dan teks diposisikan secara horizontal, menggunakan dua kolom. Ada juga spacer di dalam bagian untuk menempatkan elemen secara vertikal.

Mari kita lihat bagaimana kita dapat membuat desain yang sama hanya dengan satu bagian:

• Hapus kolom tambahan di sebelah kanan teks.
• Lepaskan pengatur jarak.

Sebagai gantinya, untuk memposisikan teks pahlawan kita di tempat yang kita inginkan, kita akan menggunakan opsi perataan kolom:

• Pilih kolom.
• Atur "Perataan Vertikal" ke "Tengah".
• Buka tab "Lanjutan".
• Pilih "Isi" >> Pisahkan nilai-nilai
• Atur Padding Kanan menjadi 50%.

• Pilih bagian.
• Pilih "Tinggi minimum" >> atur ke 80.

Memperbaiki kontras antara teks dan latar belakang

Penting bahwa setiap situs web memiliki kontras yang baik antara teks dan latar belakang. Informasi yang tidak dapat dibaca memengaruhi skor situs web Anda dan juga dapat membuat pengunjung menjauh. Bagaimanapun, teks harus selalu terbaca dengan jelas.

Ada beberapa cara untuk meningkatkan kejelasan bagian yang latar belakangnya adalah gambar berwarna (seperti yang kita lihat di template ini):

• Klik pada tajuk Anda.
• Buka tab "Gaya" >> Pilih "Bayangan teks".

Ini akan meningkatkan keterbacaan teks dengan membuatnya menonjol dari gambar latar belakangnya.

Cara lain untuk membuat teks Anda lebih jelas adalah dengan menggunakan overlay.

• Pilih bagian >> tab 'Style' >> 'Background Overlay'
• Pilih salah satu warna Anda secara keseluruhan dan bermain-main dengan opacity sampai Anda mendapatkan hasil yang Anda inginkan

Langkah 6: Optimalkan bagian dengan kotak ikon

Sekarang mari kita beralih ke bagian berikutnya, di mana saat ini kita memiliki bagian dalam dengan empat kolom. Saat ini, setiap kolom menyertakan tiga widget: Widget Gambar, Widget Judul, dan Widget Editor Teks.

Mari kita lihat bagaimana kita dapat menyederhanakan bagian ini untuk meningkatkan kinerjanya.

Isi area ikon

• Pilih tombol »Widget Kotak Ikon« di menu widget dan seret ke kolom
• Pilih "Kotak ikon"
• Arahkan ke gambar ikon
• Pilih "Unduh SVG" **
• Masukkan ikon kustom Anda

** Catatan: Lencana adalah file SVG. Jika belum, masuk ke dashboard WordPress, lalu masuk ke Elementor >> Settings. Anda harus mengaktifkan Aktifkan unduhan file tanpa filter.

• Ketik "judul" Anda
• Ketik "Deskripsi" Anda
• Pilih "Gaya" >> Pilih warna keseluruhan
• Pilih "Ukuran" dan seret bilah ke ukuran pilihan Anda
• Pilih "Padding" dan seret bilah ke nomor pilihan Anda

Langkah 8: Optimalkan bagian "Layanan"

Kami sekarang akan membangun kembali bagian "Layanan", yang saat ini menggunakan dua kolom, dua gambar, widget judul dan widget editor teks.

Mari kita buat desain yang sama di bagian baru, tetapi hanya dengan satu kolom.

• Buat bagian baru dengan kolom
• Di "Layout" >> atur "Lebar Konten" ke "Lebar Penuh"
• Pilih "Kotak Gambar Widget" di panel widget dan seret ke kolom

(Kami akan dapat mengintegrasikan semua aset bagian ke dalam widget ini)

• Ketik Judulnya
• Ketik deskripsi

Untuk gambar, kami akan menyimpan desain saat ini yang kami gunakan untuk gambar kami.

• Sisipkan gambar yang sama dari perpustakaan media
• Buka tab "Konten" >> Setel "Posisi Gambar" ke "Kanan"

• Buka tab "Gaya"
• Tingkatkan jarak antar elemen
• Tingkatkan "Lebar" gambar
• Luaskan bagian "Konten"
• Pilih perataan "tengah"
• Setel "Perataan Vertikal" ke "Tengah"
• Tentukan keseluruhan warna dan font pilihan Anda
• Buka tab "Lanjutan"
• Tambahkan 10% pengisi ke widget

Sekarang bagian Layanan memiliki desain yang sama, tetapi dengan aset yang lebih sedikit.

Langkah 9: Optimalkan bagian ajakan bertindak

Praktik terbaik untuk tautan CTA:

• Pastikan semua tautan media sosial Anda berfungsi dengan baik dan tombolnya berisi tautan.
• Saat Anda menambahkan tautan ke situs web lain, sertakan atribut ini: "rel | noopener"

(Anda dapat melakukannya dengan mengklik ikon roda gigi dan mengetik atribut di "Atribut Kustom"). Ini akan membuka tautan di tab browser baru dan meningkatkan skor kinerja Anda.

Bagian berikut menyajikan ajakan bertindak untuk layanan kami.

Bagian saat ini memiliki dua kolom, yang berisi:

1. Gambar latar belakang dengan spacer
2. Dua tajuk, bagian internal, editor teks, dan tombol

Mari kita buat desain yang sama di bagian baru, tetapi hanya dengan satu kolom.

• Buka tab "Layout" >> atur "Content Width" ke "Full Width"
• Buka tab "Lanjutan" >> Hapus isian tambahan apa pun

• Pilih "Widget Ajakan Bertindak" di panel widget dan seret ke kolom
• Setel "Posisi Gambar" ke "Kiri"
• Pilih gambar Anda dari perpustakaan media
• Luaskan bagian "Konten"
• Ketik tajuk
• Ketik deskripsi
• Ketik teks tombol

• Buka tab "Gaya"
• Tambahkan "Padding" di antara elemen
• Sesuaikan Lebar Gambar
• Luaskan bagian "Konten"
• Pilih font global untuk judul Anda
• Tambah jarak antara deskripsi dan tombol
• Pilih warna global yang cocok untuk setiap sumber daya
• Luaskan bagian "Tombol"
• Atur ukurannya menjadi "Besar"
• Sesuaikan sesuai dengan kebutuhan Anda, seperti warna latar belakang dan radius batas

Sejauh ini telah menjadi bagian 2 kolom dengan 6 widget. Sekarang bagian 1 kolom dengan hanya 1 widget!

Langkah 10: Optimalkan Korsel Gambar

Desain bagian Carousel Gambar kami saat ini memiliki kesalahan umum dengan cara menampilkan banyak gambar.

Desain ini terdiri dari 5 kolom, praktik yang cenderung dilakukan banyak pengguna untuk mengontrol ukuran gambar mereka.

Mari kita jelajahi cara yang lebih sederhana yang juga akan mengoptimalkan kinerja situs web Anda.

• Buat bagian baru dengan 1 kolom
• Buka tab "Layout" >> atur "Content Width" ke "Full Width"
• Pilih tombol »Image Carousel Widget« dari panel widget dan seret ke dalam kolom
• Tambahkan gambar yang diinginkan dari perpustakaan media

• Buka tab "Konten"
• Setel "Ukuran Gambar" ke "Sedang - 300 x 300"
• Sesuaikan "Slide untuk ditampilkan", "Slide untuk menggulir" dan "Navigasi" sesuai dengan preferensi Anda

• Buka tab "Gaya"
• Setel "Perataan Vertikal" ke "Tengah"
• Sesuaikan "Spasi"

• Buka tab "Lanjutan"
• Tambahkan isian yang diperlukan

Yang dulunya 5 kolom bagian sekarang hanya 1 kolom.

Mari kita beralih ke bagian berikutnya, di mana kita dapat mengoptimalkan video di situs web kita.

Langkah 11: Optimalkan bagian video

Praktik terbaik untuk konten video:

• Gunakan Lazy Load bila memungkinkan, untuk meningkatkan waktu pemuatan situs web Anda.

Apa yang terjadi ketika kita menerapkan opsi “Lazy Load”?

Secara teknis, kode embed video diganti dengan gambar statis. Dengan cara ini video hanya dimuat ketika pengguna mengklik gambar - yang sangat membantu dengan waktu pemuatan halaman kami.

Yang akan kita lakukan sekarang adalah mengubah cara kita menggunakan Widget Video, sehingga tidak memperlambat kecepatan halaman atau kinerja situs web kita.

• Pilih "Widget Video"
• Buka tab "Gaya"
• Pilih "Lazy Load"

Langkah 12: Optimalkan footer dan tetap perbarui

Kesalahan umum yang terlihat di banyak situs web adalah footer mereka menggunakan beberapa header untuk tanggal dan deskripsi, serta ikon untuk simbol hak cipta.

Mari kita lihat bagaimana mengoptimalkan footer dan memastikannya selalu up to date.

Kami akan mengonfigurasi proses pembaruan berkelanjutan ini menggunakan Tag dinamis. Dengan cara ini, kita tidak perlu mengubah konten header setiap tahun, karena tag dinamis akan otomatis diperbarui ke tahun ini.

Untuk melakukan ini, kami akan melanjutkan sebagai berikut:

• Hapus widget tambahan, hanya menyisakan widget Judul
• Pilih widget Judul
• Klik simbol "Tag Dinamis" di sebelah kanan bidang "Judul" (juga dikenal sebagai "tombol Induk"

• Dari menu tarik-turun, pilih item menu "Tanggal dan waktu saat ini"
• Klik pada ikon induk kunci
• Klik pada tab "Format Tanggal" dan pilih item menu "Kustom"
• Hapus apa yang saat ini ada di bidang "Format Kustom", kecuali "Y"
• Pilih tab "Lanjutan"
• Sorot bidang "Maju" dan tahan tombol "opsi" dan "G" secara bersamaan (atau "kontrol", alt "dan" C "secara bersamaan) untuk mengetikkan simbol" © ".
• Tambahkan spasi setelah "©"

• Pilih bidang "Setelah"
• Ketik spasi dan tulis teks yang ingin Anda tampilkan setelah tahun, seperti "Semua hak dilindungi undang-undang"

Anda mungkin memperhatikan bahwa di situs web contoh dalam tutorial ini, setiap widget memiliki bagiannya sendiri. Kami telah melakukan ini untuk membuat tutorial lebih jelas dan lebih mudah diikuti.

Idealnya, semakin sedikit bagian yang Anda miliki, semakin sedikit KODE HTML tambahan yang Anda miliki.

Anda dapat menggabungkan beberapa widget di bagian yang sama dengan menyeret dan menjatuhkannya di bagian di atas, lalu menghapus bagian yang kosong.

Dan hanya itu, tata letak Anda dioptimalkan!

Evaluasi kinerja situs web baru

Kami akan memeriksa hasilnya di jendela DevTools (Inspector):

• Pilih tab "Jaringan":

Ada beberapa perubahan yang bagus dan positif di sini:

• Situs web sekarang membutuhkan 568 milidetik untuk dimuat
• Kami beralih dari 81 permintaan menjadi 46
• Pilih tab "Mercusuar", di mana Anda akan melihat bahwa skor kinerja kami telah meningkat dari 73 menjadi 98

Ingatlah bahwa kami telah mengoptimalkan kinerja kami tanpa menggunakan plugin pihak ketiga. Yang diperlukan hanyalah tweak sederhana dan praktik terbaik.

Langkah 13: Uji hasilnya dengan efek gerakan

Kami ingin membuat situs kami lebih interaktif dan menyenangkan, tetapi bagaimana pengaruhnya terhadap skor kinerja kami? Mari kita lihat apa yang bisa kita lakukan.

Jadikan tajuk sebagai elemen "tetap":

• Pilih tajuk
• Buka tab "Lanjutan"
• Perluas tab "Efek Gerak"
• Setel opsi "Lengket" ke "Atas"

Jadikan bagian pahlawan sebagai elemen "tetap":

• Pilih bagian pahlawan
• Buka tab "Gaya"
• Pilih daftar tarik-turun "Lampiran" dan pilih "Tetap"

Gunakan a Animasi masuk untuk teks pahlawan (tajuk):

• Pilih widget Tajuk
• Buka tab "Lanjutan"
• Perluas tab "Efek Gerakan"
• Pilih Input Animation dan atur ke "Fade In"

Gunakan animasi input untuk deskripsi teks pahlawan (widget Editor Teks):

• Pilih widget Editor Teks
• Buka tab "Lanjutan"
• Perluas tab "Efek Gerakan"
• Pilih "Input animation" dan atur ke "Fade In"

Lakukan hal yang sama untuk widget yang muncul setelahnya, untuk efek halus saat halaman dimuat.

Sekarang mari kita jalankan tes kinerja lagi, untuk melihat bagaimana efek gerakan mempengaruhi skor kita:

• Kembali ke jendela "Inspektur"
• Pilih tab "Mercusuar"
• Klik "Buat laporan"

Sekarang kami melihat bahwa skor kinerja kami telah berkurang menjadi 97 - ini jelas bukan perbedaan besar dan itu membuat situs web lebih menarik dan menyenangkan.

Bisakah Anda percaya skor kinerja baru kami?

Kami senang Anda sekarang sepenuhnya siap untuk meningkatkan skor kinerja Anda dari setiap situs web Elementor yang Anda buat. Ini akan membuat perbedaan besar pada tujuan pembuatan situs web Anda dan kesuksesan bisnis Anda.

Kami menyarankan Anda menandai tutorial ini untuk referensi di masa mendatang, sehingga Anda dapat memeriksa kinerja halaman situs web Anda dan menerapkan praktik terbaik untuk mengoptimalkan tata letak Anda.

Dan itu baru permulaan - bagian selanjutnya dari kursus ini mencakuppengoptimalan gambar.

Dalam tutorial, kita akan membahas setiap gambar di situs web sampel dan mempelajari cara meningkatkannya untuk waktu muat yang lebih efisien.

Dapatkan Elementor Pro Sekarang!

Kesimpulan

Jadi ! Itu saja untuk artikel ini yang menunjukkan cara mengoptimalkan tata letak situs web Anda dengan Elementor. Jika Anda memiliki kekhawatiran tentang cara menuju ke sana, beri tahu kami di dalam komentar.

Namun, Anda juga bisa berkonsultasi sumber daya kita, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.

Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.

...