## OPTIMASI WEBSITE BERBASIS CMS PADA GOOGLE PEGESPEED

## Rizki Muliono
Magister Teknik Informatika Universitas Sumatera Utara rizkimuliono@gmail.com
Abstrak—Saat  ini  banyak  web  berkembang  di  dunia  maya  dengan  berbagai  nama  domain  dan platform  script  yang  membangunnya,  baik  itu  dibangun    secara  manual  koding  dan menggunakan  CMS  (content  management  system)  dengan  berbagai  bahasa  pemrograman  web seperti  php,  asp,  phyton,  jsp,  java  script  dan  bahasa  pemrograman  web  lainnya.  Melihat kebutuhan  dan  waktu  yang  di  perlukaan  saat  sekarang  ini  pengguna  web  lebih  dijadikan patokan  sebagai  dasar  survei  dalam  menilai  baik  dan  buruknya  website  ketika  diakses  desain dan  tampilan  yang  disajikan  serta  yang  lebih  utama  adalah  kecepatan  dan    responsibility website  tersebut  ketika  diakses  oleh  user,  sehingga    pengembang  web  sendiri  harus  di  dalam memilih  platform  pembentuk  situs  nya  baik  desain  scripting  dan  management  data.  Salah satunya  adalah  wordpress  sebagai  frame  CMS  yang  memudahkan  bagi  pengguna  untuk membangun website atau situs dengan cepat dan mudah, namun semakin berkembangnya data dan semakin update wordpress yang di gunakan maka ada beberapa hal yang perlu di perhatikan salah  satunya  kecepatan  akses  dan  render  html  pada  situs  yang  menggunakan  platform  CMS Wordpress  maka  di  butuhkan  optimasi  dalam  memecahkan  permasalahan  umum  yang  sering terjadi  pada  CMS  Wordpress  tersebut.  Pada  jurnal  ini  wordpress  di  optimasi  dengan menggunakan  plugin  yang  membantu  kecepatan  akses  dan  render  pada  website  berbasis  CMS Wordpress diatanranya Leverage Browser Caching, JS & CSS Script Optimizer, Above The Fold, Plugin  Chace  hasil  yang  didapatkan  adalah  ujicoba  testpage  pada  google  page-speed mendapatkan peningkatan point yang jauh lebih baik dan kecepatan akses bertambah.
Keywords— Wordpress Optimasi, Page-Speed, Website

## I. PENDAHULUAN
Wordpress  merupakan  aplikasi  utama  yang membangun sebuah website yang saat ini telah sangat popular yang mucul pertama kali sejak tahun 2003 dan sampai  pada  saat  ini  telah  mencapai  24%  situs  di internet adalah dengan aplikasi CMS Wordpress [1].
Worpress  adalah  sebuah  script  siap  pakai  berupa aplikasi  CMS  (Content  Management  System)  untuk membentuk  sebuat  website  dengan  mudah,  dengan berbagai  tema  dasar  yang  dapat  digunakan  dan dikembangkan  kembali.  Aplikasi wordpress ini memiliki  hak  cipta  sebagai free  use dan  bebas  untuk mengubah  baik  tema  maupun  script  utama  pada wordpress tersebut.

## II. TINJAUAN PUSTAKA
A. Wordpress Woordpress di  bangun  dengan  menggunakan bahasa  pemrograman  php  dan  desain casecade  style sheet (CSS)  dan  struktur  HTML  yang  di  kembangan sesuai  kebutuhan  hal  layak  banyak  mulai  dari  pilihan desain  situs  dan  script  penambahan  yang  bisa  di gunakan  yang  di  kenal  dengan  plugin  wordpress. Plugin  ini  memiliki  keunggulannya  masing-masing dan  di  kembangkan  oleh  developer-developer  dunia
sehingga  menjadi  keunggulan  tersendiri[3].  Agar kinerja  website  berbasis  cms  ini  membutuhkan beberapa optimasi agar SEO pada mesin pencari index lebih  baik  lagi  salah  satunya  dengan  module  plugin yang  sesuai  denga  kebutuhan  dan  kapasitas  website tersebut [5].

