Cara Mempercepat Loading Blog : bagian 1

	Dengan SEGALA HORMAT ,Kami mohon dukungan dan Partisipasinya dalam membebaskan Indonesia dari reputasi BURUK oleh Search Engine Google,Yahoo & Bing sebagai Negara Penghasil SPAM dan SPAMMER terbanyak ke-3 (tiga) didunia, Kami minta waktu anda sejenak untuk bergabung pada komunitas SEO Indonesia tanpa SPAM dan SPAMMER,terima kasih atas partisipasinya.

Cara mempercepat loading blog yang paling umum digunakan adalah memakai Google Insights atau tool lainnya,namun intinya sama.terkadang yang menjadi permasalahan adalah bagaimana mempraktekkan setiap result yang menjadi sugesti dari result tersebut.terkadang anda disuruh memakai asyncronouze versions,tapi bagaimana caranya,jangankan menggunakannya,arti asincronouze versions saja sudah bikin modar kerja otak.

untuk mempercepat loading blog tentu tidak hanya pada tampilan browser komputer,nmun juga terhadap tampilan browser smartphone/hape.agar keduanya tetap sejalan anda tentu harus melakukn beberapa perubahan pda susunan HTML dan CSS anda,baik pada template HTML maupun HTML/CSS Widget blog anda

insya allah agar lebih memudahkan anda untuk mengatasi "confuse" cara mempercepat loading blog akan saya usahakan menyajikannya dengan lengkap

biasanya faktor yang paling umum memberatkan loading blog atau situs adalah

• JavaScript dan CSS yang menghalangi (Blocking) singkron server untuk me-render
• Banyaknya arsip Cache yang terkumpul tanpa dibuang
• Ukuran/resolusi Image/gambar yang besar
• Lambatnya respon server terhadap blog anda
• Muatan javascript dan CSS yang membludak
• Punya Landing Page Redirect

selebihnya silahkan anda muat dalam kolom komentar untuk apa yang tidak saya sebutkan diatas.

1. JavaScript dan CSS yang menghalangi (Blocking) singkron server untuk me-render

Gunakan versi asynchronous terbaru menurut google

Biasanya terdapat pada kode untuk embed ".js" ,contohnya :

"https://apis.google.com/js/plusone.js"

anda bisa tinggal membuang "https:" secara manual,hingga hasilnya menjadi

"//apis.google.com/js/plusone.js"

biasanya kode tersebut selalu beriringan dengan kode <script-text>

<script src="https://apis.google.com/js/plusone.js"></script>

parse terlebih dahulu kode tersebut pada situs khusus parse script,maka akan menjadi seperti berikut:

&lt;script src=&quot;https://apis.google.com/js/plusone.js&quot;&gt;&lt;/script&gt;

buang "https:"-nya hingga hanya menjadi

&lt;script src=&quot;apis.google.com/js/plusone.js&quot;&gt;&lt;/script&gt;

jika tidak berfungsi atau tidak bis di save,maka gunakan metode kedua,letakkan diatas </head>

<!--
googleasyncronouseoptimize))ggagElement')
s.parent' http://www.seoptimasi.blogspot.com/ [0]}
start hereByTagName -->
<script>
(function(d, t) {
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.async = true;
g.src = 'https://apis.google.com/js/plusone.js';
s.parentNode.insertBefore(g, s);
})(document, 'script');
</script>

Kemudian Save

atau dengan cara memasukkan kode asyncronous (async="async"; / async="true";) pada script,contoh:

<script src="https://apis.google.com/js/plusone.js"></script>

menjadi :

<script src="//apis.google.com/js/plusone.js" async="async"></script>

<script src="https://apis.google.com/js/plusone.js" async="true"></script>

Tunda pengiriman kode CSS "js" pada server 

dalam hal ini akan menggunakan penjelasan yang sangat panjang dan rumit,

opsi pertama,anda harus memasukkan kode warna (.biru atau .blue) disetiap kode CSS yamg anda install di blog anda,jadi pranala luar saja sedikit yang dijadikan contoh seperti berikut ini

letakkan di atas </head>

<style>

.blue{color:blue;}

</style>

Kemudian letakkan lagi di atas </body>

<div class="blue">

      masukkan kode CSS(js) anda

    </div>

kemudian letakkan lagi dibawah </body>

<noscript><link rel="stylesheet" href="small.css"></noscript>

cara tersebut agak susah mengingat anda akan selalu menambahkan kode ".blue" disetiap CSS yang akan anda input.

opsi keedua,untuk lebih mudahnya anda cukup memberikan sebuah perintah akses CSS kepada server untuk identifikasi sinyal CSS anda dengan metode penempatan perintah HTML untuk memperkecil ukurannya dengan menampilkannya tanpa CSS.

tempatkan kode berikut dibawah susunan meta tag 

<link rel="stylesheet" href="small.css" type="text/css" async="async">
<link href="/css/common.css" rel="stylesheet" type="text/css" async="async">

Opsi Ketiga,anda juga bisa menggunakan "jQuery"

