KangkungGenjer.com: blog

Home » Posts filed under blog

Showing posts with label blog. Show all posts

Cek Kecepatan Loading Blog Dengan Pagespeed Insight Google

Kecepatan Loading Blog. Blog merupakan media untuk bertukar informasi di dunia maya, jutaan informasi beredar setiap harinya di dunia maya, kita bisa mencari informasi apa saja di dunia maya, yang disebut dengan internet. Sebagai salah satu media informasi blog digunakan untuk perantara antara orang yang membutuhkan informasi dengan orang yang memberikan informasi.

Ketika pencari iformasi membuka sebuah laman blog, atau web, maka web tersebut akan membuka, dan menampilkan informasi yang dicari, lamanya halaman web terbuka yang disebut dengan loading halaman web, blog.

Semakin lama web terbuka, maka semakin membuat pencari informasi kesal, dan jenuh, pencari informasi tidak mau berlama-lama menunggu halaman blog loading, Mungkin saja mereka langsung menutup browsernya. Untuk itu loading blog yang cepat sangat dibutuhkan untuk mempercepat terbukanya halaman blog.

Pengertian loading adalah proses memuat dan mengumpulkan bagian-bagian terpisah suatu file atau class dalam satu tempo untuk mendukung / support kinerja system secara keseluruhan.

Gambaran mengenai proses loading.
Loading layar yang menyamarkan lamanya waktu bahwa program diperlukan untuk memuat yang umum ketika permainan komputer yang dimuat dari kaset, sebuah proses yang bisa memakan waktu lima menit atau lebih. Saat ini, sebagian besar game-download digital, dan karena itu dimuat off hard drive yang berarti beban kali lebih cepat, namun, beberapa game juga dimuat off dari optical disk, lebih cepat dari media magnetik sebelumnya, tapi masih termasuk loading layar untuk menyamarkan jumlah waktu yang dibutuhkan untuk menginisialisasi permainan dalam RAM.

Karena layar loading data itu sendiri perlu dibaca dari media, itu benar-benar meningkatkan waktu loading keseluruhan. Misalnya, dengan ZX Spectrum permainan, data layar membutuhkan 6 kilobyte, mewakili peningkatan waktu loading dari sekitar 13% lebih game yang sama tanpa layar loading

Kembali kepada masalah loading halaman blog, agar pengunjung tidak menutup browsernya, maka kita harus mempercepat loading blog, agar halaman blog cepat dimuat. Apakah anda sudah mengecek kecepatan loading blog anda?Bagaimana kecepatan loading blog setelah anda mengeceknya?cepat atau lamakah halaman blog dimuat.

cara mengetahui kecepatan loading blog

Untuk mengetahui seberapa cepat blog loading, dapat dicek dengan menggunakan pagespeed dari google, kecepatan loading blog jika dicek dengan pagespeed insight ini sangat akurat. saya sendiri hampir setiap hari cek kecepatan loading blog saya untuk mengetahui kecepatan loading blog setiap hari, hal ini saya lakukan juga untuk memantau kecepatan loading blog setiap saat. Sehingga jika terjadi hal loading blog menjadi lambat, bisa cepat diatasi dan dicari masalahnya, sehingga bisa didapatkan solusinya intuk mengatasi masalah loading blog yang lama.

Cek Kecepatan Loading Blog Dengan Pagespeed Insight Google

Cara mudah untuk mengetahui kecepatan loading halaman blog dengan mengeceknya langsung di https://developers.google.com/speed/pagespeed/insights/?hl=in.

Berikut ini langkah-langkah untuk mengecek kecepatan loading halaman blog guna mengetahui kecepatan loadingnya.

1. Masuk ke alamat diatas.
2. Copi dan pastekan alamat url anda
3. Klik analisis.
4. Tunggu hasilnya.

Bagaimana hasinya?Berapa skor kecepatan loading halaman blog anda. Semoga artikel singkat ini bisa membantu untuk meningkatkan kecepatan loading halaman blog.

Menjadi Peringkat pertama Dalam Satu malam

Peringkat pertama di google dalam satu malam

HTML 5 : KELEBIHAN DAN KEKURANGAN MENGUNAKAN HTML5 PADA WEB/BLOG?

Pengertian HTML5

HTML5 lahir pada tahun 2009 yang merupakan standar baru untuk HTML, XHTML dan DOM HTML. Sejak munculnya HTML versi 4.01, perkembangan situs dunia semakin berkembang.
HTML5 merupakan hasil proyek dari W3C (World Wide Web Consortium) dan WHATWG (Web Hypertext Application Technology Working Group). WHATWG bekerja dengan bentuk situs dan aplikasi, sedangkan W3C merupakan pengembang dari XHTM L 2.0 pada tahun 2006, kemudian mereka memutuskan untuk bekerja sama dan membentuk versi baru dari HTML.

