CentOS、WordPressサイトを高速化する方法

皆さん
こんにちは。こんばんは。
comivel運営のみきです。

やっとcomivelリリースです…

と言いたいところですが執筆時はアクセスは出来ますが
中身はみれないようになっています

皆さんにこの記事を見ていただけているということはリリースされたんですね笑

では本題のcomivelを高速化していきたいと思います!!

現在のスピードを測定

では早速高速化する前のスピードや評価?を測ってみたいと思います

まずはPageSpeed Insightsからです

結果は…

PC

スマホ

結果
PC:43点
スマホ:32点

…….

ちーん

あ、あのですね、、、な、なにも、対策をしていないので….

ちーん

次です

はぁー

みきは80ダメージを食らった

次はGTmetrixです

さて結果は…

…

ちーん

さようなら

みきは10000ダメージを食らった
END

ただいまー

さぁ今からが本番だ!!

高速化していくぞ!!

日本からのアクセスだと表示速度は2秒ぐらいです
回線の問題で海外からのアクセスだとだいぶ遅くなるようです

高速化のためにやること

今回は各ツールで言われたことをメインにやっていきます

まずはこちら

画像を最適化する

画像の最適化はWordPressプラグインのEWWW Image Optimizerを使ってみます

ずっと入れていたので設定は終わっています

というのも最初は普通に使っていたのですが
表示時間がどれだけ変わるかなと思って途中から止めていたんです

久しぶりに使います

なので一括最適化をします

EWWW Image Optimizerの設定方法はバズ部さんの記事を見てみてください

EWWW Image Optimizer の設定方法と使い方

bazubu.com

設定が終わったら管理画面>メディア>一括最適化を選択してください

するとスクリーンショットのようなページがでてくるので
最適化されていない画像をスキャンするを押してください

スキャンが終わると最適化を開始というボタンがでてくるので押してください

せーの

ぽちっ

さぁこれでどのように変わるのか…

楽しみです!!

さぁ画像の最適化が終わりました

スピードは変わっているのか…

結果は…

ちーん

次です次次、、、、

今回はあまり速度は変わりませんでしたが
コンテンツによってはだいぶ違うかもしれません
確実に言えることは容量の節約になります

ブラウザのキャッシュを活用する
圧縮を有効にする

次は上の二つをまとめてやってみます

まずはブラウザのキャッシュの設定です

この設定は.htaccessを使って行います

.htaccessとはなんぞや?という方

「htaccess」（エイチティアクセス）とは、現在多くのWEBサーバーで使用されている「Apache」（アパッチ）を制御する設定ファイルの１つで、実際のファイル名は「.htaccess」（先頭がドット）となります。

参考:.htaccessとは?

また.htaccessは便利ですが危険なファイルでもあるので

編集時は必ずバックアップを取るようにしてください

一部サーバーでは.htaccessの編集が許可されていない場合があります
編集可能かなどの質問は各サーバー会社にお問い合わせください

では設定をしていきましょう!!

WordPressの場合デフォルトで.htaccessに以下のような記述があると思います

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /wordpress/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /wordpress/index.php [L]
</IfModule>

# END WordPress

※この/wordpress/はサブディレクトリ名です
ほかにも/wp/などが良くあります

# END WordPress

までがWordPressの設定です

# END WordPress

の後に以下のソースを追記します

#ブラウザキャッシュの設定
ExpiresActive On
ExpiresByType text/css "access plus 1 days"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"

参考:ブラウザキャッシュの設定をしてWordPressブログの表示スピードを上げる方法

はい。わいひらさんが運営されている寝ログを参考にさせていただきました

わいひらさんへ
いつもありがとうございます

さぁキャッシュの設定が出来たので

速度を測ってみましょう!!

いきます

じゃじゃん

PC

スマホ

あ、あれ

あまり変わっていない…

と思ってみると

まだ最適化されていないファイルがありました

.jsファイルです

