Kriteria Blog Ideal menurut PageSpeed Insights

Saya telah merangkum berbagai catatan penting yang bisa menjadi pertimbangan untuk sebuah Situs Web, diantaranya yaitu Blog. Rangkuman ini berasal dari Google. Rangkuman ini membicarakan tentang sebuah Blog ideal yang dipandang bagus menurut PageSpeed Insight. Seiring dengan banyaknya penggunaan Ponsel, maka kecepatan loading sebuah Blog sangat diprioritaskan. Sebuah Blog bagus atau tidak jika tidak menemukan beberapa kendala. Apa saja kendala tersebut dan bagaimana menghilangkannya ?. Ini Solusinya :

1.       Menghilangkan JavaScript dan CSS yang memblokir Perenderan di Konten Paruh Atas.

(Mengoptimalkan Pengiriman CSS).

Aturan ini berlaku saat PageSpeed Insight mendeteksi adanya laman yang berisi Style Sheet Ekternal yang memblokir perenderan yang menunda pelukisan konten ke layar. Browser memblokir file CSS Eksternal sebelum melukis konten ke layar. Hal ini menyebabkan latensi jaringan tambahan dan meningkatkan waktu yang dibutuhkan untuk menampilkan konten ke layar. Apabila Sumber Daya CSS eksternal berukuran kecil, anda dapat langsung memasukannya ke dalam Dokumen HTML, yang disebut “Penyebarisan”. Menyebariskan CSS kecil dengan cara ini memungkinkan Browser melanjutkan proses perenderan laman. Perlu diingat apabila File CSS berukuran besar, enjadikan CSS sepenuhnya sebaris dapat menyebabkan PageSpeed Insight memperingatkan bahwa bagian Paruh Atas Laman terlalu besar, jadi harus memprioritaskan konten yang terlihat. Apabila File CSS berukuran besar, anda perlu mengidentifikasi dan menyebariskan CSS yang dibutuhkan untuk merender Konten Paruh Atas dan menunda pemuatan gaya yang tersisa sampai sesudah konten Paruh Atas. 

A.      Contoh Menyebariskan File CSS Kecil. 

Jika dokumen HTML terlihat seperti ini

<html>

   <head>

      <Link  rel=”stylesheet”  href=”small.css”>

  </head>

  <body>

      <div  class=”blue”>

         Hello, world !

      </div>

   </body>

</html>

Dan sumber daya small.css tampak seperti ini

.yellow { background color : yellow; }

.blue { color : blue; }

.big { font-size : 8em; }

.bold { font-weight : bold; }

Anda dapat menyebariskan CSS penting sebagai berikut :

<html>

   <head>

      <style>

           .blue{color:blue;}

       </style>

       </head>

<body>

        <div  class=”blue”>

          Hello, world !

        </div>

    </body>

</html>

<link  rel=”stylesheet”  href=”small.css”>

Small CSS asli dimuat setelah pemuatan laman. Urutan penerapan aturan CSS dipertahankan dengan memasukkan semua elemen <style> dan <link> kedalam dokumen melalui Javascript.

B.      Jangan Sebariskan URL Data Berukuran Besar.

Hati – hati saat menyebariskan URL data dalam file CSS. Meskipun penggunaan yang selektif atas URL data berukuran kecil dalam CSS anda mungkin masuk akal. Menyebariskan URL data berukuran besar dapat menyebabkan ukuran CSS paruh atas menjadi lebih besar, yang akan memperlambat waktu perendeman laman.

C.      Jangan Sebariskan Atribut CSS.  

Menyebariskan atribut CSS pada elemen HTML, (Misalnya : &lt  p style=…&gt) sebaiknya dihindari jika memungkinkan, karena hal ini sering menyebabkan duplikasi kode yang tidak diperlukan. Selanjutnya CSS sebaris pada elemen HTML diblokir secara default dengan kebijakan keamanan konten (CSP).

2.       Hindari Pengalihan Laman Landas.

Aturan ini berlaku saat PageSpeed Insight mendeteksi bahwa memiliki lebih dari satu pengalihan dari URL yang diberikan ke Laman Landas Akhir.

