Rumahweb Journal
Banner - Config WP Rocket dan Nginx Untuk Optimasi WordPress

Config WP Rocket dan Nginx Untuk Optimasi WordPress

Terdapat berbagai metode untuk meningkatkan kecepatan muatan website yang menggunakan WordPress. Salah satunya adalah dengan mengkonfigurasi WP Rocket dan Nginx pada server. Artikel ini akan membagikan cara konfigurasi plugin WP Rocket bersama dengan server web Nginx untuk mempercepat kecepatan muatan website Anda.

Seperti yang telah kita ketahui, Nginx adalah server web berlisensi open-source yang memiliki beragam fungsi, di antaranya adalah penggunaannya sebagai proxy. Server web Nginx terkenal karena kestabilannya, kinerja yang tinggi, serta penggunaan sumber daya yang minim.

Nginx juga memiliki fitur seperti reverse proxy multiple protocols (HTTP, Memcached, PHP-FPM, SCGI, uWSGI), Stream HTTP video (FLV, HDS, HLS, MP4) serta HTTP/2 gateway. Selengkapnya tentang nginx klik disini

Kilas Balik Nginx

Nginx adalah salah satu server web yang dapat disesuaikan (customizable), baik dalam hal konfigurasi, aturan (rules), maupun dalam skrip Nginx yang dapat diintegrasikan dengan skrip add-on buatan sendiri. Saat ini, terdapat berbagai jenis build dari Nginx seperti nginx-modsec (firewall), Ngx-Rocket, Openresty, LuaJT, dan lainnya.

Bahkan, Nginx saat ini sering digunakan oleh layanan besar seperti CloudFlare & AWS untuk membuat server Proxy+CDN utama. Hal ini disebabkan oleh kemampuan Nginx yang dapat disesuaikan serta tidak terbatas dalam pengembangan.

Mengapa Nginx perlu di custom?

Tidak dapat dipungkiri, bahwa Nginx adalah salah satu web server terbaik saat ini. Dengan konfigurasi yang tepat, Nginx mampu menawarkan kinerja yang tinggi, kestabilan, dengan tingkat keamanan yang baik. Namun, Nginx memiliki kelemahan dengan tidak mendukung fitur .htaccess. Oleh karena itu, diperlukan optimasi khusus pada Nginx.

Bagi pengguna WordPress dan khususnya pelanggan Rumahweb, plugin WP Rocket mungkin tidak asing lagi bagi Anda. WP Rocket adalah plugin cache terbaik saat ini. Plugin ini dapat dengan mudah dipasang pada web server Apache dan Litespeed karena kedua jenis web server tersebut mendukung penggunaan .htaccess. Berbeda halnya dengan Nginx yang memerlukan Nginx-Rocket untuk pengaturannya.

Mengenal WP Rocket dan Nginx

WP Rocket dan Nginx yang kemudian akan kami singkat menjadi Nginx-Rocket. Nginx-Rocket adalah kombinasi tepat dari Web server Nginx dan Plugin WP Rocket, untuk mengoptimalkan website berbasis WordPress agar dapat berjalan secara lebih cepat.

Fungsi Nginx-Rocket tidak hanya terbatas pada peningkatan kecepatan akses, melainkan juga untuk menangani beban permintaan yang tinggi dengan memanfaatkan sistem Cache.

Analogi Nginx Rocket

Secara default, apabila kita memiliki WordPress yang berjalan menggunakan Apache/Litespeed, Per Request akan berjalan sebagai berikut :

Apache/Litespeed -> .htaccess -> PHP-FPM -> WordPress -> WP Rocket -> Cache WP Rocket

Namun apabila menggunakan WP Rocket dan Nginx, maka tiap request dari user akan diproses sebagai berikut : 

Nginx -> Cache Wp Rocket

Nginx Rocket akan beroperasi dengan lebih cepat karena setiap permintaan (request) akses tidak harus melewati PHP. Sebaliknya, Nginx akan secara langsung melayani permintaan dengan memanfaatkan cache yang telah tersimpan.

