• Beranda
  • Artikel
  • Umum
  • Cara Mempercepat WordPress Memanfaatkan Caching Browser melalui .htaccess

Cara Mempercepat WordPress Memanfaatkan Caching Browser melalui .htaccess

Diterbitkan: 2017-08-04

Percepat Caching Peramban Memanfaatkan WordPress melalui .htaccess

Manfaatkan cache browser untuk membuat halaman web Anda lebih cepat. Jika Anda dapat memanfaatkan caching browser , Anda dapat meningkatkan kecepatan situs web secara signifikan. Saat Google mulai mempertimbangkan kecepatan situs sebagai parameter SEO, webmaster dapat memanfaatkan cache browser untuk meningkatkan kecepatan situs dan mendapatkan peringkat mesin pencari yang lebih baik.

Berikut adalah file .htaccess lengkap yang kami miliki di folder root Crunchify.

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
######### CRUNCHIFY SETTING - START  ##########
Options All - Indexes
 
# Disable ETags
< IfModule mod_headers . c >
Header unset ETag
     Header set Connection keep - alive
< / IfModule >
FileETag None
 
############## MaxCDN Fix #############
< IfModule mod_headers . c >
   < FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$" >
     Header set Access - Control - Allow - Origin "*"
   < / FilesMatch >
< / IfModule >
 
########### REDIRECT TRAFFIC TO HTTPS ############
# RewriteEngine On
# RewriteCond %{HTTPS} off
# RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
 
############ SECURITY ###########
< FilesMatch "\.(md|exe|sh|bak|inc|pot|po|mo|log|sql)$" >
Order allow , deny
Deny from all
< / FilesMatch >
 
< Files robots . txt >
Allow from all
< / Files >
 
############## CACHING-GZIP ############
< IfModule mod_expires . c >
ExpiresActive On
ExpiresDefault A2592000
 
< FilesMatch "\.(txt|xml|js)$" >
ExpiresDefault A2592000
< / FilesMatch >
 
< FilesMatch "\.(css)$" >
ExpiresDefault A2592000
< / FilesMatch >
 
< FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|ogg|webm|aac)$" >
ExpiresDefault A2592000
< / FilesMatch >
 
< FilesMatch "\.(jpg|jpeg|png|gif|swf|webp)$" >
ExpiresDefault A2592000
< / FilesMatch >
< / IfModule >
 
< IfModule mod_headers . c >
   < FilesMatch "\.(txt|xml|js)$" >
   Header set Cache - Control "max-age=2592000"
   < / FilesMatch >
 
   < FilesMatch "\.(css)$" >
   Header set Cache - Control "max-age=2592000"
   < / FilesMatch >
 
   < FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|ogg|webm|aac)$" >
   Header set Cache - Control "max-age=2592000"
   < / FilesMatch >
 
   < FilesMatch "\.(jpg|jpeg|png|gif|swf|webp)$" >
   Header set Cache - Control "max-age=2592000"
   < / FilesMatch >
< / IfModule >
 
< IfModule mod_deflate . c >
     < IfModule mod_setenvif . c >
         < IfModule mod_headers . c >
             SetEnvIfNoCase ^ ( Accept - EncodXng | X - cept - Encoding | X { 15 } | ~ { 15 } | - { 15 } ) $ ^ ( ( gzip | deflate ) \ s* , ? \ s* ) + | [ X ~ - ] { 4 , 13 } $ HAVE_Accept - Encoding
             RequestHeader append Accept - Encoding "gzip,deflate" env = HAVE_Accept - Encoding
         < / IfModule >
     < / IfModule >
     < IfModule mod_filter . c >
         AddOutputFilterByType DEFLATE "application/atom+xml" \
                                       "application/javascript" \
                                       "application/json" \
                                       "application/ld+json" \
                                       "application/manifest+json" \
                                       "application/rdf+xml" \
                                       "application/rss+xml" \
                                       "application/schema+json" \
                                       "application/vnd.geo+json" \
                                       "application/vnd.ms-fontobject" \
                                       "application/x-font-ttf" \
                                       "application/x-javascript" \
                                       "application/x-web-app-manifest+json" \
                                       "application/xhtml+xml" \
                                       "application/xml" \
                                       "font/eot" \
                                       "font/opentype" \
                                       "image/bmp" \
                                       "image/svg+xml" \
                                       "image/vnd.microsoft.icon" \
                                       "image/x-icon" \
                                       "text/cache-manifest" \
                                       "text/css" \
                                       "text/html" \
                                       "text/javascript" \
                                       "text/plain" \
                                       "text/vcard" \
                                       "text/vnd.rim.location.xloc" \
                                       "text/vtt" \
                                       "text/x-component" \
                                       "text/x-cross-domain-policy" \
                                       "text/xml"
 
     < / IfModule >
     < IfModule mod_mime . c >
         AddEncoding gzip               svgz
     < / IfModule >
 
