Langsung ke konten utama

Postingan

Menampilkan postingan dengan label Website

Visual Hierarki dalam Desain

Visual Hierarchy (Hierarki) itu intinya menunjukkan suatu elemen dalam desain lebih penting dari elemen yang lainnya. Atau elemen mana yang akan kita tunjukkan pertama kali kepada orang yang melihat. Hierarki bisa ditunjukkan dengan : 1. Ukuran. Jangan buat semua ukuran sama. 2. Bentuk. Buatlah bentuk yang berbeda dari elemen yang lainnya. 3. Placement, atau penempatan. Elemen di tengah biasanya lebih penting daripada yang ada di ujung kiri bawah. 4. Pattern, atau pola. Dengan pola tertentu, kita akan lebih mudah mengerti dengan apa yang disampaikan. 5. Warna dan kontras. Warna yang kontras dan berbeda dengan yang lain akan lebih diperhatikan.  6. Spasi atau ruang kosong. Tampilan yang penuh dengan objek akan lebih sulit untuk dimengerti dengan cepat dan membingungkan.  7. Tekstur dan gaya desain. Tekstur dan gaya desain yang berbeda dari sekitarnya akan menarik perhatian.  Sumber : http://learndesignprinciples.com/rhythm.html https://www.interaction-design.org/literature...

Cara Optimasi Largest Contentful Paint (LCP)

Sebelumnya, telah kita ketahui apa itu Largest Contentful Paint (LCP) dan faktor apa saja yang mempengaruhinya. Selanjutnya kita ukur LCP pada website.  Berikut ini rekomendasi Google untuk mengukur LCP : PageSpeed Insights Search Console  (Core Web Vitals report) Chrome User Experience Report  (membutuhkan akun Google dan Google Cloud Project Ada beberapa masalah yang timbul ketika melakukan optimasi pada LCP ini, yaitu: Slow server response times Render-blocking JavaScript and CSS Slow resource load times Client-side rendering Setelah kita tahu beberapa masalah yang sering muncul, sekarang tentu pertanyaannya bagaimana cara mengoptimasinya? Sebenarnya untuk melakukan optimasi, harus dengan mengevaluasi langsung website yang bermasalah. Karena tiap website memiliki script dan konfigurasi yang berbeda. Tapi secara umum optimasi bisa dilakukan pada image, CSS, JavaScript, dan server.  Jika anda perhatikan pada bagian “elemen yang dihitung pada LCP” yang dibahas sebelu...

Mengenal Largest Contentful Paint

Largest Contentful Paint adalah waktu yang dibutuhkan sebuah website dalam menyajikan konten utama serta siap untuk berinteraksi. Konten Utama pada LCP adalah konten yang terlihat oleh pengguna ketika pertama kali membuka website. Elemen Yang Dihitung Pada LCP: 1. Elemen <img> 2. Elemen <img> di dalam elemen <svg> 3. Poster Image Pada Elemen <video> (atau biasa disebut tumbnail) 4. Elemen Dengan Gambar Latar Yang Dimuat Dengan url() Contoh:  background-image: url("https://domainanda.com/gambar.jpg"); 5. Block-Level Atau Inline-Level Element Yang Berisi Teks <div>Ini adalah contoh elemen tingkat blok atau biasa disebut block-level element <span>Sedangkan ini adalah contoh elemen tingkat baris atau inline-level element.</span></div> Sumber : https://projasaweb.com/largest-contentful-paint/

Struktur homepage website

Urutan dari atas ke bawah bagian dari halaman depan suatu website disarankan sebagai berikut :  1. Value, yang paling atas adalah nilai utama dari brand  2. Sosial Proof, kemudian interaksi sosial. Bisa berupa testimoni atau jumlah orang yang dilayani atau sejenisnya  3. Benefit, manfaat apa yang bisa didapatkan? Bukan manfaat detail, tapi manfaat utama yang bisa langsung dirasakan 4. Call to Action, tujuan kita membuat website. Bisa berupa pendaftaran, pembelian, booking, dll.  5. Footer, ini bisa untuk menempatkan beberapa link ke halaman yang lain. Bagus untuk SEO.

Mengganti Username Website (WordPress)

Salah satu alasan mengapa harus mengganti Username website berbasis WordPress adalah demi keamanan. Website dengan Username 'admin' lebih mudah untuk dibobol. Ada 3 cara untuk mengubah username: 1. Plugin Username Changer . Setelah instalasi selesai, ubah username di Setting > Username Changer. Buka tab User > Your profile dan temukan kolom username untuk diubah.  2. Melalui database. Cara ini lebih beresiko karena mengoprek dalamnya web. Kita harus bisa mengakses cpanel untuk bisa masuk ke database. Cari phpMyAdmin di dalam cpanel / di bawah database. Export database sebelum mengubah apapun. Di beranda, cari wp_users, cari akun yang anda ingin ubah klik edit. Cari user_login dan ubah username pada kolom value. Itu saja, lainnya jangan. Terakhir, klik Go.  3. Buat username baru dan hapus username lama. Nambah dan hapus username WordPress ada di tab Users. Pastikan anda mengatur role ke Administrator . Ketika menghapus ada peringatan / notifikasi apakah anda akan menghap...

8 Aspek Teknik SEO

Beberapa aspek teknik di bawah ini jika dioptimasi insyaaAllah akan bisa menaikkan posisi/rangking di mesin pencarian.  1. Cepat. Pembaca tidak suka dengan website atau blog yang lemot.  2. Mudah dijelajahi oleh mesin pencarian. Mesin pencarian (search engine) menggunakan robot untuk menjelajah situs anda. Gunakan robot.txt untuk mengatur bagaimana robot menjelajah.  3. Tidak banyak link yang mati. Gunakan tool untuk menangani halaman yang mati ( 404 error page ).  4. Tidak membingungkan mesin pencarian dengan duplikat konten.  5. Aman. Silakan cek apakah situs anda sudah https di semua browser.  Tambahan:  - Mempunyai struktur data - Mempunyai _XML sitemap_  - Menggunakan _hreflang_ jika website internasional https://yoast.com/what-is-technical-seo/

Mempercepat Loading WordPress dengan Defer Parsing JavaScript

Pada umumnya untuk JavaScript diletakan antara tag <head></head> . Ketika diakses, website akan memuat kode tersebut dari atas sampai bawah. Hal ini dapat cukup merepotkan, terutama jika Anda memiliki banyak JavaScript atau string yang cukup panjang. Dengan melakukan defer parsing JavaScript, blog Anda tidak akan perlu menunggu sampai loading JavaScript selesai, sehingga loadingnya akan lebih cepat. Ada 2 pilihan yang bisa digunakan untuk melakukan defer parsing JavaScript pada WordPress. 1. Menggunakan Plugin WordPress  Bisa menggunakan WP Deferred JavaScript atau Speed Booster Pack atau yang lainnya. 2. Melakukan Defer Parsing JavaScript Melalui functions.php Untuk melakukan defer parsing JavaScript, silakan copy code di bawah ini dan letakkan pada baris di bawah script dalam file wp-includes/functions.php.  function defer_parsing_of_js ( $url ) { if ( FALSE === strpos( $url, '.js' ) ) return $url; if ( strpos( $url, 'jquery.js' ) ) return $url; return ...