皆さん
こんにちは。こんばんは。
comivel運営のみきです。
やっとcomivelリリースです…
と言いたいところですが執筆時はアクセスは出来ますが
中身はみれないようになっています
皆さんにこの記事を見ていただけているということはリリースされたんですね 笑
では本題のcomivelを高速化していきたいと思います!!
現在のスピードを測定
では早速高速化する前のスピードや評価?を測ってみたいと思います
まずはPageSpeed Insightsからです
結果は…
PC
スマホ
結果
PC:43点
スマホ:32点
…….
ちーん
あ、あのですね、、、な、なにも、対策をしていないので….
ちーん
次です
はぁー
次はGTmetrixです
さて結果は…
…
ちーん
さようなら
END
ただいまー
さぁ今からが本番だ!!
高速化していくぞ!!
回線の問題で海外からのアクセスだとだいぶ遅くなるようです
高速化のためにやること
今回は各ツールで言われたことをメインにやっていきます
まずはこちら
- 画像を最適化する
画像の最適化はWordPressプラグインのEWWW Image Optimizerを使ってみます
ずっと入れていたので設定は終わっています
というのも最初は普通に使っていたのですが
表示時間がどれだけ変わるかなと思って途中から止めていたんです
久しぶりに使います
なので一括最適化をします
EWWW Image Optimizerの設定方法はバズ部さんの記事を見てみてください
設定が終わったら管理画面>メディア>一括最適化を選択してください
するとスクリーンショットのようなページがでてくるので
最適化されていない画像をスキャンするを押してください
スキャンが終わると最適化を開始というボタンがでてくるので押してください
せーの
ぽちっ
さぁこれでどのように変わるのか…
楽しみです!!
さぁ画像の最適化が終わりました
スピードは変わっているのか…
結果は…
ちーん
次です次次、、、、
コンテンツによってはだいぶ違うかもしれません
確実に言えることは容量の節約になります
- ブラウザのキャッシュを活用する
- 圧縮を有効にする
次は上の二つをまとめてやってみます
まずはブラウザのキャッシュの設定です
この設定は.htaccessを使って行います
.htaccessとはなんぞや?という方
「htaccess」(エイチティアクセス)とは、現在多くのWEBサーバーで使用されている「Apache」(アパッチ)を制御する設定ファイルの1つで、実際のファイル名は「.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さんの記事を参考にさせていただきました
記事を参考にしつつインストールが終わったのですが
APCuが動いていませんでした
そこで調べてみると
WordPressで使うにはプラグインが必要みたいです
利用できるようにするためのコマンド (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
多分。
すると管理画面のプラグイン一覧ページにこんな感じで追加されています
続いてパフォーマンスを確認するツールを入れて設定をします
[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を導入してみます
エックスサーバーのマニュアルが分かりやすかったのでお借りします
本機能を有効にすることで以下のような最適化処理が実施されます。
- CSSファイル、JavaScriptファイルなどの圧縮
- 最適な画像タイプへの変換、軽量化
- 同種のファイル(画像、CSS、JavaScriptファイルなど)を一つにまとめ、サーバーとクライアント間の無駄な通信(リクエスト)を削減
- CSSファイル、JavaScriptファイル、画像ファイルのキャッシュ有効期間の延長
- 小さなファイルサイズのCSSやJavaScriptをHTML内に埋め込む
出典:
https://www.xserver.ne.jp/manual/man_server_mod_pagespeed.php
以上のようなことが出来ます
mod_pagespeedで出来ることの一覧
それでは導入に進みたいと思います
今回参考にさせていただいたサイトはこちらです
そしてバージョンは安定版(Latest Stable Version)を使いたいと思います
インストールされる際は最新のバージョンをご確認ください
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>
※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
機能名(フィルタ)一覧は↓のサイトから
導入、設定が終わったので
早速、速度を見ていきたいと思います
まずはPageSpeed Insightsです
やばくないですか?
PC
導入前:50
導入後:85 (+35)
スマホ
導入前:37
導入後:57 (+20)
導入してデフォルトに近い状態でこれです
続いてはGTmetrixです
まずは導入前の結果です
続いて導入後の結果です
どうですか
この凄さ
エックスサーバーの方やVPSの方など不具合がおきないようでしたら
絶対やるべきです
そしてエックスサーバーだとできるかわかりませんが
(項目があるかもしれませんが)
キャッシュの削除は
[root@○○ ~]# touch /var/cache/mod_pagespeed/cache.flush
でできます
また日にちが変わりました
そしてここでなんと…
サーバーが終わりました
ちーん
まぁ今は復旧後に書いているわけですが
おかげでmod_pagespeedもAPCuなどもリセットされてしまいました
その結果がこちら
とぅとぅとぅとぅとぅとぅとぅとぅー
ブログ見てくれてありがとう
シェア、作品投稿よろしく!!
せーの
アデュー
…
Fischer’s-フィッシャーズさんごめんなさい
さぁ茶番は終わりにして
すべてやり直しです
とぅとぅとぅとぅとぅとぅとぅとぅー
おい (`´)/ ビシっ
痛てー
すみません
なのですべてやり直しになりましたがこんな感じじゃないですかね
他に面白そうなのがあれば
また更新します
追記
MariaDBのチューニングと翻訳ファイルのキャッシュを書き忘れていました
MariaDBのチューニングはMySQLTunerを使って行いました
まずはMySQLTunerのインストールです
[root@○○ ~]# yum install mysqltuner
そして実行
[root@○○ ~]# mysqltuner --buffers
実行をするとめちゃくちゃ書き込まれます
各項目の左にあるマークが重要です
[–]はお知らせ的なものでしょう(○○が有効化です的なことが書いてあるので…) [OK]はできてるよと言うことでしょう [!!]これはできていないので修正をしていきます
[root@○○ ~]# vi /etc/my.cnf
my.cnfの[mysqld]の下に追加していきました
各項目で検索すると情報は出てくるので確認してみてください
今回参考にさせていただいたのは以下のサイトです
これでチューニングは完了です
そして再起動をします
[root@○○ ~]# systemctl restart mariadb
アクセスしてみたところ体感ではかなり速くなっていました
WordPressなどを使われているのであれば重要な項目ですね
続いて翻訳ファイルのキャッシュです
翻訳ファイルのキャッシュはプラグインでできます
簡単に流れを説明すると
管理画面>プラグイン新規追加>001 Prime Strategy Translate Acceleratorと検索>
001 Prime Strategy Translate Acceleratorをインストールし有効化>設定をする>完了
では詳しく解説をしていきます
まずはプラグインページに移動してください
右上の検索バーに「001 Prime Strategy Translate Accelerator」と入れて検索してください
そしてプラグインをインストールを押してください
インストール後有効化してください
すると設定にTranslate Acceleratorが追加されているので移動してください
キャッシュを有効にするにチェックをいれて設定を保存してください
これで完了です
翻訳を停止するには
「サイトに表示される翻訳された文章」
「ログイン/サインアップ画面の翻訳」
「管理画面の翻訳」
のドロップダウンメニューで翻訳を停止を選択すれば停止できます
追記終わり
さらに追記
やばいぞ追記が増えていく…
存在しない静的ファイルにアクセスされた場合、WordPressを起動させないようにする
以下の記事を参考にさせていただきました!!
こちらも.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?を削除してください
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の変換をミスっていました。。。
一部消えていた項目がありました。。。
気づいた部分の修正を行いました。