วิธีเพิ่มความเร็ว WordPress ใช้ประโยชน์จากการแคชเบราว์เซอร์ผ่าน .htaccess

เผยแพร่แล้ว: 2017-08-04

เร่งความเร็ว WordPress ใช้ประโยชน์จากการแคชเบราว์เซอร์ผ่าน .htaccess

ใช้ประโยชน์จากการแคชของเบราว์เซอร์เพื่อทำให้หน้าเว็บของคุณเร็วขึ้น หากคุณสามารถ ใช้การแคชของเบราว์เซอร์ คุณสามารถเพิ่มความเร็วของเว็บไซต์ได้อย่างมาก เมื่อ Google เริ่มพิจารณาความเร็วของไซต์เป็นพารามิเตอร์ SEO ผู้ดูแลเว็บสามารถใช้การแคชของเบราว์เซอร์เพื่อปรับปรุงความเร็วของไซต์และรับการจัดอันดับของเครื่องมือค้นหาที่ดีขึ้น

นี่คือไฟล์ . .htaccess ฉบับสมบูรณ์ที่เรามีอยู่ในโฟลเดอร์รูท 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

หมายเหตุ : โปรดลบการเปลี่ยนเส้นทางไปยังบล็อก HTTPS หากคุณไม่ได้ใช้ HTTPS :) ฉันได้แสดงความคิดเห็นออกไปแล้ว หากคุณเปิดใช้งาน HTTPS บนไซต์แล้ว และคุณยังอนุญาตให้ผู้ใช้เยี่ยมชมไซต์ผ่าน HTTP แสดงว่าคุณทำได้ดี

มาทำความเข้าใจแต่ละส่วนของไฟล์ .htaccess กัน:

ขั้นตอนที่ 1 การกำจัด ETag

ก่อนอื่น เราต้อง disable ETag header เนื่องจากเราจะใช้ระยะเวลาหมดอายุ เทคโนโลยี ETag นั้นเรียกว่าช้าและมีปัญหา – แม้แต่ไซต์อันดับต้น ๆ อื่น ๆ ก็บ่นเกี่ยวกับมัน

เพิ่มใน . .htaccess : (อยู่ที่ตำแหน่งรากของบล็อก)

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

เรายังรักษาการเชื่อมต่อ keep-alive เรียกว่า persistent connection หากต้องเปิดการเชื่อมต่อใหม่สำหรับทุกคำขอหรือไฟล์ อาจใช้เวลานานขึ้นอย่างมาก

อื่นๆ ต้องอ่าน:

  • 5 เคล็ดลับที่เป็นประโยชน์เพื่อเพิ่มความเร็ว WordPress & เพิ่มประสิทธิภาพ
  • 9 แหล่งข้อมูล WordPress ที่คุณอาจพลาดไป

ขั้นตอนที่ 2 เปิดใช้งานการแคชเบราว์เซอร์

หากคุณกำหนดวันหมดอายุหรืออายุสูงสุดในส่วนหัว HTTP สำหรับทรัพยากรแบบคงที่ เบราว์เซอร์สมัยใหม่จะโหลดทรัพยากรแบบคงที่ที่ดาวน์โหลดก่อนหน้านี้ เช่น รูปภาพ, css, javascript, pdf, swf ฯลฯ จากดิสก์ในเครื่องแทนที่จะโหลดผ่านเครือข่าย

ดังนั้น หากคุณกำหนดค่าเว็บเซิร์ฟเวอร์ของคุณเพื่อตั้งค่าส่วนหัวของแคชและนำไปใช้กับทรัพยากรสแตติกที่แคชได้ทั้งหมด ไซต์ของคุณจะโหลดเร็วขึ้นมาก เพิ่มด้านล่างใน .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 >

สิ่งนี้เป็นการเพิ่มส่วนหัวที่หมดอายุในอนาคตอันใกล้ (ตรวจสอบให้แน่ใจว่าโหลด mod_expires ในการกำหนดค่า apache หากคุณมีปัญหา) ไปยังเนื้อหาคงที่ของคุณ (รูปภาพ, js, css เป็นต้น)

สองสิ่งที่นี่:

  • ExpiresDefault A2592000 = 1 เดือนในอนาคต
  • Cache-Control “max-age=2592000” = 1 เดือน

หากต้องการ คุณสามารถตั้งค่าเป็น 1 ปี = 31536000

ขั้นตอนที่ 3 เพิ่ม gzip และยุบส่วนหัวของการบีบอัด

การบีบอัดสิ่งต่าง ๆ มักจะทำให้มีขนาดเล็กลงและโหลดเร็วขึ้น ดังนั้นการใช้รูปแบบการบีบอัดกับส่วนประกอบของคุณจึงเป็นสิ่งจำเป็น

ขั้นตอนการเพิ่มประสิทธิภาพนี้อาจใช้ไม่ได้สำหรับคุณหากเซิร์ฟเวอร์ของคุณไม่ได้ติดตั้ง mod_deflate หรือ mod_gzip เป็นส่วนหนึ่งของ Apache

โดยพื้นฐานแล้ว เรากำลังบีบอัดทรัพยากรส่วนใหญ่เพื่อให้โหลดโดยใช้แบนด์วิดท์น้อยลงและเร็วมาก

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 >

ขั้นตอนที่ 4 ตรวจสอบว่าการตั้งค่าของคุณทำงานถูกต้องหรือไม่

ชำระเงินด้านล่างภาพหน้าจอ คุณควรเห็นพารามิเตอร์ทั้งหมดที่ตั้งไว้ในส่วนหัวการตอบกลับของไฟล์ของคุณ

ส่วนหัวอายุและแคชสูงสุดสำหรับทรัพยากร WordPress

ชำระเงินกฎ htaccess สำหรับกระบวนการเร่งความเร็วของ WordPress

คำถามเปิด: ฉันสามารถเปลี่ยนวันหมดอายุของทรัพยากรบางอย่าง เช่น สคริปต์ Google Adsense หรือสคริปต์ Google Analytics ได้หรือไม่

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

Answer is NO คุณสามารถตั้งค่าการหมดอายุของทรัพยากรที่กำลังโหลดจากไซต์ของคุณเท่านั้น