Mempercepat Nginx dengan PageSpeed Module

Menuruti permintaan lain dari mbak Shafira, kali ini sedikit modifikasi pada web server Nginx dimana kita akan menambahkan modul PageSpeed (ngx_pagespeed) buatan Google kedalamnya. Hal ini berpengaruh terhadap optimalisasi konten website yang dilayankan oleh Nginx, bisa lebih cepat memang tapi pastikan dulu server anda mampu. Atau mungkin VPS saya saja yang terlalu lemah. Haha. 😀

Jadi apa manfaatnya PageSpeed Module ini? Setiap konten baik halaman situs, gambar, javascript dan css, kompresi, minify, pengaturan cache, dan masih banyak lagi akan diatur langsung dari Nginx. Ini lebih unggul dibandingkan – misal – optimalisasi dari WordPress dengan plugin – pluginnya karena harus diproses oleh PHP dulu dan dikembalikan ke Nginx. Jadi memotong satu langkah dan memang performa Nginx lebih ringan dibandingkan PHP-FPM sendiri.

Membuat dan menginstall Nginx dengan ngx_pagespeed

Nah… jeleknya tidak ada cara mudah seperti menggunakan yum atau apt-get untuk instalasi modul PageSpeed ini. Mungkin ada repository eksternal untuk ini tapi saya belum menemukannya. Kita harus mengkompilasikan programnya dari source code. Ini yang akan kita lakukan saat ini.

Pertama kita install dulu paket aplikasi yang dibutuhkan untuk kompilasi ngx_pagespeed:

  • CentOS/RHEL/Fedora
    yum install gcc-c++ pcre-devel zlib-devel make unzip
  • Debian/Ubuntu
    apt-get install build-essential zlib1g-dev libpcre3 libpcre3-dev unzip

Kemudian kita download ngx_pagespeed dan binary PSOL (PageSpeed Optimization Library):

cd
NPS_VERSION=1.9.32.10
wget https://github.com/pagespeed/ngx_pagespeed/archive/release-${NPS_VERSION}-beta.zip
unzip release-${NPS_VERSION}-beta.zip
cd ngx_pagespeed-release-${NPS_VERSION}-beta/
wget https://dl.google.com/dl/page-speed/psol/${NPS_VERSION}.tar.gz
tar -xzvf ${NPS_VERSION}.tar.gz

Jalankan secara urut satu per satu. Versi PageSpeed modulnya adalah 1.9.32.10 beta, bisa anda ganti pada variabel NPS_VERSION. Cek halaman rilisnya di GitHub untuk versi terbarunya.

Selanjutnya kita akan membuat Nginx dari source code dengan tambahan fitur PageSpeed diatas:

cd
NGINX_VERSION=1.9.6
wget http://nginx.org/download/nginx-${NGINX_VERSION}.tar.gz
tar -xvzf nginx-${NGINX_VERSION}.tar.gz
cd nginx-${NGINX_VERSION}/
./configure --add-module=$HOME/ngx_pagespeed-release-${NPS_VERSION}-beta
make
make install

Saya gunakan versi mainline terbarunya 1.9.6, sedangkan stablenya adalah 1.8.0. Tinggal digantikan di variable NGINX_VERSION. Anda bisa cek versi terbaru Nginx dihalaman download.

Anda bisa mengecek apakah nginx sudah terinstall dengan modul pagespeed:

/usr/local/nginx/sbin/nginx -V

Balasannya akan mirip seperti ini:

nginx version: nginx/1.9.6
built by gcc 4.4.7 20120313 (Red Hat 4.4.7-16) (GCC) 
configure arguments: --add-module=/root/ngx_pagespeed-release-1.9.32.10-beta

Bisa anda lihat bahwa dalam daftar modul Nginx sudah terinstall ngx_pagspeed dan versinya.

Mengatur konfigurasi ngx_pagespeed

Ini belum selesai prosesnya karena kita perlu mengaktifkan pagespeed di Nginx dan menerapkannya pada setiap situs yang diinginkan. Diawali dengan membuat direktori untuk menyimpan cache:

mkdir /var/ngx_pagespeed_cache
chown nginx:nginx /var/ngx_pagespeed_cache