Karena pengalihan memicu siklus permintaan – respon HTTP tambahan dan menambah Latensi waktu perjalanan, maka penting untuk meminimalkan jumlah pengalihan yang dibuat oleh aplikasi anda. Menghindari pengalihan HTTP dapat mengurangi lamanya pengguna menunggu laman dibuat. Kami menganjurkan agar anda mempertimbangkan desain situs anda dengan teliti untuk melihat di bagian mana anda dapat meningkatkan kinerja situs anda.

Berikut beberapa contoh pola pengalihan yang baik dan buruk, yaitu :

A.      Sangat Baik : example.com menggunakan desain web responsive, tidak memerlukan pengalihan.

B.      Baik : example.com – m.example.com/home.

C.      Buruk : example.com – www.example.com – m.example.com – m.example.com/home

3.       Manfaatkan Penyimpanan Cache Browser (Meningkatkan Penyimpanan ke Cache Browser). 

Aturan ini berlaku saat PageSpeed Insight mendeteksi bahwa respons dari server anda tidak menyertakan header penyimpanan ke Chace yang eksplisit atau jika sumber daya ditentukan untuk disimpan dalam cache untuk jangka waktu pendek.

Penyimpanan ke Cache Browser untuk sumber daya statis dapat menghemat waktu pengguna, jika mereka mengunjungi situs anda lebih dari sekali. Sebaiknya header penyimpanan ke cache berlaku untuk semua sumber daya statis yang dapat disimpan di cache, tidak hanya sebagian kecil saja misalnya gambar. Sumber daya yang dapat di simpan di cache meliputi file JS  dan CSS, File Gambar, dan file objek biner lainnya, file Media, PDF, dsb. Secara umum, HTML tidaklah statis dan tidak dapaat disimpan di Cache secara default. Sebaiknya anda mempertimbangkan kebijakan penyimpanan dalam cache apa yang dapat bekerja dengan baik untuk HTML situs anda. Aktifkan penyimpanan ke cache browser untuk server anda. Sumber daya statis setidaknya memiliki memiliki masa penyimpanan dalam cache selama seminggu. Untuk semua sumber daya yang dapat disimpan di cache, sebaiknya ikuti setelan berikut :

A.      Setel Expires minimal satu minggu dan sebaiknya sampai satu tahun ke depan.

Kami lebih memilih Expires daripada Cache-Control : max-age karena lebih banyak di dukung. Jangan menyetelnya melebihi satu tahun ke depan karena melanggar pedoman RFC. 

B.      Jika anda tahu persis waktu saat sumber daya akan berubah, setel masa berakhir yang lebih pendek. Namun jika sumber daya tersebut “akan segera berubah”  tapi anda tidak tahu waktunya, sebaiknya setel masa berakhir yang panjang dan gunakan penyidikjarian URL (yang dideskripsikan di bawah). 

a.       Header Expires dan Cache-Control : max-age.

Header ini menentukan jangka waktu yang dimiliki browser untuk dapat menggunakan sumber daya yang disimpan di cache tanpa perlu memeriksanya untuk mengetahui apakah versi baru tersedia dari server web. Header tersebut merupakan “Header penyimpanan ke cache yang kuat” yang berlaku tanpa syarat. Setelah header di setel dan sumber daya di unduh, browser tidak akan mengeluarkan permintaan GET apapun untuk sumber daya sampai tanggal masa berakhir atau usia maksimum tercapai, atau sampai cache dihapus oleh pengguna. 

b.      Header Last – Modified dan ETag. 

Header ini menetapkan bagaimana seharusnya browser menentukan apakah file sama untuk tujuan penyimpanan ke cache. Pada Header Last – Modified, yang menjadi acuan adalah tanggal. Pada Header ETag yang ditetapkan menjadi acuan dapat berupa nilai apapun yang mengidentifikasi sumber daya secara unik, umumnya versi file atau hash konten. Last - Modified merupakan header penyimpanan ke cache yang “lemah” dalam antrian browser menerapkan heuristic untuk menentukan apakah mengambil item dari cache atau tidak. Header ini memungkinkan browser memperbaharui sumber daya yang disimpan di cache secara efisien dengan mengeluarkan permintaan GET bersyarat saat pengguna memuat ulang laman secara eksplisit. GET bersyarat tidak mengembalikan respon penuh, kecuali sumber daya telah berubah di server. Dengan demikian, GET bersyarat memiliki latensi yang lebih rendah dari pada GET penuh.

