Desain Sederhana Lapak Terjemahan Tarjiem Oktober 2015

Rasanya hampir 2 minggu lebih mengolah ulang tampilan lapak dan blog jasa terjemahan tarjiem ini dengan desain sederhana. Hal yang paling menjadi fokus utama adalah pada bagian halaman depan yang saya anggap sebagai mata panah lapak terjemahan ini. Halaman depan yang sebelumnya menampilkan tulisan-tulisan terbaru, kini berubah menjadi semacam halaman proposal jasa penerjemah bahasa. Desainnya sangatlah sederhana. Tidak banyak gambar yang ditampilkan. Hampir semuanya menggunakan desain HTML dasar. Selain dukungan HTML, ada tambahan icon dan halaman kotak pada halaman depan. Walau sederhana, setidaknya tidak butuh waktu untuk merancang dan mengonsep desain sederhana ini.

Desain Sederhana Halaman Proposal Jasa Penerjemah

Desain Beranda/Homepage tarjiem Okt 2015 (Klik gambar untuk memperbesar)

Desain Beranda/Homepage tarjiem Okt 2015

Jenis format halaman (template page) jenis squezee page digunakan pada halaman depan (homepage) tarjiem.com. Hal yang menarik adalah secara tidak sengaja saya baru tahu fungsi dan keberadaan squeeze page ini di dalam tema yang saat ini saya gunakan, flatsimplebingit. Saya baru tahu fungsi squeeze page ini setelah hampir satu tahun menggunakan tema buatan dalam negeri dari kentooz ini. Dengan bantuan desain sederhana jenis template squeeze page ini, maka apa yang saya harapkan setidaknya bisa terwujud.

Nilai Google PageSpeed, GTMetrix dan Pingdom Halaman Depan

Hal yang menjadi fokus saya pada saya mengolah mendesain ulang tampilan blog jasa terjemahan ini adalah soal kecepatan blog ini, khususnya pada halaman depan. Sengaja desain halaman depan dibuat sesederhana mungkin dengan alasan agar akses masuk ke halaman depan sebagai lapak jasa penerjemah menjadi lebih cepat. Hasilnya? Bisa dilihat pada gambar -gambar di bawah ini. Gambar di bawah ini adalah nilai kecepatan terbaik halaman depan tarjiem.com berdasarkan Google PageSpeed Insights, GTMetrix.com dan Pingdom.

Nilai Kecepatan Beranda Google PageSpeed Desktop

Google PageSpeed Insights 100 desktop tarjiem okt 2015

Google PageSpeed Insights 100 desktop tarjiem okt 2015

Hanya ada 3 Permintaan berdasarkan GTmetrix

gtmetrix 3 request tarjiem

Gtmetrix 3 Request Tarjiem Okt 2015

Cek di GTMetrix.com.

Nilai Kecepatan Halaman Depan Versi Pingdom

pingdom tarjiem nilai kecepatan okt 2015

Pingdom Tarjiem Nilai Kecepatan okt 2015

Hal yang membuat saya terkejut adalah, nilai request gtmetrix sempat menyatakan kalau hanya ada 3 request di halaman depan. Awalnya ada 30 lebih permintaan. Saya sendiri tidak percaya dengan nilai ini. Namun setelah saya uji beberapa kali, ternyata benar. Hampir beberapa kali saya mendapatkan jumlah permintaan script (kode pemograman) hampir di bawah 10 permintaan.

Dalam hal kecepatan saat diakses melalui seluler (mobile) dan desktop versi google PageSpeed, saya sudah cukup bersyukur kalau rata-rata nilainya sudah di atas 90. Tantangan saya untuk saat ini adalah mencari penyebab pesan eror “Reduce server response time” atau “Mengurangi waktu respons server“. Pesan ini sebelumnya tidak ada. Namun mungkin pesan ini muncul lantaran beberapa kali saya mengotak-atik arsip Javascript dan CSS blog ini.

Lantaran saya memilih untuk menggunakan tampilan (sangat) sederhana, maka nilai tampilan seluler halaman depan juga mendapatkan nilai seratus.

PageSpeed Insights 100 mobile tarjiem okt 2015

Tampilan PageSpeed Insights 100 mobile tarjiem okt 2015

Walau terkesan sederhana, tidak mudah saya mendapatkan nilai di atas itu. Di mana saya tidak berpengetahuan sekali dalam soal desain dan kode pemograman html/php. Salah satu catatan yang berhasil saya catat bisa dilihat dalam tulisan Daftar Uji Konfigurasi Plugin W3 Total Cache. Salah satu kesimpulan yang saya dapatkan untuk mempercepat ini yakni banyak faktor yang memengaruhi. Faktor utama dalam mempercepat loading blog di wordpress adalah faktor themes, plugin dan hosting.

Desain Ulang Navigasi, Menu dan Bagian Kaki Blog

Selain desain sederhana pada halaman depan, tampilan yang ramah dengan seluler dan  kecepatan yang cepat, tampilan menu navigasi pada bagian blog juga berubah. Navigasi blog pada bagian menu utama yang berada di atas serta bagian kaki blog ikut berubah. Hal ini disebabkan halaman depan menggunakan desain squeeze page yang tidak menampilkan menu utama yang letaknya pada bagian atas. Menu utama saya pindahkan ke bagian credit footer, ke bagian paling bawah sekali.

Navigasi atas tarjiem okt 2015

Navigasi Atas Okt 2015

Navigasi Bawah Blog tarjiem Okt 2015

Navigasi Bawah Blog tarjiem Okt 2015

Navigasi menu utama bagian atas menampilkan kategori-kategori tulisan yang ada di dalam blog ini. Bagian kaki yang berada di bawah (footer) menampilkan beberapa kategori dan daftar tulisan yang kira-kira cukup menarik. Hal yang menarik adalah desain judul kaki ternyata menggunakan atribut heading 4 <h4>. Setidaknya atribut h4 ini diharapkan dapat membantu atribut h1 (judul utama) sebagai tema utama yang digunakan dalam lapak jasa penerjemah Inggris Indonesia ini.

10 Comments

  1. anasriwahynui 21 Oktober 2015 20:23
    • Ridha Harwan 31 Oktober 2015 06:42
  2. Sucipto Kuncoro 6 Oktober 2015 18:44
    • Ridha Harwan 8 Oktober 2015 08:20
  3. Tifkom 4 Oktober 2015 20:59
    • Ridha Harwan 6 Oktober 2015 09:02
  4. Wahab Saputra 4 Oktober 2015 16:03
    • Ridha Harwan 6 Oktober 2015 08:59
  5. Mas Dory 4 Oktober 2015 16:01
    • Ridha Harwan 6 Oktober 2015 08:59

Leave a Reply