初步seo优化小结
最近做了下自己负责的项目的优化，小有收获，不敢独享特拿来分享。
一.最重要的一点莫过于图片的压缩。
图片压缩基本分三步走:1.手动用photoshop压缩，快捷键Ctrl+alt +shift+s，即是保存为web格式。图片可以选择png或者jpg格式，对于那种应该选择哪种格式，度娘那里都有介绍，我就不多赘述。一般质量80%就可以满足需求了。2.将保存的图片通过第三方压缩网站再次压缩https://tinypng.com/ 最后下载的图片大小即可上传到网站后台。3.通过wordpress后台安装的插件EWWW img optimizer再次压缩。
二.WP rocket 插件的设置。
这里要根据不同网站，设置成不同的数值，因为如果随便文件都压缩的话，可能导致网站出现乱码情况，所以调整的时候要随时观察站点页面。总之一句话：能压缩的都压缩，最大化压缩网站文件。不废话直接上图：
注意对于preload选项的设置，我在Prefetch DNS Requests设置了相应的资源之后，移动端的评分高达98分，所以这个挺关键的。
三.WordPress 设置浏览器端缓存，加快访问速度.
在网站根目录(即是服务器public_html文件夹下面) .htaccess 文件中添加以下代码：
#Expire Header
ExpiresActive on //开启缓存
ExpiresByType text/css "access 1 month"//css文件缓存1个月
ExpiresByType text/plain "access 2 days"//纯文本内容缓存2天
ExpiresByType text/html "access 2 days"//html文件缓存2天
ExpiresByType application/javascript "access 1 month"//JS文件缓存1个月
ExpiresByType image/jpeg "access 1 month"//jpeg图片缓存1个月
ExpiresByType image/x-icon "access 1 month"//icon缓存1个月
ExpiresByType image/gif "access 1 month"//gif图片缓存一个月
ExpiresByType image/png "access 1 month"//png图片缓存一个月
ExpiresByType image/ico "access 1 month"//ico缓存1个月
ExpiresByType application/pdf "access 1 month"//pdf文件缓存一个月
ExpiresByType application/x-shockwave-flash "access 1 month"//flash缓存一个月
ExpiresDefault "access 1 month"// 默认（未提及的可缓存文件）缓存1个月
当然具体code干货代码，我也私下保存了一份（复制在.htaccess文件里面）：
# BEGIN WP Rocket v3.1.4
# Use UTF-8 encoding for anything served text/plain or text/html
AddDefaultCharset UTF-8
# Force UTF-8 for a number of file formats
<IfModule mod_mime.c>
AddCharset UTF-8 .atom .css .js .json .rss .vtt .xml
</IfModule>
# FileETag None is not enough for every server.
<IfModule mod_headers.c>
Header unset ETag
</IfModule>
# Since we’re sending far-future expires, we don’t need ETags for static content.
# developer.yahoo.com/performance/rules.html#etags
FileETag None
<IfModule mod_alias.c>
<FilesMatch "\.(html|htm|rtf|rtx|txt|xsd|xsl|xml)$">
<IfModule mod_headers.c>
Header set X-Powered-By "WP Rocket/3.1.4"
Header unset Pragma
Header append Cache-Control "public"
Header unset Last-Modified
</IfModule>
</FilesMatch>
<FilesMatch "\.(css|htc|js|asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|json|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|otf|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|tif|tiff|ttf|ttc|wav|wma|wri|xla|xls|xlsx|xlt|xlw|zip)$">
<IfModule mod_headers.c>
Header unset Pragma
Header append Cache-Control "public"
</IfModule>
</FilesMatch>
</IfModule>
# Expires headers (for better cache control)
<IfModule mod_expires.c>
ExpiresActive on
# Perhaps better to whitelist expires rules? Perhaps.
ExpiresDefault "access 1 month"
# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
ExpiresByType text/cache-manifest "access plus 0 seconds"
# Your document html
ExpiresByType text/html "access 2 days"
# Data
ExpiresByType text/xml "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType application/json "access plus 0 seconds"
# Feed
ExpiresByType application/rss+xml "access plus 1 hour"
ExpiresByType application/atom+xml "access plus 1 hour"
# Favicon (cannot be renamed)
ExpiresByType image/x-icon "access 1 month"
# Media: images, video, audio
ExpiresByType image/gif "access 1 month"
ExpiresByType image/png "access 1 month"
ExpiresByType image/jpeg "access 1 month"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
ExpiresByType image/ico "access 1 month"
# HTC files (css3pie)
ExpiresByType text/x-component "access plus 1 month"
# Webfonts
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType application/x-font-woff2 "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
# CSS and JavaScript
ExpiresByType text/css "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType text/plain "access 2 days"
</IfModule>
# Gzip compression
<IfModule mod_deflate.c>
# Active compression
SetOutputFilter DEFLATE
# Force deflate for mangled headers
<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
# Don’t compress images and other uncompressible content
SetEnvIfNoCase Request_URI \
\.(?:gif|jpe?g|png|rar|zip|exe|flv|mov|wma|mp3|avi|swf|mp?g|mp4|webm|webp|pdf)$ no-gzip dont-vary
</IfModule>
</IfModule>
# Compress all output labeled with one of the following MIME-types
<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE application/atom+xml \
application/javascript \
application/json \
application/rss+xml \
application/vnd.ms-fontobject \
application/x-font-ttf \
application/xhtml+xml \
application/xml \
font/opentype \
image/svg+xml \
image/x-icon \
text/css \
text/html \
text/plain \
text/x-component \
text/xml
</IfModule>
<IfModule mod_headers.c>
Header append Vary: Accept-Encoding
</IfModule>
</IfModule>
# END WP Rocket
# 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
# BEGIN WP Performance Score Booster Settings
# END WP Performance Score Booster Settings
一.最重要的一点莫过于图片的压缩。
图片压缩基本分三步走:1.手动用photoshop压缩，快捷键Ctrl+alt +shift+s，即是保存为web格式。图片可以选择png或者jpg格式，对于那种应该选择哪种格式，度娘那里都有介绍，我就不多赘述。一般质量80%就可以满足需求了。2.将保存的图片通过第三方压缩网站再次压缩https://tinypng.com/ 最后下载的图片大小即可上传到网站后台。3.通过wordpress后台安装的插件EWWW img optimizer再次压缩。
二.WP rocket 插件的设置。
这里要根据不同网站，设置成不同的数值，因为如果随便文件都压缩的话，可能导致网站出现乱码情况，所以调整的时候要随时观察站点页面。总之一句话：能压缩的都压缩，最大化压缩网站文件。不废话直接上图：
注意对于preload选项的设置，我在Prefetch DNS Requests设置了相应的资源之后，移动端的评分高达98分，所以这个挺关键的。
三.WordPress 设置浏览器端缓存，加快访问速度.
在网站根目录(即是服务器public_html文件夹下面) .htaccess 文件中添加以下代码：
#Expire Header
ExpiresActive on //开启缓存
ExpiresByType text/css "access 1 month"//css文件缓存1个月
ExpiresByType text/plain "access 2 days"//纯文本内容缓存2天
ExpiresByType text/html "access 2 days"//html文件缓存2天
ExpiresByType application/javascript "access 1 month"//JS文件缓存1个月
ExpiresByType image/jpeg "access 1 month"//jpeg图片缓存1个月
ExpiresByType image/x-icon "access 1 month"//icon缓存1个月
ExpiresByType image/gif "access 1 month"//gif图片缓存一个月
ExpiresByType image/png "access 1 month"//png图片缓存一个月
ExpiresByType image/ico "access 1 month"//ico缓存1个月
ExpiresByType application/pdf "access 1 month"//pdf文件缓存一个月
ExpiresByType application/x-shockwave-flash "access 1 month"//flash缓存一个月
ExpiresDefault "access 1 month"// 默认（未提及的可缓存文件）缓存1个月
当然具体code干货代码，我也私下保存了一份（复制在.htaccess文件里面）：
# BEGIN WP Rocket v3.1.4
# Use UTF-8 encoding for anything served text/plain or text/html
AddDefaultCharset UTF-8
# Force UTF-8 for a number of file formats
<IfModule mod_mime.c>
AddCharset UTF-8 .atom .css .js .json .rss .vtt .xml
</IfModule>
# FileETag None is not enough for every server.
<IfModule mod_headers.c>
Header unset ETag
</IfModule>
# Since we’re sending far-future expires, we don’t need ETags for static content.
# developer.yahoo.com/performance/rules.html#etags
FileETag None
<IfModule mod_alias.c>
<FilesMatch "\.(html|htm|rtf|rtx|txt|xsd|xsl|xml)$">
<IfModule mod_headers.c>
Header set X-Powered-By "WP Rocket/3.1.4"
Header unset Pragma
Header append Cache-Control "public"
Header unset Last-Modified
</IfModule>
</FilesMatch>
<FilesMatch "\.(css|htc|js|asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|json|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|otf|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|tif|tiff|ttf|ttc|wav|wma|wri|xla|xls|xlsx|xlt|xlw|zip)$">
<IfModule mod_headers.c>
Header unset Pragma
Header append Cache-Control "public"
</IfModule>
</FilesMatch>
</IfModule>
# Expires headers (for better cache control)
<IfModule mod_expires.c>
ExpiresActive on
# Perhaps better to whitelist expires rules? Perhaps.
ExpiresDefault "access 1 month"
# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
ExpiresByType text/cache-manifest "access plus 0 seconds"
# Your document html
ExpiresByType text/html "access 2 days"
# Data
ExpiresByType text/xml "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType application/json "access plus 0 seconds"
# Feed
ExpiresByType application/rss+xml "access plus 1 hour"
ExpiresByType application/atom+xml "access plus 1 hour"
# Favicon (cannot be renamed)
ExpiresByType image/x-icon "access 1 month"
# Media: images, video, audio
ExpiresByType image/gif "access 1 month"
ExpiresByType image/png "access 1 month"
ExpiresByType image/jpeg "access 1 month"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
ExpiresByType image/ico "access 1 month"
# HTC files (css3pie)
ExpiresByType text/x-component "access plus 1 month"
# Webfonts
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType application/x-font-woff2 "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
# CSS and JavaScript
ExpiresByType text/css "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType text/plain "access 2 days"
</IfModule>
# Gzip compression
<IfModule mod_deflate.c>
# Active compression
SetOutputFilter DEFLATE
# Force deflate for mangled headers
<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
# Don’t compress images and other uncompressible content
SetEnvIfNoCase Request_URI \
\.(?:gif|jpe?g|png|rar|zip|exe|flv|mov|wma|mp3|avi|swf|mp?g|mp4|webm|webp|pdf)$ no-gzip dont-vary
</IfModule>
</IfModule>
# Compress all output labeled with one of the following MIME-types
<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE application/atom+xml \
application/javascript \
application/json \
application/rss+xml \
application/vnd.ms-fontobject \
application/x-font-ttf \
application/xhtml+xml \
application/xml \
font/opentype \
image/svg+xml \
image/x-icon \
text/css \
text/html \
text/plain \
text/x-component \
text/xml
</IfModule>
<IfModule mod_headers.c>
Header append Vary: Accept-Encoding
</IfModule>
</IfModule>
# END WP Rocket
# 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
# BEGIN WP Performance Score Booster Settings
# END WP Performance Score Booster Settings
3 个评论
很详细了，我补充一点这个其实缓存插件是会自动生成的，设置完之后save一下就生成了新的.htaccess文件，
默认文件是这样：
# 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
最下面的
# BEGIN WP Performance Score Booster Settings
# END WP Performance Score Booster Settings 这俩行是另一个缓存插件的，从code来看，已经没有用这个插件了
默认文件是这样：
# 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
最下面的
# BEGIN WP Performance Score Booster Settings
# END WP Performance Score Booster Settings 这俩行是另一个缓存插件的，从code来看，已经没有用这个插件了
原来如此！
不错的总结，感谢分享干货。