c.       Header Penyimpanan ke cache mana yang seharusnya saya gunakan ?.

Penting untuk menetapkan salah satu dari Expires atau Cache-Control : Max-Age dan salah satu dari Last Modified atau ETag, untuk semua sumber daya yang dapat di simpan di cache. Menentukan Expires dan Cache-Control : Max-Age atau menentukan Last Modified dan ETag merupakan hal yang berlebihan.

d.      Menggunakan Penyidikjarian URL.

Untuk sumber daya yang terkadang berubah, kita dapat meminta browser agar menyimpan sumber daya di cache sampai sumber daya tersebut berubah di server. Dan pada saat sumber daya berubah di server, server memberitahu browser bahwa versi baru tersedia. Kita dapat mencapai hal ini dengan memberikan URL unik ke setiap versi sumber daya. Misalnya anggap saja kita memiliki sumber daya yang di beri nama “my_stylesheet.css”.  Kita dapat merubah nama file menjadi “my_stylesheet_fingerprint.css”.  Saat sumber daya berubah, begitu juga sidik jarinya, dan kemudian URL nya pun berubah. Segera setelah URL berubah, browser dipaksa untuk mengambil ulang sumber daya. Penyidikjarian memungkinkan kita menyetel tanggal masa berakhir yang lama ke masa yang mendatang. Bahkan untuk sumber daya yang lebih sering berubah.

Cara umum penyidikjarian adalah dengan bilangan Heksa desimal 128-bit yang mengodekan Hash Konten tersebut. Strategi lain adalah dengan membuat direktori rilisan baru untuk setiap versi baru aplikasi dan menempatkan semua asset untuk setiap versi pada direktori berversi. Strategi ini memiliki kelemahan bahwa apabila asset tidak berubah di antara versi, URL nya masih akan berubah dan memaksa pengunduhan ulang. Menggunakan Hash Konten tidak terkena dampak masalah ini, tapi sedikit lebih kompleks. 

4.       Memperkecil Sumber Daya (Javascript, CSS dan HTML). 

Aturan ini berlaku, saat PageSpeed Insight mendeteksi bahwa ukuran salah satu sumber daya anda dapat diperkecil melalui minimisasi. Memperkecil Sumber Daya berarti menghapus byte yang tidak perlu, seperti spasi ekstra, baris baru dan indentasi. Memadatkan HTML, CSS dan Javascript dapat mempercepat pengunduhan, penguraian, dan waktu eksekusi. Selain itu, untuk CSS dan Javascript anda dapat mengurangi ukuran file dengan mengubah nama variable selama HTML diperbaharui dengan benar untuk memastikan pemilih terus bekerja.

Sebaiknya perkecil HTML. CSS dan Javascript anda, yaitu :

A.      Untuk memperkecil HTML, anda dapat menggunakan Ekstensi Chrome PageSpeed Insight untuk membuat versi kode HTML yang dioptimalkan. Jalankan analisis terhadap laman HTML dan jelajahi aturan “Memperkecil HTML”. Klik “lihat konten yang dioptimalkan” untuk mendapatkan kode HTML yang dioptimalkan.

B.      Untuk memperkecil CSS, anda dapat mencoba YUI Compressor dan cssmin.js

C.      Untuk memperkecil Javascript, cobalah Closure Compiler, JSSMin dan YUI Compressor. Anda dapat membuat proses membangun yang menggunakan alat ini untuk memperkecil dan mengubah nama file pengembangan serta menyimpannya di direktori produksi. 

5.       Aktifkan Pemanpatan (Kompresi).

Aturan ini berlaku saat PageSpeed Insights mendeteksi bahwa sumber daya yang dapat dikompres di laman tidak disajikan dengan laman kompresi HTTP. Banyak server web dapat mengompres file dalam format “gzip” sebelum mengirimkannya untuk pengunduhan, baik menggunakan modul pihak ketiga ataupun menggunakan rutin terpasang. Ini dapat mengurangi jumlah waktu yang diperlukan untuk mengunduh sumber daya yang dibutuhkan untuk merender situs web anda. Sebaiknya aktifkan Kompresi pada server web anda. Berikut ini beberapa referensi untuk mengaktifkan Kompresi di server web popular, diantaranya :

A.      Apache : Gunakan mod_deflate.

B.      Nginx : Gunakan HttpGzipModule.