< / IfModule >
######### CRUNCHIFY SETTING END ############
 
# BEGIN WordPress
< IfModule mod_rewrite . c >
RewriteEngine On
RewriteBase /
RewriteRule ^ index \ . php $ - [ L ]
RewriteCond % { REQUEST_FILENAME } ! - f
RewriteCond % { REQUEST_FILENAME } ! - d
RewriteRule . / index . php [ L ]
< / IfModule >
 
# END WordPress

CATATAN : Harap hapus pengalihan ke blok HTTPS jika Anda tidak menggunakan HTTPS :). Padahal saya sudah berkomentar. Jika Anda telah mengaktifkan HTTPS di situs dan Anda masih mengizinkan pengguna mengunjungi situs melalui HTTP, maka Anda baik-baik saja.

Mari kita pahami setiap Bagian dari file .htaccess:

Langkah-1 Menyingkirkan ETag

Pertama-tama, kita perlu disable ETag header karena kita akan menggunakan durasi Expires. Teknologi ETag dikenal lambat dan bermasalah – bahkan situs peringkat teratas lainnya mengeluhkannya.

Tambahkan ke .htaccess : (terletak di lokasi root blog)

.htaccess
1
2
3
4
5
6
# Disable ETags
< IfModule mod_headers . c >
Header unset ETag
         Header set Connection keep - alive
< / IfModule >
FileETag None

Kami juga menjaga koneksi keep-alive . Ini disebut persistent connection . Jika koneksi baru harus dibuka untuk setiap permintaan atau file, itu bisa memakan waktu lebih lama.

Lainnya harus membaca:

  • 5 Trik Berguna Untuk Mempercepat WordPress & Meningkatkan Kinerja
  • 9 sumber daya WordPress penting yang mungkin Anda lewatkan

Langkah-2 Aktifkan cache browser

Jika Anda menetapkan tanggal kedaluwarsa atau usia maksimum di header HTTP untuk sumber daya statis, browser modern akan memuat sumber daya statis yang diunduh sebelumnya seperti gambar, css, javascript, pdf, swf, dll. dari disk lokal, bukan melalui jaringan.

Jadi, jika Anda mengonfigurasi server web untuk menyetel header caching dan menerapkannya ke semua sumber daya statis yang dapat di-cache, situs Anda akan tampak memuat lebih cepat. Tambahkan di bawah ini ke .htaccess

.htaccess file
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
< IfModule mod_expires . c >
ExpiresActive On
ExpiresDefault A2592000
 
< FilesMatch "\.(txt|xml|js)$" >
ExpiresDefault A2592000
< / FilesMatch >
 
< FilesMatch "\.(css)$" >
ExpiresDefault A2592000
< / FilesMatch >
 
< FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|ogg|webm|aac)$" >
ExpiresDefault A2592000
< / FilesMatch >
 
< FilesMatch "\.(jpg|jpeg|png|gif|swf|webp)$" >
ExpiresDefault A2592000
< / FilesMatch >
< / IfModule >
 
< IfModule mod_headers . c >
   < FilesMatch "\.(txt|xml|js)$" >
   Header set Cache - Control "max-age=2592000"
   < / FilesMatch >
 
   < FilesMatch "\.(css)$" >
   Header set Cache - Control "max-age=2592000"
   < / FilesMatch >
 
   < FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|ogg|webm|aac)$" >
   Header set Cache - Control "max-age=2592000"
   < / FilesMatch >
 
   < FilesMatch "\.(jpg|jpeg|png|gif|swf|webp)$" >
   Header set Cache - Control "max-age=2592000"
   < / FilesMatch >
