Materi workshop optimasi website oleh tim Ubig.co.id

1. Optimasi Website
Arry Harmawan
arryharm@gmail.com
World Class Big Data Provider
ubigcoid
ubig.co.id
Fatkul Amri
fatkulamri@gmail.com
#1 - Front-end Developer

2. TUJUAN
UI & UX Lebih Optimal
Lebih Ringan & Cepat
SEO Friendly

3. TOOL TEST OPTIMASI
Google Page Speed
gtmetrix.com
webpagetest.org
monitis.com/pageload

4. 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

5. 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

6. IMAGE – COMPRESS IMAGE SIZE
.png Image .jpeg Image
57 KB
15 KB
641 KB
162 KB

7. IMAGE – SIZE OPTIMIZATION
Tujuan
•Menyesuaikan ukuran gambar asli
dengan ukuran gambar yang digunakan
•Mengurangi ukuran yang tidak
dibutuhkan
•Buat gambar proporsional

8. IMAGE – SIZE OPTIMIZATION
768x300
968x500

9. IMAGE – SIZE OPTIMIZATION
768x300
768x300

10. IMAGE – SPRITE IMAGE
Tujuan
•Mengurangi request ke server
•Hemat bandwidth

11. IMAGE – SPRITE IMAGE
icon-fb.png
icon-twitter.png
icon-gplus.png icon-socmed.png

12. 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

13. IMAGE – LAZY LOAD
Tujuan
•Mengurangi request ke server
•Gambar hanya akan di load saat
tampilan yang berisi gambar diakses

14. IMAGE – LAZY LOAD Tampilan Browser

15. Tampilan Browser

16. 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();
});

17. CSS – MINIFY
Tujuan
•Mengurangi ukuran css yang digunakan
•https://cssminifier.com
•http://www.cleancss.com/css-minify

18. 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

19. CSS – MINIFY
Regular CSS
Minified CSS

20. CSS – INLINE CSS
Tujuan
•Mempercepat load halaman karena tidak perlu
load file .css dahulu sebelum menampilkan
halaman
•Memilah dan memisahkan class/id css yang
hanya digunakan pada halaman yang
dioptimasi

21. CSS – INLINE CSS
Yang Dibutuhkan
•Firefox
•Add On Firebug
•Add On CSS Usage
•Text Editor yang bisa replace text dengan
Regular Expresion (Notepad ++)

22. 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.

23. 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.

24. CSS – INLINE CSS
8. Akan muncul hasil CSS yang telah ditandai oleh CSS Usage. Jika bentuk css
belum dalam bentuk minified, minify terlebih dahulu.

25. 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.

26. CSS – INLINE CSS

27. CSS – INLINE CSS
13. Kita tetap harus menyertakan file css yang asli / full. Berdasarkan mbah Google kita
bisa 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

28. 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.

29. JS – MINIFY
Tujuan
•Mengurangi ukuran js yang digunakan
•http://jscompress.com
•http://www.danstools.com/javascript-minify
•https://javascript-minifier.com

30. 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

31. JS – MINIFY
Regular JS
Minified JS

32. JS – ASYNC
Tujuan
•Mengurangi waktu load halaman
dengan memilih file .js untuk dimuat
secara asynchronous

33. JS – ASYNC
Apa itu Asynchronous ?
•Ketika program dijalankan secara synchronous, kita
menunggu program sampai selesai melakukan
sebuah proses sebelum pindah ke proses lain
•Ketika program berjalan secara asynchronous,
program dapat beralih ke proses lain sebelum proses
yang sedang dilakukan selesai

34. 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.

35. SEO ON-PAGE
Apa itu SEO On-Page ?
•Optimasi SEO yang dilakukan
dari dalam situs web yang kita
miliki

36. SEO ON-PAGE
Apa saja ?
•URL
•Meta Tag
•Sitemap
•Schema ORG (Optional)

37. SEO ON-PAGE - URL
•Gunakan salah satu versi domain untuk
link situs. www (www.domain.com) atau
non-www (domain.com).
•Mesin pencari khususnya google menilai
berbeda antara www dan non-www.
•Gunakan redirect 301 untuk mengalihkan
salah satu versi domain ke versi domain
yang digunakan. (Wikipedia)
Domain www atau non-www

38. 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

39. SEO ON-PAGE - URL
• Gunakan Tanda Hubung (-) bukan Garis Bawah (_) untuk
menyambungkata dalam kalimat pada URL. Frase di
mana kata-kata yang terhubungmenggunakan garis
bawah diperlakukan oleh Google sebagai salah satu kata
tunggal.
• samsung_galaxy_tab dibaca samsunggalaxytab oleh
Google.
• domain.com/jual/samsung-galaxy-s6-jakarta-123456
bukan
domain.com/jual/samsung_galaxy_s6_jakarta_123456
Gunakan Tanda Hubung (-)

40. SEO ON-PAGE - META TAG
Apa itu Meta Tag ?
•Tag <meta> yang ada dalam website yang
menyediakan beberapa informasi yang digunakan oleh
Search Engine (Google dsb) untuk ditampilkan dalam
hasil pencarian mereka.

41. SEO ON-PAGE - META TAG
Apa Saja ?
•Title
•Description
•Keyword
•Open Graph / og (http://ogp.me/)

42. 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

43. SEO ON-PAGE - META TAG
Contoh Meta Tag

44. 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.

45. 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>

46. SEO ON-PAGE - SCHEMA ORG
Apa itu Schema ?
•Schema adalah jenis microdata yang membuat mesin
pencari lebih mudah untuk mengurai dan mengartikan
informasi pada halaman website lebih efektif sehingga
mereka dapat memberikan hasil yang relevan kepada
pengguna berdasarkan pencarian yang diminta.
•https://schema.org/docs/schemas.html

47. 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 sebuah
Potable projector yang cocok untuk digunakan di ruangan-ruangan sedang seperti kelas atau ruangan
meeting. Dengan kualitas peforma dan fitur-fitur yang dimilikinya NEC Proyektor NPV300W dilengkapi
dengan pilihan eco mode, sehingga Anda dapat menghemat umur lampu sampai dengan 6.000 jam sehigga Anda
dapat 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>

48. RESPONSIVE WEB
http://design.google.com/resizer

49. RESPONSIVE WEB
Responsive
• Membuat satu websiteyang 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

50. RESPONSIVE WEB – META VIEWPORT
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Tanpa Meta Viewport Dengan Meta Viewport

51. <terimakasih />