C.      IIS : Konfigurasikan Kompresi HTTP. 

PageSpeed Insights melaporkan bahwa banyak file konten statis perlu dikompres dalam format gzip walaupun anda telah mengkonfigurasikan server web agar menyajikan file tersebut menggunakan kompresi gzip. Mengapa PageSpeed Insights tidak mengenali kompresi tersebut. Server proxy dan perangkat lunak anti virus dapat menonaktifkan kompresi saat file diunduh ke computer yang lain. Hasil PageSpeed Insights didasarkan pada header yang sebenarnya dikembalikan ke klien anda, sehingga jika anda menjalankan analisis di computer lain yang menggunakan perangkat lunak anti-virus tersebut, atau yang berada di belakang server proxy perantara, hal – hal tersebut dapat menimbulkan masalah. Untuk menentukan apakah proxy tersebut adalah penyebabnya, anda dapat menggunakan Ekstensi Chrome PageSpeed Insight untuk memeriksa header. Langkah – langkah nya adalah :

a.       Jalankan PageSpeed di laman yang bersangkutan.

b.      Klik tab Tampilkan Sumber Daya.

c.        Perluas URL sumber daya yang ditandai sebagai tidak dikompres. Header yang menyertai sumber daya ditampilkan. Jika anda melihat header yang bernama Via, Forwarded, atau Proxy-Connection, ini menunjukkan bahwa proxy telah menyajikan sumber daya tersebut. 

6.       Mengurangi Waktu Respons Server (Meningkatkan waktu Respons Server).

Aturan ini berlaku saat PageSpeed Insight mendeteksi bahwa waktu respon server anda di atas 200 milisekon. Waktu respon server mengukur berapa lama waktu yang diperlukan untuk memuat HTML yang dibutuhkan guna mulai merender laman dari server anda, setelah dikurangi latensi jaringan antara Google dan server anda. Mungkin terdapat perbedaan dari satu waktu respon ke waktu respons berikutnya, namun perbedaannya seharusnya tidak terlalu besar. Bahkan waktu respon server yang sangat bervariasi dapat menunjukkan masalah kinerja yang mendasar. Anda sebaiknya mengurangi waktu respons server di bawah 200 milisekon. Ada sejumlah factor potensial yang dapat memperlambat respons server anda. Logika aplikasi yang lambat, kueri basis data yang lambat, perutean yang lambat, kerangka kerja, perpustakaan, kekurangan CPU sumber daya, atau kekurangan memori. Anda perlu mempertimbangkan semua factor tersebut untuk meningkatkan waktu respons server. Langkah pertama untuk mengetahui alasan waktu respons server yang tinggi adalah dengan mengukurnya. Lalu dengan data yang ada, periksa panduan yang tepat mengenai cara mengatasi masalah. Setelah masalah tersebut terselesaikan, anda harus terus mengukur waktu respons server dan mengatasi segala hambatan kinerja di masa mendatang.

a.       Kumpulkan dan periksa data dan kinerja yang ada. Jika tidak ada yang tersedia, evaluasi menggunakan solusi pemantauan aplikasi web otomatis (ada versi sumber terbuka dan di hosting yang tersedia untuk sebagian besar platform), atau tambahkan instrumensi khusus.

b.      Identifikasi dan perbaiki hambatan kinerja teratas. Jika anda menggunakan kerangka kerja web popular, atau platform pengelolaan konten, periksa dokumentasi untuk praktik terbaik pengoptimalan kerja.

c.       Pantau dan peringatkan tentang segala regresi kinerja di masa mendatang.

7.       Optimalkan Gambar.

Aturan ini berlaku saat PageSpeed Insight mendeteksi bahwa gambar di laman dapat dioptimalkan untuk mengurangi ukurannya tanpa mempengaruhi kualitas visual secara signifikan. Buat ukuran gambar seminimal mungkin guna mengurangi waktu. Buat ukuran gambar seminimal mungkin guna mengurangi waktu yang dihabiskan oleh pengguna untuk menunggu pemuatan sumber daya. Memformat dan mengompres gambar dengan benar dapat menghemat byte data. Hal ini menghemat waktu bagi pengguna pada sambungan yang lambat dan menghemat uang bagi pengguna pada paket data yang terbatas.