Manfaat Nginx-Rocket

  1. Kinerja Tinggi : Nginx Rocket dirancang untuk kinerja tinggi, dan penggunaan caching akan sangat membantu server mengirimkan konten yang sudah disimpan dalam cache dengan cepat, untuk mengurangi load pada sebuah website.
  2. Penyimpanan Cache : Nginx Rocket akan menyimpan semua file cache, termasuk html, css, dan js. Hal Ini akan sangat membantu apabila ada pengunjung baru yang mengakses website, tanpa harus melakukan request ke backend, nginx akan otomatis mengambil berkas cache dari wprocket.
  3. Mengurangi Beban : Nginx rocket dapat mengurangi beban server 70% lebih ringan, dikarenakan Nginx tidak perlu menjalankan banyak proses seperti php untuk menampilkan konten, dikarenakan semua request ditangani secara langsung oleh Wp rocket.
  4. Konfigurasi Cache : Nginx Rocket menyediakan banyak opsi konfigurasi untuk mengatur caching sesuai kebutuhan.(Fleksibel)

Cara Install Nginx-Rocket

Nginx Rocket telah dicoba dan dapat stabil pada nginx versi terbaru dan os berbasis debian, yaitu Debian 11 (bullseye) dan Ubuntu 20.04 LTS.

Pada panduan kali ini, kami akan melakukan config WP Rocket dan Nginx pada server Nginx versi 1.11.3 dengan OS Ubuntu 20.04 LTS.

Persiapan Sistem

Dalam artikel ini, kami menggunakan layanan VPS KVM dari Rumahweb. Berikut persiapan yang dibutuhkan untuk melakukan konfigurasi Plugin WP Rocket dan Nginx dalam panduan ini.

  • VPS KVM dengan paket S/M
  • OS Ubuntu 20.04
  • LEMP Stack 
  • Script Rocket-Nginx

Note : LEMP stack adalah package installasi Linux, Nginx, Mariadb, dan PHP. Pada panduan kali ini silahkan melakukan installasi package Nginx, Mariadb, dan PHP untuk kebutuhan wordpress, karena pada panduan kali ini hanya berfokus pada sisi Nginx.

Konfigurasi Nginx

Agar nging berjalan secara optimal, maka diperlukan konfigurasi khusus pada config Nginx, edit pada file /etc/nginx/nginx.conf sebagai berikut

