ロリポップで運用中のWordpressサイトを高速化をしよう!!
なにかと性能を問題にされるケースのあるロリポップ(Lolipop)のレンタルサーバーですが、価格、利便性、稼働率において、他社と同等かそれ以上の魅力のあるレンタルサーバーであるからこそ、話題に上るのだと思います。今では、大手では当たり前となっているようですが、paperboy時代からお客様に見えない部分でサーバーの多重化や回線の多重化などしっかりとした運用をしている老舗なので、私はたまにお試しで浮気はしますが、ほぼロリポップ一本で運用しています。
安心してデータを預けられるレンタルサーバー。
月額100円(税抜)~容量最大400GBでWordPress簡単インストールなど
多彩な機能がついて、バックアップ機能も完備!
WordPressのホームページに高速化施策の結果。いきなり結果から
高速化したのは、このホームページです。pure.css導入のテーマで作っていますが、ちっとも高速ではない(実際CSSフレームワークは全体のうちの極僅かなので、高機能のCSSフレームワークを高速なCDNを利用して使用した方が全体的には高速になるかもしれません。)ので、自家製テーマなので、テーマ自身の高速化を含め対策した結果です。
まずは、GTmetrixの結果から
そして、Googleのモバイルサイトの性能測定 testmysite では、
さすがにサーバが混むと5秒位になることはありますが、アフィリエイト広告(PCページよりは1枚減らしてますが^-^;)とFacebookページありでこれは優秀だと自己満足しています。
どうです、これなら満足できる性能ではないでしょうか。
WordPressのホームページの高速化のための施策
テーマ自体の高速化は、使用するテーマにより変わってくるのでここでは詳細は省略します。(高速なCDNが存在するフレームワークやアイコンなどは、CDNから読む、使用していないheader情報は削除するなど)
お使いのテーマによっては、ここでの施策を自前で内蔵していたり、優れたソース(wordpressはダイナミックにhtml/cssを生成しますので、phpの書き方一つで随分とレスポンスが変わります。)など様々な工夫で高速化されたものも存在します。私がお客様サイトの作成のペースで使用することの多いで、「BizVektor」などもその1つです。(よく使うもう1つ「Lightning」も比較的高速ですが、標準テーマの範囲で作成されている為か、ここでの高速化施策で、改善できます。)
まず最初にすべきは、
今のホームページの分析ですが、Googleの「PageSpeed Insights」でチェックして、ファイルを置き換えましょう。
テスト結果で、「このページ向けに最適化された画像、JavaScript、CSS リソースをダウンロードできます。」と最適化されたデータを作成、ダウンロードすることができます。変更できるものは差し替えましょう。但し、2点注意が必要です。
- 共通の画像をモバイルもPCも使用している場合、圧縮画像のサイズを確認しましょう。PCではぴったりでもモバイルでは解像度が不足などの場合があります。
- ダイナミックにstyle.cssを生成するテーマの場合は、単純な差替えは有効でありません。場合によっては不具合の要因になるかもしれません。
- 画像読み込みにCDNを使う予定がある場合は、綺麗に見せたい画像は圧縮画像への置き換えは控えた方が良いと思います。CDN側でも圧縮しているのか画像の品質が低下する場合があるようです。
以下の様な項目で、対策状況と改善策を提案してくれますが、注意してダウンロードしたデータと差し替えると、「3.画像を最適化する」は改善されます。「4.CSSを縮小する、6.JavaScriptを縮小する」も若干改善します。差替えはFileZillaなどでftpで行います。
- スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
- ブラウザのキャッシュを活用する
- 画像を最適化する
- CSS を縮小する
- HTML を縮小する
- JavaScript を縮小する
- サーバーの応答時間を短縮する
- リンク先ページのリダイレクトを使用しない
- 圧縮を有効にする
- 表示可能コンテンツの優先順位を決定する
プラグイン「WP Fastest Cache」「Fast Velocity Minify」により高速化しましょう。
高速化のプラグインは沢山ありますが、多機能すぎたり依存性が強かったりとしますので、できるだけ単純軽量で稼働実績も多いものを選びました。
これらを適切に設定することで、「PageSpeed Insights」の指摘の1項、2項、4項、5項、6項、9項が改善されます。
2項、9項は、「.htaccses」を手修正することでも対応可能ですが、静的な設定ですのでプラグインを使用しても負荷とはならないので、間違いの少ないプラグインで設定しちゃいましょう!設定は簡単!「WP Fastest Cache」をインストール・有効にして、以下のようにチェックを入れます。
このままでもいいですが、念のため、キャッシュのフラッシュの設定をしておきます。
次に、「Fast Velocity Minify」をインストール・有効にします。この状態で無条件HTML/CSS/JavaScriptの縮小・結合をしてくれますが、テーマの作りや使用しているプラグインによっては不具合が発生するかもしれません。(出来れば、ローカルに公開サーバー同等環境を用意して確認しておくのが良いと思います。)
「WP Fastest Cache」でもHTML/CSS/JavaScriptの縮小・結合は出来ますが、無料版では、元のソースを残していたり、不十分ですので、この部分は「WP Fastest Cache」と連携して動作する「Fast Velocity Minify」に任してしまいます。(WP Fastest CacheはFast Velocity Minifyを無効にするように警告しますが、Fast Velocity Minify側は問題ないとしている)※
※警告が出た場合、設定がセーブされませんので、「Fast Velocity Minify」無効の状態で、「WP Fastest Cache」を設定します。その後「Fast Velocity Minify」を有効にして、キャッシュのフラッシュも「Fast Velocity Minify」側でするようにすれば、問題はないようです。
これまでに記述したツールで評価結果をよくしたり、不具合を改善するためには、3カ所チェックします。
あと、うまく動作しないテーマの場合は、「JS and CSS Exceptions」のIgnore Listに記載しましょう。例えば、
/wp-content/themes/%テーマ名%/style.css
こんな感じで記載します。「BizVektor」の場合だと、私の事例では、以下のようにすると不具合なく動作するようですが、殆ど高速化は見られないので、使用しない方が良いかもしれません。(お客様のサイトなので使用を止めました)
/wp-content/themes/biz-vektor/design_skins/001/001.css
最後にFixしているホームページなら無料の画像CDNを導入しましょう
画像限定のCDNの導入は簡単で、画像はサイトデータの多くを占めますので、高速化に大きく貢献しますが、注意が必要です。意識的にデータの削除は出来ませんし、URLさえわかればだれでもアクセスできますので、個人情報にかかわる写真や頻繁に差し替える画像を扱う場合は、使用を控えましょう。対象外設定も可能ですので、部分的に採用することも可能です。
「WP Fastest Cache」で「CDN by Photon」を設定します。CDN Url:はランダムは避けてどれか選びましょう。設定後暫くするとCDN経由で画像アクセスするようになります。
ファイルアクセスの状況を分析すると
「Pingdom Website Speed Test」のFile requestsを見ると、レンタルサーバーのDNS/SSL/Wait(Wordpressのジェネレーション時間?)で100ms~1秒まで変動します。この部分がレンタルサーバーの性能によって大きく変わる部分と思います。現状、通常500ms程度で、100ms以下の場合もあり、理想的な高速なサーバーであれば、0.4S程度反応が早くなるかもしれません。
今後の課題
実は、「pagespeed」での測定結果が微妙なんです。PCでは90/100なんですが、モバイルが71/100と微妙な結果となります。モバイルのスコアをせめて80台にしたいと思っていますが、提案してくれる改善策は、限界でどうしたものか....サイト全体のCDN化は避けたいので、考え中....
その後
コメントに書いたようにCSSフレームワークとstyle.cssをインライン化、「WP Fastest Cache」と「Fast Velocity Minify」を正しい手順で設定(上記※)、画像CDNは使用したままで、「pagespeed」の完全なレポートでのスコアが、モバイル/パソコンともに98/100となり、一応の満足な結果となり、今後の高速化への施策も見えてきましたので、今回の追求はここまでとします。(facebookとgoogle Analyticsを無効とすれば、100/100)
覚書・補足
SNS系のプラグインは、意外に重いので、できればテーマ内で処理したほうが良さそう(今後の課題:今後の弊社テーマ「pureframe」の残項目に追加)。今回は、「Seed Social」で対応、このプラグインは’the_excerpt’を書き込んでいるようなので、’get_the_excerpt()’の使用には注意が必要。
‘Crayon Syntax Highlighter’などテキストをスキャン、ハイライトしてくれるようなプラグインは大変見やすく利便性は高いのですが重いので、必要なページのみ有効とする等工夫が必要かもしれない。このプラグインに関わらず、’Contact Form 7’など使用しているページ以外に不要なものも同様に