Siapa yang gak kenal Google? Semakin kemari semakin merakyat! Apalagi belakangan ini sudah dibuka kantor google di Indonesia. Siapa yang belom tau hayoo? 😀
Ya, tulisan kali ini tentang google lagi, tapi sekarang sedikit agak ngebahas server. mod_pagespeed, sebuah modul Apache yang disediakan oleh google untuk mempercepat page load halaman website dengan meminimalisir memuat CSS, JS & gambar ke web browser tanpa Anda/programmer harus mengubah kode sama sekali.
Singkatnya, mod_pagespeed bertugas me-rewrite, minify, compress HTML sebelum halaman HTML diberikan ke browser client
# Download
Untuk memudahkan instalasi, Anda dapat download mod_pagespeed untuk 2 linux platform:
- mod_pagespeed 32-bit .deb (Debian/Ubuntu)
- mod_pagespeed 64-bit .deb (Debian/Ubuntu)
- mod_pagespeed 32-bit .rpm (CentOS/Fedora)
- mod_pagespeed 64-bit .rpm (CentOS/Fedora)
Saran: Download dengan wget langsung di server untuk mempercepat proses
# Instalasi
mod_pagespeed dapat di install di beberapa variant linux OS (Test Sukses oleh saya di Ubuntu 12.04)
Debian/Ubuntu:
|
1 2 3 |
sudo apt-get install apache2 g++ python subversion gperf make devscripts fakeroot git sudo dpkg -i mod-pagespeed-*.deb sudo apt-get -f install |
CentOS/Fedora:
|
1 2 |
sudo yum install at httpd gcc-c++ python subversion gperf make rpm-build git sudo rpm -U mod-pagespeed-*.rpm |
# Ubah kepemilikan cache folder mod_pagespeed
Ubah kepemilikan cache mod_pagespeed, jika Anda menggunakan custom ownership apache2, ubah sesuai dengan ownership apache anda (default: www-data:www-data)
|
1 2 |
chmod -R 777 /var/cache/mod_pagespeed chown -R www-data:www-data /var/cache/mod_pagespeed |
# Custom Konfigurasi
Pagespeed memiliki file konfigurasi pagespeed.conf, untuk melakukan custom konfig, buka file pagespeed.conf di server: /etc/apache2/mods-available/pagespeed.conf dengan editor kesayangan Anda (Saya menggunakan nano), berikut adalah baris custom konfigurasi yang di-custom oleh saya:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<IfModule pagespeed_module> ModPagespeed on AddOutputFilterByType MOD_PAGESPEED_OUTPUT_FILTER text/html ModPagespeedFileCachePath "/var/cache/mod_pagespeed/" ModPagespeedLogDir "/var/log/pagespeed" ModPagespeedRewriteLevel PassThrough ModPagespeedEnableFilters combine_css,convert_meta_tags,combine_javascript,extend_cache ModPagespeedEnableFilters flatten_css_imports,hint_preload_subresources,inline_import_to_link,local_storage_cache,responsive_images,rewrite_images,sprite_images,lazyload_images,elide_attributes ModPagespeedEnableFilters rewrite_css,rewrite_javascript,collapse_whitespace,rewrite_style_attributes_with_url,insert_image_dimensions ModPagespeedEnableFilters remove_comments,trim_urls,combine_heads,outline_css,outline_javascript,insert_dns_prefetch,resize_images ModPagespeedEnableFilters move_css_to_head,canonicalize_javascript_libraries,remove_quotes ModPagespeedEnableFilters pedantic,fallback_rewrite_css_urls,inline_css,inline_javascript,inline_images,dedup_inlined_images ModPagespeedForceCaching on ModPagespeedFetchWithGzip on SetOutputFilter DEFLATE ModPagespeedDomain * ModPagespeedStatistics on <Location /mod_pagespeed_statistics> Order allow,deny Allow from All SetHandler mod_pagespeed_statistics </Location> ModPagespeedStatisticsLogging on <Location /pagespeed_console> Order allow,deny Allow from All SetHandler pagespeed_console </Location> ModPagespeedMessageBufferSize 100000 <Location /mod_pagespeed_message> Order allow,deny Allow from All SetHandler mod_pagespeed_message </Location> </IfModule> |
# Pemahaman
|
1 |
ModPagespeed on |
Mengaktifkan pagespeed, jika anda ingin menon-aktifkan pagespeed, ubah ke off
|
1 |
Custom X-Header, ubah sesuai keinginan Anda
|
1 |
AddOutputFilterByType MOD_PAGESPEED_OUTPUT_FILTER text/html |
Parse, optimize & serialize ulang semua file HTML di server
|
1 |
ModPagespeedFileCachePath "/var/cache/mod_pagespeed/" |
Cache direktori pagespeed
|
1 |
ModPagespeedLogDir "/var/log/pagespeed" |
Log Direktori pagespeed
|
1 |
ModPagespeedRewriteLevel PassThrough |
Secara default, pagespeed akan menggunakan rewrite CoreFilters, berikut adalah default filter untuk CoreFilters:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
add_head combine_css combine_javascript convert_meta_tags extend_cache fallback_rewrite_css_urls flatten_css_imports inline_css inline_import_to_link inline_javascript rewrite_css rewrite_images rewrite_javascript rewrite_style_attributes_with_url |
Namun saat ini saya menggunakan PassThrough untuk custom filter:
|
1 2 3 4 5 6 |
ModPagespeedEnableFilters combine_css,combine_javascript,extend_cache ModPagespeedEnableFilters rewrite_images,sprite_images,lazyload_images ModPagespeedEnableFilters rewrite_css,rewrite_javascript,collapse_whitespace ModPagespeedEnableFilters remove_comments,trim_urls,combine_heads ModPagespeedEnableFilters move_css_to_head,canonicalize_javascript_libraries,remove_quotes ModPagespeedEnableFilters pedantic,fallback_rewrite_css_urls,inline_css,inline_javascript |
Custom filter, selengkapnya lihat disini
|
1 |
ModPagespeedForceCaching on |
Paksakan pagespeed untuk cache HTML
|
1 2 |
ModPagespeedFetchWithGzip on SetOutputFilter DEFLATE |
Kompres HTML yang akan diberikan ke web browser
|
1 |
ModPagespeedDomain * |
Menerapkan pagespeed untuk semua domain yang ada didalam server
|
1 |
ModPagespeedStatistics on |
Hidupkan statistik pagespeed
|
1 2 3 4 5 |
<Location /mod_pagespeed_statistics> Order allow,deny Allow from All SetHandler mod_pagespeed_statistics </Location> |
Shortcut untuk statistik pagespeed, Penggunaan: http://domainanda.com/mod_pagespeed_statistics
|
1 |
ModPagespeedStatisticsLogging on |
Hidupkan pagespeed logging
|
1 2 3 4 5 |
<Location /pagespeed_console> Order allow,deny Allow from All SetHandler pagespeed_console </Location> |
Shortcut untuk konsol pagespeed, Penggunaan: http://domainanda.com/pagespeed_console
|
1 |
ModPagespeedMessageBufferSize 100000 |
Set pagespeed buffer ke 100000
|
1 2 3 4 5 |
<Location /mod_pagespeed_message> Order allow,deny Allow from All SetHandler mod_pagespeed_message </Location> |
Shortcut untuk log message pagespeed, Penggunaan: http://domainanda.com/mod_pagespeed_message
# Implementasi
Berikut adalah demo mod_pagespeed menggunakan domain saya sendiri dengan menggunakan firebug firefox addons:
Pagespeed non-aktif, page load: 3,73s
Pagespeed aktif, custom X-Header-Mod-Pagespeed aktif, page load: 1,5s
Pagespeed non-aktif, original CSS, css load: 67ms
Pagespeed aktif, filter combine_css aktif, css rewrited, css load: 45ms
Pagespeed non-aktif, normal css
Pagespeed aktif, minified+combined css
Pagespeed non-aktif, Normal HTML, komentar & whitespace
Pagespeed aktif, Compressed HTML, minified CSS URL
# Flush Cache
Jika anda menggunakan server semasa development aplikasi/website anda, matikan pagespeed:
|
1 |
ModPagespeed off |
Ini dimaksudkan agar semua perubahan yang terjadi didalam kode anda semasa developement akan langsung berdampak perubahannya di UI
Untuk melakukan flush cache ketika anda update file html, js atau css, ketikkan perintah berikut di terminal server:
|
1 |
sudo touch /var/cache/mod_pagespeed/cache.flush |
Lalu refresh halaman web/aplikasi anda.
# FAQ
Q: Bagaimana jika saya tidak ingin me-rewrite gambar?
A: Tambahkan baris berikut di pagespeed.conf: ModPagespeedDisableFilters rewrite_images,extend_cache_images lalu restart apache
Q: Apakah system cache pagespeed dapat di integrasikan dengan memcached?
A: Bisa, klik disini untuk selengkapnya
# Kesimpulan
mod_pagespeed sangat berguna untuk Anda para web server administrator sebagai web performance tools untuk meningkatkan page load sebuah halaman web dengan beberapa filter yang sudah disediakan, dengan pagespeed, programmer tidak perlu minify js, css, karena sudah otomatis minified, rewrited & compressed oleh pagespeed.
Siap untuk acak2 server? 😀
Selamat mencoba 🙂