user www-data;
worker_processes auto;
pid /run/nginx.pid;
worker_rlimit_nofile 100000;     #Sesuaikan sesuai RAM
include /etc/nginx/modules-enabled/*.conf;
events {
        worker_connections 80920; #Sesuaikan RAM
        multi_accept on;
        use epoll;
}

http {
       #Konfig Custom
       set_real_ip_from 127.0.0.1;
       real_ip_header X-Forwarded-For;
       open_file_cache max=29100 inactive=20s;
       open_file_cache_valid 35s;
       open_file_cache_min_uses 2;
       open_file_cache_errors on;
          # buffers
       fastcgi_buffer_size 128k;
       fastcgi_buffers 256 16k;
       fastcgi_busy_buffers_size 256k;
       fastcgi_temp_file_write_size 256k;
       proxy_buffer_size   128k; 
       proxy_buffers   4 256k;
       proxy_busy_buffers_size   256k;
       fastcgi_read_timeout 150;

#      fastcgi_cache_path /var/cache/nginx/fastcgi_cache levels=1:2 keys_zone=fastcgi_cache:16m max_size=256m inactive=1d;

#      fastcgi_temp_path /var/cache/nginx/fastcgi_temp 1 2;
        #limit ddos attack
        limit_conn_zone $binary_remote_addr zone=perip:10m;
        limit_conn perip 30;
        limit_req_zone $binary_remote_addr zone=engine:10m rate=2r/s;
        limit_req_zone $binary_remote_addr zone=static:10m rate=100r/s;

        #Konfigurasi Header
        sendfile on;
        tcp_nopush on;
        tcp_nodelay on;
        keepalive_timeout 65;
        types_hash_max_size 2048;
        server_tokens off;
        include /etc/nginx/mime.types;
        default_type application/octet-stream;
        server_names_hash_bucket_size 64;
        server_names_hash_max_size 4096;

        ##
        # Setting untuk ssl
        ##

        ssl_protocols TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
        ssl_prefer_server_ciphers on;

        ##
        # Logging Akses
        ##

        access_log /var/log/nginx/access.log;
        error_log /var/log/nginx/error.log;
        log_format custom '$remote_addr - $remote_user [$time_local] '
             '"$request" $status $body_bytes_sent '
             '"$http_referer" "$http_user_agent""$gzip_ratio"';

        ##
        # Konfigurasi Gzip
        ##

        gzip on;
        gzip_min_length 10240;
        gzip_comp_level 5;
        gzip_vary on;
        gzip_disable msie6;
        gzip_proxied any;
        gzip_types

        # Kompresi Untuk Gzip

        text/css
        text/javascript
        text/xml
        text/plain
        text/x-component
        application/javascript
        application/x-javascript
        application/json
        application/xml
        application/rss+xml
        application/atom+xml
        font/truetype
        font/opentype
        application/vnd.ms-fontobject
        image/svg+xml;

        ##
        # Virtual Host 
        ##

        reset_timedout_connection on;
        client_body_buffer_size 10K;
        client_header_buffer_size 1k;
        client_max_body_size 8m;
        large_client_header_buffers 4 4k;
        client_body_timeout 10;
        client_header_timeout 10;
        send_timeout 8;
        keepalive_requests 100000;
        include /etc/nginx/conf.d/*.conf;
        include /etc/nginx/sites-enabled/*;
}

Konfigurasi Nginx-rocket

Tambahkan konfigurasi rocket nginx yang telah dicustom sebaga berikut, buat file bernama /etc/nginx/conf.d/rocket-nginx.conf

# Version 3.0.0
####################################################################################################

# menambahkan debug pada header

set $rocket_debug #!# DEBUG #!#;

###################################################################################################

# jangan mengubah config ini

#

set $rocket_bypass          1;
set $rocket_encryption      "";     
set $rocket_file            "";     
set $rocket_is_bypassed     "MISS";
set $rocket_reason          "";     
set $rocket_https_prefix    "";
set $rocket_has_query_cache 0;
set $rocket_is_https        0;
set $rocket_support_webp    0;
set $rocket_dynamic         "";

###################################################################################################

# PAGE CACHE
#
#!# INCLUDE_START #!#

# Define Rocket-Nginx $is_args

set $rocket_is_args $is_args;
set $rocket_uri_path "";
if ($request_uri ~ "^([^?]*)(\?.*)?$") {
set $rocket_uri_path $1;
}

# Is GZIP accepted by client ?
if ($http_accept_encoding ~ gzip) {
set $rocket_encryption "_gzip";
}

# Is Brotli accepted by client ?
if ($http_accept_encoding ~ br) {
set $rocket_encryption "";
}

# Is HTTPS request ?

if ($https = "on") { set $rocket_is_https 1; }
if ($http_x_forwarded_proto = "https") { set $rocket_is_https 1; }
if ($http_front_end_https = "on") { set $rocket_is_https 1; }
if ($http_x_forwarded_protocol = "https") { set $rocket_is_https 1; }
if ($http_x_forwarded_ssl = "on") { set $rocket_is_https 1; }
if ($http_x_url_scheme = "https") { set $rocket_is_https 1; }
if ($http_forwarded ~ /proto=https/) { set $rocket_is_https 1; }
if ($rocket_is_https = "1") {
set $rocket_https_prefix "-https";
}

# cek apakah support webp

if ($http_accept ~* "webp") {
set $rocket_support_webp "1";
}

# deteksi mobile cache
set $rocket_mobile_detection "$document_root/#!# WP_CONTENT_URI #!#/cache/wp-rocket/$http_host/$request_uri/.mobile-active";

#!# QUERY_STRING_IGNORE #!#

if ($rocket_args = "") {
set $rocket_is_args "";
}

# Query string cache
set $rocket_file_start "index$rocket_https_prefix";
set $rocket_pre_url "/#!# WP_CONTENT_URI #!#/cache/wp-rocket/$http_host/$rocket_uri_path/$rocket_args/";
set $rocket_pre_file "$document_root/#!# WP_CONTENT_URI #!#/cache/wp-rocket/$http_host/$rocket_uri_path/$rocket_args/";

# Standard cache file format
set $rocket_url "$rocket_pre_url$rocket_file_start$rocket_dynamic.html";
set $rocket_file "$rocket_pre_file$rocket_file_start$rocket_dynamic.html";

# cek paramater gzip

if (-f "$rocket_file$rocket_encryption") {
set $rocket_file "$rocket_file$rocket_encryption";
set $rocket_url  "$rocket_url$rocket_encryption";
}

if (!-f "$rocket_file") {
set $rocket_bypass 0;
set $rocket_is_bypassed "MISS";
set $rocket_reason "File not cached";

}

if ($request_method = POST) {
set $rocket_bypass 0;
set $rocket_is_bypassed "BYPASS";
set $rocket_reason "POST request";

}

if ($rocket_is_args) {
set $rocket_bypass 0;
set $rocket_is_bypassed "BYPASS";
set $rocket_reason "Arguments found";
}

if (-f "$document_root/.maintenance") {
set $rocket_bypass 0;
set $rocket_is_bypassed "BYPASS";
set $rocket_reason "Maintenance mode";
}

# nonaktif bypass ketika ada cookie

if ($http_cookie ~* "(#!# COOKIE_INVALIDATE #!#)") {
set $rocket_bypass 0;
set $rocket_is_bypassed "BYPASS";
set $rocket_reason "Cookie";
}

if (-f "$rocket_mobile_detection") {
set $rocket_bypass 0;
set $rocket_is_bypassed "BYPASS";
set $rocket_reason "Specific mobile cache activated";
}

# ketika bypass, cache diaktifkan

if ($rocket_bypass = 1) {
set $rocket_is_bypassed "HIT";
set $rocket_reason "$rocket_url";
}

# membersihkan variabel debug

if ($rocket_debug = 0) {
set $rocket_reason "";
set $rocket_file "";
}

if ($rocket_bypass = 1) {
rewrite .* "$rocket_url" last;
}

# menambahkan header

location ~ /#!# WP_CONTENT_URI #!#/cache/wp-rocket/.*html$ {
etag on;
add_header Vary "Accept-Encoding, Cookie";
add_header Cache-Control "#!# HTML_CACHE_CONTROL #!#";
add_header X-Rocket-Nginx-Serving-Static $rocket_is_bypassed;
add_header X-Rocket-Nginx-Reason $rocket_reason;
add_header X-Rocket-Nginx-File $rocket_file;

#!# INCLUDE_GLOBAL #!#

#!# INCLUDE_HTTP #!#

}

# untuk konfig gzip, dialhkan ke gzip

location ~ /#!# WP_CONTENT_URI #!#/cache/wp-rocket/.*_gzip$ {
etag on;
gzip off;
types {}
default_type text/html;
add_header Content-Encoding gzip;
add_header Vary "Accept-Encoding, Cookie";
add_header Cache-Control "#!# HTML_CACHE_CONTROL #!#";
add_header X-Rocket-Nginx-Serving-Static $rocket_is_bypassed;
add_header X-Rocket-Nginx-Reason $rocket_reason;
add_header X-Rocket-Nginx-File $rocket_file;
#!# INCLUDE_GLOBAL #!#

#!# INCLUDE_HTTP #!#

}

# Debug header wp

add_header X-Rocket-Nginx-Serving-Static $rocket_is_bypassed;
add_header X-Rocket-Nginx-Reason $rocket_reason;
add_header X-Rocket-Nginx-File $rocket_file;

#!# INCLUDE_GLOBAL #!#

###################################################################################################

# BROWSER CSS CACHE

#

location ~* \.css$ {

etag on;
gzip_vary on;
expires #!# CSS_EXPIRATION #!#;

#!# INCLUDE_GLOBAL #!#
#!# INCLUDE_CSS #!#

}

###################################################################################################

# BROWSER JS CACHE
#

location ~* \.js$ {
etag on;
gzip_vary on;
expires #!# JS_EXPIRATION #!#;

#!# INCLUDE_GLOBAL #!#

#!# INCLUDE_JS #!#

}

###################################################################################################

# BROWSER MEDIA CACHE
#

location ~* \.(#!# MEDIA_EXTENSIONS #!#)$ {
etag on;
expires #!# MEDIA_EXPIRATION #!#;

#!# INCLUDE_GLOBAL #!#
#!# INCLUDE_MEDIA #!#
}

Setelah menyertakan skrip rocket nginx, langkah selanjutnya adalah menonaktifkan cron bawaan dari WordPress. Cron tersebut akan digantikan oleh cron Nginx Rocket untuk melakukan pra-load cache agar selalu tersedia.

Tambahkan script berikut pada wp-config.php

define( 'DISABLE_WP_CRON', true );

Setelah ditambahkan, buat cron secara manual pada crontab -e

*/15 * * * * wget -q -O - http://www.namadomain.com/wp-cron.php?doing_wp_cron &>/dev/null