Disusul dengan mengedit nginx.conf:

nano /usr/local/nginx/conf/nginx.conf

Dalam blok server tambahkan kode ini:

#Mengaktifkan PageSpeed Module
pagespeed on;
#Lokasi file cache PageSpeed
pagespeed FileCachePath /var/ngx_pagespeed_cache;
#Mengikutkan konfigurasi virtual host
include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*;

Sementara konfigurasi ini sudah cukup dulu untuk awalnya, nanti bisa dipilah – pilah menjadi lebih spesifik filter yang bisa digunakan tapi harus menggunakan opsi PassThrough.

Nah selanjutnya kita bisa mengatur PageSpeed ini per virtual hostnya dan juga dalam blok server:

#Hanya menggunakan optimasi paling aman dari Google
pagespeed RewriteLevel CoreFilters;

#Memastikan permintaan konten yang dioptimais oleh pagespeed selalu ditujukan ke lokasi yang benar
  location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" {
    add_header "" "";
  }
  location ~ "^/ngx_pagespeed_static/" {
  }
  location ~ "^/ngx_pagespeed_beacon$" {
  }
  location /ngx_pagespeed_statistics {
    allow 127.0.0.1;
    deny all;
  }
  location /ngx_pagespeed_global_statistics {
    allow 127.0.0.1;
    deny all;
  }
  location /ngx_pagespeed_message {
    allow 127.0.0.1;
    deny all;
  }
  location /pagespeed_console {
    allow 127.0.0.1;
    deny all;
  }

Karena kita membuat Nginx dari source bukan lewat repositorynya maka kita perlu menambahkannya dalam init.d Linux, kalau tidak ya tidak akan dijalankan saat booting. Saya anjurkan agar diuji dengan mereboot servernya.

Silahkan anda buat file berikut:

nano /etc/init.d/nginx

Kemudian isikan init script Nginx yang saya buat sebelumnya.

Dan buat supaya file tersebut menjadi executable, batasi hak aksesnya dan ganti pemiliknya ke root:

chmod +x /etc/init.d/nginx
chmod 0755 /etc/init.d/nginx
chown root:root /etc/init.d/nginx

Terakhir mari kita restart Nginx:

service nginx reload

atau

service nginx restart

Dan saya baru ingat, kalau anda belum memasukkan lokasi program Nginx ke variabel $PATH maka perintah anda tidak bisa dieksekusi. Nanti akan muncul error: bash: nginx command not found. Silahkan ketikkan perintah ini:

export PATH=/usr/local/nginx/sbin/:$PATH

Menguji Nginx PageSpeed Module sudah aktif atau belum

Nah… setelah itu kita tahu kalau optimasi menggunakan PageSpeed Module sudah aktif darimana? Paling mudah adalah dengan mengecek lewat header HTTPnya. Ini saya cek dari server terinstallnya Nginx tadi dan menjalankannya menuju localhost.

curl -I -p http://localhost|grep X-Page-Speed
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
  0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
X-Page-Speed: 1.9.32.10-7423

atau

curl -I -p http://localhost
HTTP/1.1 200 OK
Server: nginx/1.9.6
Content-Type: text/html
Connection: keep-alive
Date: Fri, 06 Nov 2015 02:15:10 GMT
X-Page-Speed: 1.9.32.10-7423
Cache-Control: max-age=0, no-cache

Anda bisa lihat akan ada kode X-Page-Speed dalam hasil cek header HTTPnya dan nilainya adalah versi dari PageSpeed Module yang terinstall dalam Nginx. Ini menandakan anda telah sukses memasangkannya. Sekarang sisanya tinggal optimasi setting PageSpeed, dan ini… cukup ribet juga kalau mau benar – benar maksimal dari pengalaman saya sebelumnya.

Semoga bermanfaat. 🙂

Oh ya ada versi untuk web server Apache, mungkin lain kali akan saya bahas.

