{"id":32586,"date":"2019-03-17T17:34:07","date_gmt":"2019-03-17T10:34:07","guid":{"rendered":"https:\/\/dipstrategy.com\/blog\/?p=32586"},"modified":"2021-01-24T10:53:56","modified_gmt":"2021-01-24T03:53:56","slug":"website-development-performance-tuning","status":"publish","type":"post","link":"https:\/\/dipstrategy.co.id\/blog\/website-development-performance-tuning\/","title":{"rendered":"Website Development Performance Tuning"},"content":{"rendered":"<p>Metode atau pengetahuan website development yang baik akan sangat berperan pada hasil akhir pembuatan website. Ketika kita membuka suatu website dan terasa lambaat banget nge-loadnya, pasti kita bete. Google menempatkan kecepatan akses sebuah website sebagai salah satu prioritas utama penempatan rangking di hasil pencaharian. Karena itu website development dengan fokus pada kecepatan akses, sudah tidak perlu dipertanyakan lagi kepentingannya.<\/p>\n<p>Lalu seberapa lama kah &#8216;lama&#8217; itu? Secara umum 5 detik dipahami sebagai waktu yang cukup baik bagi sebuah website untuk fully loaded.<\/p>\n<p>Apa penyebab sebuah website lama untuk diakses?<\/p>\n<p>Nah ini dia pertanyaan kuncinya. Namun sebelum menjawab pertanyaan itu, perlu dipahami komponen pembentuk loading time.<\/p>\n<p>Banyak hal yang mempengaruhi kecepatan akses dari sebuah website. Server, DNS, bandwidth, coding, database, content, adalah sebagian dari faktor-faktor penentu. Untuk dapat meningkatkan kecepatan akses secara signifikan perlu dilakukan audit untuk mengetahui faktor mana yang paling bermasalah.<\/p>\n<p>Hasil audit akan menampilkan apa yang disebut waterfall chart, yaitu diagram kecepatan load pada setiap fase<\/p>\n<p><a href=\"https:\/\/dipstrategy.com\/blog\/wp-content\/uploads\/2019\/03\/gtmetrix-01-1.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-32591 size-full\" src=\"https:\/\/dipstrategy.com\/blog\/wp-content\/uploads\/2019\/03\/gtmetrix-01-1.gif\" alt=\"website development\" width=\"600\" height=\"274\" \/><\/a><\/p>\n<p>Sebuah web browser akan menampilkan website secara bertahap (synchronous) sesuai dengan data yang diterima. Tahap-tahap tampilan suatu website memiliki istilah sebagai berikut.<\/p>\n<h3>Time To First Byte (TTFB)<\/h3>\n<p>TTFB adalah tahap dimana browser mulai menerima data pertama dari web server. Waktu yang dibutuhkan terbentuk dari 3 proses:<\/p>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li>Redirect. Ini adalah waktu yang dibutuhkan untuk melakukan redirect domain. Umumnya sebuah website melakukan redirect seperti\n<ul>\n<li>Non-www ke www<\/li>\n<li>Http ke https<\/li>\n<li>Desktop ke mobile version<\/li>\n<li>Redirect untuk set cookies<\/li>\n<\/ul>\n<\/li>\n<li>Connect. Ini adalah waktu yang dibutuhkan bagi sebuah browser untuk melakukan request ke server.<\/li>\n<li>Backend. Ini adalah waktu yang dibutuhkan bagi server untuk me-respon request dari browser.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<h3>Paint<\/h3>\n<p>Ini adalah tahap dimana browser mulai melakukan render dari data yang diterima, sehingga mulai menampilkan bagian-bagian text atau image, walaupun struktur dan posisi data masih berantakan.<\/p>\n<h3>DOM Loaded<\/h3>\n<p>Di tahap ini struktur HTML sudah terbentuk. Javascript dan stylesheet juga sudah siap sehingga browser sudah dapat menyusun data yang diterima sesuai struktur.<\/p>\n<h3>On Load<\/h3>\n<p>On load menandakan bahwa semua element sudah selesai di load, atau dapat dipahami bahwa halaman website sudah ditampilkan secara utuh.<\/p>\n<p><a href=\"https:\/\/dipstrategy.com\/blog\/wp-content\/uploads\/2019\/03\/timing.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-32593\" src=\"https:\/\/dipstrategy.com\/blog\/wp-content\/uploads\/2019\/03\/timing.jpg\" alt=\"Digital Agency Jakarta\" width=\"1130\" height=\"220\" srcset=\"https:\/\/dipstrategy.co.id\/blog\/wp-content\/uploads\/2019\/03\/timing.jpg 1130w, https:\/\/dipstrategy.co.id\/blog\/wp-content\/uploads\/2019\/03\/timing-300x58.jpg 300w, https:\/\/dipstrategy.co.id\/blog\/wp-content\/uploads\/2019\/03\/timing-768x150.jpg 768w, https:\/\/dipstrategy.co.id\/blog\/wp-content\/uploads\/2019\/03\/timing-1024x199.jpg 1024w, https:\/\/dipstrategy.co.id\/blog\/wp-content\/uploads\/2019\/03\/timing-700x136.jpg 700w\" sizes=\"auto, (max-width: 1130px) 100vw, 1130px\" \/><\/a><\/p>\n<p>Penyebab lambatnya sebuah website ditampilkan dapat dianalisa dari tahap mana yang memakan waktu yang tidak wajar.<\/p>\n<p>Jika TTFB yang lama, maka dapat dipastikan itu problem di koneksi, server dan\/atau DNS. Kemungkinan diantaranya:<\/p>\n<ul>\n<li>Resource server sudah kepayahan, baik web server atau DNS server.<\/li>\n<li>Bisa juga karena halaman website melakukan redirect yang tidak wajar<\/li>\n<li>Terlalu banyak DNS lookup<\/li>\n<li>Koneksi server yg terganggu<\/li>\n<\/ul>\n<p>Sedangkan jika tahap Paint yang lama, maka kemungkinan ada content yang berukuran besar. Misalnya image yang tidak dikompresi dengan baik. Mungkin juga database yang bermasalah, atau metode pengolahan data yang tidak efisien.<\/p>\n<p>Lain lagi jika tahap DOM Loaded yang lama, maka kemungkinan file HTML yg terlalu besar atau tidak terstruktur dengan baik. Bisa juga Javascript\/CSS yang bermasalah atau hilang atau berukuran besar<\/p>\n<p>On Load adalah tahap terakhir, yang merupakan akumulasi dari semua tahapan.<\/p>\n<hr \/>\n<p>Website yang aksesnya cepat akan sangat berpengaruh pada SERP, kenyamanan pengguna, serta semua Call-to-Action yang ada pada website. Sudah selayaknya <a href=\"https:\/\/dipstrategy.com\/web-design-and-development\">web developer<\/a> atau <a href=\"https:\/\/dipstrategy.com\/web-design-and-development\">web programmer<\/a> di Digital Agency memiliki standar kualitas dan <a href=\"http:\/\/www.gtmetrix.com\">tools<\/a> yang dapat membantu menghasilkan website yang memiliki performance yang baik.<\/p>\n<p>&nbsp;<\/p>\n<p>Salaam..<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Metode atau pengetahuan website development yang baik akan sangat berperan pada hasil akhir pembuatan website. Ketika kita membuka suatu website dan terasa lambaat banget nge-loadnya, pasti kita bete. Google menempatkan kecepatan akses sebuah website sebagai salah satu prioritas utama penempatan rangking di hasil pencaharian. Karena&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/dipstrategy.co.id\/blog\/website-development-performance-tuning\/\">Read the post<span class=\"screen-reader-text\">Website Development Performance Tuning<\/span><\/a><\/div>\n","protected":false},"author":1,"featured_media":32595,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9857],"tags":[],"class_list":["post-32586","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development","excerpt","zoom","full-without-featured","even","excerpt-0"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/dipstrategy.co.id\/blog\/wp-json\/wp\/v2\/posts\/32586","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dipstrategy.co.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dipstrategy.co.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dipstrategy.co.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dipstrategy.co.id\/blog\/wp-json\/wp\/v2\/comments?post=32586"}],"version-history":[{"count":7,"href":"https:\/\/dipstrategy.co.id\/blog\/wp-json\/wp\/v2\/posts\/32586\/revisions"}],"predecessor-version":[{"id":32778,"href":"https:\/\/dipstrategy.co.id\/blog\/wp-json\/wp\/v2\/posts\/32586\/revisions\/32778"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dipstrategy.co.id\/blog\/wp-json\/wp\/v2\/media\/32595"}],"wp:attachment":[{"href":"https:\/\/dipstrategy.co.id\/blog\/wp-json\/wp\/v2\/media?parent=32586"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dipstrategy.co.id\/blog\/wp-json\/wp\/v2\/categories?post=32586"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dipstrategy.co.id\/blog\/wp-json\/wp\/v2\/tags?post=32586"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}