Konfigurasi Virtualhost

Setelah menambahkan konfigurasi nginx rocket, langkah selanjutnya adalah menyertakan konfigurasi nginx rocket pada virtualhost domain WordPress, dengan menambahkan include pada lokasi config nginx rocket sebelumya.

Contoh : tambahkan pada listen 80/443 agar file rocket nginx dapat di load dengan baik.

server {

        listen 80;
        listen [::]:80;
        root /var/www/domain.com/html;
        index index.html index.htm;
        server_name namadomain.com www.namadomain.com;
        location / {
                try_files $uri $uri/ =404;
        }

    include /etc/nginx/conf.d/rocket-nginx.conf
}

Apabila konfigurasi telah ditambahkan, restart konfigurasi nginx dengan perintah:

systemctl restart nginx

Pengujian Nginx Rocket

Pada tutorial ini, kami menggunakan contoh domain cloudproxy.eepisat.net. Untuk melakukan pengujian Nginx-Rocket pada domain yang kami setting, kami akan melakukan perintah CURL -i. Berikut adalah contoh gambarnya:

curl test header - pengujian wp rocket dan nginx

Pastikan pada header muncul X-Rocket-Nginx

  • X-Rocket-Nginx-Serving-Static : Apakah konfigurasi menyajikan file cache secara langsung : HIT, MISS, BYPASS. Ini akan menambahkan header berikut ke permintaan respons:
  • X-Rocket-Nginx-Reason : Jika hit maka Nginx rocket berhasil dijalankan dan berhasil preload
  • X-Rocket-Nginx-Bypass : Jika Yes maka nginx berjalan secara langsung mengambil cache statis wp rocket tanpa melewati php