そのほかのファイルも対応できるように編集してみました

ExpiresActive On
ExpiresByType text/css "access plus 1 days"
ExpiresByType text/js "access plus 1 weeks"
ExpiresByType text/javascript "access plus 1 weeks"
ExpiresByType text/x-javascript "access plus 1 weeks"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/jpg "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-opentype "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"

先ほどのソースをこれに書き換えてみてください

上のソースにした結果は…

さらに少し上がりましたね

まぁ地味ですが少し速くなったので良いでしょう

次の最適化から実施した日にちが変わります

.
.
.

キャッシュの最適化からだいぶ日にちがたちました

その間にPHPのバージョンを5.4から5.6にしました

というのもphp5.5以上の要件が必要な使いたい機能があって
怖かったのでやりたくは無かったんですが結局やったんですよ

それでcomivelにアクセスすると表示速度が速い気がするんですよ

ということで速度を測ってみました

結果がこちら

なんとアップデートしただけでPCが2とスマホが1上がりましたよ

…

これってどうなの?

まぁいいや

あと詳しくは分からないのですがOPcacheとかAPCuとかなんか色々とあるみたいです

今回はkarakaram-blogさんの記事を参考にさせていただきました

CentOSのPHPを5.5から5.6にアップデート。OPcacheなども設定

www.karakaram.com

記事を参考にしつつインストールが終わったのですが
APCuが動いていませんでした

そこで調べてみると

【WordPress】APCuを使えるようにする - Qiita

# APCu Object Cache Backend をダウンロード APCu Object Cache Backend のURLはこちら場所はどこ...

qiita.com

WordPressで使うにはプラグインが必要みたいです

APCu Object Cache Backend

An object-cache implementation using the APCu extension.

ja.wordpress.org

利用できるようにするためのコマンド (CentOS7)

[root@○○ ~]# cd /tmp
[root@○○ tmp]# wget https://downloads.wordpress.org/plugin/apcu.1.0.3.zip
[root@○○ tmp]# unzip apcu.1.0.3.zip
[root@○○ tmp]# cp apcu/object-cache.php /[wordpressのディレクトリまでのパス]/wordpress/wp-content/object-cache.php

FTPであげても大丈夫だと思います。
多分。

すると管理画面のプラグイン一覧ページにこんな感じで追加されています

続いてパフォーマンスを確認するツールを入れて設定をします

[root@○○ ~]# cd /tmp
[root@○○ tmp]# git clone https://github.com/krakjoe/apcu/
[root@○○ tmp]# cp /apcu/apc.php /[phpが見れるディレクトリ]/apc.php
[root@○○ tmp]# cd
[root@○○ ~]# vi /[apc.phpを置いたディレクトリまでのパス]/apc.php

//上にユーザー名
//下にパスワードを入れる
defaults('ADMIN_USERNAME','apc');                       // Admin Username
defaults('ADMIN_PASSWORD','password');          // Admin Password - CHANGE THIS TO ENABLE!!!
//↓
defaults('ADMIN_USERNAME','username');                       // Admin Username
defaults('ADMIN_PASSWORD','passwordwoirete');          // Admin Password - CHANGE THIS TO ENABLE!!!

ファイルを保存してください

ブラウザからドメイン/apc.phpにアクセスして右上にあるloginを押してください

すると認証がでるので上記で指定した名前とパスワードを入力してください

ログインをすることでキャッシュを削除することができます

そして動作を確認して速度を測った結果…

少しだけ上がりましたね

ずっと1ずつだよ…

でもGTmetrixでは効果が見られました

最初:F

現在:E

残り:D C B A

…

ブログを書きながら実装をしていたりするのでそれが原因かもしれませんが

ここまで6時間は掛かっています泣

助けてー

というわけで次です

(冷たっ!?)

…次何でしたっけ?

上の記事を見にいっています
今しばらくお待ちください

圧縮を有効にする

これですね

忘れっぽくてすみません

