optimasi website - ubig.co.id
TRANSCRIPT
Optimasi Website
Arry Harmawan
World Class Big Data Provider
ubigcoid
ubig.co.id
Fatkul Amri
#1 - Front-end Developer
TUJUAN
UI & UX Lebih Optimal
Lebih Ringan & Cepat
SEO Friendly
TOOL TEST OPTIMASI
Google Page Speed
gtmetrix.com
webpagetest.org
monitis.com/pageload
OPTIMASI WEBSITE
Image
•Compress Image, Size Optimization, Image Sprites, Lazy Load
CSS
•Minify, Inline CSS
JS
•Minify, Async
SEO On-Page
•URL, Meta Tag, Sitemap
•Schema.org (optional)
Responsive
•Mobile Web: Responsive vs. Native Performance
IMAGE – COMPRESS IMAGE SIZE
Tujuan & Tool
•Mengurangi ukuran gambar yang digunakan dalam website
•Mempercepat load website dalam request gambar yang digunakan dalam situs
•Menambah nilai UX (User Experience)
•http://tinypng.com
•http://tinyjpg.com
•http://compressjpeg.com
IMAGE – COMPRESS IMAGE SIZE
.png Image .jpeg Image
57 KB
15 KB
641 KB
162 KB
IMAGE – SIZE OPTIMIZATION
Tujuan
•Menyesuaikan ukuran gambar aslidengan ukuran gambar yang digunakan
•Mengurangi ukuran yang tidakdibutuhkan
•Buat gambar proporsional
IMAGE – SIZE OPTIMIZATION
768x300
968x500
IMAGE – SIZE OPTIMIZATION
768x300768x300
IMAGE – SPRITE IMAGE
Tujuan
•Mengurangi request ke server
•Hemat bandwidth
IMAGE – SPRITE IMAGE
icon-fb.png
icon-twitter.png
icon-gplus.png icon-socmed.png
IMAGE – SPRITE IMAGE
Contoh :
#icon-facebook{
width: 42px;height: 42px;background: url(icon-socmed.png) 0 42;
}
#icon-twitter{
width: 42px;height: 42px;background: url(icon-socmed.png) 336 42;
}
top
left
left
top
IMAGE – LAZY LOAD
Tujuan
•Mengurangi request ke server
•Gambar hanya akan di load saattampilan yang berisi gambar diakses
IMAGE – LAZY LOAD Tampilan Browser
Tampilan Browser
IMAGE – LAZY LOAD
http://www.appelsiini.net/projects/lazyload
Load JQuery dan Lazy Load js.
<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>
Ubah attribut image src menjadi data-original dan tambah function javascript untuk
mengaktifkan lazy load
<img class="lazy" data-original="img/example.jpg" width="640"height="480">
$(function() {
$("img.lazy").lazyload();
});
CSS – MINIFY
Tujuan
•Mengurangi ukuran css yang digunakan
•https://cssminifier.com
•http://www.cleancss.com/css-minify
CSS – MINIFY
body {background-color: #d0e4fe;
}h1 {
color: orange;text-align: center;
}p {
font-family: "Times New Roman";font-size: 20px;
}
body{background-color:#d0e4fe;}h1{color:orange;text-align:center;}p{font-family:"Times New Roman";font-size:20px;}
Regular CSS
Minified CSS
CSS – MINIFY
Regular CSS
Minified CSS
CSS – INLINE CSS
Tujuan
•Mempercepat load halaman karena tidak perluload file .css dahulu sebelum menampilkanhalaman
•Memilah dan memisahkan class/id css yang hanya digunakan pada halaman yang dioptimasi
CSS – INLINE CSS
Yang Dibutuhkan
•Firefox
•Add On Firebug
•Add On CSS Usage
•Text Editor yang bisa replace text denganRegular Expresion (Notepad ++)
CSS – INLINE CSS
1. BACKUP FILE CSS SEBELUM MELAKUKAN OPTIMASI !
2. PASTIKAN CSS SUDAH BENAR BENAR FIX TIDAK ADA PERUBAHAN LAGI !
3. Buka halaman yang akan dioptimasi dengan Firefox.
4. Inspect halaman menggunakan Firebug kemudan buka tab CSS Usage.
5. Click Scan.
CSS – INLINE CSS
6. Akan muncul hasil scan berupa list file css yang digunakan. Sebagai contoh kita
akan memilah file style.css yang digunakan di halaman index.
7. Klik export cleaned css.
CSS – INLINE CSS
8. Akan muncul hasil CSS yang telah ditandai oleh CSS Usage. Jika bentuk css
belum dalam bentuk minified, minify terlebih dahulu.
CSS – INLINE CSS
9. Setelah CSS yang telah ditandai di minify, buka program editor. Replace
menggunakan Regex :
UNUSED([^,}]+)\}|,\s?UNUSED([^{]+)|UNUSED([^{]+),\s?|UNUSED([^{]+)
10. Setelah semua yang ditandai dengan UNUSED sudah hilang. Simpan dengan
nama index-style.css
11. Buka halaman index. Masukkan isi dari index-style.css dalam bagian tag
<header> .
12. Berikan komentar pada tag <link> pada halaman index yang mengarah ke file
style.css.
CSS – INLINE CSS
CSS – INLINE CSS
13. Kita tetap harus menyertakan file css yang asli / full. Berdasarkan mbah Google kitabisa melakukannya menggunakan javascript. (https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery)
14. Tambahkan script berikut pada bagian javascript halaman index.
<script>
var cb = function() {
var l = document.createElement('link'); l.rel = 'stylesheet';
l.href = 'css/style.css';
var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener('load', cb);
</script>
Direktori CSS
CSS – INLINE CSS
15. Lakukan semua langkah diatas untuk semua halaman yang akan dioptimasi.
16. SETIAP HALAMAN MEMILIKI INLINE CSS YANG BERBEDA UNTUK TIAP TIAP FILE
CSS YANG DIGUNAKAN.
JS – MINIFY
Tujuan
•Mengurangi ukuran js yang digunakan
•http://jscompress.com
•http://www.danstools.com/javascript-minify
•https://javascript-minifier.com
JS – MINIFY
var x = myFunction(4, 3);
function myFunction(a, b) {
return a * b;
}
var x=myFunction(4,3);function myFunction(a,b){return a*b;}
Regular JS
Minified JS
JS – MINIFY
Regular JS
Minified JS
JS – ASYNC
Tujuan
•Mengurangi waktu load halamandengan memilih file .js untuk dimuatsecara asynchronous
JS – ASYNC
Apa itu Asynchronous ?
•Ketika program dijalankan secara synchronous, kitamenunggu program sampai selesai melakukansebuah proses sebelum pindah ke proses lain
•Ketika program berjalan secara asynchronous, program dapat beralih ke proses lain sebelum proses yang sedang dilakukan selesai
JS – ASYNC
1. Tambahkan attribut async pada tag <script> js yang akan di async.
<script async src="js/bootstrap.min.js"></script>
2. Cek kembali halaman yang telah di tambahkan attribut async pada tag
<script> js nya. Jika muncul error maka js tersebut tidak bisa di async.
SEO ON-PAGE
Apa itu SEO On-Page ?
•Optimasi SEO yang dilakukandari dalam situs web yang kitamiliki
SEO ON-PAGE
Apa saja ?
•URL
•Meta Tag
•Sitemap
•Schema ORG (Optional)
SEO ON-PAGE - URL
•Gunakan salah satu versi domain untuklink situs. www (www.domain.com) ataunon-www (domain.com).
•Mesin pencari khususnya google menilaiberbeda antara www dan non-www.
•Gunakan redirect 301 untuk mengalihkansalah satu versi domain ke versi domain yang digunakan. (Wikipedia)
Domain www atau non-www
SEO ON-PAGE - URL
SEO Friendly
•domain.com/jual/samsung-galaxy-s6-jakarta-123456
•domain.com/cari/samsung
Non SEO Friendly
•domain.com/detail.html?id=123456
•domain.com/cari.html?keyword=samsung
SEO ON-PAGE - URL
• Gunakan Tanda Hubung (-) bukan Garis Bawah (_) untukmenyambung kata dalam kalimat pada URL. Frase di mana kata-kata yang terhubung menggunakan garis bawah diperlakukan oleh Google sebagai salah satu kata tunggal.
• samsung_galaxy_tab dibaca samsunggalaxytab olehGoogle.
• domain.com/jual/samsung-galaxy-s6-jakarta-123456 bukandomain.com/jual/samsung_galaxy_s6_jakarta_123456
Gunakan Tanda Hubung (-)
SEO ON-PAGE - META TAG
Apa itu Meta Tag ?
•Tag <meta> yang ada dalam website yang menyediakan beberapa informasi yang digunakan olehSearch Engine (Google dsb) untuk ditampilkan dalamhasil pencarian mereka.
SEO ON-PAGE - META TAG
Apa Saja ?
•Title
•Description
•Keyword
•Open Graph / og (http://ogp.me/)
SEO ON-PAGE - META TAG
http://hargaindonesia.com/
<title>Harga Indonesia - Temukan harga barang impianmu</title>
<meta name="keywords" content="harga, bekas, baru, harga bekas, harga baru, harga indonesia, harga indo, murah, termurah, jual, beli, cari, mesin pencari, daftar harga, katalog harga, info harga, ecommerce, marketplace, classified ads">
<meta name="description" content="Temukan harga barang impianmu, dari barang baru sampai harga bekas semua ada. Harga Indonesia.">
<meta property="og:type" content="website">
<meta property="og:image" content="/big-content/themes/ubigprice/images/default.jpg">
Contoh Meta Tag
SEO ON-PAGE - META TAG
Contoh Meta Tag
SEO ON-PAGE - SITEMAP
Apa itu Sitemap ?
•Kata Mbah Google : Sitemap adalah file (biasanya .xml) yang berisi daftar halaman web dari website kita untuk memberitahu Google dan mesin pencari lainnya tentang organisasi konten dalam website kita. Web crawler milik mesin pencari seperti Googlebot membaca file ini untuk lebih cerdas dalam menjelajah situs kita.
SEO ON-PAGE - SITEMAP
<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url><loc>http://www.domain.com /</loc><lastmod>2008-01-01</lastmod><changefreq>weekly</changefreq><priority>0.8</priority>
</url><url>
<loc>http://www.domain.com/catalog?item=vacation_hawaii</loc><changefreq>weekly</changefreq>
</url><url>
<loc>http://www.domain.com/catalog?item=vacation_new_zealand</loc><lastmod>2008-12-23</lastmod><changefreq>weekly</changefreq>
</url><url>
<loc>http://www.domain.com/catalog?item=vacation_newfoundland</loc><lastmod>2008-12-23T18:00:15+00:00</lastmod><priority>0.3</priority>
</url><url>
<loc>http://www.domain.com/catalog?item=vacation_usa</loc><lastmod>2008-11-23</lastmod>
</url></urlset>
SEO ON-PAGE - SCHEMA ORG
Apa itu Schema ?
•Schema adalah jenis microdata yang membuat mesinpencari lebih mudah untuk mengurai dan mengartikaninformasi pada halaman website lebih efektif sehinggamereka dapat memberikan hasil yang relevan kepadapengguna berdasarkan pencarian yang diminta.
•https://schema.org/docs/schemas.html
SEO ON-PAGE - SCHEMA ORG
http://hargaindonesia.com/jual/nec-proyektor-np-v300w-putih-14554687565110699345.html
<div itemtype="http://schema.org/Product" itemscope="">
<meta content="NEC Proyektor NP-V300W- Putih (Lazada)" itemprop="name">
<meta content="Elektronik / TV, Video dan Audio / Proyektor" itemprop="category">
<meta content="Detail produk dari NEC Proyektor NP-V300W- Putih NEC Proyektor NP-V300W merupakan sebuahPotable projector yang cocok untuk digunakan di ruangan-ruangan sedang seperti kelas atau ruanganmeeting. Dengan kualitas peforma dan fitur-fitur yang dimilikinya NEC Proyektor NPV300W dilengkapidengan pilihan eco mode, sehingga Anda dapat menghemat umur lampu sampai dengan 6.000 jam sehigga Andadapat menghemat biaya operasional dan pemeliharaan." itemprop="description">
<div itemtype="http://schema.org/Offer" itemscope="" itemprop="offers">
<meta content="IDR" itemprop="priceCurrency">
<meta content="10047000" itemprop="price">
<meta content="http://schema.org/NewCondition" itemtype="http://schema.org/OfferItemCondition" itemprop="itemCondition">
<meta content="" itemprop="areaServed">
<div itemtype="http://schema.org/Person" itemscope="" itemprop="seller">
<meta content="Dealharga - Lazada" itemprop="name">
<meta content="" itemprop="">
</div>
</div>
</div>
RESPONSIVE WEB
http://design.google.com/resizer
RESPONSIVE WEB
Responsive
• Membuat satu website yang bisa menyesuaikan dengan target (desktop/mobile)
• Bisa menggunakan http://getbootstrap.com/
• <meta name="viewport" content="width=device-width, initial-scale=1.0">
Native
• Membuat web terpisah sesuai dengan target (desktop/mobile)
• domain.com
• mobile.domain.com
RESPONSIVE WEB – META VIEWPORT
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Tanpa Meta Viewport Dengan Meta Viewport
<terimakasih />