{"id":11043,"date":"2018-04-26T00:00:00","date_gmt":"2018-04-26T00:00:00","guid":{"rendered":"https:\/\/binus.ac.id\/binus-digital\/2018\/04\/26\/page-speed-insight-penerapan-pada-website-km-i\/"},"modified":"2024-09-24T02:20:30","modified_gmt":"2024-09-24T02:20:30","slug":"page-speed-insight-penerapan-pada-website-km-i","status":"publish","type":"post","link":"https:\/\/binus.ac.id\/binus-digital\/2018\/04\/26\/page-speed-insight-penerapan-pada-website-km-i\/","title":{"rendered":"Page Speed Insight, Penerapan pada website KM &amp; I"},"content":{"rendered":"<blockquote>\n<p><em>PageSpeed Insight<\/em> merupakan tool yang membantu mengukur performa kualitas website kita pada perangkat <em>desktop<\/em> maupun <em>mobile<\/em>, dan juga menyertakan saran tentang bagaimana membuat website kita tampil optimal(1)<\/p>\n<\/blockquote>\n<p>Dalam mengelola suatu website penting bagi kita untuk mengetahui seberapa baik kualitas web yang kita miliki, salah satu indikatornya tentu saja adalah kecepatan dan kenyamanan penggunaannya. Saat ini banyak service yang menawarkan pengukuran kualitas web diantaranya yaitu<\/p>\n<ul>\n<li><a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\">Google PageSpeed Insight<\/a><\/li>\n<li><a href=\"https:\/\/tools.pingdom.com\/\">Pingdom Website Speed Test<\/a><\/li>\n<li><a href=\"https:\/\/gtmetrix.com\/\">GT Metrix<\/a><\/li>\n<\/ul>\n<p>Pada artikel ini saya akan berfokus pada Google PageSpeed Insight\u00a0(GPSI) dikarenakan GPSI sudah turut serta melakukan pengecekan kualitas versi mobile dari web yang kita miliki, selain itu faktor bahwa alat ini dibuat oleh Google menjadi alasan yang cukup kuat. Saya akan membahas beberapa poin yang digunakan GPSI untuk menilai performa website<\/p>\n<ol>\n<li><em>Prioritize visible content<\/em> \/ Utamakan tampilan konten utama<\/li>\n<li><em>Eliminate render-blocking JavaScript and CSS in above-the-fold content<\/em> \/ Hilangkan JS &amp; CSS pada separuh-atas-halaman website<\/li>\n<li><em>Avoid landing page redirects<\/em> \/ Hindari menggunakan redirect<\/li>\n<li><em>Minify Javascript &amp; CSS<\/em> \/ Optimalkan Javascript &amp; CSS<\/li>\n<li><em>Optimize images<\/em> \/ Optimalkan kompresi gambar<\/li>\n<li><em>Leverage Browser Caching<\/em> \/ Optimalkan <i>browser caching<\/i><\/li>\n<li><em>Enable compression<\/em> \/ Hidupkan kompresi<\/li>\n<\/ol>\n<p>Dari ketujuh ukuran ini saya akan memberikan fokus pada nomor 1 &#8211; 4 pada artikel ini, karena 4 faktor ini menjadi tantangan bagi kami dalam menemukan formula implementasinya. Sedangkan faktor 5-7 dapat dengan mudah diimplementasikan cukup dengan merujuk dokumentasi yang diberikan oleh Google\u00a0<a href=\"https:\/\/developers.google.com\/speed\/docs\/insights\/rules\">https:\/\/developers.google.com\/speed\/docs\/insights\/rules<\/a><\/p>\n<h4><em>Prioritize visible content &amp; Eliminate render blocking JS &amp; CSS in above-the-fold content<\/em><\/h4>\n<p>Sebelum masuk mengenai cara mengoptimalkan 2 ukuran ini, kita harus mengetahui dahulu dengan apa yang dimaksud &#8220;above-the-fold content&#8221;.<br \/>\n<em>Above-the-fold Content<\/em> <span style=\"font-size: 0.75em\">(dalam artikel ini kita singkat saja dengan\u00a0ATF)\u00a0<\/span> adalah bagian dari website kita yang pertama kali terlihat ketika dimuat oleh\u00a0<em>browser<\/em>, pada umumnya bagian ini adalah separuh halaman atas website kita.<\/p>\n<p><figure id=\"attachment_2636\" aria-describedby=\"figcaption_attachment_2636\" class=\"wp-caption clear aligncenter\" style=\"width: 99px\"><a href=\"http:\/\/binus.ac.id\/knowledge\/wp-content\/uploads\/2018\/04\/kmi-web-mobile-viewport.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-2636 size-medium\" src=\"http:\/\/binus.ac.id\/knowledge\/wp-content\/uploads\/2018\/04\/kmi-web-mobile-viewport-99x342.jpg\" alt=\"\" width=\"99\" height=\"342\" \/><\/a><figcaption id=\"figcaption_attachment_2636\" class=\"wp-caption-text\">Gambar 1. Ilustrasi Above-the-Fold content website KMI<\/figcaption><\/figure>\n<\/p>\n<p>Terlihat pada gambar di atas ATF adalah area yang berada didalam <em>viewport device\u00a0<\/em>tersebut. Dengan mengetahui di mana letak ATF dari website yang kita kelola maka kita dapat melakukan beberapa trik berikut :<\/p>\n<ol>\n<li style=\"list-style-type: none\">\n<ol>\n<li style=\"text-align: left\"><strong>Ubah seluruh style area ATF tersebut menjadi\u00a0<em>inline style<\/em> dan letakan pada area head.<\/strong><br \/>\nHal ini dilakukan agar\u00a0<em>browser\u00a0<\/em>dapat dengan cepat melakukan\u00a0<em>render<\/em> tanpa harus menunggu file-file css selesai di <em>download\u00a0<\/em>sehingga pengunjung website dapat segera melihat bagian ATF tersebut, walaupun bagian non ATF masih belum terlihat.<\/p>\n<p><figure id=\"attachment_2557\" aria-describedby=\"figcaption_attachment_2557\" class=\"wp-caption clear aligncenter\" style=\"width: 485px\"><a href=\"http:\/\/binus.ac.id\/knowledge\/wp-content\/uploads\/2018\/04\/inline-style.png\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-2557 size-medium\" src=\"http:\/\/binus.ac.id\/knowledge\/wp-content\/uploads\/2018\/04\/inline-style-485x342.png\" alt=\"\" width=\"485\" height=\"342\" \/><\/a><figcaption id=\"figcaption_attachment_2557\" class=\"wp-caption-text\">Gambar 2. Style yang diletakan secara inline<\/figcaption><\/figure>\n<\/li>\n<li style=\"text-align: left\"><strong>Letakan file javascript pada bagian bawah halaman website<br \/>\n<\/strong>Setiap tag &lt;script&gt;&lt;\/script&gt; pada HTML akan membuat\u00a0<em>browser\u00a0<\/em>memproses tag tersebut dan menghambat proses\u00a0<em>render<\/em> yang sedang terjadi, dengan memindahkan seluruh tag &lt;script&gt; kebagian bawah website maka membuat bagian ATF dapat terlihat tanpa hambatan.<\/p>\n<p><figure id=\"attachment_2554\" aria-describedby=\"figcaption_attachment_2554\" class=\"wp-caption clear aligncenter\" style=\"width: 581px\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-2554\" src=\"http:\/\/binus.ac.id\/knowledge\/wp-content\/uploads\/2018\/04\/footer-script.png\" alt=\"\" width=\"581\" height=\"171\" \/><figcaption id=\"figcaption_attachment_2554\" class=\"wp-caption-text\">Gambar 3. File javascript diletakan pada bagian bawah website<\/figcaption><\/figure>\n<\/li>\n<li style=\"text-align: left\"><strong>Gunakan teknik\u00a0<em>asynchronous load<\/em> pada file CSS<br \/>\n<\/strong>File CSS umumnya dimuat dengan menggunakan tag <em>rel=stylesheet<\/em> atau <em>@import<\/em> pada beberapa kondisi, namun hal ini membuat <em>browser\u00a0<\/em>menghentikan sejenak proses\u00a0<em>render<\/em> untuk memuat CSS tersebut dahulu. Oleh karena itu saat ini sudah ada <a href=\"https:\/\/www.w3.org\/TR\/preload\/\">standar-rekomendasi baru<\/a> yaitu <em>rel=&#8221;preload&#8221;\u00a0<\/em>yang memungkinkan file CSS dimuat secara paralel, namun teknik terkadang tidak dapat berjalan dikarenakan\u00a0<em>browser\u00a0<\/em>yang digunakan pengunjung tidak diperbaharui sehingga\u00a0<em>browser\u00a0<\/em>tersebut tidak mendukung penggunaan <em>preload.<\/em><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<h4><em>Avoid landing page redirects<\/em><\/h4>\n<p>Hindari melompatkan halaman untuk mendapatkan performa website yang lebih baik, karena setiap lompatan yang dilakukan akan menambah 1\u00a0<em>roundtrip.\u00a0<\/em>Skenario terbaik berdasarkan dokumentasi GPSI adalah seperti berikut<\/p>\n<ul>\n<li><em>example.com uses responsive web design, no redirects are needed &#8211; fast and optimal!<\/em><\/li>\n<li><em>example.com \u2192 m.example.com\/home &#8211; multi-roundtrip penalty for mobile users.<\/em><\/li>\n<li><em>example.com \u2192 www.example.com \u2192 m.example.com &#8211; very slow mobile experience.<\/em><\/li>\n<\/ul>\n<h4><em>Minify Javascript &amp; CSS<\/em><\/h4>\n<p>Perkecil file Javascript dan CSS anda untuk mempercepat\u00a0<em>browser\u00a0<\/em>memuat file-file tersebut, Terdapat banyak\u00a0<em>service<\/em>\u00a0di internet untuk melakukan hal ini atau apabila anda dapat melakukan otomatisasi proses ini apabila menggunakan pre-prosesor seperti gulp \/ grunt\u00a0<span style=\"font-size: 0.75em\">(Pembahasan mengenai pre-prosessor akan dibahas di artikel lain)<\/span>. File-file JS &amp; CSS yang sudah diperkecil akan tampil seperti berikut<\/p>\n<p><figure id=\"attachment_2572\" aria-describedby=\"figcaption_attachment_2572\" class=\"wp-caption clear aligncenter\" style=\"width: 525px\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-2572 size-medium\" src=\"http:\/\/binus.ac.id\/knowledge\/wp-content\/uploads\/2018\/04\/minify-script-525x342.png\" alt=\"\" width=\"525\" height=\"342\" \/><figcaption id=\"figcaption_attachment_2572\" class=\"wp-caption-text\">Gambar 4. Script yang sudah diperkecil<\/figcaption><\/figure>\n<\/p>\n<p>Pada Gambar 4 dapat terlihat file yang sudah diperkecil isinya menjadi rapat karena seluruh\u00a0<em>script comment\u00a0<\/em>dan\u00a0karakter putih dihilangkan untuk memperkecil besar ukuran file, semakin kecil file maka akan semakin cepat dimuat dan mengurangi\u00a0waktu\u00a0<em>render browser.<\/em><\/p>\n<h3>Hasil<\/h3>\n<p>Dengan melakukan optimalisasi beberapa ukuran diatas kami berhasil meningkatkan skor website http:\/\/binus.ac.id\/knowledge menjadi 76 untuk mobile dan 93 untuk desktop<\/p>\n<p><figure id=\"attachment_2605\" aria-describedby=\"figcaption_attachment_2605\" class=\"wp-caption clear aligncenter\" style=\"width: 389px\"><a href=\"http:\/\/binus.ac.id\/knowledge\/wp-content\/uploads\/2018\/04\/kmi-psi-result-desktop.png\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-2605 size-medium\" src=\"http:\/\/binus.ac.id\/knowledge\/wp-content\/uploads\/2018\/04\/kmi-psi-result-desktop-389x342.png\" alt=\"\" width=\"389\" height=\"342\" \/><\/a><figcaption id=\"figcaption_attachment_2605\" class=\"wp-caption-text\">Gambar 5.1 Skor Google PageSpeed Insight Website KMI &#8211; Desktop<\/figcaption><\/figure>\n<\/p>\n<p><figure id=\"attachment_2602\" aria-describedby=\"figcaption_attachment_2602\" class=\"wp-caption clear aligncenter\" style=\"width: 389px\"><a href=\"http:\/\/binus.ac.id\/knowledge\/wp-content\/uploads\/2018\/04\/kmi-psi-result-mobile.png\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-2602 size-medium\" src=\"http:\/\/binus.ac.id\/knowledge\/wp-content\/uploads\/2018\/04\/kmi-psi-result-mobile-389x342.png\" alt=\"\" width=\"389\" height=\"342\" \/><\/a><figcaption id=\"figcaption_attachment_2602\" class=\"wp-caption-text\">Gambar 5.2 Skor Google PageSpeed Insight Website KMI &#8211; Mobile<\/figcaption><\/figure>\n<\/p>\n<p style=\"text-align: center\"><a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/?url=http%3A%2F%2Fbinus.ac.id%2Fknowledge%2F&amp;tab=mobile\">https:\/\/developers.google.com\/speed\/pagespeed\/insights\/?url=http%3A%2F%2Fbinus.ac.id%2Fknowledge%2F&amp;tab=mobile<\/a><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: center\">* * *<\/p>\n","protected":false},"excerpt":{"rendered":"<p>PageSpeed Insight merupakan tool yang membantu mengukur performa kualitas website kita pada perangkat desktop maupun mobile, dan juga menyertakan saran tentang bagaimana membuat website kita tampil optimal(1) Dalam mengelola suatu website penting bagi kita untuk mengetahui seberapa baik kualitas web yang kita miliki, salah satu indikatornya tentu saja adalah kecepatan dan kenyamanan penggunaannya. Saat ini [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":11044,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[77],"tags":[],"class_list":["post-11043","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles"],"_links":{"self":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts\/11043","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/comments?post=11043"}],"version-history":[{"count":1,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts\/11043\/revisions"}],"predecessor-version":[{"id":12008,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts\/11043\/revisions\/12008"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/media\/11044"}],"wp:attachment":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/media?parent=11043"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/categories?post=11043"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/tags?post=11043"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}