さぁ話を戻します

圧縮も.htaccessで出来ます

こちらのソースは寝ログさんからお借りしたものを改良して先ほどのブラウザのキャッシュと合わせたものです

追記:2017年2月2日
圧縮に対応していないブラウザのとき圧縮しない処理を追加

#ブラウザのキャッシュ
ExpiresActive On
ExpiresByType text/css "access plus 1 days"
ExpiresByType text/js "access plus 1 weeks"
ExpiresByType text/javascript "access plus 1 weeks"
ExpiresByType text/x-javascript "access plus 1 weeks"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/jpg "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-opentype "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
#圧縮の設定
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/html
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/x-httpd-php
#フォント
AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml

これで完璧ですかね

レンタルサーバー(共用)の方はこれで大丈夫だと思います

ここからは自宅サーバー、VPS、専用サーバーのメリットを見せていくぜ!!

聞くところによると最強そうなGoogleさんのmod_pagespeedを導入してみます

mod_pagespeedはエックスサーバーであれば
利用できるようです
参考:mod_pagespeed設定について

エックスサーバーのマニュアルが分かりやすかったのでお借りします

本機能を有効にすることで以下のような最適化処理が実施されます。

CSSファイル、JavaScriptファイルなどの圧縮

最適な画像タイプへの変換、軽量化

同種のファイル(画像、CSS、JavaScriptファイルなど)を一つにまとめ、サーバーとクライアント間の無駄な通信(リクエスト)を削減

CSSファイル、JavaScriptファイル、画像ファイルのキャッシュ有効期間の延長

小さなファイルサイズのCSSやJavaScriptをHTML内に埋め込む

出典:
https://www.xserver.ne.jp/manual/man_server_mod_pagespeed.php

以上のようなことが出来ます

mod_pagespeedで出来ることの一覧

mod_pagespeedカスタマイズで高速化を詳細解説・Google謹製

mod_pagespeedをデフォルトのまま使っていませんか？mod_pagespeedはデフォルトのままでも速い！でも仕組みを理解し設定し直せばより速くなる！他にはない詳細な解説と設定方法を紹介。他のサイトよりもう一歩速くなる！

blog.s-giken.net

それでは導入に進みたいと思います

今回参考にさせていただいたサイトはこちらです

mod_pagespeedインストール - Qiita

#atインストール ``` # yum install at ``` #mod_pagespeedインストール ``` # cd /usr/local/src/ # wget

qiita.com

そしてバージョンは安定版(Latest Stable Version)を使いたいと思います

インストールされる際は最新のバージョンをご確認ください

Installing From Packages

modpagespeed.com

atインストール

[root@○○ ~]# yum install at

mod_pagespeedのインストール

[root@○○ ~]# cd /usr/local/src/
[root@○○ src]# wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_x86_64.rpm
[root@○○ src]# rpm -ivh mod-pagespeed-stable_current_x86_64.rpm

Apacheの再起動

[root@○○ ~]# systemctl restart httpd

mod_pagespeedの設定

[root@○○ ~]# vi /etc/httpd/conf.d/pagespeed.conf

キャッシュとログの書き出しを有効にする

キャッシュとログのパス

# The ModPagespeedFileCachePath directory must exist and be writable
# by the apache user (as specified by the User directive).
ModPagespeedFileCachePath            "/var/cache/mod_pagespeed/"

# LogDir is needed to store various logs, including the statistics log
# required for the console.
ModPagespeedLogDir "/var/log/pagespeed"

権限の変更

Apacheの実行ユーザーとキャッシュディレクトリの権限を合わせる必要があるようです。
参考:Apacheにmod_pagespeedをインストールと初期設定をする方法

[root@○○ ~]# chown -R ユーザー名.グループ名 /var/cache/mod_pagespeed/
[root@○○ ~]# chown -R ユーザー名.グループ名 /var/log/pagespeed/

統計情報の閲覧設定

