プラグイン不要|無料テーマコクーンをある方法で高速化してみた!

2018年7月から、Googleがスピードアップデート(Speed-Update)を開始しましたね。

このスピードアップデートで検索順位が下がるサイトの対象が「とても遅いサイト」のみと、いまいちはっきりしない基準で順位が落とされる可能性があります。

個人的にはPageSpeed Insightsで、PC・モバイル共にGoodを出せば問題ないと思ってます。

当サイトのスコア⤵︎

これぐらいのスピードなら問題ないと思ってます。

しかし、ブログはちょっとした要因で重くなるもの

  • 更新をしすぎてリビジョンがたまる
  • 画像を多く使ってしまう
  • ブログ村なのどのボタンを設置してしまう
  • プラグインを入れる

などの理由で簡単に重くなってしまいます。

自分のブログなんだから、自由にイジってサイトスピードを維持したいもんですね。

ここで、注意点

キャッシュ系のプラグインを入れるな!

です。

理由は簡単

  1. ラウザーキャッシュとサーバーキャッシュの意味を理解してないと、ただ重くなるだけ
  2. サーバーキャッシュ系のプラグインは、サーバーのソフトウェアにあったプラグインを使わないと意味がない
  3. 他のプラグインと干渉して、サイトが飛ぶ

などのメンドくさいことが多々起こるため、キャッシュ系プラグインはできるだけ入れない方がいい

じゃぁどうやって、高速化するの?

この必須プラグインを紹介している記事にある、Plugin Load Filterを使ってプラグインを制御する方法があります。

しかし、この方法ではあまりスピードアップしたという実感がわかないので

今回は、.htaccessの編集でスピードアップする方法を紹介します!

簡単コピペでできるので、サイトスピードを簡単に上げたい人は参考にしてください。(Apacheのみ有効)

もくじ

.htaccessの編集の手順

手順は次のとおりです。

  1. これから初回する.htaccessのコードをコピーする
  2. サーバーから.htaccessにアクセス、もしくはFTPソフトで.htaccessにアクセス
  3. 元から.htaccessに書いてあるものの続きにコピーしたコードをペーストして登録
  4. ワードプレスadminの設定→パーマリンク設定を開きそのまま登録

以上の手順です。

ね、簡単でしょ?

一応.htaccessをイジるので、バックアップをとってからカスタマイズをしていきましょう!

次は、画像を使いながら説明しますね

.htaccessの編集方法

ここから、順をおって説明していきますね!

.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 text/cache-manifest .appcache
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-woff2 .woff2
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|woff2|otf|eot)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>

 # プロキシサーバーが間違ったコンテンツを配布しないようにする
Header append Vary Accept-Encoding env=!dont-vary
</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-woff2 "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|eot|woff|woff2)$ no-gzip 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-woff2
AddOutputFilterByType DEFLATE application/x-font-opentype
#AddOutputFilterByType DEFLATE application/vnd.ms-fontobject

</IfModule>

サーバーやFTPから.htaccessにアクセス

wpXなどの、サーバーから簡単に.htaccessにアクセスできるサーバーはそちらからアクセスをしてください。

ここでは、サーバーからアクセスできない人のためにFTPソフト(FileZilla)を使って、説明をしていきます。

Macユーザーはコードエディットアプリ(CotEditor)をインストールしていないと設定が面倒なのでインストールをオススメします。

FileZillaの細かい設定は、Xサーバーの設定手順を参考にしてください。

イメージしやすいようにgifをみてください。

元から.htaccessに書いてあるものの続きにコピーしたコードをペーストして登録

僕の.htaccessは書いてあるものがなくて、一番上からペーストしてますが
元から、何か書いてあったらその続きにペーストしてください。

ワードプレスadminの設定→パーマリンク設定を開きそのまま登録

画像の通りに順番にぽちぽちしてください。

もし、.htaccessをイジったせいでブログが真っ白になった場合

  1. .htaccessの内容を全て消して、登録
  2. このパーマリングの設定をもう1度やる

これで元どおりになります。

簡単サイト高速化まとめ

お疲れ様でした。

これで、かなりサイトのスピードが上がったんじゃないですか?

コクーンをかなりカスタマイズして、めちゃくちゃ遅い当ブログは

モバイルで1秒ほど早くなりました。

あまり、カスタマイズしていない人なら1秒2秒でブログが表示されるはずです。

この記事をシェアする

クリックして応援♪

このブログはSWELLで出来ています!

SWELLレビュー
  • 簡単におしゃれな文章が作れる
  • マウスだけで簡単におしゃれなブログを作れる
  • テーマ製作者に事を気軽に聞ける環境
  • 簡単に収益化ができる仕組みを搭載
当ブログもSWELLで出来ています!
気になる人は公式サイトを覗いて見てくださいね♪

コメントを書いて応援♪

コメントする

CAPTCHA

もくじ
閉じる