Meskipun HTML5 telah dikenal luas oleh para pengembang web sejak lama, HTML5 baru mencuat pada April 2010 setelah CEO Apple Inc.,Steve Jobs, mengatakan bahwa dengan pengembangan HTML5, "Adobe Flash sudah tidak dibutuhkan lagi untuk menyaksikan video atau menyaksikan konten apapun di web".

Tujuan dibuatnya HTML5 antara lain:

Fitur baru harus didasarkan pada HTML, CSS, DOM , dan JavaScript.
Mengurangi kebutuhan untuk plugin eksternal (seperti Flash).
Penanganan kesalahan yang lebih baik.
Lebih banyak markup untuk menggantikan scripting.
HTML5 merupakan perangkat mandiri.
HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari WWW (world wide web) sebuah teknologi inti dari internet. HTML5 adalah revisi kelima dari HTML(yang pertama kali diciptakan pada tahun1990 dan versi keempatnya, HTML4, pada tahun 2007) dan hingga bulan JUNI 2011\masih dalam pengembangan. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologI html agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.

HTML5 merupakan salah satu karya World Wide Web Consortium, W3C untuk mendefinisikan sebuah bahasa markah tunggal yang dapat ditulis dengan cara HTML ataupun XHTML.Dari penjelasan yang ada di wikipedia : HTML5 merupakan sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World Wide Web, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML dan hingga bulan Juni 2011 masih dalam pengembangan.

Dimana tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.

