Posted on

Membuat Website Ngebut Bagian Keempat

wpJakarta – Membuat Website Ngebut Bagian Keempat. Hal-hal terakhir dari seri artikel kami tentang bagaimana membuat website WordPress “ngebut” yaitu pada bagian keempat ini. Dari tiga seri sebelumnya yang kami tulis adalah sebagai berikut :

wp jakarta tips-trik wordpresswp jakarta tips-trik wordpress

Bagian Pertama

  1. Meminimalkan HTTP Request
  2. Meminify dan mengkombine file/skript HTML, CSS dan JS
  3. Load file CSS dan JS asynchronous
  4. Defer/Menunda JavaScript loading
  5. Minimize TTFB atau Time To First Byte

Membuat Website Ngebut Bagian Pertama

Bagian Kedua

  1. Mengurangi server respons time
  2. Memilih provider dan paket hosting yang tepat
  3. Melakukan Cek dan Test Kompresi file
  4. Mengkompress file dengan gzip
  5. Mengaktifkan browser caching

Membuat Website Ngebut Bagian Kedua.

Bagian Ketiga

  1. Gunakan Layanan CDN
  2. Gunakan “Hosting” Eksternal Untuk Video Dan Musik
  3. Perkecil ukuran gambar dan perhatikan letaknya
  4. Gunakan sedikit plugin
  5. Mengurangi redirect

Membuat Website Ngebut Bagian Ketiga.

Membuat Website Ngebut Bagian Keempat

Pada artikel membuat website ngebut bagian keempat ini masih ada lima langkah lagi yang perlu diperhatikan dan bisa membuat website WordPress tambah ngebut. Selain bagaimana secara efisien menulis dan menempatkan kode CSS atau JS. Coba eksplor fitur-fitur plugin atau fitur-fitur pada server web hosting anda (cPanel, PHP extension dan lainnya) yang mungkin belum “di idupin”. padahal kalo fitur tersebut “di idupin” bisa secara signifikan mempercepat loading halaman website :

16. Optimalkan Tampilan Mobile (AMP, PWA)

Seringkali anda sudah mengeliminasi semua faktor yang menyebabkan loading website lambat. Saat mengukur melalui alat ukur google pagespeed sudah mendapatkan nilai yang hampir sempurna “98” untuk segmen desktop. Tetapi sayangnya untuk tampilan mobile angkanya masih mentok antara “84”,”85″ atau “86” saja. Parameter atau hambatan-hambatan yang sudah dieliminasi untuk tampilan desktop ternyata masih nongol untuk tampilan mobile. Saat speed index untuk desktop sudah bisa menyentuh angka 0.8 detik, sedangkan untuk mobile masih bercokol di angka lebih dari 3 detik.

Pengembang tema website boleh saja “berteriak” bahwa tema websitenya “mobile friendly” atau 100% responsive. Tapi jangan mengartikan bahwa mobile friendly dan responsive berarti loadingnya juga akan cepat pada tampilan mobile atau handphone. Jika ada tema website yang “mengklaim” mobile friendly dan responsive itu artinya tampilan pada viewport layar handpone atau tablet akan dirender secara baik oleh browser mobile tersebut, sehingga pengunjung tidak perlu “melotot” atau menggeser-geser layarnya kesamping karena konten yang tidak pas saat ditampilkan di layar handphone. Sedangkan untuk kecepatan loading website tetap tergantung pada penempatan kode HTML, CSS, JS dan element lainnya.

Untuk mengatasi hal tersebut mungkin saatnya anda beralih ke halaman AMP. Baik mendesain sendiri halaman amp website anda https://developers.google.com/search/docs/guides/enhance-amp , atau menggunakan plugin untuk membuat prosesnya lebih mudah. Salah satu plugin yang bisa digunakan adalah AMP For WP. Tapi sebaiknya saat anda memutuskan untuk meng”AMP”kan website anda maka lakukan hingga tuntas alias jangan setengah-setengah. “Project” AMP anda yang setengah-setengah akan membuat SEO menjadi jelek karena halaman AMP akan memiliki URL sendiri seperti misalnya : https://example.com/?amp. Project AMP yang setengah-setengah bisa saja membuat halaman website justru malah “404 Not Found” karena project yang tidak selesai.

17. Gunakan lazy loading gambar