[root@○○ ~]# vi /etc/httpd/conf.d/pagespeed.conf
    <Location /pagespeed_admin>
        Order allow,deny
        Allow from localhost
        Allow from 127.0.0.1
        Allow from xxx.xxx.x.x #自分のIPを記入し追加
        SetHandler pagespeed_admin
    </Location>
    <Location /pagespeed_global_admin>
        Order allow,deny
        Allow from localhost
        Allow from 127.0.0.1
        Allow from xxx.xxx.x.x #自分のIPを記入し追加
        SetHandler pagespeed_global_admin
    </Location>

なぜか500エラーになってアクセスできませんでした
※403エラー(ip制限)ではないです。

Apacheの再起動

[root@○○ ~]# systemctl restart httpd

機能の設定は.htaccessでできます

機能の有効化と無効化

ModPagespeedEnableFilters 機能名(フィルタ) #有効化
ModPagespeedDisableFilters 機能名(フィルタ) #無効化

例:

ModPagespeedEnableFilters rewrite_images
ModPagespeedDisableFilters lazyload_images

複数使う場合

ModPagespeedEnableFilters lazyload_images,insert_dns_prefetch
ModPagespeedDisableFilters rewrite_images

「,」が間に入ります
スペースなどを入れてしまうとエラーになってしまいます

mod_pagespeedを無効化

ModPagespeed Off

簡易的に無効化する方法

上記の無効化方法の場合

.htaccessを変更したりしないといけないので
だいぶ危険です

そこでファイルをいじらずに無効化する方法を
ご紹介します

とても簡単URLに

?ModPagespeed=off

を付けるだけです

※?PageSpeed=offでもできます

例:

https://comivel.net
↓
https://comivel.net?ModPagespeed=off
または
https://comivel.net?PageSpeed=off

機能名(フィルタ)一覧は↓のサイトから

mod_pagespeedカスタマイズで高速化を詳細解説・Google謹製

blog.s-giken.net

導入、設定が終わったので
早速、速度を見ていきたいと思います

まずはPageSpeed Insightsです

やばくないですか?

導入前:50

導入後:85 (+35)

スマホ

導入前:37

導入後:57 (+20)

導入してデフォルトに近い状態でこれです

続いてはGTmetrixです

まずは導入前の結果です

続いて導入後の結果です

どうですか

この凄さ

エックスサーバーの方やVPSの方など不具合がおきないようでしたら
絶対やるべきです

そしてエックスサーバーだとできるかわかりませんが
(項目があるかもしれませんが)

キャッシュの削除は

[root@○○ ~]# touch /var/cache/mod_pagespeed/cache.flush

でできます

また日にちが変わりました

そしてここでなんと…

サーバーが終わりました

ちーん

まぁ今は復旧後に書いているわけですが

おかげでmod_pagespeedもAPCuなどもリセットされてしまいました

その結果がこちら

とぅとぅとぅとぅとぅとぅとぅとぅー

ブログ見てくれてありがとう

シェア、作品投稿よろしく!!

せーの

アデュー

…

Fischer’s-フィッシャーズさんごめんなさい

YouTube

www.youtube.com

さぁ茶番は終わりにして

すべてやり直しです

とぅとぅとぅとぅとぅとぅとぅとぅー

