表示速度を早くしたい
-
ワタシのサイトです。
http://www.cambodialife.mobi表示速度が遅く(特にモバイル)
困ってます。サーバーはwpXです。
プラグインなど改善方法ございましたら、
ご指導お願いします。
-
GoogleのPageSpeed Insightsでチェックしてみましょう。
https://developers.google.com/speed/pagespeed/insights/速度アップに最も有効なのは
1.gzip圧縮を利用する
2.ブラウザキャッシュの期限を設定
の2つだと思います。.htaccessで実装するなら
# ETags(Configure entity tags) を無視する設定 <IfModule mod_headers.c> Header unset ETag </IfModule> FileETag None # Enable Keep-Alive を設定 <IfModule mod_headers.c> Header set Connection keep-alive </IfModule> # MIME Type 追加 <IfModule mime_module> AddType image/x-icon .ico AddType image/svg+xml .svg AddType application/x-font-ttf .ttf AddType application/x-font-woff .woff AddType application/x-font-opentype .otf AddType application/vnd.ms-fontobject .eot </IfModule> # プロクシキャッシュの設定(画像とフォントをキャッシュ) <IfModule mod_headers.c> <FilesMatch "\.(ico|jpe?g|png|gif|svg|swf|pdf|ttf|woff|otf|eot)$"> Header set Cache-Control "max-age=604800, public" </FilesMatch> </IfModule> # ブラウザキャッシュの設定 <IfModule mod_headers.c> <IfModule mod_expires.c> ExpiresActive On # キャッシュ初期化(1秒に設定) ExpiresDefault "access plus 1 seconds" # MIME Type ごとの設定 ExpiresByType text/css "access plus 1 weeks" ExpiresByType text/js "access plus 1 weeks" ExpiresByType text/javascript "access plus 1 weeks" ExpiresByType image/gif "access plus 1 weeks" ExpiresByType image/jpeg "access plus 1 weeks" ExpiresByType image/png "access plus 1 weeks" ExpiresByType image/svg+xml "access plus 1 year" ExpiresByType application/pdf "access plus 1 weeks" ExpiresByType application/javascript "access plus 1 weeks" ExpiresByType application/x-javascript "access plus 1 weeks" ExpiresByType application/x-shockwave-flash "access plus 1 weeks" ExpiresByType application/x-font-ttf "access plus 1 year" ExpiresByType application/x-font-woff "access plus 1 year" ExpiresByType application/x-font-opentype "access plus 1 year" ExpiresByType application/vnd.ms-fontobject "access plus 1 year" </IfModule> </IfModule> # Gzip圧縮の設定 <IfModule mod_deflate.c> SetOutputFilter DEFLATE # 古いブラウザでは無効 BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html # 画像など圧縮済みのコンテンツは再圧縮しない SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary # プロクシサーバーが間違ったコンテンツを配布しないようにする Header append Vary Accept-Encoding env=!dont-vary AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/js AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/atom_xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/x-httpd-php AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-font-woff AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/vnd.ms-fontobject </IfModule> # 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
こんなかんじ。
maru0014さん、ありがとうございます。
現在
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access 1 week”
ExpiresByType image/jpeg “access 1 week”
ExpiresByType image/gif “access 1 week”
ExpiresByType image/png “access 1 week”
ExpiresByType text/css “access 1 week”
ExpiresByType application/x-javascript “access plus 1 week”
ExpiresByType text/javascript “access plus 1 week”
ExpiresByType application/javascript “access plus 1 week”
ExpiresByType image/x-icon “access 1 week”
</IfModule>
## EXPIRES CACHING ##
# 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
SetEnvIf Request_URI “.*” AllowCountryとなっているのを、
# ETags(Configure entity tags) を無視する設定
<IfModule mod_headers.c>
Header unset ETag
</IfModule>
FileETag None# Enable Keep-Alive を設定
<IfModule mod_headers.c>
Header set Connection keep-alive
</IfModule># MIME Type 追加
<IfModule mime_module>
AddType image/x-icon .ico
AddType image/svg+xml .svg
AddType application/x-font-ttf .ttf
AddType application/x-font-woff .woff
AddType application/x-font-opentype .otf
AddType application/vnd.ms-fontobject .eot
</IfModule># プロクシキャッシュの設定(画像とフォントをキャッシュ)
<IfModule mod_headers.c>
<FilesMatch "\.(ico|jpe?g|png|gif|svg|swf|pdf|ttf|woff|otf|eot)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
</IfModule># ブラウザキャッシュの設定
<IfModule mod_headers.c>
<IfModule mod_expires.c>
ExpiresActive On# キャッシュ初期化(1秒に設定)
ExpiresDefault “access plus 1 seconds”# MIME Type ごとの設定
ExpiresByType text/css “access plus 1 weeks”
ExpiresByType text/js “access plus 1 weeks”
ExpiresByType text/javascript “access plus 1 weeks”
ExpiresByType image/gif “access plus 1 weeks”
ExpiresByType image/jpeg “access plus 1 weeks”
ExpiresByType image/png “access plus 1 weeks”
ExpiresByType image/svg+xml “access plus 1 year”
ExpiresByType application/pdf “access plus 1 weeks2
ExpiresByType application/javascript “access plus 1 weeks”
ExpiresByType application/x-javascript “access plus 1 weeks”
ExpiresByType application/x-shockwave-flash “access plus 1 weeks”
ExpiresByType application/x-font-ttf “access plus 1 year”
ExpiresByType application/x-font-woff “access plus 1 year”
ExpiresByType application/x-font-opentype “access plus 1 year”
ExpiresByType application/vnd.ms-fontobject “access plus 1 year”
</IfModule>
</IfModule># Gzip圧縮の設定
<IfModule mod_deflate.c>
SetOutputFilter DEFLATE# 古いブラウザでは無効
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html# 画像など圧縮済みのコンテンツは再圧縮しない
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
# プロクシサーバーが間違ったコンテンツを配布しないようにする
Header append Vary Accept-Encoding env=!dont-varyAddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/js
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-font-woff
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
</IfModule># 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
SetEnvIf Request_URI “.*” AllowCountryにそっくり入れ替えればいいんでしょうか?
dyagaimoさん
説明が足らず申し訳ありません。# 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
の部分はサーバーによって設定が異なるので元の記述のままにします。
私のWordPressもwpXクラウドを使用し、この内容で問題なく稼働しているので.htaccessの記述は問題ないはず。その上で、wpX独自のキャッシュ機能とmod_pagespeedはオフにします。
(これが競合して表示が崩れたのだと思います。)ありがとうございます。
試してみたいのですが
\が表示されず¥になっていることがわかりました。
\は、どうやったら変換されずに残りますか?ありがとうございます!
モバイル61,パソコン75が
それぞれ65、78になりました!まだモバイル、パソコンともに黄色なので(ずっと赤色でしたが)
青色までもっていきたいです。ありがとうございます。
もしほかにもなにかありましたら、ご指導お願いします!
今回行った設定によりキャッシュがきちんと設定されている状態になっています。
つまり、デザインなどの更新を行った際にすぐに表示されずしばらくの間はキャッシュが表示されてしまいます。もし全然反映されないなーと思ったらブラウザの履歴を一旦削除して更新してみてください。
キャッシュ設定以外ですぐに実装できるとしたら.jsをフッターに移動させる ことでpage speed Insightsで点数を上げることができます。
プラグインのScripts to Footerをインストールすれば一発です。
※似たような機能でhead cleanerがありますが私が実装してみた限りではデザインが崩れるようなのであまりオススメできません。
maru0014さん
ありがとうございます!デザインなどの更新を行った際にすぐに表示されずしばらくの間はキャッシュが表示されてしまいます。
これはワタシのPCのみに発生することなのでしょうか?
サイト訪問者のみなさん、全員に起こることですか?Scripts to Footer
さっそくインストールしました!
点数あがりました!ありがとうございますすべての訪問者のPCでも指定した期間内はブラウザキャッシュが読み込まれます。
すぐに全てのPCに対して反映させたい場合は一時的にキャッシュの設定を削除するのも一つの手です。
maru0014さん
ありがとうございます!”すぐに全てのPCに対して反映させたい場合は一時的にキャッシュの設定を削除するのも一つの手です。 ”
反映させたいです!
・・ただ、やり方がわかりません!該当箇所、、ぜひ教えてください
.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
のみを残して他を消すだけです。
1週間ほどしてから元に戻せば大丈夫かと
- トピック「表示速度を早くしたい」には新たに返信することはできません。