## B. Bagian Utama Wordpress
Worpress  memliki  16  file  utama  yang  dibagi menjadi  4  bagian  dari  segi  penggunaan  diantaranya terlihat pada uraian berikut[7] :
1. Standart Bagian  ini  adalah  bagian  yang  paling  banyak digunakan  pada  tema  di  platform wordpress yaitu file :
404.php dengan  fungsi  Halaman  kesalahan, disajikan ketika seseorang pergi ke sebuah URL di situs yang tidak ada ditemukan.
archive.php Halaman  yang  menampilkan  posting dalam  satu  tertentu  hari  ,  bulan,  tahun  ,  kategori  , tag , atau penulis.
header.php Termasuk  di  bagian  atas  setiap halaman  .  (  DOCTYPE  ,  kepala  seksi  ,  navigasi, dll ).
home.php Menampilkan  konten  untuk  halaman depan  situs  jika front-page.php tidak  tersedia. page.php Template  untuk  Pages,  versi  WordPress
Vol 1, No 2, Juli 2016
statis  gaya  /  konten  non  –  blog screenshot.png ini adalah  thumbnail  gambar  dari  tema,  untuk membantu membedakan dalam pemilih penampilan. search.php Hasil  pencarian  template  halaman sidebar.php Termasuk  pada  halaman  di  mana  / ketika  /  jika  ingin  sidebar single.php File  ini menampilkan  Post  tunggal  secara  penuh  (  Pos permalink ), biasanya dengan komentar.
2. Spesial Bagian  ini  bersifat  optional  dimana  beberpa  tema tidak  memakainya  bagian  tersebut  adalah  file archives.php halaman template yang meliputi form pencarian,  daftar  kategori,  dan  arsip  bulanan (memerlukan halaman menggunakannya). functions.php File  untuk  mencakup  perilaku khusus untuk tema . image.php Jika  ingin memiliki halaman yang unik untuk  masing-masing  gambar  di  situs    (  untuk kredit , hak cipta ... ) links.php Template  halaman  khusus  untuk  rumah untuk blogroll . loop.php umum  di  tema  baru  ,  file  opsional  untuk rumah adat , beberapa , atau loop biasa.
rtl.css Sebuah  file  CSS  khusus  untuk  dimasukkan opsional  untuk  mengakomodasi  "  kanan  ke  kiri  " bahasa.
3. Core Bagian  ini  terdri  file  yang  wajib  di  sertakan  atau include dalam bahasa php. File tersebut merupakan inti  dari  wordpress  agar  website  bisa  tampil,  file utama tersebut adalah :
index.php ini  biasanya  adalah  " homepage "  dari blog    ,  tetapi  juga  default  harus  tampilan  lain menjadi hilang.
style.css Informasi styling untuk tema  , diperlukan untuk  tema    bekerja  ,  meskipun    tidak menggunakannya.
4. Junk Adalah  bagian  file  yang  dapat  dibuang  atau  bila perlu  tidak  digunakan  sama  sekali  yaitu  file comments-popup.php Jika  mengaktifkan  popup komentar  (  fungsi  jelas  )  ,  link  komentar  akan menggunakan template ini.

## C. Keunggulan Wordpress
Wordpress memiliki keunggulan diantaranya :
1. Wordpress  bersifat  opersource  yang  bisa didapat secara gratis dan bisa kita kembangkan sendiri.
2. Keudahan  di  bidang  CMS  memudahkan menambah isi dari situs.
3. Dukungan  plugin  tambahan  yang  sangat lengkap dari para pengembang.
4. Memiliki  theme  yang  banyak  dan  sudah responsive dengan berbagai platform device.
5. Memiliki  kemampuan  untuk  memudahkan backup data.
6. Mendukung  multi  bahasa  dan  mudah  di upgrade.[1,4]
D. Google Pagespeed
Google pagespeed adalah sebuat aplikasi web yang di  kembangkan  google untuk mengecek  dan menganalisis    kecepat  sebuat  situs  jika  di  akses  dari platform  device  yang  berbeda  diantaranya    mobile phone  dan desktop  view . Google  pagespeed memiliki beberapa  kemampuan  untuk  mengecek  strisasi  html dan  struktur  data  yang  ada  pada  sebuah  situs  web. Baik  kecepatan  saat  di  render  dan  transmisi  data  dari server,  struktur  bahasa  pemrograman,  images  load dll.[5]

