Well, Mari kita lanjutkan pembahasan mengenai cara membuat Template blog dari awal. di postingan kali ini kita akan mambahas bagaimana membuat template blog menjadi ringan dan cepat loadingnya.
(Baca Juga: Membuat Template Blog SEO Friendly)
Sebelumnya kita akan cek terlebih dahulu kecepatan loading blog kita melalui Google PageSpeed Insights. Dan langsung masukkan alamat blog sobat kemudian tekan tombol Analyze.
Coba sobat perhatikan perbedaan hasil yang diperlihatkan ketika blog dibuka pada perangkat mobile, dan pada perangkat desktop. Pasti bedannya sangat signifikan. Pada tampilan mobile didapat nilai 74, sementara pada tampilan desktop diperoleh nilai 91.
Kemudian pilih Tidak - tampilkan tema desktop di perangkat seluler. Tekan Save untuk menonaktifkan template mobile.
Nah, sekarang coba sobat cek kemblai kecepatan blognya, Dan ternyata masih tetap sama, tidak ada perubahan... emmm.
(Baca Juga: Cara Membuat Template Blog Valid HTML5)
menjadi tag penutup body yang telah dimodifikasi seperti di bawah ini.
Kemudian jika sobat mengecek kembali kecepatan loading blog sobat, Permasalahan Leverage Browser Caching tidak akan ditemukan lagi, tetapi skornya akan tetap dan tidak bertambah.
Nah, sekarang source code template blog sobat telah menjadi seperti berikut :
(Baca Juga: Membuat Template Blog SEO Friendly)
Sebelumnya kita akan cek terlebih dahulu kecepatan loading blog kita melalui Google PageSpeed Insights. Dan langsung masukkan alamat blog sobat kemudian tekan tombol Analyze.
Coba sobat perhatikan perbedaan hasil yang diperlihatkan ketika blog dibuka pada perangkat mobile, dan pada perangkat desktop. Pasti bedannya sangat signifikan. Pada tampilan mobile didapat nilai 74, sementara pada tampilan desktop diperoleh nilai 91.
Kenapa begitu?
Nah, secara default blogger memang membedakan template mobile dan desktop. Jadi, modifikasi template yang telah ita lakukan sampai disini hanya berlaku pada perangkat desktop. Sehingga, ketika blog dibuka pada perangkat mobile, Template-nya akan berubah menjadi template bawaan blogger.Solusinya gimana?
Solusinya adalah dengan cara menonaktifkan template mobile, yang bisa sobat lakukan dengan masuk ke Theme, kemudian pilih roda gerigi yang terletak dibawah template mobile.
Kemudian pilih Tidak - tampilkan tema desktop di perangkat seluler. Tekan Save untuk menonaktifkan template mobile.
Kenapa begitu?
Sekarang perhatikan template blog sobat baik-baik.
Belum ada postingan, tidak ada widget, font juga masih standar, tidak
ada hal-hal yang bisa dikatakan memberatkan loading. Tetapi kenapa
skornya mentok di nilai 91 ya?? Padahal source code template blog kita
juga masih sederhana tuh...
Hal ini sebenarnya diakibatkan karena tanpa sepengetahuan kita, secara
default blogger memuat Javascript dan CSS yang dihosting (tidak tertanam
langsung di template). sehingga memberatkan loading blog kita.
(Baca Juga: Cara Membuat Template Blog Valid HTML5)
Lalu gimana dong solusinya ?
Selain menunjukan skor kecepatan ternyata blog kita dalam rentang nilai
maksimal 100, Google PageSpeed Insights juga menawarkan solusi yang
dapat dilakukan oleh pengelola blog untuk mempercepat kecepatan loading
blog tersebut.
Nah, perhatikan pada bagian Possible Optimizations. terlihat ada 2
masalah utama yang menyebabkan template blog kita lambat dimuat. Yang
pertama karena CSS bundle, dan yang kedua karena Leverage Browser
Caching.
Menghapus JavaScript Google Plus One
Mari kita mulai dari Laverage Browser Caching terlebih dahulu. yang
berisi javascript Google Plus One yang dimuat oleh blog kita, padahal
kita tidak menggunakannya.
Bagaimana cara menghapusnya sedangkan javascript tersebut tidak berisi di dalam source code blog kita?
Solusinya adalah dengan mengubah tag penutup body di bawah ini.
</body>
<!--</body>-->
Kemudian jika sobat mengecek kembali kecepatan loading blog sobat, Permasalahan Leverage Browser Caching tidak akan ditemukan lagi, tetapi skornya akan tetap dan tidak bertambah.
Kok gitu ya?
Hal ini disebabkan karena kita belum mengatasi masalah utama yang menyebabkan lemotnya blog kita, yaitu 2 CSS bundle yang dihosting, dan itu bukan ditanam secara langsung di template, sehingga membutuhkan waktu lebih untuk melakukan kontak server terlebih dahulu.Menghilangkan CSS Bundle
Sekarang kita dapat meningkatkan kecepatan loading blog kita dengan
menghilangkan CSS bundle, yang dapat dilakukan dengan mengubah tag head
berikut.
<head>
menjadi seperti berikut ini.
<head>
Modifikasi juga perlu dilakukan pada tag penutup head.
</head>
Menjadi seperti ini.
<!--<head/>-->Nah, sekarang source code template blog sobat telah menjadi seperti berikut :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + " - " + data:blog.title' name='description'/>
</b:if>
</b:if>
<!-- SEO Title Tag -->
<b:if cond='data:blog.url == data:blog.homepageUrl'><title><data:blog.title/></title></b:if>
<b:if cond='data:blog.pageType == "item"'><title><data:blog.pageName/> - <data:blog.title/></title></b:if>
<b:if cond='data:blog.pageType == "archive"'><title>Archive for <data:blog.pageName/></title></b:if>
<b:if cond='data:blog.pageType == "static_page"'><title><data:blog.pageName/></title></b:if>
<b:if cond='data:blog.pageType == "index"'><b:if cond='data:blog.searchLabel'><title><data:blog.title/> - <data:blog.pageName/></title></b:if></b:if>
<b:if cond='data:blog.pageType == "error_page"'><title>Page Not Found</title></b:if>
<b:if cond='data:blog.pageType == "index"'><b:if cond='data:blog.url != data:blog.homepageUrl'><title><data:blog.pageTitle/> - All Post</title></b:if></b:if>
<b:skin><![CDATA[
body {background-color: #fafafa;}
]]></b:skin>
<!--<head/>-->
<body>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'></b:widget>
</b:section>
<!--</body>-->
</html>
Kemudian simpan dan lihat tampilan blog sobat. Maka akan terlihat ada sedikit perubahan :
Nah terlihat pada gambar, ada 2 tulisan No Posts di blog kita. Hal ini
terjadi karena CSS bundle sebenarnya juga memiliki peran sebagai
pengatur tampilan blog kita. Oleh karena itu, menghilangkan CSS bundle
sedikit banyaknya akan mempengaruhi tampilan blog kita.
Solusinya gimana dong?
Solusinya adalah dengan menanamkan style CSS yang kita dapat dari file
CSS bundle langsung ke dalam template kita. Sehingga source code
template blog kita akan menjadi seperti berikut ini:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + " - " + data:blog.title' name='description'/>
</b:if>
</b:if>
<!-- SEO Title Tag -->
<b:if cond='data:blog.url == data:blog.homepageUrl'><title><data:blog.title/></title></b:if>
<b:if cond='data:blog.pageType == "item"'><title><data:blog.pageName/> - <data:blog.title/></title></b:if>
<b:if cond='data:blog.pageType == "archive"'><title>Archive for <data:blog.pageName/></title></b:if>
<b:if cond='data:blog.pageType == "static_page"'><title><data:blog.pageName/></title></b:if>
<b:if cond='data:blog.pageType == "index"'><b:if cond='data:blog.searchLabel'><title><data:blog.title/> - <data:blog.pageName/></title></b:if></b:if>
<b:if cond='data:blog.pageType == "error_page"'><title>Page Not Found</title></b:if>
<b:if cond='data:blog.pageType == "index"'><b:if cond='data:blog.url != data:blog.homepageUrl'><title><data:blog.pageTitle/> - All Post</title></b:if></b:if>
<b:skin><![CDATA[
body {background-color: #fafafa;}
#blog-pager-newer-link {float: left;}
#blog-pager-older-link {float: right;}
#blog-pager {text-align: center;margin: 20px 0px 0px 1px;}
.status-msg-wrap{font-size:110%;width:90%;margin:10px auto;position:relative}
.status-msg-border{border:1px solid #000;filter:alpha(opacity=40);-moz-opacity:.4;opacity:.4;width:100%;position:relative}
.status-msg-bg{background-color:#ccc;opacity:.8;filter:alpha(opacity=30);-moz-opacity:.8;width:100%;position:relative;z-index:1}
.status-msg-body{text-align:center;padding:.3em 0;width:100%;position:absolute;z-index:4}
.status-msg-hidden{visibility:hidden;padding:.3em 0}
.status-msg-wrap a{padding-left:.4em;text-decoration:underline}
]]></b:skin>
<!--<head/>-->
<body>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'></b:widget>
</b:section>
</body>
</html>
Lalu simpan template blog sobat dan lihat tampilannya sekarang. Sudah kembali normal kan :D
Kemudian Cek kembali kecepatan loading blog sobat sekarng. Seharusnya sobat mendapatkan skor hampir sempurna baik pada tampilan mobile maupun desktop, 99!
Pada tahap ini apakah sobat sudah paham dengan langkah-langkah di atas?
Silahkan tinggalkan jejak pertanyaan sobat pada kolom komentar. Selanjutnya, pada pembahasan berikutnya kita akam mengupas tentang Cara membuat Struktur Dasar Template Blog Blogger.
Kemudian Cek kembali kecepatan loading blog sobat sekarng. Seharusnya sobat mendapatkan skor hampir sempurna baik pada tampilan mobile maupun desktop, 99!
Pada tahap ini apakah sobat sudah paham dengan langkah-langkah di atas?
Silahkan tinggalkan jejak pertanyaan sobat pada kolom komentar. Selanjutnya, pada pembahasan berikutnya kita akam mengupas tentang Cara membuat Struktur Dasar Template Blog Blogger.