Latakkan diantara kode <body> dan </body>,cari tempat yang luang untuk penempatannya,untuk lebih maksimal tempatkan sebelum kode js lain

 // ringankan loading stylesheets // stylesheets(css'js'ajax'{0}min // ambil kode ini dengan nama elemen tag (seoptimasi's code) function loadStyleSheet(src){ if (document.createStyleSheet) document.createStyleSheet(src); else { var stylesheet = document.createElement('link'); stylesheet.href = src; stylesheet.rel = 'stylesheet'; stylesheet.type = 'text/css'; document.getElementsByTagName('head')[0].appendChild(stylesheet); } }

anda cuma boleh memakai salah satu dari ketiga opsi tersebut,jangan inpput semuanya,karena akan terjadi error


2. Banyaknya arsip Cache yang terkumpul tanpa dibuang

Chache adalah salah satu faktor utama yang memberatkan loading blog anda,maka dalam hal ini untuk mengatasinya adalah dengan melakukan intruksi perintah agar membuang cache setelah batas waktu yang ditentukan atau tidak ada cache sama sekali.

letakkan salah satu kode berikut ini dibawah jajaran meta tag blog anda

<meta http-equiv="Cache-control" content="public">
<meta http-equiv="Cache-control" content="private">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache-control" content="no-store">

sesuaikan dengan susunan meta tag anda kalau template anda tdak bisa di save,ubah menjadi seperti berikut

<meta content="public" http-equiv="Cache-control" >
<meta content="private" http-equiv="Cache-control"  >
<meta content="no-cache" http-equiv="Cache-control"  >
<meta content="no-store" http-equiv="Cache-control"  >

Public = Tidak ada cache untuk sharing ke media publik dan media sosial
Private = Tidak ada cache untuk penggunan blog secara pribadi
No-cache = tidak memperbolehkan ada cache
No-store = memperbolehkan cache namun tidak di arsipkan

xml  = menggunakan akhiran "/> atau '/>
html = menggunakan akhiran "> atau '>

atau dengan berbatas waktu,wktu menyimpan cache yang dinjurkan google adalah 1 minggu,

<meta http-equiv="Cache-control" content="max-age=604800,public">
<meta http-equiv="Cache-control" content="max-age=604800,private">
<meta http-equiv="Cache-control" content="max-age=604800">

604800 maksudnya satu minggu

3. Ukuran/resolusi Image/gambar yang besar

Metode Pertama,agar lebih mudah untuk merigankan loading blog karena prosesi gambar atau image yang resolusi atau ukurannya terlalu besar,anda bisa langsung menggunakan beberapa tools,diantaranya :

• smush.it
• riot
• PNGOut
• Online Image Optimizer
• Super Gif
• PNG Outlet
• PNG Crushrrr
• Super PNG

Metode Kedua,dengan memasukkan kode dibawah ini di atas ]]><b:skin>,pilih karakteristik blog anda dan sesuaikan dengan tujuannya.

1. Untuk algoritma render image dan canvas-nya,

canvas, img {
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}

2. Untuk implementsi ukuran canvas image ditiap tampilan browser

canvas {
    image-rendering: optimizeSpeed;             // Older versions of FF
    image-rendering: -moz-crisp-edges;          // FF 6.0+
    image-rendering: -webkit-optimize-contrast; // Webkit
                                                //  (Safari now, Chrome soon)
    image-rendering: optimize-contrast;         // Possible future browsers.
    -ms-interpolation-mode: nearest-neighbor;   // IE
}

3. Untuk kompres ukuran image Pengguna template HTML 5 walau ukurannya menjadi kcil namun tetap tajam,tidak blur

canvas {
    image-rendering: crisp-edges;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}

4. Untuk blog Wallpaper,Blog games dan blog yang flexibel ukuran tampilannya pada layar browser

.image {
image-rendering: optimizeSpeed;             /* Legal fallback */
image-rendering: -moz-crisp-edges;          /* Firefox */
image-rendering: -o-crisp-edges;            /* Opera */
image-rendering: -webkit-optimize-contrast; /* Chrome */
image-rendering: optimize-contrast;         /* CSS3 Proposed */
-ms-interpolation-mode: bicubic;            /* IE8+ */
}

5. Untuk Website yang gagal menerapkan ke-empat point diatas,maka masukkan kode "js" berikut diantara <head> dan </head> kkalau error maka letakkan diatas </body>

    /**
     * The noSmooth() function draws all geometry with jagged (aliased) edges.
     *
     * @see #smooth()
     */
    DrawingShared.prototype.noSmooth = function() {
      //curElement.style.setProperty("image-rendering", "optimizeSpeed", "important");

      if ( typeof(curElement.style.setProperty) != "undefined" )
        curElement.style.setProperty("image-rendering", "optimizeSpeed", "important");
      else
        curElement.setAttribute("style", "image-rendering: optimizeSpeed !important");
    };

selanjutnya tentang

• Lambatnya respon server terhadap blog anda
• Muatan javascript dan CSS yang membludak
• Punya Landing Page Redirect

akan dibahas pada : Cara Mempercepat Loading Blog : bagian 2

Jika Video Dapat Gangguan Klik Button >>