## III. HASIL DAN PEMBAHASAN
Pada  bab  ini  akan  dijelaskan  bagaimana Plugin yang  sandingkan  pada  wordpress. Plugin adalah sebuah add  on tambahan  yang  mudah  di  install  dan dimanajemen  sesuai  kebutuhan  system  yang  ada  pada situs website dengan platform wordpress[4]. Diantaranya  adalah  plugin  yang  dapat  memepercepat proses rendering website :

## 1. Leverage Browser Caching
Adalah  plugin  yang  memanfaat  chace  pada browser  seperti  Mozilla  firefox,  menyimpan  data chace  yang  di  kumpulkan  pada  data  web. Kelemahannya adalah banyak membuat file duplex data  chace  dari  setiap  chace  yang  masuk  sehingga data file pada public_html menumpuk.
Browser caching dapat membantu dengan menyimpan  beberapa  file-file  ini  secara  lokal  di browser  pengguna.  Kunjungan  pertama  mereka  ke situs  akan  meluangkan  waktu  yang  sama  untuk memuat,  namun  ketika  pengguna  mengunjungi kembali  situs  web,  refresh  halaman,  atau  bahkan bergerak  ke  halaman  yang  berbeda  dari  situs,  user sudah  memiliki  beberapa  file  yang  mereka butuhkan  secara  lokal  .  Ini  berarti  jumlah  data browser  pengguna  harus  men-download  kurang, dan  permintaan  lebih  sedikit  perlu  dibuat  ke server  . Hasilnya ? Penurunan load halaman.
Browser  caching bekerja  dengan  meni  halaman tertentu  ,  atau  bagian  dari  halaman  ,  seperti  yang perlu  diperbarui  pada  interval  yang  berbeda  .  logo di  website    ,  misalnya  ,  tidak  mungkin  untuk berubah dari hari ke hari . Dengan caching gambar logo ini, bisa mengatakan browser pengguna hanya men-download gambar ini seminggu sekali . Setiap kunjungan  pengguna  membuat  dalam  waktu seminggu  tidak  membutuhkan  lain  download gambar  logo.  Web  server  memberitahu  browser untuk  menyimpan  file-file  ini  dan  tidak  men- download  mereka  ketika    kembali  menyimpan pengguna waktu dan bandwidth web server.
Cara kerja plugin ini adalah :
 Mengubah header permintaan sumber daya user untuk menggunakan caching.
 Optimalkan strategi caching .
File .htaccess mengontrol  banyak  hal  penting untuk  website.  Jika  tidak  akrab  dengan  file .htaccess , kode utama dalam plugin adalah :
## EXPIRES CACHING ## <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType text/css "access 1 month" ExpiresByType text/html "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType text/x-javascript "access 1 month" ExpiresByType application/x-shockwave- flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 1 month" </IfModule> ## EXPIRES CACHING ##
Usia chacing bisa diatur sesuai kebutuhan website. 2. JS & CSS Script Optimizer
Ini  adalah  plugin  yang  mengkompresi  data  script dari  java  script  dan  format  style  css  file  agar coding  script  situs  terapatkan[3].  Secara  mendasar hal  di  kerjakan  saat  proses  optimasi  script  adalah menggabungkan  CSS  dan  file  JavaScript  (masing- masing),  meminimalkan  CSS  dan  JavaScript, memuat  CSS  sebelum  JS,  memuat  JS  di  footer body  dan  kemudian  bahkan  beberapa.  Tanpa banyak  kesulitan,  kita  dapat  membuat  WordPress melakukan semua ini secara otomatis.