HTML5 merupakan hasil proyek dari W3C (World Wide Web Consortium dan WHATWG ( Web Hypertext Application Technology Working Group ). Dimana WHATWG bekerja dengan bentuk web dan aplikasi dan W3C merupakan pengembang dari XHTML 2.0 pada tahun 2006, kemudian mereka memutuskan untuk bekerja sama dan membentuk versi baru dari HTML.

Berikut tujuan dibuatnya HTML5 :

Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript
Mengurangi kebutuhan untuk plugin eksternal ( Seperti Flash )
Penanagan kesalahan yang lebih baik
Lebih markup untuk menggantikan scripting
HTML5 merupakan perangkat mandiri
Proses pembangunan dapat terlihat untuk umum
Fitur baru dalam HTML5 :
Unsur kanvas untuk menggambar
Video dan elemen audio untuk media pemutaran
Dukungan yang lebih baik untuk penyimpanan secara offline
Elemen konten yang lebih spesifik, seperti artikel, footer, header, nav, section
Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, search.
Beberapa browser sudah mendukung HTML5 seperti safari, chrome, firefox, dan opera. Kabarnya IE9 ( Internet Explorer ) akan mendukung beberapa fitur dari HTML5.

Pembuatan HTML5 juga di karenakan Standard HTML4 yang dijumpai banyak memiliki kelemahan untuk mendukung aplikasi web yang interaktif. Akibat hal ini banyak orang menambahkan fitur baru baik disisi aplikasi web ataupun disisi browser. Solusi ini dikenal dengan plugin dan salah satunya adalah Flash dan Silverlight.

Semakin menjamurnya plugin didalam aplikasi atau browser membuat aplikasi web ini susah untuk menembus banyak browser. Hal ini dikarenakan setiap plugin mempunyai cara yang berbeda-beda, sebagai contoh kita ingin memasang plugin flash untuk sharing video maka pada halaman web kita harus ditulis sebagai berikut

<object type="application/x-shockwave-flash" width="400" height="220" wmode="transparent" data="flvplayer.swf?file=movies/holiday.flv">
<param name="movie" value="flvplayer.swf?file=movies/holiday.flv" />
<param name="wmode" value="transparent" />
</object>
Contoh diatas menggunakan plugin Flash dari Adobe untuk menjalankan aplikasi web pada browser maka lain caranya bila kita menggunakan Silverlight. Teknologi Silverlight dikembangkan oleh Microsoft. Contoh penggunaan Silverlight pada halaman web dapat dilihat pada HTML dibawah ini

<object width="300" height="300" data="data:application/x-silverlight-2," type="application/x-silverlight-2" >
<param name="source" value="SilverlightApplication1.xap"/>
</object>
HTML5 ini dibuat menyederhanakan kompleksitas penggunaan media video dengan standard baru yaitu penggunaan tag <video>. Dengan fitur baru ini maka kita cukup menulis script untuk menjalankan file video sebagai berikut

<video src=tutorialku.mp4>
</video>

Isu bagaimana menjalankan file video pada aplikasi web merupakan salah satu contoh bagaimana HTML4 tidak dapat mencakup masalah ini dan masih banyak lagi isu pada HTML4. Oleh karena itu, kita sudah saatnya memanfaatkan HTML5 sebagai standard aplikasi web kita.

Apakah Browser Saya Support HTML5?Bagaimana caranya untuk menguji apakah browser yang anda install itu sudah support HTML5 atau tidak dan seberapa banyak fitur HTML5 yang disupport? Caranya cukup mudah, pertama-tama pastikan komputer anda sudah terhubung dengan internet dan arahkan ke alamat web sebagai berikut:

http://html5test.com
Dari data yang ada pada website itu browser Maxthon 3.4.1 merupakan browser terbaik dalam hal mendukung bahasa HTML5 dengan 422 total skor diikuti kemudian dengan google Chrome 20 dengan 414 total skor kemudian berturut-turut Opera 12.00 dengan 385, Firefox 13 dengan 345, Safari 5.1 dengan 317 dan Internet Explorer 9 dengan 138 point.
HTML5 merupakan metode atau cara yang banyak digunakan dan membantu para blogger saat ini. Blog dengan menggunakan HTML5 bukanlah hal yang sulit. Oke sobat langsung saja, Berikut ini adalah beberapa alasan atau fakta kenapa kita menggunakan HTML 5 yang harus anda ketahui:

1. AKSESBILITAS
HTML5 membuat blog mudah diakses, situs akan lebih mudah diakses, sebab ada dua alasan utama, yakni: semantik dan ARIA. Dengan tag semantik pembaca bisa memeriksa dokumen HTML dan menciptakan pengalaman lebih baik. ARIA adalah spesifikasi W3C yang digunakan dalam menetapkan spesifik elemen untuk dokumen HTML – dasarnya menciptakan landmark penting pada halaman: header, footer, navigasi atau artikel

2. SUPPORT AUDIO VIDEO

Dengan HTML5 anda bisa membuat video dan audio yang bagus dengan HTML5 <video> dan <audio> tags. Video dan audio tag HTML5 pada dasarnya memperlakukan mereka sebagai gambar <video src=”url”/>. Sebenarnya ini sangat sederhana, akan tetapi yang jadi masalahnya adalah karena tidak setiap browser mendukung HTML 5. Jadi Lupakan Flash Player dan media music lainnya

3. DOCTYPE

4. CODE CLEANER
Apa anda ingin sebuah kode yang sederhana, elegan, mudah untuk dibaca maka HTML5 adalah solusi yang terbaik untuk anda. Dengan HTML5 anda dapat menulis deskriptif kode, kode semantic, yang memungkinkan anda untuk memisahkan makna dari gaya dan konten.

5. PENYIMPANAN

Salah satu kelebihan tentang HTML5 adalah fitur penyimpanan. Penyimpanan ini meliputi cookie dan database. HTML5 memiliki keamanan dan kinerja lebih baik dan data akan tetap ada dan aman, bahkan setelah browser ditutup. Sebab pada dasarnya berbasis data, jadi anda tidak perlu khawatir lupa menghapus cookie. Penyimpanan input sangat baik untuk banyak hal, tapi itu juga merupakan salah satu alat HTML5 yang membuat aplikasi web tanpa plugin pihak ketiga. Mampu menyimpan data dalam browser pengguna memungkinkan anda dengan mudah membuat fitur-fitur aplikasi

6. INTERAKSI TERBAIK
Anda semua pasti ingin interaksi yang lebih baik, Anda pasti ingin website lebih dinamis dan memungkinkan pengguna untuk menikmati / berinteraksi dengan konten yang anda buat bukan hanya sekedar melihatnya.

7. GAME DEVELOPMENT
Anda dapat mengembangkan game dengan menggunakan HTML5 <canvas> tag. HTML5 menyediakan ponsel untuk mengembangkan permainan interaktif. Jika anda telah membangun Flash game sebelumnya, anda akan membuat HTML5 game.

8. SUPPORT BROWSER
Browser populer yang mendukung HTML5 diantaranya adalah Chrome, Firefox, Safari dan Opera IE9. HTML5 dibangun untuk membuat segalanya lebih mudah pada browser sehingga memungkinkan mereka untuk menggunakan unsur-unsur baru.

9. TEKNOLOGI MOBILE
Teknologi mobile menjadi lebih populer dan perangkat mobile terus berkembang sangat pesat dan ini berarti bahwa semakin banyak pengguna akan menggunakan mobile browser mereka untuk melihat situs web anda. HTML5 adalah alat mobile yang paling siap untuk mengembangkan situs mobile dan aplikasi. Dengan Adobe Flash mobile, sekarang anda bisa mengandalkan HTML5 untuk melakukan pengembangan aplikasi web mobile anda. Browser pada ponsel telah sepenuhnya mengadopsi HTML5 sehingga menciptakan berbagai aplikasi mobile yang menampilkan layar sentuh yang lebih kecil, dan desain Responsif.

10. TEKNOLOGI MASA DEPAN
HTML5 adalah teknologi masa depan. HTML5 tidak akan berhasil dan banyak perusahaan akan mulai berkembang di HTML5. Satu-satunya alasan sebenarnya saya lebih suka menggunakan HTML5 adalah hanya untuk menulis kode bersi dan fitur menyenangkan. anda hanya mulai menggunakannya dan tidak mengubah cara anda merancang. Ini sangat sederhana dan anda harus mulai mencobanya.

Fitur baru dalam HTML5:

Unsur kanvas untuk menggambar.
Video dan elemen audio untuk media pemutaran.
Dukungan yang lebih baik untuk penyimpanan secara offline.
Elemen konten yang lebih spesifik, seperti artikel, footer, header,
navigation, section.
Bentuk kontrol form seperti kalender, tanggal, waktu, e-mail, URL, search.
Beberapa kelebihan yang dijanjikan pada HTML5:
Dapat ditulis dalam sintaks HTML (dengan tipe media text/HTML) danXML.
Integrasi yang lebih baik dengan aplikasi situs dan pemrosesannya.
Integrasi ('inline') dengan doctype yang lebih sederhana.
Penulisan kode yang lebih efisien.
Konten yang ada di situs lebih mudah terindeks oleh search engine. Saat ini HTML5 masih dalam pengembangan, namun hanya beberapa browser sudah mendukung HTML5. Beberapa browser tersebut seperti Safari, Chrome, Firefox, dan Opera. Kabarnya IE9 (Internet Explorer) akan mendukung beberapa fitur dari HTML5.

kelebihan dan kekurangan HTML 5.

Untuk hal – hal lain mengenai HTML 5 dapat mengunjungi blog – blog teman saya.

Kelebihan yang dimiliki HTML 5

Fitur kanvas untuk menggambar menggunakan script code
Fitur video dan audio untuk media pemutar file multimedia
Integrasi yang lebih baik dengan aplikasi situs dan pemrosesannya
Integrasi (‘inline’) dengan doctype yang lebih sederhana
Penulisan kode yang lebih efisien
Penanagan kesalahan yang lebih baik
Mengurangi kebutuhan untuk plugin eksternal
Lebih markup untuk menggantikan scripting

Tag Baru seperti header, footer, nav, section, asidedll memungkinkan browser untuk mengakses konten dengan mudah. Sebelumnya, kita hanya menentukan hal tersebut dengan tag dan menggunakan atribut id ataupun class.

Kekurangan yang dimiliki HTML 5

Saat ini HTML5 masih dalam pengembangan, sehingga hanya beberapa browser yang sudah mendukung HTML5, seperti fitur-fitur pada HTML 5 tidak semuanya bisa berfungsi dengan baik pada beberapa browser. Beberapa browser yang sudah mendukung HTML 5 seperti Safari, Chrome, Firefox, dan Opera. Namun kabarnya IE9 (Internet Explorer) akan mendukung beberapa fitur dari HTML5.

Cara Mempercepat Loading Halaman Blog Dengan PageSpeed Insights Google

Cara Mempercepat Loading Halaman Blog Dengan Page Speed Insights Google

Setelah belajar cari tahu caranya agar loading page blog bisa nancap akhirnya terbalaskan juga. sudah otak atik sana sini cari tahu caranya agar loading page bisa membalap dan tidak ada java script yang memblokir render blog.

Cara mengecek kecepatan loading blog dengan google page speed insight

Masuk ke alamat ini https://developers.google.com/speed/pagespeed/insights
Ketikkan alamat / url blog ataupun web site yang ingin dicek kecepatan loadingnya.
Klik analisis. Tunggu sebentar sampai hasilnya muncul dilayar.
saksikan dan lihatlah kecepatan loading page speed halaman blog anda?Bagaimana?apakah butuh diperbaiki atau tidak?apakah loading page speed blog anda cepat?bagaimana page speed blog anda di seluler dan desktop?

Jika anda butuh bantuan mungkin sebaiknya anda lanjutkan membaca artikel ini, atau

jika anda tidak tahu dan bingung silahkan komentar dibawah blog,

mudah-mudahan kita bisa bantu. Beberapa kesalahan yang sering terjadi dan harus diperbaiki saat mengecek kecepatan loading page blog.

Masalah yang sering terjadi adalah Java script yang memblokir perenderan di kontent paruh atas, hal ini menyebabkan perenderan/ loading page halaman blog semakin lama.
Biasanya hasil dari analisis pagespeed insight seperti berikut :

Untuk melihat Menghilangkan JavaScript dan CSS yang memblokir perenderan di konten paruh atas

Laman Anda memiliki 2 sumber daya CSS yang memblokir. Ini menyebabkan penundaan dalam perenderan laman Anda.

Tidak ada konten paruh atas di laman Anda yang dapat dirender tanpa menunggu pemuatan sumber daya berikut. Coba tunda atau muat sumber daya yang memblokir secara asinkron, atau jadikan sebaris bagian penting dari sumber daya tersebut secara langsung dalam HTML.

Optimalkan Pengiriman CSS yang berikut:
https://www.blogger.com/…189244943-widget_css_mobile_2_bundle.css
https://www.blogger.com/…&zx=c11a8a65-1a52-405f-b760-4b898e59a46d

Menghilangkan JavaScript dan CSS yang memblokir perenderan di konten paruh atas

Untuk css pada seluler yang sering membuar error dan loading page lama adalah java script yang memblokir perenderan pada paruh atas, java script ini biasanya sama saja pada semua blog.

contoh javascript yang memblokir perenderan pada seluler/ mobile.

https://www.blogger.com/static/v1/widgets/189244943-widget_css_mobile_2_bundle.css

Cara mengatasi dan menyembunyikan Widget CSS Mobile 2 bundle Yang Memblokir Perenderan.

Cara mengoptimalkan Pengiriman CSS bundle mobile 2

Untuk mengoptimalkan pengiriman css bundle mobile dapat dilakukan dengan cara menyembunyikannya dari google, atau dengan cara mensejajarkannya dengan css yang lain.

Log in ke akun blogger anda.
Pilih Blog yang akan diperbaiki, pilih template.
Cadangkan/pulihkan dahulu template blog anda, untuk menjaga terjadinya error pada blog.
Lihat kata, Langsung di blog dan Seluler, pada bagian seluler klik pengaturan yang ada pada bagian bawah seluler, pilih khusus. Lalu simpan.

Klik edit HTML Pada bagian bawah dekat dengan sesuaikan. akan muncul html template blog.
cari kode berikut : <head>, ganti dengan kode <head> Kemudian cari kode tag penutup </head> ganti kode dengan </head>
Simpan dan silahkan cek kembali kecepatan loading page halaman blog anda.

Jika tidak terjadi perubahan kecepatan loading silahkan komentar apa masalahnya.

Cara mengoptimalkan Pengiriman widget css bundle.css

Setelah selesai pada seluler selanjutnya kita beralih untuk mempercepat loading page halaman blog pada mode desktop.

Menghilangkan JavaScript dan CSS yang memblokir perenderan di konten paruh atas

Optimalkan Pengiriman CSS yang berikut:

https://www.blogger.com/…&zx=4cafba9a-1c1f-4fd1-94b0-44e1f1b39705

https://www.blogger.com/…widgets/1943648796-widget_css_bundle.css

Cara menyembunyikan Widget CSS Bundle Yang memblokir perenderan

caranya adalah dengan mengoptimalkan pengiriman css bundle widget, berikut ini langkah langkahnya untuk mengoptimalkan pengiriman css

Buka Blogger.com > Edit HTML > Backup template terlebih dulu untuk keamanan jika terjadi kesalahan.

Ctrl + F kemudian cari kode <b:skin><![CDATA[

Blok kode CSS dari <b:skin><![CDATA[ sampai sebelum ]]></b:skin> kemudian pindahkan (Ctrl + X) ke notepad untuk sementara.

Sekarang hanya ada kode <b:skin><![CDATA[ dan ]]></b:skin>

Ganti kedua kode tersebut dengan kode

<!<b:skin><![CDATA[]]></b:skin>

Kemudian tambahkan dibawahnya :

Dan dibawah kode <style type="text/css"> letakkan kode CSS yang tadi ditaruh di Notepad.

Save Template.

Cek kembali loading halaman blog anda di Pagespeed insight dan mudah mudahan anda bisa mendapatkan loading yang cepat. Seperti loading blog halaman blog saya dibawah ini.