30 pemikiran pada “Mempercepat Nginx dengan PageSpeed Module

  1. trims tutorialnya mas chandra 🙂 hmmm jadi harus compile manual ya, nggak bisa langsung yum install 😀 btw maaf oot lagi (kebiasaan) rekues juga untuk vps security,,saat ini untuk perlindungan saya lagi lihat2 setingan firewalnya vestacp terutama untuk port2 yang masuk iptables, instal fail2ban (konfigurasi saya biarkan default nggak ngerubah apa2), ubah port ssh, akses ssh menggunakan ssh key.

    • Iya mbak, kalau untuk Apache ada repositorynya sih. Sedangkan Nginx ini setahu saya memang dari awal harus disetting sendiri, ga bisa ambil dari repo. Mungkin ada repo pihak ketiga, tapi saya cari sekilas tidak ketemu.

      Okeee, saya tampung dulu ide – idenya mbak. Memang saya ingin membahas hal – hal yang direquest. 🙂 Untuk mengganti port SSH sudah pernah saya bahas tapi. 😉

  2. Tanya dong, waktu di langkah:

    ./configure --add-module=$HOME/ngx_pagespeed-release-${NPS_VERSION}-beta

    terakhir keluar:

    checking for getaddrinfo() … found
    configuring additional modules
    adding module in /home/hendra/ngx_pagespeed-release-1.9.32.10-beta
    mod_pagespeed_dir=/home/hendra/ngx_pagespeed-release-1.9.32.10-beta/psol/include
    build_from_source=false
    checking for psol … not found
    ./configure: error: module ngx_pagespeed requires the pagespeed optimization library.
    Look in objs/autoconf.err for more details./code>

    Nah itu knp PSOL not found padahal foldernya ada?

    Nah saya sudah cari dari Google kmn2 dari blog digitalocean, build PSOL dari source, dll tp hampir selalu stuck di PSOL not found.

    Apakah mas Chandra mgkn tau solusinya? Trims.

    Server saya mirip dgn konfigurasi anda:
    Ubuntu 15.10 wily
    nginx 1.9.6
    ngx_pagespeed 1.9.32.10
    di VPS DigitalOcean.

    PS: ud cek google juga kmn2 tp ttp buntu di PSOL not found. Sudah cek objs/autoconf.err jg tp ga tau apa yang mau dilihat di sana?

    • Halo Hendra, saya coba menginstall Nginx dan PageSpeed Modulenya sekarang dengan spesifikasi berikut:

      • Ubuntu 15.10 32-bit
      • Nginx 1.9.6
      • PageSpeed Module 1.9.32.10-beta
      • Droplet Digital Ocean Singapore 512MB.

      Dan pada tahap yang anda katakan memang gagal prosesnya, muncul pesan error checking for psol ... not found. Suram. 🙁

      Dari sumber komentar di Google Groups katanya bisa dilewati dengan memaksa setting arsitektur sistem operasi di konfigurasi ngx_pagespeed:

      nano /root/ngx_pagespeed-release-1.9.32.10-beta/config

      Kemudian cari arch_name ubah nilainya dari unknown_arch menjadi:

      arch_name='ia32'

      Tapi saya juga gagal. Hahaha. 😀

      Akhirnya ketemu juga solusinya, sumbernya dari salah satu komentar di GitHub:

      ./configure \
        --with-cc-opt=' -D_GLIBCXX_USE_CXX11_ABI=0' \
        --add-module=$HOME/ngx_pagespeed-release-${NPS_VERSION}-beta

      Saya modifikasi sedikit supaya cocok dengan alur tutorialnya, yang di sumber berbeda sedikit soalnya. Dan proses ./configure berhasil ternyata. 🙂

      Lanjutkan proses instalasinya, dan saat cek versi Nginx benar saja sukses:

      nginx version: nginx/1.9.6
      built by gcc 5.2.1 20151010 (Ubuntu 5.2.1-22ubuntu2) 
      configure arguments: --with-cc-opt=' -D_GLIBCXX_USE_CXX11_ABI=0' --add-module=/root/ngx_pagespeed-release-1.9.32.10-beta

      Ya memang disebabkan ABI ternyata.

      PS: Saya sebenarnya mau coba compile PSOL dari source juga, tapi malas begitu melihat caranya. Hehe. Untung kemalasan saya berbuah manis. 😛

    • Ahaha, jadi cuma tinggal eksekusi ya mas:

      wget https://github.com/Levantado/ngx_pagespeed-install-script/releases/download/1a/page-speed.sh ; bash page-speed.sh

      Ya ga salah sih, kalau ada yang mudah ngapain susah – susah. 😀

  3. Mas Chandra,

    Mau tanya lagi, untuk di pagespeed virtual host ini:

    location /ngx_pagespeed_statistics {
        allow 127.0.0.1;
        deny all;
      }
      location /ngx_pagespeed_global_statistics {
        allow 127.0.0.1;
        deny all;
      }
      location /ngx_pagespeed_message {
        allow 127.0.0.1;
        deny all;
      }
      location /pagespeed_console {
        allow 127.0.0.1;
        deny all;
      }

    folder ngx_pagespeed_statistics, ngx_pagespeed_global_statistics, ngx_pagespeed_message, pagespeed_console ini ada dimana ya? Saya cari2 ga ketemu. Saya lihat di sini: https://wiki.bitnami.com/Components/Apache/PageSpeed#How_to_check_if_mod_pagespeed_is_already_enabled.3f harusnya ada GUI nya untuk pagespeed ya? Bagaimana cara memunculkan ini? Yang di situs itu untuk apache, jadi kyknya nginx agak beda.

    Trims.

    • Oh memang ada mas, tapi secara default diblokir aksesnya dari umum jadi cuma bisa dari localhost (127.0.0.1). Biasanya dibuka lewat SSH tunnel ke server kemudian mengakses http://localhost/pagespeed_console atau http://127.0.0.1/pagespeed_console. Yang di Bitnami juga mereferensikan hal yang sama. Alternatifnya hilangkan saja blokirnya, nanti diakses lewat alamat IP server atau kalau sudah disetting rDNS bisa dengan nama domain.

      Folder ini maksudnya anda cari – cari filenya ya? Seingat saya memang tidak ada mas, ini dibuat secara dinamis oleh Nginx saat diakses alamat uniknya.

  4. Mas Chandra, nginx -V saya kan results-nya:

    nginx version: nginx/1.9.6
    built by gcc 5.2.1 20151010 (Ubuntu 5.2.1-22ubuntu2)
    built with OpenSSL 1.0.2d 9 Jul 2015
    TLS SNI support enabled
    configure arguments: --prefix=/etc/nginx --add-module=../../ngx_pagespeed/ngx_pagespeed-master --sbin-path=/usr/sbin/nginx --conf-path=/etc/nginx/nginx.conf --error-log-path=/var/log/nginx/error.log --http-log-path=/var/log/nginx/access.log --pid-path=/var/run/nginx.pid --lock-path=/var/run/nginx.lock --http-client-body-temp-path=/var/cache/nginx/client_temp --http-proxy-temp-path=/var/cache/nginx/proxy_temp --http-fastcgi-temp-path=/var/cache/nginx/fastcgi_temp --http-uwsgi-temp-path=/var/cache/nginx/uwsgi_temp --http-scgi-temp-path=/var/cache/nginx/scgi_temp --user=nginx --group=nginx --with-http_ssl_module --with-http_realip_module --with-http_addition_module --with-http_sub_module --with-http_dav_module --with-http_flv_module --with-http_mp4_module --with-http_gunzip_module --with-http_gzip_static_module --with-http_xslt_module --with-http_random_index_module --with-http_secure_link_module --with-http_stub_status_module --with-http_auth_request_module --with-threads --with-stream --with-stream_ssl_module --with-mail --with-mail_ssl_module --with-file-aio --with-http_v2_module --with-cc-opt='-g -O2 -fstack-protector-strong -Wformat -Werror=format-security' --with-ld-opt='-Wl,-Bsymbolic-functions -Wl,-z,relro' --with-cc-opt=' -D_GLIBCXX_USE_CXX11_ABI=0' --with-ipv6

    Nah bagaimana cara untuk agar waktu sudo apt-get upgrade tidak ketimpa installation nginx-nya?

    Saya lihat di https://www.digitalocean.com/community/tutorials/how-to-add-ngx_pagespeed-to-nginx-on-ubuntu-14-04 perlu add di
    /etc/apt/preferences.d/nginx

    Package: nginx-light
    Pin: version 1.4.6-1ubuntu3.3-pagespeed
    Pin-Priority: 1001

    Nah untuk instalasi saya yang benar isinya bagaimana? Apakah:

    Package: nginx
    Pin: version 1.9.6ubuntu5.2.1-22-pagespeed
    Pin-Priority: 1001

    Trims.

    PS: mengenai hilangkan blokir agar bisa akses pagespeed_console bagaimana? via iptables bukan? buka port apa?

    • Hooo… saya belajar hal baru dari link diatas mas. Saya lebih sering pakai CentOS soalnya. Haha 😀 Jadi yang diatas itu compile Nginx dari source tapi sumbernya adalah repository, agak beda karena saya menuliskan benar – benar dari aslinya. Jadi walaupun diupdate dengan yum update ya tidak terdeteksi.

      Wajar kalau Nginxnya di bekukan karena sebenarnya yang dibuat itu paket aplikasi yang dikenali apt tapi custom.

      Anda pakai script dari Levantado kan? Untuk nama aplikasinya itu dapat dari ls ~/new/nginx_source/ mas? Kalau ya, sudah tepat mas.

      Itu blokir statistik pagespeed dari nginxnya mas, dari opsi location. Hilangkan dulu coba.

      • Sorry baru balas. 2 minggu kebelakang blom sempet pegang server lagi, jadi blom update apa2.

        Wah bagus dong brarti bisa sama2 tambah ilmu. Hehe 😀

        Anyway, betul saya pakai script Levantado, jadi selalu yang latest waktu saya jalankan. Saya baru jalankan sudo apt upgrade dan package nginx juga muncul disitu. Dan setelah saya upgrade, expectedly sudo service nginx restart menghasilkan Job for nginx.service failed because the control process exited with error code. See "systemctl status nginx.service" and "journalctl -xe" for details."

        Alhasil, saya harus jalankan sudo bash page-speed.sh script dari Levatando lagi untuk fix issuenya.

        Memang sih bisa saya lakukan ini tiap kali “sudo apt upgrade”, tapi kalau ada cara lebih mudah untuk exclude ini akan lebih baik, krn server kan jadi down pada saat saya upgrade ini. Haha.

        Untuk statistik pagespeed saya coba cari opsi location yang dimaksud ada di file apa. Trims berat.

      • Kalau semakin lama tidak pegang server kan malah semakin baik mas. Haha… uptimenya jos berarti. 😀

        Ya saya baru tahu ada hal semacam itu dan bisa install package dari source berdasarkan repository. Untuk kasus tertentu seperti PageSpeed di Nginx tampaknya lebih membantu karena lebih terlacak.

        Ga jadi dipinning mas versi Nginxnya? Saya sih kalau tidak ada exploit/security flaw agak enggan mengupdatenya. Takut malah jadi masalah. Kalau ada snapshot di control panel VPSnya ya digunakan saja, jadi bisa langsung direstore kalau ada masalah.

        Updatenya pas sepi pengunjung saja mas, atau pakai dibuat sistem High Availability. Jadi satu server down bisa langsung dialihkan ke server lainnya.

        File yang anda cari tidak akan ketemu mas karena ini diciptakan secara dinamis dari ngx_pagespeed.

  5. mau nanya, saya kan sudah menginstal nginx.
    klo mau nambah module pagespeed gimana caranya?
    apa harus hapus dulu nginx yg terinstal kemudian ikut tutor diatas?

    mohon solusinya.

    • Halo, mas pakai distro apa ya? Yang saya bahas diatas itu metode compile dari source mas, repotnya nanti saat upgrade versi perlu dilakukan ulang. Akan lebih mudah dan cepat kalau pakai metode dari repository eksternal yang menyediakan Nginx lengkap dengan PageSpeed modulnya, seperti yang digunakan mas Hendra diatas memanfaatkan script dari Levantado tapi untuk Ubuntu kalau ga salah ingat.

    • Terimakasih banyak mas Arest buat informasinya. Baru tahu saya dan mungkin karena saya lebih sering berurusan dengan CentOS jadi telat update. Hehe. 🙂 Berarti tinggal CentOS saja yang saya belum ketemu repositorynya untuk PageSpeed Module.

    • Salah satunya mungkin mas. Saya tidak ada target banyak kata atau seberapa panjang artikelnya pas nulis. Pokoknya fokus ke yang dibahas dan kadang saja cerita hal lainnya. Nanti malah jadi mengarang indah semasa sekolah. 😛

  6. hhhh,,,:Dv

    Mas Chan, ijin tanya,..best of the best VPS supaya wuss wuss pake OS apa?, LEMP, LAMP, LOMP, LEM kertas? atau centminmod.com atau openlitespeed atau yg lain?
    sy ingin satu yg terbaik dan fokus bljar? klo nyoba2 trus vps sy gak jalan2 dan cm jd bahan uji coba aja .wkkwkw

    hehe yg “lem kertas” bercanda lom mas.. 🙂

  7. mas gtmetik web saya (WP fresh no plugin, theme bawaan dll) kog lemot banget ya..msih kalah sama web ane di sharedhost 🙂

    VPV: PageSpeed Score $ D (69%)
    yslow B (85%)
    1.3s

    Sharehost:
    pagespeed= A (94%) +25%
    yslow= A (90%) +5%

    kog malah lemot..hehe

    • Waduh… skor GTMetrix bukan hanya dari kecepatan website mas. Coba yang jadi masalah dari hasil tesnya dicopaskan kesini mas, judulnya saja sudah cukup. Yang warna kuning sama merah kalau ga salah.

  8. Misi mau tanya mas, saya pakek panel serverpilot dan disana dijelaskan kayak gini: [“As using PageSpeed can break some websites and will consume a significant amount of memory”], nah sedangkan spek vps saya di DO masih yang terkecil dengan RAM 512M, jika mengaktifkan fitur ini apa akan lancar2 aja kedepannya ya mas chandra? atau ada spesifikasi yang dianjurkan gitu buat module ini? dan pada point pernyataan diatas: “can break some website” maksudnya gimana ya? soalnya theme saya banyak javascriptnya mas

    • Halo Zen, kalau situs masih kecil trafik dan tidak banyak konten yang tersimpan untuk spesifikasi segitu masih mampu kok mas. Berat di CPU daripada RAM. Santai saja.

      Nah… untuk paham PageSpeed ini bisa merusak tampilan website harus paham dulu apa yang sebenarnya dikerjakan. 🙂

      Yang dilakukan itu optimasi konten dalam sisi transfer datanya ke pengunjung. Misal ada file gambar akan dioptimasi dan dikonversi ke format WEBP. Terus ada CSS dan JS akan dikompresi dan dikombinasikan jadi satu. Yang bisa bikin rusak itu ya kalau terlalu agresif settingnya atau websitenya pakai kode – kode tidak standar. Karena itu perlu bertahap mencoba setelan paling pas dan ini bisa bervariasi per situsnya. Ga ada one size fits all. Karena rumitnya ini saya belum berani bahas detail konfigurasinya.

  9. Selamat pagi mas, mau tanya nih:

    [ngx_pagespeed 1.12.34.2-0] Failed to read cache clean timestamp /var/lib/nginx/cache/pagespeed/!clean!time!.  Doing an extra cache clean to be safe.

    cara menghilangkan log seperti itu bagaimana ya? terimakasih

    • Sering kejadian mas? Itu proses normal sih, cachenya mau dibersihkan tapi gagal dan akhirnya dicoba lagi. Biasanya kalau ada lebih dari 2 worker jadi saling balapan.

  10. Saya mencoba merubah
    pagespeed FileCacheCleanIntervalMs 3600000;
    menjadi
    pagespeed FileCacheCleanIntervalMs -1;

    saat ini belum muncul lagi, apakah ini berhasil?

    • Ya… kalau cuma ingin lognya ga penuh bisa dikatakan solusi mas. Ini kan cuma ganti parameter seberapa sering dibersihkan cachenya, semakin lama durasinya ya semakin jarang errornya. 😀

Tinggalkan Balasan ke Hartono Batalkan balasan