Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Optimasi Website
Arry Harmawan
arryharm@gmail.com
World Class Big Data Provider
ubigcoid
ubig.co.id
Fatkul Amri
fatkulamri...
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, As...
IMAGE – COMPRESS IMAGE SIZE
Tujuan & Tool
•Mengurangi ukuran gambar yang
digunakan dalam website
•Mempercepat load website...
IMAGE – COMPRESS IMAGE SIZE
.png Image .jpeg Image
57 KB
15 KB
641 KB
162 KB
IMAGE – SIZE OPTIMIZATION
Tujuan
•Menyesuaikan ukuran gambar asli
dengan ukuran gambar yang digunakan
•Mengurangi ukuran y...
IMAGE – SIZE OPTIMIZATION
768x300
968x500
IMAGE – SIZE OPTIMIZATION
768x300
768x300
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-tw...
IMAGE – LAZY LOAD
Tujuan
•Mengurangi request ke server
•Gambar hanya akan di load saat
tampilan 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"></scri...
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 Rom...
CSS – MINIFY
Regular CSS
Minified CSS
CSS – INLINE CSS
Tujuan
•Mempercepat load halaman karena tidak perlu
load file .css dahulu sebelum menampilkan
halaman
•Me...
CSS – INLINE CSS
Yang Dibutuhkan
•Firefox
•Add On Firebug
•Add On CSS Usage
•Text Editor yang bisa replace text dengan
Reg...
CSS – INLINE CSS
1. BACKUP FILE CSS SEBELUM MELAKUKAN OPTIMASI !
2. PASTIKAN CSS SUDAH BENAR BENAR FIX TIDAK ADA PERUBAHAN...
CSS – INLINE CSS
6. Akan muncul hasil scan berupa list file css yang digunakan. Sebagai contoh kita
akan memilah file styl...
CSS – INLINE CSS
8. Akan muncul hasil CSS yang telah ditandai oleh CSS Usage. Jika bentuk css
belum dalam bentuk minified,...
CSS – INLINE CSS
9. Setelah CSS yang telah ditandai di minify, buka program editor. Replace
menggunakan Regex :
UNUSED([^,...
CSS – INLINE CSS
CSS – INLINE CSS
13. Kita tetap harus menyertakan file css yang asli / full. Berdasarkan mbah Google kita
bisa melakukanny...
CSS – INLINE CSS
15. Lakukan semua langkah diatas untuk semua halaman yang akan dioptimasi.
16. SETIAP HALAMAN MEMILIKI IN...
JS – MINIFY
Tujuan
•Mengurangi ukuran js yang digunakan
•http://jscompress.com
•http://www.danstools.com/javascript-minify...
JS – MINIFY
var x = myFunction(4, 3);
function myFunction(a, b) {
return a * b;
}
var x=myFunction(4,3);function myFunctio...
JS – MINIFY
Regular JS
Minified JS
JS – ASYNC
Tujuan
•Mengurangi waktu load halaman
dengan memilih file .js untuk dimuat
secara asynchronous
JS – ASYNC
Apa itu Asynchronous ?
•Ketika program dijalankan secara synchronous, kita
menunggu program sampai selesai mela...
JS – ASYNC
1. Tambahkan attribut async pada tag <script> js yang akan di async.
<script async src="js/bootstrap.min.js"></...
SEO ON-PAGE
Apa itu SEO On-Page ?
•Optimasi SEO yang dilakukan
dari dalam situs web yang kita
miliki
SEO ON-PAGE
Apa saja ?
•URL
•Meta Tag
•Sitemap
•Schema ORG (Optional)
SEO ON-PAGE - URL
•Gunakan salah satu versi domain untuk
link situs. www (www.domain.com) atau
non-www (domain.com).
•Mesi...
SEO ON-PAGE - URL
SEO Friendly
•domain.com/jual/samsung-galaxy-s6-jakarta-123456
•domain.com/cari/samsung
Non SEO Friendly...
SEO ON-PAGE - URL
• Gunakan Tanda Hubung (-) bukan Garis Bawah (_) untuk
menyambungkata dalam kalimat pada URL. Frase di
m...
SEO ON-PAGE - META TAG
Apa itu Meta Tag ?
•Tag <meta> yang ada dalam website yang
menyediakan beberapa informasi yang digu...
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 nam...
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...
SEO ON-PAGE - SITEMAP
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
...
SEO ON-PAGE - SCHEMA ORG
Apa itu Schema ?
•Schema adalah jenis microdata yang membuat mesin
pencari lebih mudah untuk meng...
SEO ON-PAGE - SCHEMA ORG
http://hargaindonesia.com/jual/nec-proyektor-np-v300w-putih-14554687565110699345.html
<div itemty...
RESPONSIVE WEB
http://design.google.com/resizer
RESPONSIVE WEB
Responsive
• Membuat satu websiteyang bisa menyesuaikan dengan target
(desktop/mobile)
• Bisa menggunakan h...
RESPONSIVE WEB – META VIEWPORT
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Tanpa Meta Viewport ...
<terimakasih />
Prochain SlideShare
Chargement dans…5
×

Optimasi Website - Ubig.co.id

2 036 vues

Publié le

Materi workshop optimasi website oleh tim Ubig.co.id

Publié dans : Logiciels
  • Soyez le premier à commenter

Optimasi Website - Ubig.co.id

  1. 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. 2. TUJUAN UI & UX Lebih Optimal Lebih Ringan & Cepat SEO Friendly
  3. 3. TOOL TEST OPTIMASI Google Page Speed gtmetrix.com webpagetest.org monitis.com/pageload
  4. 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. 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. 6. IMAGE – COMPRESS IMAGE SIZE .png Image .jpeg Image 57 KB 15 KB 641 KB 162 KB
  7. 7. IMAGE – SIZE OPTIMIZATION Tujuan •Menyesuaikan ukuran gambar asli dengan ukuran gambar yang digunakan •Mengurangi ukuran yang tidak dibutuhkan •Buat gambar proporsional
  8. 8. IMAGE – SIZE OPTIMIZATION 768x300 968x500
  9. 9. IMAGE – SIZE OPTIMIZATION 768x300 768x300
  10. 10. IMAGE – SPRITE IMAGE Tujuan •Mengurangi request ke server •Hemat bandwidth
  11. 11. IMAGE – SPRITE IMAGE icon-fb.png icon-twitter.png icon-gplus.png icon-socmed.png
  12. 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. 13. IMAGE – LAZY LOAD Tujuan •Mengurangi request ke server •Gambar hanya akan di load saat tampilan yang berisi gambar diakses
  14. 14. IMAGE – LAZY LOAD Tampilan Browser
  15. 15. Tampilan Browser
  16. 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. 17. CSS – MINIFY Tujuan •Mengurangi ukuran css yang digunakan •https://cssminifier.com •http://www.cleancss.com/css-minify
  18. 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. 19. CSS – MINIFY Regular CSS Minified CSS
  20. 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. 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. 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. 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. 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. 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. 26. CSS – INLINE CSS
  27. 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. 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. 29. JS – MINIFY Tujuan •Mengurangi ukuran js yang digunakan •http://jscompress.com •http://www.danstools.com/javascript-minify •https://javascript-minifier.com
  30. 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. 31. JS – MINIFY Regular JS Minified JS
  32. 32. JS – ASYNC Tujuan •Mengurangi waktu load halaman dengan memilih file .js untuk dimuat secara asynchronous
  33. 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. 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. 35. SEO ON-PAGE Apa itu SEO On-Page ? •Optimasi SEO yang dilakukan dari dalam situs web yang kita miliki
  36. 36. SEO ON-PAGE Apa saja ? •URL •Meta Tag •Sitemap •Schema ORG (Optional)
  37. 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. 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. 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. 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. 41. SEO ON-PAGE - META TAG Apa Saja ? •Title •Description •Keyword •Open Graph / og (http://ogp.me/)
  42. 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. 43. SEO ON-PAGE - META TAG Contoh Meta Tag
  44. 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. 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. 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. 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. 48. RESPONSIVE WEB http://design.google.com/resizer
  49. 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. 50. RESPONSIVE WEB – META VIEWPORT <meta name="viewport" content="width=device-width, initial-scale=1.0"> Tanpa Meta Viewport Dengan Meta Viewport
  51. 51. <terimakasih />

×