June 22, 2018 - #blog
#blog_tutorial
Page Speed Analyzer merupakan salah satu kebutuhan penting bagi pengembang web untuk mengembangkan sebuah halaman web agar lebih cepat diakses secepat mungkin, meminimalkan waktu load, meminimalkan script code writing sebisa mungkin, DNS lookups, dan lain-lain. Dengan mendapatkan akses cepat tersebut, pengguna dapat menggunakan atau membuka halaman web nya lebih cepat, juga untuk kebutuhan salah satu Search Engine Optimization agar sebuah halaman web lebih terpriotaskan daripada halaman web yang sama dengan load time yang lebih lama.
Juga seperti pengaturan lain disarankan yang didapat dari beberapa Page Speed Analyzer seperti Page, dapat mengoptimalkan penggunaan informasi bahkan untuk mengurangi bandwidth penggunaan seperti browsing caching, optimize images, optimal render page seperti pada penambahan atribut width dan height secara langsung pada tag image dan lain-lain.
But, do we need that all of them?
Tergantung dengan konten yang dibutuhkan pada setiap halaman web, namun tidak bisa dipungkiri, sebuah halaman web seharusnya dioptimalkan sebisa mungkin. Kasus seperti ini menjadi mirip dengan hukum fisika, "Tekanan berbanding lurus dengan gaya". Konten meliputi hal apapun, seperti tulisan, source code, file, gambar dan lainnya berbanding lurus dengan Page Speed. Dikala pengembang memperhatikan konten yang berdampak pada page speed namun saat memperhatikan page speed, juga berdampak pada konten.
Solusi menggunakan para page speed analyzer menjadi salah satu hal bagus para pengembang web untuk mengatur itu, namun pada kebanyakan yang terjadi, para pengembang jadi terlalu fokus pada page speed khususnya para pengembang blogger templates yang ingin mendapatkan nilai sempurna pada segi page speed ini.
Tapi ada masalah yang terjadi ketika penanganan masalah page speed yang dicatat oleh para page speed analyzer tidak bisa dilakukan oleh pengembang karena hal yang berkaitan berada diluar kendali pengembang web nya sendiri. Terutama masalah yang didapat oleh para pengembang blogger templates dari Blogger nya sendiri dan tak bisa ditangani sama sekali oleh pengembang blogger templates.
What do you think if i told you Page Analyzer was a joke for Blogger?
Topik ini menjadi sebuah notes di kepala saya sejak menggunakan PageSpeed Tools Insights, namun tak mengurangi hormat kepada page speed halaman blog saya sendiri yang tak mungkin juga saya abaikan dan tulisan yang saya tulis ini lebih bersifat opini saya. Karena ada beberapa yang menurut saya lucu untuk dibahas ketika Google menyarankan mengoptimalkan page speed web namun tak fokus atau mungkin mengabaikan masalah pada platform Blogger nya sendiri mengenai page speed tersebut.Browser Caching
Masalah ini biasanya tidak terlalu dirumit-rumitkan untuk diselesaikan oleh para pengembang web atau blog dengan penggunaan external resources. Karena apa daya, pengembang tidak akan bisa menngendalikan header sent dari server yang bukan pengembang sendiri yang mengendalikan. Browser Caching ini dimaksudkan ketika ada konten atau script yang sebenarnya digunakan berulang-ulang atau di posisi halaman manapun seharusnya bisa disimpan pada localdisk agar penghematan bandwidth serta load time. Konten atau script tidak perlu dimuat terus menerus dari server jika konten pada halaman satu dengan halaman lain, atau sering membuka atau beraktivitas pada sebuah web, karena konten atau script sudah berada sementara pada localdisk.
Contoh, seperti pada blog saya sendiri, menggunakan JSON Blogger yang tak bisa saya hindari seperti untuk konten Related Posts, Recent Posts, Particular Label Posts dan lain-lain yang tidak disediakan oleh blogger widgets. Saya harus menggunakan external Javascript untuk mengambil data
<script async='async' src='/feeds/posts/default?max-results=5&alt=json-in-script&callback=mycallbackname'></script>Script seperti tersebut hanya di-caching untuk 1 detik dari servernya sendiri, yang seharusnya dapat disimpan sementara pada localdisk lebih lama lagi. Ditambah ketika saya menggunakan fonts.google.com dari Google sendiri yang juga tidak cukup meletakkan caching set
Blocking Rendering
Masalah ini, biasa ditemui pengembang web atau blogger yang ingin menggunakan external CSS, dan external Javascript. Blocking Rendering yang dimaksudkan adalah blocking rendering halaman yang disebabkan karena penggunaan external CSS, dan external Javascript di paruh atas alias di dalam tag <head>. Penggunaan external tersebut akan memblok untuk memuat document atau script termasuk stylesheet yang tertulis dibawah (posisi setelah external CSS dan Javascript) secara langsung, blocking rendering juga termasuk penggunaan tag <style> dan tag <script> berlebihan atau lebih dari satu yang akan menghalangi style atau script yang lain, sampai style atau script awalnya telah dimuat. Contoh, ketika pengguna atau pembaca ingin membuka sebuah web atau blog saya sendiri, yang mempunyai external CSS maupun external Javascript di dalam tag <head>, dan dimisalkan pada kasusnya, pengguna atau pembaca tersebut mempunyai kecepatan koneksi yang lemah. Saat pengguna atau pembaca membuka web atau blog, halaman yang tampil hanya akan layar putih, atau kosong tak ada sama sekali layout atau juga beberapa konten tidak ada sampai external CSS dan external Javascript itu benar-benar terunduh atau termuat.
Bayangkan jika itu terjadi, pengguna atau pembaca mungkin bisa menutup tab, dan membuka halaman web lain yang lebih cepat. Pada pengetesan dengan PageSpeed Tools Insights, blogger pasti akan mendapatkan masalah tersebut. External CSS yang saya gunakan sendiri dan terletak di paruh atas atau di dalam tag <head> mungkin saya atasi, namun apa daya jika ada External CSS berdasarkan server side yang tak bisa saya ganggu bahkan digugat. Contohnya pada blog saya sendiri, source page yang terbaca ada sebuah external CSS
<link href='https://www.blogger.com/static/v1/widgets/2437439463-css_bundle_v2.css' rel='stylesheet' type='text/css'/>Pada, pengaturan "Edit HTML" di dashboard blogger, external CSS tersebut tidak ditemukan. Pengembang blogger templates hanya akan bisa pasrah dengan keadaan itu, walaupun tuntutan nilai page speed. Dan meskipun pada kenyataannya, mungkin hanya (0,1 - [1 digit])% pengguna atau pembaca yang akan mengalami masalah block rendering secara signifikan seperti, pengguna atau pembaca mendapatkan layar putih atau tidak ada konten tertentu sekitar 2 - 10 detik sampai external-external tersebut benar-benar termuat, dizaman yang sekarang, ngebut-ngebutan soal Internet.
Images Optimization
Ini hal yang termasuk core untuk pembahasan kecepatan pada sebuah halaman web, dan menjadi sebuah standar nilai saat ini. Image Optimization merupakan sebuah hal mengenai suatu file gambar yang dapat dioptimalkan untuk mengurangi ukuran file sebisa mungkin tanpa secara signifikan berdampak pada kualitas visual atau kualitas. Banyak sekali tools yang dikembangkan untuk pengoptimalan gambar dari penggunaan program untuk individual sampai program server side. Hal ini sangat berdampak pada kecepatan akses sebuah halaman web, karena ukuran file lurus perbandingannya dengan load time. Dan juga hal ini menjadi topik bagi saya sendiri karena dari banyak tools yang dikembangkan dan salah satu penggunaan tools yang saya gunakan untuk pengoptimalan gambar malah tidak menjadi optimal kembali ketika gambar diupload pada saat saya memposting. Saya menggunakan OptiPNG agar dapat mengoptimalkan sebuah gambar PNG yang ada pada background halaman blog saya saat ini https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkZeQrnz42DFUIlXTYaPzNrefgDfbxyu_pkoNiUWHwJCQs4LNwWgBmN1MLDkEUFS0jpgx23yqw1bNH2-u3chsiIh9SokxHACrPiKJu9ZQFUp_tjY1_mdZ30dEOJaWRR3PZDYtFmruNX_XH/s1600/backinv4.png yang berukuran 219 bytes. File asli pada gambar tersebut hanya berukuran 166 bytes sebelum saya menggunakan OptiPNG
Dan dapat di kompres dengan OptiPNG dengan ukuran file yang dapat dikompres mencapai 101 bytes
optipng -o7 -stripall backinv4.pngWalaupun saya mencoba mengupload gambar hasil kompresi dari OptiPNG, hasil gambar yang terupload akan tetap berukuran file 219 bytes (Pengecekan dengan page info Firefox browser).
Apakah saya harus beralih pada pihak ketiga lain agar bisa mengupload gambar sama seperti original size nya? Jika benar-benar saya lakukan, saya hanya akan mendapatkan masalah baru :
DNS Lookups
Saya hanya akan menambah load time, karena komponen terpisah dengan domain lain. Karena akan menambah penundaan ketika me-request permintaan ke sebuah host. Ditambah request pada domain lain yang akan menambah penundaan kembali.Dynamic Image Sizes
Keuntungan saya mengupload gambar pada posting blogger saya bisa mengatur sendiri ukuran gambar dengan URL struktur parameter yang disediakan Google dengan mengganti sumber URL nya. Apa yang terjadi dan saya dapatkan ketika saya mengupload di pihak ketiga lain? Saya mungkin hanya akan mendapatkan gambar berukuran statis saja setiap saya upload, dan pihak tersebut belum tentu sebuah CDN (Content Delivery Network) yang baik.Jika berdasarkan masalah yang dihadapi Blogger mengenai page speed rasanya memang berlebihan ketika nilai ini menjadi tuntutan para pengembang blogger termasuk ditambah mendapatkan masalah sendiri yang diberi oleh platform. Ada juga yang terlalu mengagung-agungkan nilai ini, karena saat dilihat dari segi konten menjadi berbanding terbalik dengan baiknya kualitas page speed yang di dapat.
Web/Blog itu hal pertamanya bagi saya adalah konten. Tidak mungkin bagi saya mengelak konten yang baik untuk web/blog daripada memprioritaskan page speed affected. Tetapi blogger dan blogger templates developer juga tidak boleh mengelak page speed disertai tidak terlalu menanggapi laporan page speed analyzer secara berlebihan. Kecuali anda web developer yang banyak mengatur server side nya sendiri.
Sadly, no one comment
Post a Comment