Jika halaman website memiliki banyak gambar mulai dari atas sampai bawah. Seperti misalnya halaman website berita/majalah. Maka gambar yang belum diakses oleh pengunjung seharusnya “ditunda kemunculannya” atau biasa disebut lazy load. Gambar baru tampil setelah bagian yang diakses oleh pengunjung tepat berada pada layar monitornya. (Baca juga : https://wpjakarta.com/wordpress/plugins/google-merelease-native-lazy-load-plugin/).

Tidak ada alasan untuk tidak menggunakan lazy load. Dan tidak perlu susah susah untuk menuliskan kode supaya gambar di render “secara malas”, karena semua plugin caching memiliki fitur tersebut. Atau plugin optimasi gambar juga memiliki fitur tersebut, anda tinggal mengaktifkan saja fitur lazy load tersebut. Bahkan kabarnya pada release WordPress 5.4 maret 2020 nanti, fitur lazy load akan ada secara default pada “diri” WordPress tanpa harus diaktifkan melalui plugin. https://wptavern.com/native-lazy-loading-support-coming-to-wordpress.

18. Optimisasi Penulisan Kode CSS

CSS membuat website menjadi lebih “menyala”, apalagi secara default terdapat kotak snippet dihalaman “customizer” untuk kita memberikan sentuhan terhadap element HTML yang terlihat kaku, maka penulisannya juga harus diperhatikan. Berikut contoh sederhana antara penulisan CSS yang kurang baik dengan yang baik.

/* CSS yang kurang baik

<html>
<a href="https://contoh.com/download" class="dwnld-button">Download</a>

<a href="https://contoh.com/demo" class="demo-button">Demo</a>
</html>

.dwnld-button {
  background: blue;
  color: white;
  border-radius: 5px;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
}

.demo-button {
  background: orangered;
  color: black;
  border-radius: 5px;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
}
/* CSS yang baik

<html>
<a href="https://contoh.com/download" class="dwnld-button">Download</a>

<a href="https://contoh.com/demo" class="demo-button">Demo</a>
</html>

.dwnld-button, .demo-button {
  border-radius: 5px;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
}

.dwnld-button {
  background: blue;
  color: white;
}

.demo-button {
  background: orangered;
  color: black;
}

 /* Jika kodenya sudah benar
  * sekalian saja di tulis secara
  * "minify" */

.dwnld-button, .demo-button {border-radius: 5px;padding: 10px 20px;text-align: center;font-size: 16px;}.dwnld-button {background: blue;color: white;}.demo-button {background: orangered;color: black;}

Pada contoh disebelah kiri terdapat perulangan untuk “border-radius”, “padding”, “text-align” dan “font-size” yang sebenarnya bernilai sama untuk dua selector yang berbeda. Hanya ada beda pada “background” dan “color”. Masih banyak cara untuk mengoptimalkan “CSS delivery”, misalnya :

  • Jangan gunakan pengulangan style css properti yang sama seperti pada contoh kode sebelah kiri diatas.
  • Hindari metode penulisan CSS secara “inline”. Menulis kode CSS secara inline juga berpotensi terjadi perulangan untuk properti yang sama.
  • Hindari properti “KDRT” !important;.

18.1 Lakukan “pemurnian” kode CSS

Buka cuma aqua yang melalui proses pemurnian, CSS juga bisa diproses “pemurnian”. silahkan cek PurifyCSS online. Purify CSS bisa mendeteksi dan mengkoreksi penulisan script CSS yang kurang efisien. Untuk kode CSS yang besar maka hal tersebut bisa mereduksi byte CSS secara signifikan. Dan masih banyak cara lainnya untuk mengoptimasi penulisan kode CSS.

19. Selalu ukur performa untuk mendapatkan gambaran rata-rata

Seperti metode orang yang sedang diet, maka pada awal permulaan akan dilakukan penimbangan dan dicatat “initial” berat badannya. Lalu setelah melakukan serangkaian langkah diet secara berkala juga perlu untuk menimbang ulang lagi berat badan hingga bisa “di trace” progres penurunannya. Maka begitu juga halnya saat akan melakukan “optimasi” pagespeed. Lakukan monitoring secara berkala untuk mengetahui progres peningkatannya meskipun hanya dalam hitungan MS atau mili detik.

20. Eliminasi masalahnya satu persatu dan maksimalkan fitur-fitur plugin atau server

Google pagespeed juga memberikan parameter atau opportunity mengenai bagian apa saja yang membuat lambat loading website, maka sebaiknya coba eliminasi satu persatu. Jika satu masalah bisa diatasi maka baru berpindah pada “Opportunities” lainnya untuk diatasi.

Coba juga untuk “mengeksplor” fitur-fitur plugin atau “php extension”, ketimbang susah-susah “ngasih kode” untuk mengoptimasi pagespeed, mungkin ada fitur dari plugin atau php extension yang dapat mengatasi masalah tersebut dan dapat meningkatkan pagespeed seperti aktivasi gzip, brotli atau imagick. Sayang kalau fitur tersebut tidak dimaksimalkan.