Pengujian dengan Pagespeed

Pengujian dengan Pagespeed Nginx-Rocket

Pengujian Keamanan

Pengujian Keamanan - Nginx-Rocket

Nginx Rocket dapat melakukan modifikasi header, dengan menambahkan rekomendasi keamanan untuk wordpress, hal ini sangat bermanfaat apabila memiliki wordpress yang cukup rentan dan tidak sepenuhnya mengerti mengenai keamanan, nginx rocket akan membantu anda melakukan penyesuaian keamanan.

Pengujian TTFB

TTFB adalah singkatan dari “Time To First Byte” (Waktu Hingga Byte Pertama). Ini adalah metrik kinerja yang mengukur waktu yang dibutuhkan oleh server web untuk mengirim byte pertama dari tanggapan ke browser pengguna setelah permintaan HTTP pertama dikirimkan.

TTFB adalah komponen penting dalam pengukuran kinerja situs web atau aplikasi web, karena itu adalah indikasi awal seberapa cepat situs akan merespons terhadap permintaan pengguna.

TTFB diukur dalam milidetik (ms) dan semakin rendah nilainya, semakin cepat respons situs web. Namun, standar minimal TTFB yang dapat diterima dapat bervariasi tergantung pada jenis situs web atau aplikasi, tingkat lalu lintas, dan jenis konten yang dihadirkan. Idealnya, TTFB sebaiknya kurang dari 100ms untuk memberikan pengalaman yang sangat responsif. Namun, dalam situasi praktis, TTFB di bawah 200-300ms sering dianggap baik.

Apabila dilihat dari TTFB, memiliki skor yang sangat rendah, yaitu 0,09 ms, yaitu menandakan bahwa website merespon dengan “sangat” cepat.

Ujicoba TTFB

Demikian artikel kami tentang config WP Rocket dan Nginx untuk optimasi WordPress, semoga bermanfaat.

Bermanfaatkah Artikel Ini?

Klik bintang 5 untuk rating!

Rating rata-rata 5 / 5. Vote count: 2

Belum ada vote hingga saat ini!

Kami mohon maaf artikel ini kurang berguna untuk Anda!

Mari kita perbaiki artikel ini!

Beri tahu kami bagaimana kami dapat meningkatkan artikel ini?

Jasa Pembuatan Website Rumahweb

Andika Dwi Setyawan

Dika is a System Administrator, passionate about Linux, Networking, Cyber security and much love with Arista.