## a. Menggabungkan JavaScript dan CSS file
Ada beberapa keterbatasan pada proses permintaan browser    yang  dapat  ditangani  secara  bersamaan (  biasanya  4  per  hostname  )  ,  semua  permintaan JavaScript  memblokir (  yang  berarti browser tidak melakukan  hal  lain  sambil  menangani  proses terseut)  dan  setiap  permintaan  memiliki  overhead. Dengan  membaca  di  semua  file  enqueued,  jika perlu  menulis  ulang  semua  jalur  dan  menyimpan hasilnya dalam satu file tunggal yang akan cache.
b. Memuat  CSS  sebelum  JS  -  dan  sebaiknya memuat JS di halaman footer
Perlu di perhatikan bahwa mungkin plugin ini akan membuat  kode  sedikit  tidak  beraturan    atau  tema agak berantakan. Kadang-kadang coders berpengalaman  membuang  inline  JavaScript  di tempat-tempat  yang  sembarangan  tanpa  menunda eksekusi.  Jika  kode  yang  digunakan  mis  jQuery untuk dimuat sebelum itu benar, browser  mungkin akan  hang.  Tidak  ada  yang  salah  dengan  Minit untuk  melakukannya  dengan  cara  ini,  itu  plugin buruk yang harus diperbaiki.
c. Tunda parsing JavaScript
Minit  beban  semua  skrip  eksternal  asynchronous sehingga  browser  Anda  tidak  di  blok  menunggu (mungkin lambat) situs pihak ke-3.
d. Hapus string query dari sumber daya statis
Di  WordPress,  skrip  dan  CSS  biasanya  akan dimuat  dengan  nomor  versi  dalam  string,  seperti ini:
jquery.js? ver = 1.10.2
Beberapa  proxy  -  seperti  Squid  -  akan  menolak untuk cache sumber daya tersebut. Inilah sebabnya mengapa  lebih  baik  untuk  memiliki  nomor  versi dalam nama file. Seperti ini:

## jquery-1.10.2.min.js
Minit  menghilangkan  masalah  sebagai  bagian  dari rangkaian  berkas.  file  yang  dihasilkan  mendapat «nomor  versi»  nya  sebagai  bagian  dari  nama  file dalam bentuk hash md5.
e. minification
Satu-satunya  masalah  besar  yang  Minit  tidak menangani langsung adalah minifying CSS dan JS file.  Minifying  adalah  proses  menghapus  semua byte  yang  tidak  perlu  seperti  komentar  dan  putih- ruang  dari  file.  Ini  tidak  biasa  untuk  menyimpan 10-15% dalam ukuran file yang dihasilkan.
Untungnya  bagi  kita,  ketika  ia  membuat  Minit, Kaspars  melihat  ke  depan  dan  difasilitasi  untuk pengembang  yang  ingin  memperbaiki  ini  sendiri. Semua  konten  melewati  saringan  kait,  sehingga kita  dapat  memanipulasi  hasil  yang  tepat  pada proses berkas kombinasi.
Plugin  yang  sudah  disediakan  untuk  wordpress  ini diantaranya mampu :
 Mengelompokkan  beberapa  script  ke  dalam  file tunggal (untuk meminimalkan jumlah permintaan http).
 Menggabungkan beberapa file CSS ke dalam file tunggal ( dengan pengelompokan tag "media" ).
 script  pack menggunakan  Dean  Edwards JavaScript Packer atau Mengecilkan ( oleh Steve Clay).
 file  Mengecilkan  CSS  (  menghapus  komentar  , tab , spasi , baris baru ).
 Mendukung bersyarat JS dan CSS ( html5.js , IE CSS , <! - [If lt IE 9 ] > ).
 Dukungan JavaScript L10n / i18n ( wp_localize_script ).
 Masukan JavaScript di bagian bawah
 Kemampuan  untuk  menyertakan  JavaScript  dan file CSS.
 Jaringan / dukungan WPMU.