< / IfModule >

Apa yang dilakukan adalah menambahkan tajuk kedaluwarsa yang jauh di masa depan (pastikan mod_expires dimuat di konfigurasi Apache Anda jika Anda memiliki masalah) ke konten statis Anda (gambar, js, css, dll).

Dua hal di sini:

  • ExpiresDefault A2592000 = 1 bulan ke depan
  • Kontrol Tembolok “umur maksimal = 2592000” = 1 bulan

Jika Anda suka, Anda juga dapat menetapkan nilai menjadi 1 Tahun = 31536000

Langkah-3 Tambahkan gzip dan kempiskan header kompresi

Mengompresi sesuatu selalu berakhir dengan membuatnya lebih kecil dan memuat lebih cepat, jadi menerapkan beberapa bentuk kompresi pada komponen Anda adalah suatu keharusan.

Langkah pengoptimalan ini mungkin tidak bekerja untuk Anda jika server Anda tidak menginstal mod_deflate atau mod_gzip sebagai bagian dari Apache.

Pada dasarnya kami mengompresi sebagian besar sumber daya sehingga memuat dengan bandwidth lebih sedikit dan sangat cepat.

mod_gzip setting in .htaccess
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 mod_deflate . c >
     < IfModule mod_setenvif . c >
         < IfModule mod_headers . c >
             SetEnvIfNoCase ^ ( Accept - EncodXng | X - cept - Encoding | X { 15 } | ~ { 15 } | - { 15 } ) $ ^ ( ( gzip | deflate ) \ s* , ? \ s* ) + | [ X ~ - ] { 4 , 13 } $ HAVE_Accept - Encoding
             RequestHeader append Accept - Encoding "gzip,deflate" env = HAVE_Accept - Encoding
         < / IfModule >
     < / IfModule >
     < IfModule mod_filter . c >
         AddOutputFilterByType DEFLATE "application/atom+xml" \
                                       "application/javascript" \
                                       "application/json" \
                                       "application/ld+json" \
                                       "application/manifest+json" \
                                       "application/rdf+xml" \
                                       "application/rss+xml" \
                                       "application/schema+json" \
                                       "application/vnd.geo+json" \
                                       "application/vnd.ms-fontobject" \
                                       "application/x-font-ttf" \
                                       "application/x-javascript" \
                                       "application/x-web-app-manifest+json" \
                                       "application/xhtml+xml" \
                                       "application/xml" \
                                       "font/eot" \
                                       "font/opentype" \
                                       "image/bmp" \
                                       "image/svg+xml" \
                                       "image/vnd.microsoft.icon" \
                                       "image/x-icon" \
                                       "text/cache-manifest" \
                                       "text/css" \
                                       "text/html" \
                                       "text/javascript" \
                                       "text/plain" \
                                       "text/vcard" \
                                       "text/vnd.rim.location.xloc" \
                                       "text/vtt" \
                                       "text/x-component" \
                                       "text/x-cross-domain-policy" \
                                       "text/xml"
 
     < / IfModule >
     < IfModule mod_mime . c >
         AddEncoding gzip               svgz
     < / IfModule >
 
< / IfModule >

Langkah-4 Verifikasi apakah pengaturan Anda berfungsi dengan benar

Lihat tangkapan layar di bawah ini. Anda akan melihat semua parameter diatur di header respons file Anda.

Header Usia Maksimum dan Kedaluwarsa Cache untuk Sumber Daya WordPress

Lihat aturan htaccess untuk Proses Percepatan WordPress

Pertanyaan terbuka: Dapatkah saya mengubah tanggal kedaluwarsa beberapa sumber daya seperti skrip Google Adsense atau skrip Google Analytics?

  • https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
  • https://www.google-analytics.com/analytics.js

Answer is NO . Anda hanya dapat menetapkan nilai kedaluwarsa sumber daya yang dimuat dari situs Anda.