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
- 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.
- 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.
- 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.
- 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 "https://www.rumahweb.com/#!# 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/nullKonfigurasi 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 nginxPengujian 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:
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 Keamanan
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.
Demikian artikel kami tentang config WP Rocket dan Nginx untuk optimasi WordPress, semoga bermanfaat.