3. Above The Fold
Ini adalah plugin yang cara bekerjanya mendahulukan  struktur  dari  bahasa  pemrograman java  dan  css  script,  kelemaannya  adalah  pada render  pertama  tampilan  web  akan  terlihat berantakan apa lagi ketika jaringan internet yang di
gunakan  sedang  lambat  [4].  Fungsi  utama  pada plugin  ini  adalah  menghilangkan render-  blocking JavaScript dan CSS di dalam above the fold conten. Proses  ini  akan  terlihat  di  jendela  browser  ketika beban halaman pertama. Bagian dari halaman yang membutuhkan  proses  untuk  melihat  konten  ini disebut "bellow the fold"
Pada  halaman  Web  titik  di  mana  pengguna  harus scroll  ke  bawah  tidak  konstan  karena  banyak variabel  dapat  mempengaruhi  cara  halaman  di render.  Ukuran  layar  perangkat,  misalnya  , perubahan  apa  yang  muncul Above  The  Fold . Variabel  lain  termasuk  pilihan  pengguna  akhir browser,  browser  toolbar  ,  setting  custom  browser dan sistem operasi (OS) perangkat menggunakan. Variasi  fold  tergantung  pada  pengaturan  resolusi pada  monitor  pengunjung.  Pada  pengaturan  yang lebih rendah flip relatif tinggi pada halaman. Pada pengaturan yang lebih tinggi flip meluas lebih jauh ke  bawah  halaman.  Kondisi  flip  di  atas  atau  di bawah  flip  sering  dibuat  berdasarkan  resolusi minimum yang ditargetkan.
Jika website di pasangkan pengiklan sering terlihat bagus  di  penempatan  yang  tinggi  pada  halaman, dengan  asumsi  bahwa  iklan  mereka  akan  dilihat dan  diklik  lebih  sering.  Beberapa  pertukaran banner bahkan lebih langsung, hanya menukar atas jumlah klik tayangan dengan iklan yang lainnya. Jika iklan banner ditempatkan di atas struktur yang berisi  konten  utama,  maka  iklan  dapat  dilihat sebelum  beban  konten  utama.  Ketika  banner diperbolehkan  untuk  pre-load,  berada  di  atas  flip mungkin menguntungkan.

## 4. Plugin Chace
Chace  adalah  memory  sementara  yang  disimpan baik  dalam  temporary  atau  di  dalam  chache berguna  untuk  membantu  membaca  ulang  script koding  agar  tidak  selalu  di  baca  berulang-ulang ketika perenderan [3,5]
Gbr 1. Analisa pagespeed sebelum dioptimasi
Sebuah situ yang di test dengan aplikasi google speed di url : https://developers.google.com/speed/ pagespeed/insights  [6].  Dan  setelah  nya  di  install dengan plugin diatas menjadi seperti gambar berikut:
Gbr 2. Analisa pada selular setelah dioptimasi
Gbr 3. Analisa pagespeed setelah dioptimasi pada device desktop
Dari  hasil  tersebut  dapat  terlihat  hasil  perbandingan nya  mengalami  peningkatan  yang  cukup  baik  pada google pagespeed pada device selular dari 51/100 poin menjadi  67/100  poin  mampu  menigkatkan  16  poin optimasi. Pada device desktop mejadi 84/100 poin.

## IV. KESIMPULAN DAN SARAN
Bebrapa  kesimpulan  yang  dapat  di  ambil  dari  analisis diatas adalah :
1. Render  website  lebih  terbantu  dan  lebih  cepat dengan menggunakan plugin chace tersebut.
2. http  request lebih  tanggap  dan  cepat  ketika  di akses dengan mobile device
3. Situs  wordpress  membutuhkan  plugin  yang membuat  rendering  dan  kecepatan  akses  situs semakin  bertambah  khususnya  optimasi  pada script  dengan  javascript  yang  digunakan  pada website.

## REFERENSI
[1] M.  Hilmy,  ” Toko  Online  Canggih  dengan  Wordpress ”, Elex Media Komputindo, 2012.
[2] Tod  Kesley,” Getting  started  with  Wordpress ”,Chourse Tecnology,2012.
[3] Lisa  Sabin-Wilson,  " WordPress  All-in-One ",  For  Dummies, 2013.
[4] Brad W., Ozh R. & Justin T.," Professional WordPress Plugin Development ", Wrox, 2011.
[5] Kent M. & Anastasiya P.," SEO for WordPress ", CreateSpace, 2013.
[6] Google  page  speed, https://developers.google.com/  speed/ pagespeed/ insights , online 10-08-2016.
[7] Jeff S. & Chris C., " Digging Into WordPress ", digWP, 2011.