Monday, July 11, 2016

Loading Super Cepat Dengan Google Web Light

Google Weblight

Apa itu Google Weblight..?

GoogleWeblight adalah sebuah inisiatif dari Google untuk meningkatkan pengalaman browsing jutaan pengguna yang berada di kecepatan internet yang lambat. Biasanya untuk negara-negara seperti Indonesia, India & Brasil di mana mayoritas pengguna pada 2G atau koneksi internet sangat lambat. Fitur ini akan bekerja hanya pada perangkat Android & pada browser chrome. Setiap kali pengguna menggunakan pencarian Google di browser Chrome pada Android , dan browser mendeteksi koneksi yang lambat, versi lite dari pencarian mobile akan secara otomatis akan bekerja. Google weblight ini akan mentranskode pemuatan halaman web dengan loading super cepat hingga 80%.

Cara kerja dari google weblight ini adalah menggunakan sistem render lebih cepat dari halaman web yang akan membantu jutaan pengguna di seluruh negara-negara kurang berkembang & berkembang untuk menelusuri lebih halaman, dan mengurangi masalah kecepatan loading halaman.

Sebagai contoh ini adalah hasil uji saya menggunakan koneksi lebih lambat 2G Mobile di sini, Jika anda ingin mengujinya bisa di Web Page Test

Alternatif lain untuk melihat tampilan halaman di Google Weblight  anda bisa mengunjungi link Google Weblight ini dan masukkan url yang ingin di lihat tampilannya.

Apa Artinya GoogleWeblight  Bagi Blogger?

Sebagai seorang blogger Anda perlu tahu bahwa ketika pengguna akan mengunjungi situs Anda melalui pencarian Google dengan perangkat Chrome android browser, maka pengguna akan melihat versi lite dari halaman web Anda. Semua elemen web maupun blog baik CSS, jQuery maupun Javascript akan dihapus ( kecuali Script Google Adsense ) dan pengguna hanya akan disajikan dengan konten saja. Jadi bagi yang memonetize blognya dengan google adsense akan tetap ditampilkan meskipun tampilanya akan berubah jadi acak - acakan dan tidak sesuai dengan tampilan halaman aslinya.

Baca juga Membuat Loading Blog Menjadi Super Cepat

Read more

Sunday, June 19, 2016

Test Mobile Friendly Di Think With Google

Think with Google

Seiring bertambahnya pengguna mobile smartphone sebagai sarana akses internet saat ini Google telah mengeluarkan sebuah tool baru benama Think With Google untuk menguji kecepatan dan kesempurnaan tampilan halaman pada versi mobile ( Mobile Friendly ). Secara umum untuk score hasil pengujian pada tool ini masih sama dengan Google Pagespeed Insight yaitu menampilkan jumlah hasil maksimal 100/100.

Baca juga Menguji Pagespeed di Gift Of Speed

Fungsi utama dari tool ini adalah untuk menguji seberapa Mobile Friendly kah halaman jika diakses menggunakan mobile device. Tool ini sebagai pengembangan dari Mobile Friendly Test dengan tampilan dan hasil yang lebih detil menggunakan score nilai.

Bagi anda yang ingin mencoba tool baru ini silakan kunjungi Test My Site untuk melihat seberapa mobile friendlykah halaman anda di perangkat mobile. Jika anda ingin melihat secara detail tentang hasil test silakan klik Get My Free Report kemudian masukkan alamat emailnya. Dalam waktu 24 jam google akan mengirimkan hasilnya ke email yang kita masukkan tadi

Jadi berapakah score Mobile Friendly anda ?

Hasil Test diThink with Google

Baca juga Cara Membuat Loading Blog Menjadi Super Cepat
Read more

Mengubah CSS Google Font Ke URL Base64

Google font base64

Untuk menciptakan design blog atau situs menjadi lebih cantik dan menarik kita bisa menggunakan font dari pihak ketiga salah satunya adalah Google Font. Namun penggunaan dan penempatan kode yang kurang tepat justru akan menimbulkan masalah pada kecepatan halaman sebuah blog maupun situs. Salah satu cara meningkatkan pagespeed loading blog atau situs adalah dengan cara mengubah file css eksternal kedalam url base64.

Ada 2 Cara untuk mengubah CSS Google Font menjadi base64 :

# Metode CSS Eksternal


Untuk langkah langkahnya adalah sebagai berikut :

1. Memilih Jenis Font

Silakan kunjungi Google Font untuk memilih jenis font yang ingin kita gunakan nah dari situ kita akan mendapatkan kode Plugin CSS eksternal dan kode CSS properti untuk menyeleksi penggunaannya. Sebagai contoh saya mengambil jenis Font Raleway dan kodenya adalah seperti ini :

<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"></link>
dan CSS propertinya :

font-family: 'Raleway', sans-serif;
Pada css ekternal diatas sebenarnya bisa saja langsung kita gunakan dengan menempatkannya pada template HTML,  namun kita akan dihadapkan pada masalah score pagespeed khususnya Google Pagespeed Insight yaitu terkait kritikan Render Blocking CSS. Baca Cara Mengatasi Render Blocking CSS Font Awesome Nah untuk mengatasinya kita bisa mengubah source url font tadi ke dalam url base64.

2. Mengubah CSS Ekternal Font Ke URL Base64

Setelah kita mendapatkan kode css eksternal dari google font tadi langkah selanjutnya adalah mengubah url source ke dalam base64. Silakan perhatikan kode dibawah ini :

<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"></link>
Tulisan bercetak tebal diatas adalah kode url dari fontnya

Copy url diatas dan masuk ke http://www.freeformatter.com/base64-encoder.html untuk mengubah url font kedalam base64. Sehingga nati secara keseluruhan kodenya menjadi seperti ini :

<link href="data:text/css;base64,KODE HASIL ENCODE BASE64" rel="stylesheet"></link>
Untuk penempatanya silakan masukkan kode css eksternal yang sudah kita ubah menjadi base64 tadi sebelum kode </head> kemudian seleksi font yang akan ditampilkan pada masing masing css class maupun id dengan menambahkan properti font-family: 'Raleway', sans-serif;

# Metode CSS @Font-face


Jika kita tidak ingin menggunakan CSS eksternal kita bisa juga menambahkan Google font secara langsung pada template dengan mengambil css dari Source URL.

Untuk Langkah Langkahnya Sebagai Berikut :

1. Mengambil Kode CSS dari Source Google Font

Masukkan url source misalnya https://fonts.googleapis.com/css?family=Raleway dan kita ambil kodenya menjadi seperti dibawah ini :

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v11/yQiAaD56cjx1AooMTSghGfY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v11/0dTEPzkLWceF7z0koJaX1A.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
2. Mengubah URL Font ke Base64

Pada CSS diatas terdapat 2 url font yang harus kita ubah kedalam base64, untuk cara megubahnya sama pada langkah sebelumnya. Sehingga nanti seluruh kodenya menjadi seperti ini :

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: local('Raleway'), local('Raleway-Regular'), url(data:text/css;base64,KODE HASIL ENCODE BASE64) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: local('Raleway'), local('Raleway-Regular'), url(data:text/css;base64,KODE HASIL ENCODE BASE64) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
3. Memasang Di Template

Masukkan kode yang telah kita ubah tadi kedalam CSS Template sebelum kode ]]></b:skin> atau </style>

Baca juga Cara Inline Gambar Base64 Di Blogger
Read more