今日のおすすめ記事 【クリックして読む】

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

スポンサーリンク
ブログ

 

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

 

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

 

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

 

当サイトwとらのスコア⤵︎

 

 

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

 

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

 

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

 

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

 

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

 

 

ここで、注意点

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

です。

 

理由は簡単

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

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

 

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

 

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

 

ワードプレスプラグインは「7つ」だけでOK!必須プラグインを紹介するよ!
プラグイン必須でググったら、「プラグインおすすめ30選」とか出てきてエグいですね プラグインを入れすぎると、最悪ブログが飛びますよ! この記事は、7つの必須プラグインを紹介する記事です。 プラグインが減らせない人のための解決作も紹介してるのでぜひ読んでくださいね。

 

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

 

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

 

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

 

サイト速度向上|【mod_pagespeed】について詳しく解説
「画像圧縮プラグイン」や「キャッシュ系のプラグイン」を使うと、何かと不具合があってこわいですよね、、、 この記事は、プラグイン不要で画像を圧縮・最適化するGoogleが開発した『mod_pagespeed』についての紹介記事です。 Googleが開発したこともあり、信頼性が抜群なのでぜひみてくださいね
ワードプレス無料テーマ『Cocoon(コクーン)』を徹底レビュー
今一番有名なワードプレステーマ『Cocoon(コクーン)』を3ヶ月使ってわかった。コクーンの魅力を徹底的にお伝えします。 ぶっちゃけ、悪いところがないのでデメリットを知りたい人はこの記事を読まないでください。
『wp無料テーマ』Luxeritas(ルクセリタス)を詳しく解説!
ワードプレス無料テーマの『Luxeritas(ルクセリタス)』の解説記事です! この、Luxeritas(ルクセリタス)という無料テーマは使用者が少なく情報が少ないワードプレス無料テーマですが、めっちゃスペックの高いテーマです!

 

スポンサーリンク

.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)をインストールしていないと設定が面倒なのでインストールをオススメします。

CotEditor

無料
(2018.07.31時点)
posted with ポチレバ

 

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

 

FileZilla設定手順 | レンタルサーバー【エックスサーバー】
レンタルサーバー「エックスサーバー」のご利用マニュアル|「FileZilla」を用いてご契約中のサーバーアカウントへFTP接続をするための設定手順について記載しています。

 

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

 

Macユーザー必需品のコードエディッターアプリ

CotEditor

無料
(2018.07.31時点)
posted with ポチレバ

 

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

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

 

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

 

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

 

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

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

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

 

スポンサーリンク

簡単サイト高速化まとめ

お疲れ様でした。

 

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

 

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

 

 

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

 

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

 

もし、質問や、疑問・わからない点があれば気軽にコメント欄に記入してくださいね!

 

本日の記事はここまで!それでは

 

サイト速度向上|【mod_pagespeed】について詳しく解説
「画像圧縮プラグイン」や「キャッシュ系のプラグイン」を使うと、何かと不具合があってこわいですよね、、、 この記事は、プラグイン不要で画像を圧縮・最適化するGoogleが開発した『mod_pagespeed』についての紹介記事です。 Googleが開発したこともあり、信頼性が抜群なのでぜひみてくださいね
ワードプレス無料テーマ『Cocoon(コクーン)』を徹底レビュー
今一番有名なワードプレステーマ『Cocoon(コクーン)』を3ヶ月使ってわかった。コクーンの魅力を徹底的にお伝えします。 ぶっちゃけ、悪いところがないのでデメリットを知りたい人はこの記事を読まないでください。
『wp無料テーマ』Luxeritas(ルクセリタス)を詳しく解説!
ワードプレス無料テーマの『Luxeritas(ルクセリタス)』の解説記事です! この、Luxeritas(ルクセリタス)という無料テーマは使用者が少なく情報が少ないワードプレス無料テーマですが、めっちゃスペックの高いテーマです!

 

おおもと
おおもと

質問などがあれば、コメント覧に書き込んでくださいね!

 

コメント

タイトルとURLをコピーしました