おい (｀´）/ ビシっ

痛てー

すみません

なのですべてやり直しになりましたがこんな感じじゃないですかね

他に面白そうなのがあれば

また更新します

追記

MariaDBのチューニングと翻訳ファイルのキャッシュを書き忘れていました

MariaDBのチューニングはMySQLTunerを使って行いました

まずはMySQLTunerのインストールです

[root@○○ ~]# yum install mysqltuner

そして実行

[root@○○ ~]# mysqltuner --buffers

実行をするとめちゃくちゃ書き込まれます

各項目の左にあるマークが重要です

[–]はお知らせ的なものでしょう
(○○が有効化です的なことが書いてあるので…)

[OK]はできてるよと言うことでしょう

[!!]これはできていないので修正をしていきます

[root@○○ ~]# vi /etc/my.cnf

my.cnfの[mysqld]の下に追加していきました

各項目で検索すると情報は出てくるので確認してみてください

今回参考にさせていただいたのは以下のサイトです

MySQLのメモリ設定の勘所 | sawara.me

MySQLサーバーをダウンさせた夜は数知れず。その度にmy.cnfの設定を見なおしてみてはトライし、治ったと思いきや突然のダウン。サーバーがダウンしてしまう原因は何かと聞かれれば、「メモリです」と断言しましょう。メ… Continue reading →

sawara.me

これでチューニングは完了です

そして再起動をします

[root@○○ ~]# systemctl restart mariadb

アクセスしてみたところ体感ではかなり速くなっていました

WordPressなどを使われているのであれば重要な項目ですね

続いて翻訳ファイルのキャッシュです

翻訳ファイルのキャッシュはプラグインでできます

簡単に流れを説明すると

管理画面>プラグイン新規追加>001 Prime Strategy Translate Acceleratorと検索>
001 Prime Strategy Translate Acceleratorをインストールし有効化>設定をする>完了

では詳しく解説をしていきます

まずはプラグインページに移動してください

右上の検索バーに「001 Prime Strategy Translate Accelerator」と入れて検索してください

そしてプラグインをインストールを押してください

インストール後有効化してください

すると設定にTranslate Acceleratorが追加されているので移動してください

キャッシュを有効にするにチェックをいれて設定を保存してください

これで完了です

翻訳を停止するには
「サイトに表示される翻訳された文章」
「ログイン/サインアップ画面の翻訳」
「管理画面の翻訳」
のドロップダウンメニューで翻訳を停止を選択すれば停止できます

追記終わり

さらに追記

やばいぞ追記が増えていく…

存在しない静的ファイルにアクセスされた場合、WordPressを起動させないようにする

以下の記事を参考にさせていただきました!!

WordPressサイト用の.htaccess例 | dogmap.jp

dogmap.jp

WordPressを軽量化（高速化）するために行う3つの方策

最近は、そこかしこでCMSと言えばワードプレス（WordPress）と行った感じですが、ワードプレス（Word…

chihochu.jp

こちらも.htaccessを編集します

以下がデフォルトのWordPress設定です

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

上記に

RewriteCond %{REQUEST_FILENAME} !\.(html?|xml|txt|xsl|js|css|jpe?g|png|gif|ico)$

を付け加えます

付け加えると以下のようになります

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !\.(html?|xml|txt|xsl|js|css|jpe?g|png|gif|ico)$
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

追加した場所は6行目です

これで存在しない静的ファイルにアクセスされた場合、WordPressを起動しなくなります

すこしは変わればいいなぁ～

注意点ですがサイトのパーマリンクに.htmlをつけている方は
html?を削除してください
Google XML Sitemapsなどを利用されている方はxmlを消してください
404エラーになります

上記のことから以下のように設定をしました

RewriteCond %{REQUEST_FILENAME} !\.(html?|xsl|js|css|jpe?g|png|gif|ico)$

動作確認はURLに適当な文字と.pngと入れてみてください

デフォルト状態で使われている方であればApacheの404エラーページが表示されます

では

追記終わり

とぅとぅとぅとぅとぅとぅとぅとぅー

ブログ見てくれてありがとう!!

シェア、コメント、作品投稿よろしく!!
(一個増えた笑)

皆さん一緒にせーの

アデュー

執筆後に思ったこと

ぱくるなし

というわけでまた次回です!!

追記

サムネイル結構良くないですか? ↓

自画自賛 w

あと、とぅで合っていましたか?
コメで教えてくださーい w

追記2017年5月11日

HTMLの変換をミスっていました。。。

一部消えていた項目がありました。。。

気づいた部分の修正を行いました。