Sebaiknya anda melakukan pengoptimalan dasar dan lanjutan pada semua gambar. Pengoptimalan dasar meliputi memotong ruang yang tidak dibutuhkan mengurangi kedalaman warna ke tingkat terendah yang dapat diterima, menghapus komentar gambar dan menyimpan gambar dalam format yang sesuai. Anda dapat melakukan pengoptimalan dasar dengan program pengeditan gambar apapun seperti GIMP. Pengoptimalan lanjutan melalui kompresi (lossless) file JPEG dan PNG lebih lanjut. 

a.       Gunakan Kompresor Gambar. 

Tersedia beberapa alat yang dapat melakukan kompresi (Lossless) file JPEG dan PNG tanpa mempengaruhi kualitas gambar. Untuk JPEG sebaiknya gunakan jpegtran atau jpegoptim (hanya tersedia di linux : dijalankan dengan opsi ----strip---all). Untuk PNG sebaiknya gunakan OptiPNG atau PNGOUT.

b.      Pilih Format File Gambar yang Sesuai.

Anda sebaiknya menguji coba format apa yang paling baik bagi gambar anda, walaupun kami sangat menyarankan hal berikut :

1.       PNG hampir selalu lebih baik dari GIF. Meskipun beberapa versi browser lawas mungkin hanya memiliki dukungan parsial untuk PNG.

2.       Gunakan GIF untuk grafik sederhana atau sangat kecil (misalnya kurang dari 10 x 10 piksel atau palet warna yang kurang dari 3 warna) dan untuk gambar yang bergerak. 

3.       Gunakan JPG untuk semua gambar bergaya fotografi.

4.       Jangan menggunakan BMP atau TIFF.

8.       Prioritaskan Konten yang Terlihat (Kurangi Ukuran Konten Paruh Atas). 

Aturan ini berlaku saat PageSpeed Insights mendeteksi bahwa diperlukan perjalanan jaringan tambahan untuk merender konten paruh atas laman. Jika jumlah data yang diperlukan melebihi jendela kongesti awal, akan diperlukan perjalanan tambahan antara server anda dan browser pengguna. Untuk pengguna pada jaringan dengan latensi yang tinggi seperti jaringan seluler, hal ini dapat menyebabkan penundaan yang signifikan pada pemuatan laman. Agar laman dimuat lebih cepat, batasi ukuran data (Mark Up HTML, Gambar, CSS, Javascript) yang dibutuhkan untuk merender konten paruh atas laman. Ada beberapa cara untuk melakukan hal tersebut, yaitu:

A.      Susun HTML agar membuat konten Paruh Atas dan Hal Penting terlebih dahulu.

Muat konten utama laman anda terlebih dahulu. Susun laman agar respons awal dari server anda mengirimkan data yang dibutuhkan untuk segera merender bagian penting laman dan menunda sisanya. Ini dapat berarti bahwa anda perlu membagi CSS kedalam dua bagian, yaitu : Bagian sebaris yang bertanggung jawab mngatur Gaya Porsi ATF Konten dan Bagian yang Ditunda. 

Pertimbangkan contoh berikut tentang cara situs dapat disusun ulang agar dapat memuat lebih cepat : 

1.       Jika HTML anda memuat widget pihak ketiga sebelum memuat konten utama, ubah urutannya agar memuat konten utama terlebih dahulu.

2.       Jika situs anda menggunakan desain dua kolom dengan bilah sisi navigasi dan artikel, namun HTML anda memuat bilah sisi sebelum artikel, pertimbangkan untuk memuat artikel terlebih dahulu. 

B.      Kurangi jumlah data yang digunakan oleh Sumber Daya anda. 

Setelah situs anda dirancang ulang agar dapat bekerja dengan baik pada banyak perangkat dan memuat konten penting terlebih dahulu. Gunakan teknik berikut untuk mengurangi jumlah data yang dibutuhkan untuk merender laman anda. 

1.       Kurangi Sumber Daya : HTML, CSS dan Javascript dapat dikurangi dengan menghapus white space dan komentar yang tidak diperlukan. Pengoptimalan lebih lanjut mngkin dapat dilakukan melalui penggunaan alat yang mengubah nama variabel pada sumber daya anda.

2.       Pertimbangkan menggunakan CSS bukan gambar jika mungkin.

3.       Aktifkan kompresi.