Cara menggunakan PageSpeed Insights Agar situs lebih mobile friendly

Cara menggunakan PageSpeed Insights Agar situs lebih mobile friendly - Hello sobat, posting kali ini saya akan membahas seputar tool yang digunakan untuk keperluan pengunjung blog maupun situs anda, dimana Google telah lebih memberikan solusi agar semua pemilik situs mempunyai halaman maupun tampilan web yang mobile friendly.


Maksud dari Mobile Friendly disini adalah, situs anda dapat memenuhi kriteria google dengan tampilan website yang dapat enak dibuka pengunjung pada saat dibuka di perangkat/device seluler, dalam hal pemuatan maupun tampilan situs anda.


yang paling utama jika anda ingin membuat sebuah blog atau website yang ramah akan tampilan seluler maka dibutuhkan sebuah tampilan khusus untuk menampilkan halaman tersebut dalam bentuk seluler, terutama dalam kinerja loading pada blog anda.


beberapa tool yang google sediakan untuk hal keperluan ramah akan tampilan seluler adalah ,Mobile friendly tool dan PageSpeed Insights. tool - tool ini sangat bagus untuk Mengoptimalkan tampilan website anda ketika dibuka oleh orang lain yang berkunjung pada situs anda melalui perangkat seluler.


ini juga bertujuan pada pengoptimalan pedoman webmaster untuk mengoptimalkan situs - situs yang bekerja sebagai mitra di google, dengan melakukan hal ini maka lama waktu pembukaan pada perambaan situs anda akan menjadi lebih cepat, dan enak dibuka, maka pengunjung tidak kabur begitu saja.

Cara menggunakan PageSpeed Insights Agar situs lebih mobile friendly
Contoh umumnya lagi jika website anda terlihat tidak mobile friendly, pada saat pengunjung membaca artikel anda, dan mulai menggulir/scroll ke bawah maka akan membutuhkan waktu yang lambat untuk sampai membaca pada akhiran artikel, kelihatannya ini akan membuat pengunjung merasa jengkel dan tidak betah untuk itu anda perlu melakukan setidaknya Optimasi PageSpeed Insights untuk optimasi situs anda. 

Cara menggunakan PageSpeed Insights

Untuk Cara menggunakan PageSpeed Insights anda dapat menyimak dibawah ini :
  • Pertama masuk terlebih dahulu kesitusnya, PageSpeedInsight 
  • Setelah anda masuk kesitusnya, aka ada sebuah form pada situs tersebut, isi dengan URL Blog/situs anda. Setelah itu Klik "Analsis" untuk melihat beberapa analisa permasalahan struktur kode terhadap halaman website anda.
Cara menggunakan PageSpeed Insights Agar situs lebih mobile friendly

Untuk memenuhi Kriteria PageSpeedInsight Saya merekomendasikan untuk memperbaiki beberapa tampilan halaman pada blog atau situs anda, berikut yang baru juga disarankan oleh Google untuk kesempurnaan PageSpeedInsight Website anda.

1. ViewPort Meta

Tanpa sebuah meta-viewport, ketika situs anda dibuka pada perambaan browser mobile, situs anda akan dianggap Tidak support seluler, dan mengakibatkan tampilan situs dibuka menjadi tampilan viewport Dekstop, berdampak pemuatan akan menjadi sangat lama.

Maka dalam hal ini anda perlu mengoptimalkannya dengan memasang meta tag tersebut, agar layar situs anda dapat menyesuaikan lebih lanjut dengan lebar tiap perangkat /device.

Salah satu contoh penerapan meta seperti berikut dibawah kode <head> cobalah lihat periksa kembali tag - tag pada template yang anda pakai :
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

2. Ukuran huruf.

Untuk menyesuaikan Pagespeed Lights pada situs anda, perlu penyesuaian Ukuran huruf yang mana ini juga dapat memperlambat suatu perambaan jika huruf – huruf pada browser mobile tidak sesuai dengan ukuran layar pada saat perambaan situs,

apalagi ketika di scroll kebawah, untuk hal ini Pelajari lebih lanjut tentang fungsi Media queries dan CSS, agar ukuran huruf menjadi lebih sempurna ketika dibuka di tampilan Mobile.

Pada contoh kasus, biasanya saya menggunakan sebuah media queries dengan ukuran huruf pada CSS bernilai (font-size : 100%), yang mana persentasenya akan disesuaikan oleh ukuran media queries di tiap CSS kode.

3. Skala Objek.

Menggunakan beberapa template terkadang ada yang tidak sesuai dengan PageSpeedInsight, kebanyakan dari ini tidak menggunakan sebuah tag CSS tambahan, seperti pengaturan ukuran Tombol search, tombol Download, Scale Gambar dlln.
Untuk mengatasi Hal ini anda dapat menambahkan CSS berikut :
img {
  max-width:100%;
  height:auto;
  width:auto\9; /* IE8 */
}
embed,object,iframe {
  width:100%;
  height:auto;
  min-height:300px;
}

letakkan kode diatas, setelah kode <style> pada template blog anda. hal ini bertujuan agar tombol - tombol dan gambar menjadi responsiv mengikuti layar, dan tidak menjadi terlalu besar.

4. Hindari Plugin dan JavaScript yang tidak perlu

Beberapa Optimasi PageSpeedInsight Yang dapat ditempuh Selain Scale dan size adalah dengan menghindari Plugin Pihak ketiga yang tidak diperlukan maupun sebuah javascript, hal ini dapat membuat Render Loading Template menjadi lama untuk memuat halaman situs anda.

Pelajari lagi tata struktur template blog anda dan lihat kembali Javascript yang error pada pemberitahuan PageSpeedInsight yang ditampilkan.

5. Compress kode CSS dan HTML Template Blog.

Untuk mengoptimalkan PageSpeedInsight anda dapat Menggunakan sebuah tool online diinternet, untuk mengoptimalkan kapasitas struktur CSS anda sehingga ketika dibuka pada Tampilan Seluler menjadi Lebih Mobile Friendly.

Anda dapat membaca ini : ‘CARA COMPRESS CSS BLOG

untuk HTML anda dapat mencari generator compress langsung di google, dan ini banyak tersedia secara geratis.

Perlu dipahami untuk Mengoptimalkan PageSpeedInsight Blog anda, Cukup ikuti beberapa hal yang di tampilkan analisa PageSpeedInsight yang mesti harus diperbaiki, Mempunyai Nilai +70 itu lebih bagus dari pada -70 pada PageSpeedInsight,

tetapi lebih bagus lagi jika 100%, namun perlu usaha tambahan untuk mendapatkan ini jika memakai fungsi media queries yang baik, pelajari lebih lanjut tampilan seluler maupun media queries.

PageSpeedInsight sangat membantu untuk hal kecepatan perambaan Visitor menuju ke halaman artikel anda, untuk Penyelesaian anda dapat juga menggunakan sebuah tool Mobile Friendly untuk mengecek apakah telah mobile Friendly tampilan anda, yang mana sesuai dengan Rekomendasi Google.

Sekiranya itulah beberapa cara untuk menggunakan PageSPeedInsights agar Tampilan Situs anda lebih Mobile friendly, jangan lupa baca artikel saya yang lainnya. Thanks, semoga bermanfaat.

- Berkomentarlah dengan sopan.
- No Link Aktif, SPAM, SARA P#RN.
- Jangan membalas yang tidak sesuai tema.
- Untuk "PM/tanya hal penting" bisa lewat Social Media yang saya miliki, sekalian Kenalan dengan Admin ^_^.
EmoticonEmoticon