ページを速く表示することは、ユーザーに対しても親切ですし、検索エンジンも評価してくれる対象となっています。
ですので、プラグインを入れたりしながら、少しでも速くページが表示できるように日々対策を取られてると思います。
先日、PageSpeed Insightsが日本語化されて使ってみたとき、改善点として出てきた内容が、ブラウザのキャッシュの活用とサーバの応答時間、画像の最適化等でした。
その際、いろいろ調べた結果、プラグインに頼らずともある程度は高速化させることができましたので、その対策を以前からやっているものも含めて紹介したいと思います。
プラグイン無しで高速化する
やや難易度の高いもの、毎回手間がかかるもの、Macアプリやんヾ(・・;)という3つやっています。
1. .htaccessでWordpressを高速化
これはつい先日行った対策です。
.htaccessファイルにソースを追記しサーバにアップロードすることで、圧縮転送、ブラウザのキャッシュの行うようにする設定です。
これは、ページが速く表示されるのが体感できるぐらいの効果がありました!
是非、設定して見てください。
.htaccessに以下のコードを追記し保存。
サーバへアップロード。
AddType image/x-icon .ico <IfModule mod_deflate.c> SetOutputFilter DEFLATE BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary SetEnvIfNoCase Request_URI _\.utxt$ no-gzip #DeflateCompressionLevel 4 AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/atom_xml AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/x-httpd-php </IfModule> <ifModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 1 seconds" ExpiresByType text/html "access plus 1 seconds" ExpiresByType image/gif "access plus 2592000 seconds" ExpiresByType image/jpeg "access plus 2592000 seconds" ExpiresByType image/png "access plus 2592000 seconds" ExpiresByType image/x-icon "access plus 2592000 seconds" ExpiresByType text/css "access plus 604800 seconds" ExpiresByType text/javascript "access plus 216000 seconds" ExpiresByType application/x-javascript "access plus 216000 seconds" ExpiresByType application/x-shockwave-flash "access plus 216000 seconds" </ifModule> FileETag none <FilesMatch "^(wp-config\.php|wp-mail\.php|install\.php|\.ht)"> order allow,deny deny from all </FilesMatch>
.htaccessでwordpressの圧縮、キャッシュ設定をやってみた!
2. 画像をキレイなまま圧縮して最適化
こちらはちょっと手間をかけて行っています。
画像をキレイなまま重さを圧縮するために、アプリを使用しています。
以前に、画像をキレイなまま圧縮するMacアプリJPEGminiとImageOptimを比べてみたことがあります。その時から、画像は必ずこのアプリ達で圧縮してから使うようにしています。
圧縮率自体を比べると、JPEGminiが圧倒的な差で画像を圧縮してくれるのですが、両方のアプリが圧縮を行う箇所が違うので、記事に画像を挿入する際はJPEGmini→ImageOptimの順で両方のアプリを使用し圧縮しています。
どちらのアプリも、起動してアプリの枠内に画像を放り込むだけですので、それほど手間はかかりません。
以下からダウンロードできますので、ご興味ある方はダウンロードし使ってみて下さい。
Mac App Store – JPEGmini Lite
https://itunes.apple.com/jp/app/jpegmini-lite/id525742250
ImageOptim — make websites and apps load faster (Mac app)
http://imageoptim.com
3. 事前レンダリングで次のページを先読み
先日、海外SEO情報ブログで紹介されていたので設定してみました。
事前レンダリングでウェブページの表示時間を高速化
http://www.suzukikenichi.com/blog/using-prerendering-to-speed-up/
あるページを表示した時に裏で次のページを読み込んでおき、次のページへのリンクをクリックすると既に裏側で読み込まれているので、すぐにページが表示されるようになります。
これも、体感できるぐらいサクッと表示されますよ!
設定方法は簡単。
HTMLのhead部分に以下のコードを挿入するだけ。
<link rel="prerender" href="http://abcde.com/abcde.html">
※abcdeのところは置き換えて下さい。
ただ、次のページというのをどのページに設定するかは、アクセス解析等でチェックし最も良く押されているページを設定しておくようにしないといけませんね。
トップページなのか、次のページなのか、お問合せページなのか…..
このブログは、左上のロゴ部分が多くクリックされていましたので、そこのリンク(トップページへのリンク)をトップページ以外のページで設定しています。
以上、2つの設定と1つの作業を行っていおり、プラグインを使わなくても体感できるぐらいの高速化はできるもんだなあと思った次第です。いろいろプラグインを試される前に、まずはこのあたりの設定から始められてはいかがでしょうか!?
まとめ
今まで高速化を詠っているいろんなプラグインを入れ、プラグイン同士の不具合やサーバとの相性で、何度となくwordpressを白紙にしてきました (> <;)
かなりの時間、試行錯誤してきましたが、プラグインを設定することを含めても効果が感じられるほどの効果があったのは、この3つの対策じゃないかなと思います。(ちょっと大げさ?)
プラグインは全然使ってないわけじゃないですが、記事冒頭でも書いた通り、必要最小限を設定して上記3つのことをやっていけば今のところ十分かなと思っています。
さらに、高速化したい人は、wordpressに特化しているサーバを使うのも良いのかなと思います。
少し前に、別に運営しているwordpressサイトを特化サーバに移転してみたのですが、これが凄くてサクサク動くんですよ!
機を見て、このブログもwpxサーバに移転してみても良いかな…と思っています。
その時はまた、記事にして報告してみたいと思います。
以上、お役に立てれば、幸いです〜!
【オススメ関連記事】
・.htaccessでwordpressの圧縮、キャッシュ設定をやってみた!
・Javascriptを非同期化させてWordPressを高速化!